allow displaying segments in reverse

closes #39

src/main.ts

@@ -1,7 +1,7 @@
 import { Plugin } from "obsidian";
 import { defaultSettings, SimpleTimeTrackerSettings } from "./settings";
 import { SimpleTimeTrackerSettingsTab } from "./settings-tab";
-import { displayTracker, loadTracker, Tracker } from "./tracker";
+import { displayTracker, loadTracker } from "./tracker";
 
 export default class SimpleTimeTrackerPlugin extends Plugin {
 
@@ -13,7 +13,7 @@ export default class SimpleTimeTrackerPlugin extends Plugin {
         this.addSettingTab(new SimpleTimeTrackerSettingsTab(this.app, this));
 
         this.registerMarkdownCodeBlockProcessor("simple-time-tracker", (s, e, i) => {
-            let tracker: Tracker = loadTracker(s);
+            let tracker = loadTracker(s);
             e.empty();
             displayTracker(tracker, e, i.sourcePath, () => i.getSectionInfo(e), this.settings);
         });

src/settings-tab.ts

@@ -1,6 +1,6 @@
-import { App, PluginSettingTab, Setting } from "obsidian";
+import {App, PluginSettingTab, Setting} from "obsidian";
 import SimpleTimeTrackerPlugin from "./main";
-import { defaultSettings } from "./settings";
+import {defaultSettings} from "./settings";
 
 export class SimpleTimeTrackerSettingsTab extends PluginSettingTab {
 
@@ -52,6 +52,17 @@ export class SimpleTimeTrackerSettingsTab extends PluginSettingTab {
                 });
             });
 
+        new Setting(this.containerEl)
+            .setName("Display Segments in Reverse Order")
+            .setDesc("Whether older tracker segments should be displayed towards the bottom of the tracker, rather than the top.")
+            .addToggle(t => {
+                t.setValue(this.plugin.settings.reverseSegmentOrder);
+                t.onChange(async v => {
+                    this.plugin.settings.reverseSegmentOrder = v;
+                    await this.plugin.saveSettings();
+                });
+            });
+
         this.containerEl.createEl("hr");
         this.containerEl.createEl("p", {text: "If you like this plugin and want to support its development, you can do so through my website by clicking this fancy image!"});
         this.containerEl.createEl("a", {href: "https://ellpeck.de/support"})

src/settings.ts

