diff --git a/web/templates/dashboard.html b/web/templates/dashboard.html index 51649e0..76c55de 100644 --- a/web/templates/dashboard.html +++ b/web/templates/dashboard.html @@ -55,6 +55,26 @@ let currentPage = 1; let currentLimit = 10; + function formatElapsed(ms) { + const totalSecs = Math.floor(ms / 1000); + if (totalSecs < 0) return '0s'; + + const hours = Math.floor(totalSecs / 3600); + const minutes = Math.floor((totalSecs % 3600) / 60); + const seconds = totalSecs % 60; + + let parts = []; + if (hours > 0) { + parts.push(`${hours}h`); + } + if (minutes > 0 || hours > 0) { + parts.push(`${minutes}m`); + } + parts.push(`${seconds}s`); + + return parts.join(' '); + } + async function loadQueue() { const res = await fetch(`/api/queue?page=${currentPage}&limit=${currentLimit}`); const data = await res.json(); @@ -85,11 +105,16 @@ let progressHtml = ''; if (job.status === 'processing') { + const elapsedMs = Date.now() - new Date(job.updated_at).getTime(); + const formatted = formatElapsed(elapsedMs); progressHtml = `
-
0%
+
+ 0% + Elapsed: ${formatted} +
`; } @@ -156,6 +181,18 @@ } }); + // Update elapsed times periodically + setInterval(() => { + document.querySelectorAll('.progress-elapsed').forEach(el => { + const startTimeStr = el.getAttribute('data-start-time'); + if (startTimeStr) { + const startTime = new Date(startTimeStr).getTime(); + const elapsedMs = Date.now() - startTime; + el.innerText = `Elapsed: ${formatElapsed(elapsedMs)}`; + } + }); + }, 1000); + // Initial load loadQueue();