54 lines
1.5 KiB
JavaScript
54 lines
1.5 KiB
JavaScript
// 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))
|
|
}
|
|
} |