Complete task javascript

frontend/index.css

@@ -16,6 +16,7 @@
     height: 85%;
     width: 100%;
     padding: 5%;
+    overflow: auto;
 }
 
 #menu {

frontend/index.html

@@ -40,7 +40,8 @@
           <span class="button" onclick="switchScreen('history')">History</span>
         </div>
         <div class="third" id="addButton">
-          <span class="button" onclick="switchScreen('add')" >+ Task</span>
+<!--          <span class="button tooltip-top" onclick="switchScreen('add')" 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

@@ -30,6 +30,7 @@ async function login() {
 
     // store user data in session storage
     let data = await response.json();
+    sessionStorage.setItem("uid", data.uid);
     sessionStorage.setItem("name", data.name);
     sessionStorage.setItem("role", data.role);
 
@@ -47,24 +48,26 @@ async function login() {
 async function populateScreen() {
     // get task data
     let taskPage = document.getElementById("tasks");
+    taskPage.innerHTML = "";
     let response = await fetch("/getTasks");
     let tasksRaw = await response.json();
     let tasks = tasksRaw.tasks;
 
     // get historical data
     let historyPage = document.getElementById("history");
+    historyPage.innerHTML = "";
     response = await fetch("/getHistory");
     let historyRaw = await response.json();
     let history = historyRaw.history;
+
+
     for (let i = 0; i < tasks.length; i++) {
         taskPage.innerHTML += `
-        <div class="half">
-            <article class="card">
-                <header>
-                    <p>${tasks[i].name}</p>
-                    <p>${tasks[i].points}</p>
-                </header>
-            </article>
+        <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>`
     }
     for (let i = (history.length -1); i >= 0; i-=1) {
@@ -82,7 +85,26 @@ async function populateScreen() {
     }
 }
 
-function switchScreen(button) {
+async function completeTask(taskID) {
+    let points = document.getElementById(`${taskID}-p`).innerText;
+    let time = new Date().toISOString().split(".")[0];
+    let uid = sessionStorage.getItem("uid");
+    let response = await fetch("/completeTask", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+            uid: Number(uid),
+            tid: Number(taskID),
+            time: time,
+            pointsGained: Number(points)
+        })
+    });
+}
+
+async function switchScreen(button) {
+    await populateScreen();
     document.getElementById("tasks").setAttribute("style", "display: none;");
     document.getElementById("history").setAttribute("style", "display: none;");
     document.getElementById("addTask").setAttribute("style", "display: none;");