X-Git-Url: http://git.scottworley.com/vopamoi/blobdiff_plain/68a72fde2851bd9c176b8862708b71707c1d3ea1..9f6be65ee10f3cfd4ad55b7326e8fb35fc78151a:/vopamoi.ts?ds=sidebyside diff --git a/vopamoi.ts b/vopamoi.ts index b899c71..a98a29b 100644 --- a/vopamoi.ts +++ b/vopamoi.ts @@ -14,26 +14,16 @@ function splitN(str: string, delimiter: string, limit: number = MAX_SAFE_INTEGER } const Model = { - addTask: function (timestamp: string, description: string) { - document.getElementById("tasks")!.appendChild(this.createTask(timestamp, description)).focus(); - }, - - createTask: function (timestamp: string, description: string) { + addTask: function (timestamp: string, description: string): Element { const task = document.createElement("div"); task.appendChild(document.createTextNode(description)); task.setAttribute("class", "task"); task.setAttribute("tabindex", "0"); task.setAttribute("data-created", timestamp); + document.getElementById("tasks")!.appendChild(task); return task; }, - destroyTask: function (createTimestamp: string) { - const task = this.getTask(createTimestamp); - if (task) { - task.parentElement!.removeChild(task); - } - }, - getPriority: function (task: Element): number { if (task.hasAttribute("data-priority")) { return parseFloat(task.getAttribute("data-priority")!); @@ -41,6 +31,10 @@ const Model = { return parseFloat(task.getAttribute("data-created")!); }, + getState: function (task: Element): string { + return task.getAttribute("data-state") ?? "todo"; + }, + getTask: function (createTimestamp: string) { for (const task of document.getElementsByClassName("task")) { if (task.getAttribute("data-created") === createTimestamp) { @@ -49,27 +43,26 @@ const Model = { } }, - setPriority: function (createTimestamp: string, priority: number) { + setPriority: function (createTimestamp: string, priority: number): Element | null { const target = this.getTask(createTimestamp); - if (!target) return; + if (!target) return null; target.setAttribute("data-priority", `${priority}`); for (const task of document.getElementsByClassName("task")) { if (task !== target && this.getPriority(task) > priority) { task.parentElement!.insertBefore(target, task); - target instanceof HTMLElement && target.focus(); - return; + return target; } } document.getElementById("tasks")!.appendChild(target); - target instanceof HTMLElement && target.focus(); + return target; }, setState: function (stateTimestamp: string, createTimestamp: string, state: string) { const task = this.getTask(createTimestamp); if (task) { - task.setAttribute(`data-${state}`, stateTimestamp); + task.setAttribute("data-state", state); if (task instanceof HTMLElement) { - task.style.display = "none"; // Until view filtering + task.style.display = state == "todo" ? "block" : "none"; // Until view filtering } } }, @@ -81,18 +74,15 @@ function Log(prefix: string = "vp-") { apply: function (entry: string) { const [timestamp, command, data] = splitN(entry, " ", 2); if (command == "Create") { - Model.addTask(timestamp, data); - } - if (command == "Destroy") { - Model.destroyTask(data.split(" ", 1)[0]); + return Model.addTask(timestamp, data); } if (command == "State") { const [createTimestamp, state] = splitN(data, " ", 1); - Model.setState(timestamp, createTimestamp, state); + return Model.setState(timestamp, createTimestamp, state); } if (command == "Priority") { const [createTimestamp, newPriority] = splitN(data, " ", 1); - Model.setPriority(createTimestamp, parseFloat(newPriority)); + return Model.setPriority(createTimestamp, parseFloat(newPriority)); } }, @@ -102,7 +92,7 @@ function Log(prefix: string = "vp-") { recordAndApply: function (entry: string) { this.record(entry); - this.apply(entry); + return this.apply(entry); }, replay: function () { @@ -119,37 +109,51 @@ function Log(prefix: string = "vp-") { } const log = Log(); +const undoLog: string[] = []; + const UI = { - addTask: function (description: string) { - log.recordAndApply(`${Date.now()} Create ${description}`); - }, - destroyTask: function (createTimestamp: string) { - log.recordAndApply(`${Date.now()} Destroy ${createTimestamp} ${Model.getTask(createTimestamp)?.textContent}`); - }, - setPriority: function (createTimestamp: string, priority: number) { - log.recordAndApply(`${Date.now()} Priority ${createTimestamp} ${priority}`); - }, - setState: function (createTimestamp: string, state: string) { - log.recordAndApply(`${Date.now()} State ${createTimestamp} ${state}`); + addTask: function (description: string): Element { + const now = Date.now(); + undoLog.push(`State ${now} deleted`); + return log.recordAndApply(`${now} Create ${description}`); + }, + setPriority: function (createTimestamp: string, newPriority: number, oldPriority: number) { + undoLog.push(`Priority ${createTimestamp} ${oldPriority}`); + return log.recordAndApply(`${Date.now()} Priority ${createTimestamp} ${newPriority}`); + }, + setState: function (createTimestamp: string, newState: string, oldState: string) { + undoLog.push(`State ${createTimestamp} ${oldState}`); + return log.recordAndApply(`${Date.now()} State ${createTimestamp} ${newState}`); + }, + undo: function () { + if (undoLog.length > 0) { + return log.recordAndApply(`${Date.now()} ${undoLog.pop()}`); + } }, }; const BrowserUI = { - addTask: function (form: any) { - if (form.taskName.value) { - UI.addTask(form.taskName.value); - form.taskName.value = ""; + addTask: function (event: KeyboardEvent) { + const input = document.getElementById("taskName"); + if (input.value) { + const task = UI.addTask(input.value); + if (task && task instanceof HTMLElement) task.focus(); + input.value = ""; + if (event.getModifierState("Control")) { + this.setPriority(task, null, document.getElementsByClassName("task")[0]); + } } - return false; }, - destroyTask: function () { - const createTimestamp = document.activeElement?.getAttribute("data-created"); - this.moveCursor(1) || this.moveCursor(-1); - return UI.destroyTask(createTimestamp!); + firstVisibleTask: function () { + for (const task of document.getElementsByClassName("task")) { + if (task instanceof HTMLElement && task.style.display !== "none") { + return task; + } + } }, - focusTaskNameInput: function (event: any) { + focusTaskNameInput: function (event: Event) { document.getElementById("taskName")!.focus(); event.preventDefault(); }, @@ -205,18 +209,28 @@ const BrowserUI = { console.assert(aPriority < newPriority && newPriority < bPriority, aPriority, "<", newPriority, "<", bPriority); const newPriorityRounded = Math.round(newPriority); const okToRound = aPriority < newPriorityRounded && newPriorityRounded < bPriority; - UI.setPriority(task.getAttribute("data-created")!, okToRound ? newPriorityRounded : newPriority); + UI.setPriority(task.getAttribute("data-created")!, okToRound ? newPriorityRounded : newPriority, Model.getPriority(task)); + task instanceof HTMLElement && task.focus(); }, setState: function (state: string) { - const createTimestamp = document.activeElement?.getAttribute("data-created"); + const task = document.activeElement; + if (!task) return; + const createTimestamp = task.getAttribute("data-created")!; this.moveCursor(1) || this.moveCursor(-1); - return UI.setState(createTimestamp!, state); + return UI.setState(createTimestamp, state, Model.getState(task)); + }, + + undo: function () { + const ret = UI.undo(); + if (ret && ret instanceof HTMLElement) ret.focus(); }, }; function handleKey(event: any) { - if (event.target.tagName !== "INPUT") { + if (event.target.tagName === "INPUT") { + if (event.key == "Enter") return BrowserUI.addTask(event); + } else { if (event.key == "j") return BrowserUI.moveCursor(1); if (event.key == "k") return BrowserUI.moveCursor(-1); if (event.key == "J") return BrowserUI.moveTask(1); @@ -226,11 +240,13 @@ function handleKey(event: any) { if (event.key == "w") return BrowserUI.setState("waiting"); if (event.key == "d") return BrowserUI.setState("done"); if (event.key == "c") return BrowserUI.setState("cancelled"); - if (event.key == "X") return BrowserUI.destroyTask(); + if (event.key == "X") return BrowserUI.setState("deleted"); + if (event.key == "u") return BrowserUI.undo(); } } function browserInit() { document.body.addEventListener("keydown", handleKey, { capture: false }); log.replay(); + BrowserUI.firstVisibleTask()?.focus(); }