78 lines
2.3 KiB
JavaScript
78 lines
2.3 KiB
JavaScript
// 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);
|
|
});
|
|
}
|