lee
/
leemorgan-dev


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
							<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Lee Morgan -lecture-</title>
        <link rel="icon" type="img/ico" href="/images/favicon">
        <link rel="stylesheet" href="/learn/style">
    </head>
    <body id="lectureBody">
        <h1 id="title"></h1>

        <h3 id="course"></h3>

        <h6 id="date"></h6>

        <iframe id="video"></iframe>

        <div id="lectureData">
            <h2 id="exerciseTitle">Exercises</h2>
            <ol id="exercises"></ol>

            <h2 id="readingTitle">Further Reading</h2>
            <ul id="readings"></ul>
            
            <h2 id="resourceTitle">Resources</h2>
            <div id="documents"></div>
        </div>

        <h1>Q&A</h1>
        <button id="questionButton">Ask a question</button>
        <div id="questionContainer">
            <template id="question">
                <div class="question">
                    <h2 class="questTitle"></h2>
                    <div class="questHead">
                        <p class="questName"></p>
                        <p>at</p>
                        <p class="questDate"></p>
                    </div>
                    <p class="questContent"></p>
                    <div class="answerContainer"></div>
                </div>
            </template>

            <template id="answer">
                <div class="answer">
                    <div class="answerHeader">
                        <p class="answerName"></p>
                        <p>at</p>
                        <p class="answerDate"></p>
                    </div>
                    <p class="answerContent"></p>
                </div>
            </template>
        </div>

        <form id="questionForm" style="display:none" method="post">
            <h1 id="questionHeader"></h1>

            <label>Your name
                <input id="questionName" type="text">
            </label>

            <label>Title
                <input id="questionTitle" type="text">
            </label>

            <label>Question
                <textarea id="questionContent" minlength="15" required></textarea>
            </label>

            <button id="questionAsk" type="button">Ask</button>

            <button id="questionCancel" type="button">Cancel</button>
        </form>
            
        <script>
            let video = document.getElementById("video");

            let sizeIframe = ()=>{
                let width = window.innerWidth;
                let height = window.innerHeight;
                video.width = width * 0.75;
                video.height = height * 0.75;
            }

            video.onload = sizeIframe();
            let id = window.location.href.split("/");
            id = id[id.length-1];

            fetch(`/learn/lectures/json/one/${id}`)
                .then(response => response.json())
                .then((response)=>{
                    let date = new Date(response.createdDate);

                    document.getElementById("title").innerText = response.title;
                    document.getElementById("course").innerText = response.course.title;
                    document.getElementById("date").innerText = date.toDateString();
                    video.src = response.video;

                    let documents = document.getElementById("documents");
                    if(response.documents.length === 0) document.getElementById("resourceTitle").style.display = "none";
                    for(let i = 0; i < response.documents.length; i++){
                        let a = document.createElement("a");
                        a.classList.add("liPad");
                        a.href = response.documents[i].link;
                        a.innerText = response.documents[i].name.replaceAll("_", " ");
                        documents.appendChild(a);
                    }
                    
                    let exercises = document.getElementById("exercises");
                    if(response.exercises.length === 0) document.getElementById("exerciseTitle").style.display = "none";
                    for(let i = 0; i < response.exercises.length; i++){
                        let li = document.createElement("li");
                        li.classList.add("liPad");
                        li.innerText = response.exercises[i];
                        exercises.appendChild(li);
                    }

                    let readings = document.getElementById("readings");
                    if(response.furtherReading.length === 0) document.getElementById("readingTitle").style.display = "none";
                    for(let i = 0; i < response.furtherReading.length; i++){
                        let li = document.createElement("li");
                        li.classList.add("liPad");
                        readings.appendChild(li);

                        let a = document.createElement("a");
                        a.href = response.furtherReading[i].link;
                        a.innerText = response.furtherReading[i].text;
                        li.appendChild(a);
                    }

                    //Populate questions
                    let template = document.getElementById("question").content.children[0];
                    let answerTemplate = document.getElementById("answer").content.children[0];
                    let questionContainer = document.getElementById("questionContainer");
                    response.questions.reverse();
                    for(let i = 0; i < response.questions.length; i++){
                        let date = new Date(response.questions[i].createdAt);
                        date = date.toLocaleString("en-US");
                        
                        let question = template.cloneNode(true);
                        question.querySelector(".questTitle").innerText = response.questions[i].title;
                        question.querySelector(".questName").innerText = response.questions[i].name;
                        question.querySelector(".questDate").innerText = date;
                        question.querySelector(".questContent").innerText = response.questions[i].content;
                        questionContainer.appendChild(question);

                        //Populate answers
                        response.questions[i].answers.reverse();
                        for(let j = 0; j < response.questions[i].answers.length; j++){
                            let answer = response.questions[i].answers[j];
                            let answerDate = new Date(answer.createdAt);
                            answerDate = answerDate.toLocaleString("en-US");

                            let elem = answerTemplate.cloneNode(true);
                            elem.querySelector(".answerName").innerText = answer.name;
                            elem.querySelector(".answerDate").innerText = answerDate;
                            elem.querySelector(".answerContent").innerText = answer.content;
                            question.querySelector(".answerContainer").appendChild(elem);
                        }
                    }
                })
                .catch((err)=>{});

                //New Question
                let form = document.getElementById("questionForm");
                let formTitle = document.getElementById("questionHeader");
                let lecture = window.location.href.split("/");
                lecture = lecture[lecture.length-1];

                document.getElementById("questionCancel").onclick = ()=>{form.style.display = "none"};

                document.getElementById("questionButton").onclick = ()=>{
                    form.style.display = "flex";
                    form.route = "/learn/questions/create";
                    formTitle.innerText = "Ask a Question";
                };

                document.getElementById("questionAsk").onclick = ()=>{
                    event.preventDefault();
                    form.style.display = "none";

                    let data = {
                        lecture: lecture,
                        name: document.getElementById("questionName").value,
                        title: document.getElementById("questionTitle").value,
                        content: document.getElementById("questionContent").value
                    };
                    
                    fetch(form.route, {
                        method: "post",
                        headers: {
                            "Content-Type": "application/json"
                        },
                        body: JSON.stringify(data)
                    })
                        .then(response => response.json())
                        .then((response)=>{
                            if(typeof(response) !== "string"){
                                let template = document.getElementById("question").content.children[0];
                                let questionContainer = document.getElementById("questionContainer");
                                let date = new Date(response.createdAt);
                                date = date.toLocaleString("en-US");

                                let question = template.cloneNode(true);
                                question.querySelector(".questTitle").innerText = response.title;
                                question.querySelector(".questName").innerText = response.name;
                                question.querySelector(".questDate").innerText = date;
                                question.querySelector(".questContent").innerText = response.content;
                                questionContainer.insertBefore(question, questionContainer.firstChild);
                            }
                        })
                        .catch((err)=>{});
                }
        </script>
    </body>
</html>