Show dates on non-todo-state tasks

Eg, this is the completion date for completed tasks, etc.

diff --git a/vopamoi.css b/vopamoi.css
index 31d439da1a2cb138ecd08b01e7f49bb6d8eff584..68d4773abb28aefa967e24eab2dd562d11c2c2e0 100644 (file)
--- a/vopamoi.css
+++ b/vopamoi.css
@@ -18,6 +18,9 @@ input.tag {
 .task {
   clear: right;
 }
+.statedate {
+  margin-right: 0.5em;
+}
 #ui {
   padding: 15px 10px;
 }

diff --git a/vopamoi.ts b/vopamoi.ts
index 5b1ce6be2639af395b3daa7ac61a2dd2059cc413..64799cfbdfa1cb06785d03164f5389d0df7acb4d 100644 (file)
--- a/vopamoi.ts
+++ b/vopamoi.ts
@@ -144,9 +144,20 @@ const Model = {
 
   setState: function (stateTimestamp: string, createTimestamp: string, state: string) {
     const task = this.getTask(createTimestamp);
-    if (task) {
-      task.setAttribute("data-state", state);
+    if (!task) return;
+    task.setAttribute("data-state", state);
+    var date = task.getElementsByClassName("statedate")[0];
+    if (state === "todo") {
+      task.removeChild(date);
+      return;
     }
+    if (!date) {
+      date = document.createElement("span");
+      date.classList.add("statedate");
+      task.insertBefore(date, task.firstChild);
+    }
+    const d = new Date(parseInt(stateTimestamp));
+    date.textContent = `${d.getFullYear()}-${`${d.getMonth() + 1}`.padStart(2, "0")}-${`${d.getDate()}`.padStart(2, "0")}`;
   },
 };