pretty much finished the basics

src/tracker.ts

@@ -1,4 +1,4 @@
-import { App, MarkdownSectionInformation } from "obsidian";
+import { moment, App, MarkdownSectionInformation } from "obsidian";
 
 export class Tracker {
     entries: Entry[];
@@ -11,14 +11,15 @@ export interface Entry {
 }
 
 export function startEntry(tracker: Tracker, name: string): void {
-    // date constructor returns the current date
+    if (!name)
-    let entry: Entry = { name: name, startTime: Date.now(), endTime: null };
+        name = `Segment ${tracker.entries.length + 1}`;
+    let entry: Entry = { name: name, startTime: moment().unix(), endTime: null };
     tracker.entries.push(entry);
 };
 
 export function endEntry(tracker: Tracker): void {
     let last = tracker.entries.last();
-    last.endTime = Date.now();
+    last.endTime = moment().unix();
 }
 
 export function isRunning(tracker: Tracker): boolean {
@@ -52,32 +53,64 @@ export function loadTracker(json: string): Tracker {
 }
 
 export function displayTracker(tracker: Tracker, element: HTMLElement): void {
+    // add timers
     let timer = element.createDiv({ cls: "simple-time-tracker-timers" });
-    let current = timer.createEl("div", { cls: "simple-time-tracker-timer" });
+    let currentDiv = timer.createEl("div", { cls: "simple-time-tracker-timer" });
-    current.createEl("span", { cls: "simple-time-tracker-timer-time", text: "00:00" });
+    let current = currentDiv.createEl("span", { cls: "simple-time-tracker-timer-time", text: "00:00" });
-    current.createEl("span", { text: "CURRENT" });
+    currentDiv.createEl("span", { text: "CURRENT" });
-    let total = timer.createEl("div", { cls: "simple-time-tracker-timer" });
+    let totalDiv = timer.createEl("div", { cls: "simple-time-tracker-timer" });
-    total.createEl("span", { cls: "simple-time-tracker-timer-time", text: "01:00" });
+    let total = totalDiv.createEl("span", { cls: "simple-time-tracker-timer-time", text: "00:00" });
-    total.createEl("span", { text: "TOTAL" });
+    totalDiv.createEl("span", { text: "TOTAL" });
+
+    // add list
+    let table = element.createEl("table", { cls: "simple-time-tracker-table" });
+    for (let entry of tracker.entries) {
+        let row = table.createEl("tr");
+        row.createEl("td", { text: entry.name });
+        row.createEl("td", { text: moment.unix(entry.startTime).format("YY-MM-DD hh:mm:ss") });
+        if (entry.endTime) {
+            row.createEl("td", { text: moment.unix(entry.endTime).format("YY-MM-DD hh:mm:ss") });
+            let duration = moment.unix(entry.endTime).diff(moment.unix(entry.startTime));
+            row.createEl("td", { text: getCountdownDisplay(moment.duration(duration)) });
+        }
+    }
+
+    setCountdownValues(tracker, current, total, currentDiv);
+    let intervalId = window.setInterval(() => {
+        // we delete the interval timer when the element is removed
+        if (!element.isConnected) {
+            window.clearInterval(intervalId);
+            return;
+        }
+        setCountdownValues(tracker, current, total, currentDiv);
+    }, 1000);
 
-    let list = element.createEl("ul");
-    for (let entry of tracker.entries)
-        list.createEl("li", { text: displayEntry(entry) });
 };
 
-export function displayEntry(entry: Entry): string {
+function getCountdownDisplay(duration: moment.Duration): string {
-    // TODO add an option to display this as an interval rather than a from - to string
     let ret = "";
-    if (entry.name)
+    if (duration.hours() > 0)
-        ret += `${entry.name}: `;
+        ret += duration.hours().toString().padStart(2, "0") + ":";
-
+    ret += duration.minutes().toString().padStart(2, "0") + ":" + duration.seconds().toString().padStart(2, "0");
-    let start = new Date(entry.startTime);
-    ret += `${start.toLocaleString()} - `;
-
-    if (entry.endTime) {
-        let end = new Date(entry.endTime);
-        ret += `${end.toLocaleString()}`;
-    }
-
     return ret;
 }
+
+function setCountdownValues(tracker: Tracker, current: HTMLElement, total: HTMLElement, currentDiv: HTMLDivElement) {
+    let currEntry = tracker.entries.last();
+    if (currEntry) {
+        let currDuration = moment().diff(moment.unix(currEntry.startTime));
+        if (!currEntry.endTime)
+            current.setText(getCountdownDisplay(moment.duration(currDuration)));
+
+        let totalDuration = 0;
+        for (let entry of tracker.entries) {
+            if (entry == currEntry && !currEntry.endTime) {
+                totalDuration += currDuration;
+            } else {
+                totalDuration += moment.unix(entry.endTime).diff(moment.unix(entry.startTime));
+            }
+        }
+        total.setText(getCountdownDisplay(moment.duration(totalDuration)));
+    }
+    currentDiv.toggleClass("simple-time-tracker-grayed", !currEntry || !!currEntry.endTime);
+}

styles.css

@@ -11,6 +11,10 @@
 	margin-right: auto;
 }
 
+.simple-time-tracker-txt {
+	text-align: center;
+}
+
 .simple-time-tracker-btn {
 	margin-top: 10px;
 	margin-bottom: 10px;
@@ -34,3 +38,16 @@
 	font-size: xx-large;
 	font-weight: bolder;
 }
+
+.simple-time-tracker-grayed {
+	opacity: 25%;
+}
+
+.simple-time-tracker-table {
+	width: 100%;
+	margin-top: 20px;
+}
+
+.simple-time-tracker-table td {
+	border: none;
+}

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

@@ -11,6 +11,10 @@
 	margin-right: auto;
 }
 
+.simple-time-tracker-txt {
+	text-align: center;
+}
+
 .simple-time-tracker-btn {
 	margin-top: 10px;
 	margin-bottom: 10px;
@@ -34,3 +38,16 @@
 	font-size: xx-large;
 	font-weight: bolder;
 }
+
+.simple-time-tracker-grayed {
+	opacity: 25%;
+}
+
+.simple-time-tracker-table {
+	width: 100%;
+	margin-top: 20px;
+}
+
+.simple-time-tracker-table td {
+	border: none;
+}

test-vault/track-note-test.md

@@ -1,7 +1,7 @@
 This is a time tracker:
 
 ```simple-time-tracker
-{"entries":[{"name":"Test segment my dudes!","startTime":1664298280695,"endTime":1664298283168},{"name":"","startTime":1664298304811,"endTime":1664298305748},{"name":"","startTime":1664298308288,"endTime":1664298322668},{"name":"","startTime":1664298323435,"endTime":1664298324617},{"name":"","startTime":1664298325410,"endTime":1664298326481},{"name":"","startTime":1664298328460,"endTime":1664298788945},{"name":"","startTime":1664298940959,"endTime":1664298943024},{"name":"","startTime":1664299161618,"endTime":1664299162696},{"name":"","startTime":1664299510766,"endTime":1664299511737}]}
+{"entries":[{"name":"Segment 1","startTime":1664306406,"endTime":1664306408},{"name":"Segment 2","startTime":1664306409,"endTime":1664306410},{"name":"Segment 3","startTime":1664306411,"endTime":1664306412},{"name":"Segment 4","startTime":1664306413,"endTime":1664306422},{"name":"Segment 5","startTime":1664306455,"endTime":1664306458},{"name":"Segment 6","startTime":1664306543,"endTime":1664306545},{"name":"Segment 7","startTime":1664306581,"endTime":1664306599}]}
 ```