feat: live-updating timestamps via data-ts attribute

2026-03-16 16:10:04 +04:00
parent 2bfe3a0272
commit 1e95149456
2 changed files with 19 additions and 5 deletions
@@ -44,14 +44,28 @@ async function api(path, opts = {}) {
 }

 // Format relative time
-function timeAgo(date) {
-  const s = Math.floor((Date.now() - new Date(date).getTime()) / 1000);
-  if (s < 60) return `${s}s ago`;
+function formatAgo(ms) {
+  const s = Math.floor(ms / 1000);
+  if (s < 60)   return `${s}s ago`;
  if (s < 3600) return `${Math.floor(s / 60)}m ago`;
-  if (s < 86400) return `${Math.floor(s / 3600)}h ago`;
+  if (s < 86400)return `${Math.floor(s / 3600)}h ago`;
  return `${Math.floor(s / 86400)}d ago`;
 }

+function timeAgo(date) {
+  const ts = new Date(date).getTime();
+  const elapsed = Date.now() - ts;
+  return `<span class="timestamp" data-ts="${ts}">${formatAgo(elapsed)}</span>`;
+}
+
+// Tick all live timestamps every second
+setInterval(() => {
+  document.querySelectorAll('.timestamp[data-ts]').forEach(el => {
+    const elapsed = Date.now() - Number(el.dataset.ts);
+    el.textContent = formatAgo(elapsed);
+  });
+}, 1000);
+
 // Render a tiny sparkline SVG from latency values
 function sparkline(values, width = 120, height = 32) {
  if (!values.length) return '';