Display local time in the browser

app/javascript/controllers/timeline_controller.js

@@ -0,0 +1,54 @@
+// Timeline controller for handling timezone conversion and animations
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["row", "time", "bar"]
+
+  connect() {
+    this.maxTotal = this.calculateMaxTotal()
+    this.updateTimeline()
+  }
+
+  calculateMaxTotal() {
+    const totals = this.rowTargets.map(row => parseInt(row.dataset.total))
+    return Math.max(...totals, 1)
+  }
+
+  updateTimeline() {
+    this.rowTargets.forEach((row, index) => {
+      this.updateRow(row, index)
+    })
+  }
+
+  updateRow(row, index) {
+    const timeIso = row.dataset.timeIso
+    const total = parseInt(row.dataset.total)
+    const timeElement = this.timeTargets.find(target => target.closest('[data-timeline-target="row"]') === row)
+    const barElement = this.barTargets.find(target => target.closest('[data-timeline-target="row"]') === row)
+
+    // Convert ISO time to local time
+    const date = new Date(timeIso)
+    const localTime = date.toLocaleTimeString(undefined, {
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    })
+
+    timeElement.textContent = localTime
+    timeElement.title = date.toLocaleString(undefined, {
+      weekday: 'short',
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      timeZoneName: 'short'
+    })
+
+    // Animate the bar width with a slight delay for each row
+    const barWidth = Math.max((total / this.maxTotal) * 100, 5)
+    setTimeout(() => {
+      barElement.style.width = `${barWidth}%`
+    }, 100 + (index * 50))
+  }
+}