kot.pink
1{{ define "fragments/workflow-timers" }}
2 <script>
3 function formatElapsed(seconds) {
4 if (seconds < 1) return '0s';
5 if (seconds < 60) return `${seconds}s`;
6 const minutes = Math.floor(seconds / 60);
7 const secs = seconds % 60;
8 if (seconds < 3600) return `${minutes}m ${secs}s`;
9 const hours = Math.floor(seconds / 3600);
10 const mins = Math.floor((seconds % 3600) / 60);
11 return `${hours}h ${mins}m`;
12 }
13
14 function updateTimers() {
15 const now = Math.floor(Date.now() / 1000);
16
17 document.querySelectorAll('[data-timer]').forEach(el => {
18 const startTime = parseInt(el.dataset.start);
19 const endTime = el.dataset.end ? parseInt(el.dataset.end) : null;
20
21 if (endTime) {
22 // Step is complete, show final time
23 const elapsed = endTime - startTime;
24 el.textContent = formatElapsed(elapsed);
25 } else {
26 // Step is running, update live
27 const elapsed = now - startTime;
28 el.textContent = formatElapsed(elapsed);
29 }
30 });
31 }
32
33 setInterval(updateTimers, 1000);
34 updateTimers();
35 </script>
36{{ end }}