Basic task and history view

frontend/index.css

@@ -19,7 +19,7 @@
 }
 
 #menu {
-    height: fit-content;
+    height: auto;
     width: 100%;
     padding: 5%;
 }

frontend/index.html

@@ -26,8 +26,8 @@
     </div>
     <div id="mainPage" style="display: none;">
       <div id="content">
-        <div id="tasks" class="screen" style="">Tasks</div>
-        <div id="history" class="screen" style="display: none;">History</div>
+        <div id="tasks" class="screen flex two demo" style=""></div>
+        <div id="history" class="screen" style="display: none;"></div>
         <div id="addTask" class="screen" style="display: none;">Add Task</div>
       </div>
       <div id="menu" class="flex three demo">

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) {