Add local and UTC clocks below header, updated every second

This commit is contained in:
Jeffrey Paul 2026-02-23 01:06:48 +07:00
parent 77e40bf4ef
commit a3bd3d06d1

View File

@ -459,6 +459,9 @@ function buildUI(state) {
<span class="text-gray-500">History: ${CONFIG.historyDuration}s</span> | <span class="text-gray-500">History: ${CONFIG.historyDuration}s</span> |
<span id="status-indicator" class="text-green-400">Running</span> <span id="status-indicator" class="text-green-400">Running</span>
</p> </p>
<p class="text-gray-500 text-xs font-mono mt-1">
<span id="clock-local"></span> | <span id="clock-utc"></span>
</p>
<div id="health-box" class="mt-4 p-3 bg-gray-800/70 rounded-lg border border-gray-700/50 font-mono text-sm text-center"> <div id="health-box" class="mt-4 p-3 bg-gray-800/70 rounded-lg border border-gray-700/50 font-mono text-sm text-center">
<span id="health-text" class="text-gray-400">Waiting for data...</span> <span id="health-text" class="text-gray-400">Waiting for data...</span>
</div> </div>
@ -721,6 +724,16 @@ async function init() {
.getElementById("pause-btn") .getElementById("pause-btn")
.addEventListener("click", () => togglePause(state)); .addEventListener("click", () => togglePause(state));
function updateClocks() {
const now = new Date();
const utc = now.toISOString().replace(/\.\d{3}Z$/, "Z");
const local = now.toLocaleString("sv-SE", { hour12: false });
document.getElementById("clock-local").textContent = "Local: " + local;
document.getElementById("clock-utc").textContent = "UTC: " + utc;
}
updateClocks();
setInterval(updateClocks, 1000);
tick(state); tick(state);
setInterval(() => tick(state), CONFIG.updateInterval); setInterval(() => tick(state), CONFIG.updateInterval);