Editable timestamps and mobile horizontal scroll

.gitignore

@@ -12,6 +12,9 @@ node_modules
 # They should be uploaded to GitHub releases instead.
 /main.js
 
+# Exclude local settings
+data.json
+
 # Exclude sourcemaps
 *.map
 

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "simple-time-tracker",
-    "version": "0.1.6",
+    "version": "0.1.7",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "simple-time-tracker",
-            "version": "0.1.6",
+            "version": "0.1.7",
             "license": "MIT",
             "devDependencies": {
                 "@types/node": "^16.11.6",

src/tracker.ts

@@ -40,6 +40,7 @@ export function loadTracker(json: string): Tracker {
 }
 
 export function displayTracker(tracker: Tracker, element: HTMLElement, file: string, getSectionInfo: () => MarkdownSectionInformation, settings: SimpleTimeTrackerSettings): void {
+    element.classList.add('simple-time-tracker-container');
     // add start/stop controls
     let running = isRunning(tracker);
     let btn = new ButtonComponent(element)
@@ -201,6 +202,10 @@ function formatTimestamp(timestamp: number, settings: SimpleTimeTrackerSettings)
     return moment.unix(timestamp).format(settings.timestampFormat);
 }
 
+function unFormatTimestamp(formatted: string, settings: SimpleTimeTrackerSettings): number {
+    return moment(formatted, settings.timestampFormat).unix();
+}
+
 function formatDuration(totalTime: number, settings: SimpleTimeTrackerSettings): string {
     let ret = "";
     let duration = moment.duration(totalTime);
@@ -268,17 +273,47 @@ function createTableSection(entry: Entry, settings: SimpleTimeTrackerSettings):
     return ret;
 }
 
+class EditableField {
+    cell: HTMLTableCellElement;
+    label: HTMLSpanElement;
+    box: TextComponent;
+    constructor(row: HTMLTableRowElement, indent: number, value: string) {
+        this.cell = row.createEl("td");
+        this.label = this.cell.createEl("span", { text: value });
+        this.label.style.marginLeft = `${indent}em`;
+        this.box = new TextComponent(this.cell).setValue(value);
+        this.box.inputEl.width = 10;
+        this.box.inputEl.classList.add('simple-time-tracker-input');
+        this.box.inputEl.hide();
+    }
+    editing(): boolean {
+        return this.label.hidden;
+    }
+    beginEdit(value: string) {
+        this.label.hidden = true;
+        this.box.setValue(value);
+        this.box.inputEl.show();
+    }
+    endEdit(): string {
+        let value = this.box.getValue()
+        this.label.setText(value);
+        this.box.inputEl.hide();
+        this.label.hidden = false;
+        return value;
+    }
+}
+
 function addEditableTableRow(tracker: Tracker, entry: Entry, table: HTMLTableElement, newSegmentNameBox: TextComponent, running: boolean, file: string, getSectionInfo: () => MarkdownSectionInformation, settings: SimpleTimeTrackerSettings, indent: number) {
     let row = table.createEl("tr");
 
-    let name = row.createEl("td");
+    let nameField = new EditableField(row, indent, entry.name);
-    let namePar = name.createEl("span", {text: entry.name});
+
-    namePar.style.marginLeft = `${indent}em`;
+    let startValue = entry.startTime ? formatTimestamp(entry.startTime, settings) : "";
-    let nameBox = new TextComponent(name).setValue(entry.name);
+    let startField = new EditableField(row, indent, startValue);
-    nameBox.inputEl.hidden = true;
+
+    let endValue = entry.endTime ? formatTimestamp(entry.endTime, settings) : "";
+    let endField = new EditableField(row, indent, endValue);
 
-    row.createEl("td", {text: entry.startTime ? formatTimestamp(entry.startTime, settings) : ""});
-    row.createEl("td", {text: entry.endTime ? formatTimestamp(entry.endTime, settings) : ""});
     row.createEl("td", { text: entry.endTime || entry.subEntries ? formatDuration(getDuration(entry), settings) : "" });
 
     let entryButtons = row.createEl("td");
@@ -297,19 +332,16 @@ function addEditableTableRow(tracker: Tracker, entry: Entry, table: HTMLTableEle
         .setTooltip("Edit")
         .setIcon("lucide-pencil")
         .onClick(async () => {
-            if (namePar.hidden) {
+            if (nameField.editing()) {
-                namePar.hidden = false;
+                entry.name = nameField.endEdit();
-                nameBox.inputEl.hidden = true;
+                entry.startTime = unFormatTimestamp(startField.endEdit(), settings);
-                editButton.setIcon("lucide-pencil");
+                entry.endTime = unFormatTimestamp(endField.endEdit(), settings);
-                if (nameBox.getValue()) {
-                    entry.name = nameBox.getValue();
-                    namePar.setText(entry.name);
                 await saveTracker(tracker, this.app, file, getSectionInfo());
-                }
+                editButton.setIcon("lucide-pencil");
             } else {
-                namePar.hidden = true;
+                nameField.beginEdit(entry.name);
-                nameBox.inputEl.hidden = false;
+                startField.beginEdit(formatTimestamp(entry.startTime, settings));
-                nameBox.setValue(entry.name);
+                endField.beginEdit(formatTimestamp(entry.endTime, settings));
                 editButton.setIcon("lucide-check");
             }
         });

styles.css

@@ -1,3 +1,7 @@
+.simple-time-tracker-container {
+    overflow-x: scroll;
+}
+
 .simple-time-tracker-support {
     max-width: 50%;
     width: 400px;
@@ -62,3 +66,8 @@
 .simple-time-tracker-table .clickable-icon {
     display: inline;
 }
+
+.simple-time-tracker-input {
+    max-width: 150px;
+    min-width: 100px;
+}

test-vault/.obsidian/plugins/simple-time-tracker/styles

@@ -1,3 +1,7 @@
+.simple-time-tracker-container {
+    overflow-x: scroll;
+}
+
 .simple-time-tracker-support {
     max-width: 50%;
     width: 400px;
@@ -62,3 +66,8 @@
 .simple-time-tracker-table .clickable-icon {
     display: inline;
 }
+
+.simple-time-tracker-input {
+    max-width: 150px;
+    min-width: 100px;
+}

test-vault/.obsidian/plugins/simple-time-tracker/styles.css

@@ -1,3 +1,7 @@
+.simple-time-tracker-container {
+    overflow-x: scroll;
+}
+
 .simple-time-tracker-support {
     max-width: 50%;
     width: 400px;
@@ -62,3 +66,8 @@
 .simple-time-tracker-table .clickable-icon {
     display: inline;
 }
+
+.simple-time-tracker-input {
+    max-width: 150px;
+    min-width: 100px;
+}