git.scottworley.com Git - vopamoi/blob - vopamoi.ts

   1 // Typescript doesn't know about MAX_SAFE_INTEGER??  This was supposed to be
   2 // fixed in typescript 2.0.1 in 2016, but is not working for me in typescript
   3 // 4.2.4 in 2022.  :( https://github.com/microsoft/TypeScript/issues/9937
   4 //const MAX_SAFE_INTEGER = Number.MAX_SAFE_INTEGER;
   5 const MAX_SAFE_INTEGER = 9007199254740991;
   6
   7 // A sane split that splits N *times*, leaving the last chunk unsplit.
   8 function splitN(str: string, delimiter: string, limit: number = MAX_SAFE_INTEGER): string[] {
   9   if (limit < 1) {
  10     return [str];
  11   }
  12   const at = str.indexOf(delimiter);
  13   return at === -1 ? [str] : [str.substring(0, at)].concat(splitN(str.substring(at + delimiter.length), delimiter, limit - 1));
  14 }
  15
  16 const Model = {
  17   createTask: function (timestamp: string, description: string) {
  18     const task = document.createElement("div");
  19     task.appendChild(document.createTextNode(description));
  20     task.setAttribute("class", "task");
  21     task.setAttribute("tabindex", "0");
  22     task.setAttribute("data-created", timestamp);
  23     return task;
  24   },
  25
  26   addTask: function (timestamp: string, description: string) {
  27     document.body.appendChild(this.createTask(timestamp, description)).focus();
  28   },
  29
  30   getTask: function (createTimestamp: string) {
  31     for (const task of document.getElementsByClassName("task")) {
  32       if (task.getAttribute("data-created") === createTimestamp) {
  33         return task;
  34       }
  35     }
  36   },
  37
  38   destroyTask: function (createTimestamp: string) {
  39     const task = this.getTask(createTimestamp);
  40     if (task) {
  41       task.parentElement!.removeChild(task);
  42     }
  43   },
  44
  45   setState: function (stateTimestamp: string, createTimestamp: string, state: string) {
  46     const task = this.getTask(createTimestamp);
  47     if (task) {
  48       task.setAttribute(`data-${state}`, stateTimestamp);
  49       if (task instanceof HTMLElement) {
  50         task.style.display = "none"; // Until view filtering
  51       }
  52     }
  53   },
  54 };
  55
  56 const Log = (function () {
  57   var next_log_index = 0;
  58   return {
  59     apply: function (entry: string) {
  60       const [timestamp, command, data] = splitN(entry, " ", 2);
  61       if (command == "Create") {
  62         Model.addTask(timestamp, data);
  63       }
  64       if (command == "Destroy") {
  65         Model.destroyTask(data.split(" ", 1)[0]);
  66       }
  67       if (command == "State") {
  68         const [createTimestamp, state] = splitN(data, " ", 1);
  69         Model.setState(timestamp, createTimestamp, state);
  70       }
  71     },
  72
  73     record: function (entry: string) {
  74       window.localStorage.setItem(`${next_log_index++}`, entry);
  75     },
  76
  77     recordAndApply: function (entry: string) {
  78       this.record(entry);
  79       this.apply(entry);
  80     },
  81
  82     replay: function () {
  83       while (true) {
  84         const entry = window.localStorage.getItem(`${next_log_index}`);
  85         if (entry === null) {
  86           break;
  87         }
  88         this.apply(entry);
  89         next_log_index++;
  90       }
  91     },
  92   };
  93 })();
  94
  95 const UI = {
  96   addTask: function (description: string) {
  97     Log.recordAndApply(`${Date.now()} Create ${description}`);
  98   },
  99   destroyTask: function (createTimestamp: string) {
 100     Log.recordAndApply(`${Date.now()} Destroy ${createTimestamp} ${Model.getTask(createTimestamp)?.textContent}`);
 101   },
 102   setState: function (createTimestamp: string, state: string) {
 103     Log.recordAndApply(`${Date.now()} State ${createTimestamp} ${state}`);
 104   },
 105 };
 106
 107 const BrowserUI = {
 108   addTask: function (form: any) {
 109     if (form.taskName.value) {
 110       UI.addTask(form.taskName.value);
 111       form.taskName.value = "";
 112     }
 113     return false;
 114   },
 115
 116   destroyTask: function () {
 117     const createTimestamp = document.activeElement?.getAttribute("data-created");
 118     this.moveCursor(1) || this.moveCursor(-1);
 119     return UI.destroyTask(createTimestamp!);
 120   },
 121
 122   focusTaskNameInput: function (event: any) {
 123     document.getElementById("taskName")!.focus();
 124     event.preventDefault();
 125   },
 126
 127   moveCursor: function (offset: number): boolean {
 128     var active = document.activeElement;
 129     if (offset === 1 && active) {
 130       active = active.nextElementSibling;
 131     }
 132     if (offset === -1 && active) {
 133       active = active.previousElementSibling;
 134     }
 135     if (active && active instanceof HTMLElement) {
 136       active.focus();
 137       return true;
 138     }
 139     return false;
 140   },
 141
 142   setState: function (state: string) {
 143     const createTimestamp = document.activeElement?.getAttribute("data-created");
 144     this.moveCursor(1) || this.moveCursor(-1);
 145     return UI.setState(createTimestamp!, state);
 146   },
 147 };
 148
 149 function handleKey(event: any) {
 150   if (event.target.tagName !== "INPUT") {
 151     if (event.key == "j") return BrowserUI.moveCursor(1);
 152     if (event.key == "k") return BrowserUI.moveCursor(-1);
 153     if (event.key == "n") return BrowserUI.focusTaskNameInput(event);
 154     if (event.key == "s") return BrowserUI.setState("someday-maybe");
 155     if (event.key == "w") return BrowserUI.setState("waiting");
 156     if (event.key == "d") return BrowserUI.setState("done");
 157     if (event.key == "c") return BrowserUI.setState("cancelled");
 158     if (event.key == "X") return BrowserUI.destroyTask();
 159   }
 160 }
 161
 162 function browserInit() {
 163   document.body.addEventListener("keydown", handleKey, { capture: false });
 164   Log.replay();
 165 }