Add dashboard UI updates and settings modal

pikit-web/assets/status.js

@@ -0,0 +1,77 @@
+// Small helpers for rendering the status summary cards on the dashboard.
+export const placeholderStatus = {
+  hostname: "Pi-Kit",
+  uptime_seconds: 0,
+  os_version: "Pi-Kit",
+  cpu_temp_c: null,
+  memory_mb: { total: 0, free: 0 },
+  disk_mb: { total: 0, free: 0 },
+  lan_ip: null,
+};
+
+function fmtUptime(sec) {
+  const h = Math.floor(sec / 3600);
+  const m = Math.floor((sec % 3600) / 60);
+  return `${h}h ${m}m`;
+}
+
+function fmtOs(text) {
+  const raw = text || "DietPi";
+  // If PRETTY_NAME looks like "Debian GNU/Linux 13 (trixie)"
+  const m = /Debian[^0-9]*?(\d+)(?:\s*\(([^)]+)\))?/i.exec(raw);
+  if (m) {
+    const version = m[1];
+    return `DietPi · Debian ${version}`;
+  }
+  // If already contains DietPi, keep a concise form
+  if (/dietpi/i.test(raw)) return raw.replace(/GNU\/Linux\s*/i, "").trim();
+  // Fallback: truncate to keep cards tidy
+  return raw.length > 30 ? `${raw.slice(0, 27)}…` : raw;
+}
+
+function fmtSizeMb(mb) {
+  if (mb >= 1000) {
+    const gb = mb / 1024;
+    return `${gb.toFixed(gb >= 10 ? 0 : 1)} GB`;
+  }
+  return `${mb} MB`;
+}
+
+export function renderStats(container, data) {
+  if (!container) return;
+  container.innerHTML = "";
+  // Flatten the incoming status into label/value pairs before rendering cards
+  const stats = [
+    ["Uptime", fmtUptime(data.uptime_seconds)],
+    ["OS", fmtOs(data.os_version)],
+    ["CPU Temp", data.cpu_temp_c ? `${data.cpu_temp_c.toFixed(1)} °C` : "n/a"],
+    [
+      "Memory",
+      `${fmtSizeMb(data.memory_mb.total - data.memory_mb.free)} / ${fmtSizeMb(data.memory_mb.total)}`,
+    ],
+    [
+      "Disk",
+      `${fmtSizeMb(data.disk_mb.total - data.disk_mb.free)} / ${fmtSizeMb(data.disk_mb.total)}`,
+    ],
+    [
+      "LAN / Host",
+      data.lan_ip
+        ? `${data.lan_ip} (${data.hostname || "n/a"})`
+        : `n/a (${data.hostname || "n/a"})`,
+    ],
+  ];
+  stats.forEach(([label, value]) => {
+    const div = document.createElement("div");
+    div.className = "stat";
+    div.innerHTML = `<div class="label">${label}</div><div class="value">${value}</div>`;
+    if (label === "OS") {
+      const valEl = div.querySelector(".value");
+      if (valEl) {
+        valEl.style.whiteSpace = "normal";
+        valEl.style.wordBreak = "break-word";
+        valEl.style.lineHeight = "1.2";
+      }
+    }
+    container.appendChild(div);
+  });
+}