feat: update header renderer for new element IDs

2026-04-06 07:36:35 +00:00
parent a809b7e353
commit 0ebcddcc24
1 changed files with 13 additions and 80 deletions
@@ -1,87 +1,20 @@
-function formatTime(now) {
-  return new Intl.DateTimeFormat("de-DE", {
-    hour: "2-digit",
-    minute: "2-digit",
-    hour12: false,
-  }).format(now);
-}
-
-function formatDate(now) {
-  return new Intl.DateTimeFormat("de-DE", {
-    weekday: "long",
-    day: "2-digit",
-    month: "short",
-    year: "numeric",
-  }).format(now).toUpperCase();
-}
-
-function statusTone(status) {
-  if (status === "offline") return "offline";
-  if (status === "degraded") return "warning";
-  return "online";
-}
-
-function statusLabel(status) {
-  if (status === "offline") return "OFFLINE";
-  if (status === "degraded") return "DEGRADED";
-  return "NOMINAL";
-}
-
 export function renderHeader(state) {
-  const now = new Date();
-  const { overview, services } = state.data;
-  const refreshNode = document.getElementById("last-refresh");
-  const overallTile = document.getElementById("overall-status-tile");
-  const overallLabel = document.getElementById("overall-status-label");
-  const overallSummary = document.getElementById("overall-status-summary");
-  const haTile = document.getElementById("home-assistant-tile");
-  const haLabel = document.getElementById("ha-status-label");
-  const haSummary = document.getElementById("ha-status-summary");
-  const heroCopy = document.getElementById("hero-copy");
+  const overview = state.overview || {};
+  const status = overview.overall_status || "offline";

-  document.getElementById("clock-time").textContent = formatTime(now);
-  document.getElementById("clock-date").textContent = formatDate(now);
-
-  if (refreshNode) {
-    if (state.lastRefreshAt) {
-      refreshNode.textContent = `LAST REFRESH ${new Intl.DateTimeFormat("de-DE", {
-        hour: "2-digit",
-        minute: "2-digit",
-        second: "2-digit",
-        hour12: false,
-      }).format(state.lastRefreshAt)} CET`;
-    } else {
-      refreshNode.textContent = "LAST REFRESH PENDING";
+  const dot = document.getElementById("overall-dot");
+  if (dot) {
+    dot.style.background = status === "online" ? "var(--teal)" : status === "degraded" ? "var(--yellow)" : "var(--red)";
+    dot.style.boxShadow = status === "online" ? "0 0 8px var(--teal-glow)" : "";
  }

-    refreshNode.classList.toggle("api-error", Boolean(state.error));
-  }
+  const txt = document.getElementById("overall-status-text");
+  if (txt) txt.textContent = status.toUpperCase();

-  const overallTone = statusTone(overview.overall_status);
-  overallTile.className = "status-tile";
-  overallTile.style.borderColor = "";
-  overallLabel.textContent = statusLabel(overview.overall_status);
-  overallLabel.className = "";
-  overallSummary.textContent =
-    `${overview.services.online} services online, ${overview.services.degraded} degraded, ${overview.services.offline} offline`;
-  overallTile.classList.toggle("api-error", Boolean(state.error));
-  overallLabel.classList.add(`value-${overallTone === "warning" ? "warning" : overallTone === "offline" ? "danger" : "online"}`);
-
-  const haTone = statusTone(overview.home_assistant.status);
-  haLabel.textContent = overview.home_assistant.status === "online" ? "ONLINE" : "OFFLINE";
-  haLabel.className = "";
-  haLabel.classList.add(`value-${haTone === "warning" ? "warning" : haTone === "offline" ? "danger" : "online"}`);
-  haSummary.textContent =
-    overview.home_assistant.status === "online"
-      ? `Version ${overview.home_assistant.version ?? "unknown"} / ${overview.home_assistant.response_time_ms ?? "n/a"} ms`
-      : "Basisstatus derzeit nicht erreichbar";
-  haTile.className = "status-tile";
-
-  if (state.error) {
-    heroCopy.textContent = `Aggregator API zuletzt fehlerhaft erreichbar. Letzte gueltige Daten bleiben sichtbar. Fehler: ${state.error.message}`;
-  } else {
-    heroCopy.textContent =
-      `Live angebundenes MVP-v1 Dashboard. ${services.summary.docker.running} Container running, ` +
-      `${services.summary.uptime_kuma.monitors_up} Kuma Monitors up, Home Assistant ${overview.home_assistant.status}.`;
+  const upd = document.getElementById("last-updated");
+  if (upd && overview.generated_at) {
+    const d = new Date(overview.generated_at);
+    const pad = n => String(n).padStart(2, "0");
+    upd.textContent = `updated ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
  }
 }