feat: Show Done functionality; Set completion time when POSTing an updated TODO

pages/index.html

@@ -11,6 +11,7 @@
             </div>
             <div class="col">
                 <button id="new-todo-submit" class="btn btn-primary">Add</button>
+                <button class="btn btn-secondary" id="show-done">Show Done</button>
             </div>
         </div>
     </div>
@@ -23,48 +24,51 @@
 
 
 <script>
-document.addEventListener('DOMContentLoaded', async function() {
+async function displayTodos(showDone) {
     let username = getUsername();
     let password = getUserPassword();
 
-    document.getElementById("new-todo-text").focus();
-
-    // Make "Add" button to send 
-    document.getElementById("new-todo-submit").addEventListener("click", async (event) => {
-        let newTodoTextInput =  document.getElementById("new-todo-text");
-        let newTodoText = newTodoTextInput.value;
-        if (newTodoText.length < 1) {
-            newTodoTextInput.setCustomValidity("At least one character is needed!");
-            return;
-        } else {
-            newTodoTextInput.setCustomValidity("");
-        }
-        newTodoTextInput.value = "";
-
-        // Make a request
-        let response = await postNewTodo(username, password, {text: newTodoText});
-        if (response.ok) {
-            location.reload();
-        }
-    });
-
-
     // Fetch and display TODOs
     response = await getTodos(username, password);
     let todosJson = await response.json();    
-    let todos = [];
-    let completeButtonIDs = [];
-    let deleteButtonIDs = [];
+    let todosDisplayed = [];
 
     if (response.ok && todosJson != null) {
         let todosDiv = document.getElementById("todos");
+        // Clear what we've had before
+        todosDiv.innerHTML = "";
+
         todosJson.forEach((item) => {
-            // Do not work with completed TODOs yet
-            if (item.isDone == true) {
-                return;
+            if (showDone === true && item.isDone == true) {
+                // An already done Todo
+
+                let todoDeleteBtnID = "btn-delete-" + String(item.id);
+
+                // Display
+                let timeCreated = new Date(item.timeCreatedUnix * 1000);
+                if (item.completionTimeUnix != 0) {
+                    let timeDone = new Date(item.completionTimeUnix * 1000);
+
+                    todosDiv.innerHTML += "<tr><td>" +  item.text + "</td>" +
+                    "<td>" + " " + timeCreated.getDate() + "/" + (timeCreated.getMonth() + 1) + "/" + timeCreated.getFullYear() + "</td>" +
+                    "<td>" + " " + timeDone.getDate() + "/" + (timeDone.getMonth() + 1) + "/" + timeDone.getFullYear() + "</td>" +
+                    "<td>" + "<button class='btn btn-danger' id='" +
+                    todoDeleteBtnID + "'><img src='/static/images/trash3-fill.svg'></button></td></tr>";
+                } else {
+                    todosDiv.innerHTML += "<tr><td>" +  item.text + "</td>" +
+                    "<td>" + " " + timeCreated.getDate() + "/" + (timeCreated.getMonth() + 1) + "/" + timeCreated.getFullYear() + "</td>" +
+                    "<td></td>" +
+                    "<td>" + "<button class='btn btn-danger' id='" +
+                    todoDeleteBtnID + "'><img src='/static/images/trash3-fill.svg'></button></td></tr>";
                 }
              
-            todos.push(item);
+
+                todosDisplayed.push({item: item, buttonDel: todoDeleteBtnID});
+
+
+            } else if (showDone === false && item.isDone == false) {
+                // A yet to be done Todo
+
                 let todoCompleteBtnID = "btn-complete-" + String(item.id);
                 let todoDeleteBtnID = "btn-delete-" + String(item.id);
                 let todoEditBtnID = "btn-edit-" + String(item.id);
@@ -77,32 +81,96 @@ document.addEventListener('DOMContentLoaded', async function() {
                     "<img src='/static/images/check.svg'></button><button class='btn btn-danger' id='" +
                     todoDeleteBtnID + "'><img src='/static/images/trash3-fill.svg'></button></td></tr>";
                 
-                completeButtonIDs.push(todoCompleteBtnID);
-                deleteButtonIDs.push(todoDeleteBtnID);
+                todosDisplayed.push({item: item, buttonDel: todoDeleteBtnID, buttonComplete: todoCompleteBtnID});
+
+            }
         });
     }
 
+
     // Loop over all buttons (doesn't matter which ones because the amounts are equal)
-    for (let i = 0; i < completeButtonIDs.length; i++) {
+    for (let i = 0; i < todosDisplayed.length; i++) {
+        let elem = todosDisplayed[i];
+
+        if (showDone === false && elem.item.isDone === false) {
             // Done button
-        document.getElementById(completeButtonIDs[i]).addEventListener("click", async (event) => {
+            document.getElementById(elem.buttonComplete).addEventListener("click", async (event) => {
                 // Mark as done
-            todos[i].isDone = true;
+                elem.item.isDone = true;
+                // Set completion time
+                elem.item.completionTimeUnix = Math.floor(Date.now() / 1000);
+
                 // Update
-            response = await updateTodo(username, password, todos[i].id, todos[i]);
+                response = await updateTodo(username, password, elem.item.id, elem.item);
                 if (response.ok) {
                     location.reload();
                 }
             });
 
             // Delete button
-        document.getElementById(deleteButtonIDs[i]).addEventListener("click", async (event) => {
-            response = await deleteTodo(username, password, todos[i].id);
+            document.getElementById(elem.buttonDel).addEventListener("click", async (event) => {
+                response = await deleteTodo(username, password, elem.item.id);
                 if (response.ok) {
                     location.reload();
                 }
             });
+        } else {
+            // Delete button
+            document.getElementById(elem.buttonDel).addEventListener("click", async (event) => {
+                response = await deleteTodo(username, password, elem.item.id);
+                if (response.ok) {
+                    location.reload();
+                }
+            });
+        }
+    }
+}
+
+
+document.addEventListener('DOMContentLoaded', async function() {
+    let username = getUsername();
+    let password = getUserPassword();
+
+    document.getElementById("new-todo-text").focus();
+
+
+    let showDoneButton = document.getElementById("show-done");
+    showDoneButton.addEventListener("click", (event) => {
+        displayTodos(true); // Re-display without reloading
+
+        // Rename the button
+        showDoneButton.innerText = "Show To Do";
+        showDoneButton.className = "btn btn-success";
+        
+        // Make it "reset to default"
+        showDoneButton.addEventListener("click", (event) => {
+            location.reload();
+        });
+    });
+
+
+    // "Add" button
+    document.getElementById("new-todo-submit").addEventListener("click", async (event) => {
+        let newTodoTextInput =  document.getElementById("new-todo-text");
+        let newTodoText = newTodoTextInput.value;
+        if (newTodoText.length < 1) {
+            newTodoTextInput.setCustomValidity("At least one character is needed!");
+            return;
+        } else {
+            newTodoTextInput.setCustomValidity("");
         }
+        newTodoTextInput.value = "";
+
+        // Make a request
+        let response = await postNewTodo(username, password, {text: newTodoText});
+        if (response.ok) {
+            location.reload();
+        }
+    });
+
+
+    // Fetch and display TODOs
+    await displayTodos(false);
 }, false)
 </script>