From 9b4eb8f7aa3ca433a17b0e7d189389fc57b10b16 Mon Sep 17 00:00:00 2001
From: Florian Hoss <mail@florianhoss.de>
Date: Wed, 6 Apr 2022 14:12:15 +0200
Subject: [PATCH] fix login and show tasks

---
 Lab01/app/templates/_base.tmpl | 14 ++++++++------
 Lab01/app/templates/tasks.tmpl | 22 +++++++++++++++++-----
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/Lab01/app/templates/_base.tmpl b/Lab01/app/templates/_base.tmpl
index 178f715..9a70cf8 100644
--- a/Lab01/app/templates/_base.tmpl
+++ b/Lab01/app/templates/_base.tmpl
@@ -95,8 +95,11 @@
     <script>
         const button_logout = document.getElementById("button-logout");
         const username = getCookie("username");
-        const myHeaders = new Headers();
-        myHeaders.append('username', username);
+        const axiosConfig = {
+            headers: {
+                username: username,
+            }
+        };
 
         const errorToastEl = document.getElementById('errorToast');
         const errorToastContent = document.getElementById('errorToastContent');
@@ -142,14 +145,13 @@
         }
 
         async function userLoggedIn() {
-            const response = await fetch("/auth/user", {method: 'GET', headers: myHeaders});
-            const json = await response.json();
-            if (json.logged_in === true) {
+            const response = await axios.get("/auth/user", axiosConfig);
+            if (response.data.logged_in === true) {
                 document.getElementById("button-login").hidden = true;
                 button_logout.hidden = false;
                 document.getElementById("button-tasks").hidden = false;
             }
-            return json.logged_in
+            return response.data.logged_in
         }
 
         async function logout() {
diff --git a/Lab01/app/templates/tasks.tmpl b/Lab01/app/templates/tasks.tmpl
index c500c92..2baf313 100644
--- a/Lab01/app/templates/tasks.tmpl
+++ b/Lab01/app/templates/tasks.tmpl
@@ -11,18 +11,30 @@
 <div class="position-absolute top-50 start-50 translate-middle">
     <div class="fs-3">{{ .title }}</div>
     <hr>
+    <div id="tasks"></div>
 </div>
 
 {{template "scripts" .}}
 <script>
     userLoggedIn().then((loggedIn) => !loggedIn ? redirect("/view/login") : getAllTasks());
+    const tasksEl = document.getElementById("tasks");
 
-    async function getAllTasks() {
-        const response = await fetch("/tasks", {method: 'GET', headers: myHeaders});
-        const json = await response.json();
-        console.log(json);
+    function getAllTasks() {
+        axios.get("/tasks", axiosConfig).then((response) => {
+            const tasks = response.data.tasks;
+            [...tasks]
+                .forEach((task) => {
+                    const newTask = document.createElement('div');
+                    newTask.classList.add('row', 'g-0', 'align-items-center', 'mb-1');
+                    newTask.innerHTML = `
+                        <div class="col-2 overflow-ellipsis text-end pe-4">${task.ID}</div>
+                        <div class="col-6 overflow-ellipsis">${task.Description}</div>
+                        <div class="col-2 overflow-ellipsis text-end">${task.Done}</div>
+                    `;
+                    tasksEl.appendChild(newTask);
+                });
+        });
     }
-
 </script>
 </body>
 </html>