Better layout

app/javascript/controllers/timeline_controller.js

@@ -2,11 +2,20 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = ["row", "time", "bar"]
+  static targets = ["row", "time", "bar", "timestamp", "date"]
+  static values = {
+    mode: { type: String, default: "timeline" } // "timeline", "events", or "individual"
+  }
 
   connect() {
-    this.maxTotal = this.calculateMaxTotal()
-    this.updateTimeline()
+    if (this.modeValue === "timeline") {
+      this.maxTotal = this.calculateMaxTotal()
+      this.updateTimeline()
+    } else if (this.modeValue === "events") {
+      this.updateEventsTimes()
+    } else {
+      this.updateIndividualTimes()
+    }
   }
 
   calculateMaxTotal() {
@@ -51,4 +60,90 @@ export default class extends Controller {
       barElement.style.width = `${barWidth}%`
     }, 100 + (index * 50))
   }
+
+  updateEventsTimes() {
+    this.timestampTargets.forEach(element => {
+      const iso = element.dataset.iso
+      if (iso) {
+        this.convertToLocalTime(element, iso, "time")
+      }
+    })
+
+    this.dateTargets.forEach(element => {
+      const iso = element.dataset.iso
+      if (iso) {
+        this.convertToLocalTime(element, iso, "date")
+      }
+    })
+  }
+
+  updateIndividualTimes() {
+    const iso = this.element.dataset.iso
+    if (iso) {
+      this.convertToLocalTime(this.element, iso, this.element.dataset.format || "both")
+    }
+  }
+
+  convertToLocalTime(element, isoString, format) {
+    const date = new Date(isoString)
+
+    switch (format) {
+      case "time":
+        element.textContent = date.toLocaleTimeString(undefined, {
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit',
+          hour12: false
+        })
+        element.title = date.toLocaleString(undefined, {
+          weekday: 'short',
+          year: 'numeric',
+          month: 'short',
+          day: 'numeric',
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit',
+          timeZoneName: 'short'
+        })
+        break
+      case "date":
+        element.textContent = date.toLocaleDateString(undefined, {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit'
+        })
+        element.title = date.toLocaleString(undefined, {
+          weekday: 'short',
+          year: 'numeric',
+          month: 'short',
+          day: 'numeric',
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit',
+          timeZoneName: 'short'
+        })
+        break
+      case "both":
+        element.textContent = date.toLocaleString(undefined, {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit',
+          hour12: false
+        })
+        element.title = date.toLocaleString(undefined, {
+          weekday: 'short',
+          year: 'numeric',
+          month: 'short',
+          day: 'numeric',
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit',
+          timeZoneName: 'short'
+        })
+        break
+    }
+  }
 }