Implemented Task Manager

static/database.css

@@ -8,7 +8,8 @@ hr {
     width: 100%;
 }
 
-form {
+#db-form,
+#edit-form {
     display: flex;
     flex-direction: row;
     gap: 0.25em;

static/index.css

@@ -112,6 +112,15 @@ hr#sectorbar {
         ul {
             margin: 0.5em 0;
         }
+
+        li {
+            color: var(--color);
+        }
+
+        a {
+            color: var(--color);
+            text-decoration: none;
+        }
     }
 
     #other>div {

static/style.css

@@ -86,6 +86,10 @@ hr {
     border-bottom: 1px dashed var(--color);
 }
 
+label {
+    color: var(--color);
+}
+
 header {
     display: flex;
     flex-direction: row;

static/tasks.css

@@ -0,0 +1,39 @@
+ul {
+    margin: 1em;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+}
+
+li {
+    list-style: none;
+    margin: 0;
+    padding: 0.5em;
+    background-color: var(--color-bg2);
+
+    border: 1px solid var(--color);
+
+    span {
+        flex-direction: row;
+        gap: 0.5em;
+    }
+}
+
+.task-value,
+.task-value-editor {
+    flex-grow: 1;
+}
+
+output.task-value {
+    border: none;
+    text-decoration: 1px dotted underline var(--color);
+}
+
+.view-box {
+    display: flex;
+}
+
+.edit-box {
+    display: none;
+}

static/tasks.js

@@ -0,0 +1,46 @@
+function getFirst(item, className) {
+    return item.getElementsByClassName(className)[0]
+}
+
+for (elem of document.getElementsByTagName("li")) {
+    var editBtn = getFirst(elem, "task-value")
+    if (editBtn) {
+        editBtn.onclick = (event) => {
+            event.preventDefault(true);
+            var item = event.target.parentNode.parentNode;
+            getFirst(item, "view-box").style.display = "none";
+            getFirst(item, "edit-box").style.display = "flex";
+        }
+    }
+    var cancelBtn = getFirst(elem, "btn-cancel")
+    if (cancelBtn) {
+        cancelBtn.onclick = (event) => {
+            event.preventDefault(true);
+            var item = event.target.parentNode.parentNode;
+            getFirst(item, "edit-box").style.display = "none";
+            getFirst(item, "view-box").style.display = "flex";
+        }
+    }
+    var markBtn = getFirst(elem, "task-id")
+    if (markBtn) {
+        markBtn.onclick = (event) => {
+            event.target.type = "submit";
+            event.target.click();
+        }
+    }
+}
+
+var newBtn = document.getElementById("btn-new")
+newBtn.onclick = (event) => {
+    event.preventDefault(true);
+    var item = event.target.parentNode.parentNode;
+    getFirst(item, "view-box").style.display = "none";
+    getFirst(item, "edit-box").style.display = "flex";
+}
+var cancelBtn = document.getElementById("btn-cancel")
+cancelBtn.onclick = (event) => {
+    event.preventDefault(true);
+    var item = event.target.parentNode.parentNode;
+    getFirst(item, "edit-box").style.display = "none";
+    getFirst(item, "view-box").style.display = "flex";
+}