Factor out some boilerplate in UI

[vopamoi] / vopamoi.ts

diff --git a/vopamoi.ts b/vopamoi.ts
index 64799cfbdfa1cb06785d03164f5389d0df7acb4d..dc61007ec9724a2ec417b1f786670c93a6cc3f6a 100644 (file)
--- a/vopamoi.ts
+++ b/vopamoi.ts
@@ -216,6 +216,10 @@ const log = Log();
 
 function UI() {
   const undoLog: string[] = [];
+  function perform(forward: string, reverse: string) {
+    undoLog.push(reverse);
+    return log.recordAndApply(`${clock.now()} ${forward}`);
+  }
   return {
     addTask: function (description: string): Element {
       const now = clock.now();
@@ -223,24 +227,19 @@ function UI() {
       return <Element>log.recordAndApply(`${now} Create ${description}`);
     },
     addTag: function (createTimestamp: string, tag: string) {
-      undoLog.push(`Untag ${createTimestamp} ${tag}`);
-      return log.recordAndApply(`${clock.now()} Tag ${createTimestamp} ${tag}`);
+      return perform(`Tag ${createTimestamp} ${tag}`, `Untag ${createTimestamp} ${tag}`);
     },
     edit: function (createTimestamp: string, newDescription: string, oldDescription: string) {
-      undoLog.push(`Edit ${createTimestamp} ${oldDescription}`);
-      return log.recordAndApply(`${clock.now()} Edit ${createTimestamp} ${newDescription}`);
+      return perform(`Edit ${createTimestamp} ${newDescription}`, `Edit ${createTimestamp} ${oldDescription}`);
     },
     removeTag: function (createTimestamp: string, tag: string) {
-      undoLog.push(`Tag ${createTimestamp} ${tag}`);
-      return log.recordAndApply(`${clock.now()} Untag ${createTimestamp} ${tag}`);
+      return perform(`Untag ${createTimestamp} ${tag}`, `Tag ${createTimestamp} ${tag}`);
     },
     setPriority: function (createTimestamp: string, newPriority: number, oldPriority: number) {
-      undoLog.push(`Priority ${createTimestamp} ${oldPriority}`);
-      return log.recordAndApply(`${clock.now()} Priority ${createTimestamp} ${newPriority}`);
+      return perform(`Priority ${createTimestamp} ${newPriority}`, `Priority ${createTimestamp} ${oldPriority}`);
     },
     setState: function (createTimestamp: string, newState: string, oldState: string) {
-      undoLog.push(`State ${createTimestamp} ${oldState}`);
-      return log.recordAndApply(`${clock.now()} State ${createTimestamp} ${newState}`);
+      return perform(`State ${createTimestamp} ${newState}`, `State ${createTimestamp} ${oldState}`);
     },
     undo: function () {
       if (undoLog.length > 0) {
@@ -265,7 +264,7 @@ function BrowserUI() {
       const input = <HTMLInputElement>document.getElementById("taskName");
       if (input.value.match(/^ *$/)) return;
       const task = ui.addTask(input.value);
-      if (currentViewState === "todo") {
+      if (currentViewState === "todo" || currentViewState === "all") {
         task instanceof HTMLElement && task.focus();
       } else if (this.returnFocusAfterInput()) {
       } else {
@@ -337,7 +336,8 @@ function BrowserUI() {
 
     firstVisibleTask: function () {
       for (const task of document.getElementsByClassName("task")) {
-        if (task instanceof HTMLElement && task.getAttribute("data-state") === currentViewState) {
+        const state = task.getAttribute("data-state");
+        if (task instanceof HTMLElement && (state === currentViewState || (currentViewState === "all" && state !== "deleted"))) {
           return task;
         }
       }
@@ -358,7 +358,8 @@ function BrowserUI() {
       while (true) {
         cursor = increment > 0 ? cursor.nextElementSibling : cursor.previousElementSibling;
         if (!cursor || !(cursor instanceof HTMLElement)) break;
-        if (cursor.getAttribute("data-state")! === currentViewState) {
+        const state = cursor.getAttribute("data-state")!;
+        if (state === currentViewState || (currentViewState === "all" && state !== "deleted")) {
           offset -= increment;
           valid_cursor = cursor;
         }
@@ -437,13 +438,19 @@ function BrowserUI() {
       const oldState = task.getAttribute("data-state")!;
       if (newState === oldState) return;
       const createTimestamp = task.getAttribute("data-created")!;
-      this.moveCursor(1) || this.moveCursor(-1);
+      if (currentViewState !== "all" || newState == "deleted") {
+        this.moveCursor(1) || this.moveCursor(-1);
+      }
       return ui.setState(createTimestamp, newState, oldState);
     },
 
     setView: function (state: string, color: string) {
       const sheet = (document.getElementById("viewStyle") as HTMLStyleElement).sheet!;
-      sheet.insertRule(`.task:not([data-state=${state}]) { display: none }`);
+      if (state === "all") {
+        sheet.insertRule(`.task[data-state=deleted] { display: none }`);
+      } else {
+        sheet.insertRule(`.task:not([data-state=${state}]) { display: none }`);
+      }
       sheet.insertRule(`:root { --view-state-indicator-color: ${color}; }`);
       sheet.removeRule(2);
       sheet.removeRule(2);
@@ -505,6 +512,7 @@ function handleKey(event: any) {
       if (event.key == "m") return browserUI.setState("someday-maybe");
     } else if (inputState === InputState.V) {
       inputState = InputState.Root;
+      if (event.key == "a") return browserUI.setView("all", "Gold");
       if (event.key == "c") return browserUI.setView("cancelled", "Red");
       if (event.key == "d") return browserUI.setView("done", "LawnGreen");
       if (event.key == "q") return browserUI.setView("todo", "White");