@@ -2,7 +2,8 @@ export const defaultSettings: SimpleTimeTrackerSettings = {
     timestampFormat: "YY-MM-DD HH:mm:ss",
     editableTimestampFormat: "YYYY-MM-DD HH:mm:ss",
     csvDelimiter: ",",
-    fineGrainedDurations: true
+    fineGrainedDurations: true,
+    reverseSegmentOrder: false
 };
 
 export interface SimpleTimeTrackerSettings {
@@ -11,5 +12,6 @@ export interface SimpleTimeTrackerSettings {
     editableTimestampFormat: string;
     csvDelimiter: string;
     fineGrainedDurations: boolean;
+    reverseSegmentOrder: boolean;
 
 }

src/tracker.ts

@@ -82,7 +82,7 @@ export function displayTracker(tracker: Tracker, element: HTMLElement, file: str
             createEl("th", {text: "Duration"}),
             createEl("th"));
 
-        for (let entry of tracker.entries)
+        for (let entry of orderedEntries(tracker.entries, settings))
             addEditableTableRow(tracker, entry, table, newSegmentNameBox, running, file, getSectionInfo, settings, 0);
 
         // add copy buttons
@@ -249,7 +249,7 @@ function fixLegacyTimestamps(entries: Entry[]): void {
 
 function createMarkdownTable(tracker: Tracker, settings: SimpleTimeTrackerSettings): string {
     let table = [["Segment", "Start time", "End time", "Duration"]];
-    for (let entry of tracker.entries)
+    for (let entry of orderedEntries(tracker.entries, settings))
         table.push(...createTableSection(entry, settings));
     table.push(["**Total**", "", "", `**${formatDuration(getTotalDuration(tracker.entries), settings)}**`]);
 
@@ -271,7 +271,7 @@ function createMarkdownTable(tracker: Tracker, settings: SimpleTimeTrackerSettin
 
 function createCsv(tracker: Tracker, settings: SimpleTimeTrackerSettings): string {
     let ret = "";
-    for (let entry of tracker.entries) {
+    for (let entry of orderedEntries(tracker.entries, settings)) {
         for (let row of createTableSection(entry, settings))
             ret += row.join(settings.csvDelimiter) + "\n";
     }
@@ -285,12 +285,16 @@ function createTableSection(entry: Entry, settings: SimpleTimeTrackerSettings):
         entry.endTime ? formatTimestamp(entry.endTime, settings) : "",
         entry.endTime || entry.subEntries ? formatDuration(getDuration(entry), settings) : ""]];
     if (entry.subEntries) {
-        for (let sub of entry.subEntries)
+        for (let sub of orderedEntries(entry.subEntries, settings))
             ret.push(...createTableSection(sub, settings));
     }
     return ret;
 }
 
+function orderedEntries(entries: Entry[], settings: SimpleTimeTrackerSettings): Entry[] {
+    return settings.reverseSegmentOrder ? entries.slice().reverse() : entries;
+}
+
 class EditableField {
     cell: HTMLTableCellElement;
     label: HTMLSpanElement;
@@ -408,7 +412,7 @@ function addEditableTableRow(tracker: Tracker, entry: Entry, table: HTMLTableEle
         });
 
     if (entry.subEntries) {
-        for (let sub of entry.subEntries)
+        for (let sub of orderedEntries(entry.subEntries, settings))
             addEditableTableRow(tracker, sub, table, newSegmentNameBox, running, file, getSectionInfo, settings, indent + 1);
     }
 }

test-vault/.obsidian/plugins/simple-time-tracker/data.json

@@ -1,5 +1,7 @@
 {
   "timestampFormat": "YY-MM-DD hh:mm:ss",
+  "editableTimestampFormat": "YYYY-MM-DD HH:mm:ss",
   "csvDelimiter": ",",
-  "fineGrainedDurations": false
+  "fineGrainedDurations": false,
+  "reverseSegmentOrder": true
 }

test-vault/duration_accumulation_test.md

@@ -2,5 +2,5 @@
 More notes for my cool project! This note shows that we can correctly display accumulated time that lasts longer than a 24 hour day! 
 
 ```simple-time-tracker
-{"entries":[{"name":"test","startTime":1596265200,"endTime":1627887600,"subEntries":null},{"name":"test","startTime":1627801200,"endTime":1633158000,"subEntries":null},{"name":"test","startTime":1659337200,"endTime":1659423600,"subEntries":null},{"name":"test","startTime":1664627410,"endTime":1664631605,"subEntries":null},{"name":"Segment 5","startTime":1684858616,"endTime":1684858619,"subEntries":null}]}
+{"entries":[{"name":"test","startTime":"2020-08-01T07:00:00.000Z","endTime":"2021-08-02T07:00:00.000Z","subEntries":null},{"name":"test","startTime":"2021-08-01T07:00:00.000Z","endTime":"2021-10-02T07:00:00.000Z","subEntries":null},{"name":"test","startTime":"1970-01-01T00:00:00.000Z","endTime":null,"subEntries":[{"name":"Part 1","startTime":"2022-08-01T07:00:00.000Z","endTime":"2022-08-02T07:00:00.000Z","subEntries":null},{"name":"Part 2","startTime":"2024-02-26T13:19:40.629Z","endTime":"2024-02-26T13:19:43.713Z","subEntries":null},{"name":"Part 3","startTime":"2024-02-26T13:23:51.939Z","endTime":"2024-02-26T13:23:54.232Z","subEntries":null}]},{"name":"test","startTime":"2022-10-01T12:30:10.000Z","endTime":"2022-10-01T13:40:05.000Z","subEntries":null},{"name":"Segment 5","startTime":"2023-05-23T16:16:56.000Z","endTime":"2023-05-23T16:16:59.000Z","subEntries":null}]}
 ```