Basic task and history view

frontend/index.js

@@ -40,6 +40,46 @@ async function login() {
         document.getElementById("historyButton").classList.value = "half";
         document.getElementById("menu").classList.value = "flex two";
     }
+
+    await populateScreen();
+}
+
+async function populateScreen() {
+    // get task data
+    let taskPage = document.getElementById("tasks");
+    let response = await fetch("/getTasks");
+    let tasksRaw = await response.json();
+    let tasks = tasksRaw.tasks;
+
+    // get historical data
+    let historyPage = document.getElementById("history");
+    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>`
+    }
+    for (let i = history.length; i > 0; i-=1) {
+        historyPage.innerHTML += `
+        <div class="full">
+            <article class="card">
+                <header>
+                    <p>User: ${history[i].uid}</p>
+                    <p>Task: ${history[i].tid}</p>
+                    <p>Time: ${history[i].time}</p>
+                    <p>Points gained: ${history[i].pointsGained}</p>
+                </header>   
+            </article>
+        </div>`
+    }
 }
 
 function switchScreen(button) {