Added quickLog™

Add task blanks input fields, actually
Add task blanks input fields
2023-07-29 20:41:17 +01:00 · 2023-07-29 19:34:12 +01:00 · 2023-07-29 19:28:16 +01:00 · 2023-07-29 19:25:37 +01:00 · 2023-07-29 19:13:19 +01:00 · 2023-07-29 19:11:50 +01:00
3 changed files with 98 additions and 27 deletions
--- a/frontend/index.css
+++ b/frontend/index.css
@@ -60,4 +60,8 @@ pre {
    padding: 0;
    background: white;
    border-radius: 0;
+}
+
+#taskCard {
+    margin-top: 45%;
 }
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -8,7 +8,6 @@
    <link rel="stylesheet" href="/frontend/index.css">
  </head>
  <body>
-    <script src="/frontend/index.js"></script>
    <div id="login">
      <div class="flex three demo" style="height: 100%; width: 100%">
        <div class="fourth two-fifth-1000"></div>
@@ -40,7 +39,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,10 +60,11 @@
          <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" 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>-->
        </div>
      </div>
    </div>
+    <script src="/frontend/index.js"></script>
  </body>
 </html>
--- a/frontend/index.js
+++ b/frontend/index.js
@@ -1,3 +1,7 @@
+function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
 async function login() {
    // tell the user the app is loading
    document.getElementById("loginSubmit").value = "Loading";
@@ -30,12 +34,12 @@ 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);
+    localStorage.setItem("uid", data.uid);
+    localStorage.setItem("name", data.name);
+    localStorage.setItem("role", data.role);

    // if role is admin, keep auto styling
-    if (sessionStorage.getItem("role") !== "admin") {
+    if (localStorage.getItem("role") !== "admin") {
        document.getElementById("addButton").setAttribute("style", "display: none;");
        document.getElementById("taskButton").classList.value = "half";
        document.getElementById("historyButton").classList.value = "half";
@@ -69,41 +73,55 @@ 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++) {
-            taskPage.innerHTML += `
+    if (localStorage.getItem("role") === "user") {
+        try {
+            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++) {
-            taskPage.innerHTML += `
+    } else if (localStorage.getItem("role") === "admin") {
+        try {
+            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">
-            <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>`
+        <sub>Such empty</sub>`
    }
+
    for (let i = 0; i < stats.length; i++) {
        // put user points in box
        statsPage.innerText += `${stats[i].name}: ${stats[i].points} \n`
@@ -113,7 +131,7 @@ async function populateScreen() {
 async function completeTask(taskID) {
    let points = document.getElementById(`${taskID}-p`).innerText.split(" ")[0];
    let time = new Date().toISOString().split(".")[0];
-    let uid = sessionStorage.getItem("uid");
+    let uid = localStorage.getItem("uid");
    await fetch("/completeTask", {
        method: "POST",
        headers: {
@@ -141,4 +159,42 @@ async function switchScreen(button) {
    } else if (button === "add") {
        document.getElementById("addTask").setAttribute("style", "");
    }
-}
+}
+
+async function newTask() {
+    let points = document.getElementById(`newTaskPoints`);
+    let name = document.getElementById(`newTaskName`);
+    await fetch("/addTask", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+            tid: 0,
+            name: name.value,
+            points: Number(points.value),
+        })
+    });
+    points.value = "";
+    name.value = "";
+}
+
+async function fastLog() {
+    sleep(500);
+    if (localStorage.getItem("uid") != null && localStorage.getItem("name") != null && localStorage.getItem("role") != null)  {
+        document.getElementById("login").setAttribute("style", "display: none;");
+        document.getElementById("mainPage").setAttribute("style", "");
+        if (localStorage.getItem("role") !== "admin") {
+            document.getElementById("addButton").setAttribute("style", "display: none;");
+            document.getElementById("taskButton").classList.value = "half";
+            document.getElementById("historyButton").classList.value = "half";
+            document.getElementById("menu").classList.value = "flex two";
+        }
+
+        await populateScreen();
+    } else {
+        // do nothing
+    }
+}
+
+fastLog();
Author	SHA1	Message	Date
chopster44	479044d4ea	Added quickLog™	2023-07-29 20:41:17 +01:00
chopster44	fd58f130a0	Add task blanks input fields, actually	2023-07-29 19:34:12 +01:00
chopster44	4dcf065501	Add task blanks input fields	2023-07-29 19:28:16 +01:00
chopster44	75413b2c5e	Added 'add task' functionality	2023-07-29 19:25:37 +01:00
chopster44	453f62cfae	Displays 'such empty' if no task exists	2023-07-29 19:13:19 +01:00
chopster44	fde246ecb7	Displays 'such empty' if no task has been completed	2023-07-29 19:11:50 +01:00