lee
/
leemorgan-dev


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
							<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Lee Morgan -create lecture-</title>
        <style>
            form{
                display: flex;
                flex-direction: column;
            }

            form > *{
                margin: 10px 0;
            }

            input[type=submit]{
                max-width: 250px;
            }

            button{
                max-width: 250px;
            }

            #exercises{
                display: flex;
                flex-direction: column;
            }

            #exercises > *{
                margin: 10px 0;
            }

            #exercises input{
                margin-left: 5px;
            }
        </style>
    </head>
    <body>
        <h1>Create New Lecture</h1>

        <form
            id="form"
            action="/learn/lecture/new"
            method="post"
            encType="multipart/form-data"
        >
            <label>Uploader ID
                <input name="uploader" type="text" required>
            </label>

            <label>Uploader Password
                <input name="password" type="password" required>
            </label>

            <label>Course
                <select id="course" name="course" required></select>
            </label>

            <label>Title
                <input name="title" type="text" required>
            </label>

            <label>Video (Rumble link)
                <input name="video" type="text" required>
            </label>

            <label>Description
                <input name="description" type="text" required>
            </label>
            
            <label>Documents
                <input name="documents" type="file" multiple>
            </label>

            <h2>Exercises</h2>
            <button id="exerciseButton" type="button">Add Exercise</button>
            
            <div id="exercises">
                <label>Exercise 1<input type="text"></label>
            </div>

            <input id="hidden" name="exercises" type="hidden">

            <input type="submit" value="Submit">
        </form>

        <script>
            //Get Available Courses
            fetch("/learn/courses")
                .then(response => response.json())
                .then((response)=>{
                    let select = document.getElementById("course");

                    for(let i = 0; i < response.length; i++){
                        let option = document.createElement("option");
                        option.innerText = response[i].title;
                        option.value = response[i]._id;
                        select.appendChild(option);
                    }
                })
                .catch((err)=>{});

            //Add exercises
            let count = 1;
            let div = document.getElementById("exercises");

            document.getElementById("exerciseButton").onclick = ()=>{
                count++;
                let label = document.createElement("label");
                label.innerText = `Exercise ${count}`;
                div.appendChild(label);

                let input = document.createElement("input");
                input.type = "text";
                label.appendChild(input);
            }

            //Submit
            let form = document.getElementById("form");
            form.onsubmit = ()=>{
                event.preventDefault();
                let exercises = "";
                for(let i = 0; i < div.children.length; i++){
                    exercises += `${div.children[i].children[0].value}~`;
                }

                document.getElementById("hidden").value = exercises;

                form.submit();
            }
        </script>
    </body>
</html>