Added 'add task' functionality

frontend/index.css

@@ -60,4 +60,8 @@ pre {
     padding: 0;
     background: white;
     border-radius: 0;
+}
+
+#taskCard {
+    margin-top: 45%;
 }

frontend/index.html

@@ -40,7 +40,18 @@
           </div>
           <div id="historyContent"></div>
         </div>
-        <div id="addTask" class="screen" style="display: none;">Add Task</div>
+        <div id="addTask" class="screen" style="display: none;">
+          <article class="card" id="taskCard">
+            <header>
+              <h1>New task</h1> <br>
+              <label for="newTaskName">Task name</label>
+              <input type="text" id="newTaskName"> <br>
+              <label for="newTaskPoints">Task points</label>
+              <input type="number" id="newTaskPoints" min="1" max="5"> <br>
+              <input onclick="newTask()" value="Create" type="submit"> <br>
+            </header>
+          </article>
+        </div>
       </div>
       <div id="menu" class="flex three demo">
         <div class="third" id="taskButton">
@@ -50,8 +61,8 @@
           <span class="button" onclick="switchScreen('history')">History</span>
         </div>
         <div class="third" id="addButton">
-<!--          <span class="button tooltip-top" onclick="switchScreen('add')" disabled data-tooltip="In construction">+ Task</span>-->
+          <span class="button tooltip-top" onclick="switchScreen('add')" >+ Task</span>
-          <span class="button tooltip-top" disabled data-tooltip="In construction">+ Task</span>
+<!--          <span class="button tooltip-top" disabled data-tooltip="In construction">+ Task</span>-->
         </div>
       </div>
     </div>

frontend/index.js

@@ -70,40 +70,54 @@ async function populateScreen() {
     // if it is a user make the tasks add points
     // or if admin make it do nothing
     if (sessionStorage.getItem("role") === "user") {
-        for (let i = 0; i < tasks.length; i++) {
+        try {
-            taskPage.innerHTML += `
+            for (let i = 0; i < tasks.length; i++) {
+                taskPage.innerHTML += `
             <div id="${tasks[i].tid}" class="half" style="height: fit-content">
                 <div class="button" onclick="completeTask(${tasks[i].tid})">
                     <p id="taskName">${tasks[i].name}</p>
                     <p id="${tasks[i].tid}-p">${tasks[i].points} points</p>
                 </div>
             </div>`
+            }
+        } catch (e) {
+            taskPage.innerHTML +=`<sub>such empty</sub>`
         }
     } else if (sessionStorage.getItem("role") === "admin") {
-        for (let i = 0; i < tasks.length; i++) {
+        try {
-            taskPage.innerHTML += `
+            for (let i = 0; i < tasks.length; i++) {
+                taskPage.innerHTML += `
             <div id="${tasks[i].tid}" class="half" style="height: fit-content">
                 <div class="button" disabled data-tooltip="Admins can't get points">
                     <p id="taskName">${tasks[i].name}</p>
                     <p id="${tasks[i].tid}-p">${tasks[i].points} points</p>
                 </div>
             </div>`
+            }
+        } catch (e) {
+            taskPage.innerHTML +=`<sub>such empty</sub>`
         }
     }
 
-    for (let i = (history.length -1); i >= 0; i-=1) {
+    try {
+        for (let i = (history.length -1); i >= 0; i-=1) {
+            historyPage.innerHTML += `
+            <div class="full">
+                <article class="card">
+                    <header>
+                        <p>User: ${history[i].user}</p>
+                        <p>Task: ${history[i].task}</p>
+                        <p>Time: ${history[i].time}</p>
+                        <p>Points gained: ${history[i].pointsGained}</p>
+                    </header>   
+                </article>
+            </div>`
+        }
+    } catch (e) {
         historyPage.innerHTML += `
-        <div class="full">
+        <sub>Such empty</sub>`
-            <article class="card">
-                <header>
-                    <p>User: ${history[i].user}</p>
-                    <p>Task: ${history[i].task}</p>
-                    <p>Time: ${history[i].time}</p>
-                    <p>Points gained: ${history[i].pointsGained}</p>
-                </header>   
-            </article>
-        </div>`
     }
+
     for (let i = 0; i < stats.length; i++) {
         // put user points in box
         statsPage.innerText += `${stats[i].name}: ${stats[i].points} \n`
@@ -141,4 +155,20 @@ async function switchScreen(button) {
     } else if (button === "add") {
         document.getElementById("addTask").setAttribute("style", "");
     }
+}
+
+async function newTask() {
+    let points = document.getElementById(`newTaskPoints`).value;
+    let name = document.getElementById(`newTaskName`).value;
+    await fetch("/addTask", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+            tid: 0,
+            name: name,
+            points: Number(points),
+        })
+    });
 }