Admin page: schema-driven config, enable/disable, live re-init
Milestone 5. GET /api/admin/state, PUT /api/admin/modules/<id>/config and /enabled persist to config/modules.json and re-init the module in place — no restart. /api/events (SSE) tells open dashboards about admin changes; the shell then calls onConfigChange(cfg) on instances that implement it and cleanly remounts the rest, so tiles reconnect on their own. Admin page renders forms from each configSchema (text/number/boolean/select/ password), shows module health from handle.health(), and never echoes password values back to a browser. Optional shared passcode (config/proddash.json adminPasscode or PRODDASH_PASSCODE) gates the admin API behind a cookie; the dashboard API stays open. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RNYUv9EyrGSFmCnmH7WYKH
This commit is contained in:
Claude
@@ -0,0 +1,154 @@
|
||||
/* ProdDash admin page — on top of the shell's style.css */
|
||||
|
||||
body { overflow: auto; }
|
||||
|
||||
.admin-tag {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 5px;
|
||||
padding: 2px 6px;
|
||||
margin-left: 6px;
|
||||
vertical-align: 2px;
|
||||
}
|
||||
|
||||
#admin-main {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
width: min(720px, 100%);
|
||||
margin: 0 auto;
|
||||
padding: 18px 16px 60px;
|
||||
}
|
||||
|
||||
.admin-h1 {
|
||||
font-size: 16px;
|
||||
margin: 22px 0 6px;
|
||||
}
|
||||
|
||||
.admin-copy {
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.admin-card {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.admin-card h2 { font-size: 14px; margin-bottom: 8px; }
|
||||
|
||||
.login-row { display: flex; gap: 8px; }
|
||||
.login-row input {
|
||||
flex: 1;
|
||||
padding: 8px 10px;
|
||||
font-size: 14px;
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 7px;
|
||||
}
|
||||
.login-row input:focus { outline: none; border-color: var(--accent); }
|
||||
|
||||
.module-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.module-head .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
|
||||
.module-head .dot.ok { background: var(--accent); box-shadow: 0 0 5px var(--accent); }
|
||||
.module-head .dot.connecting { background: var(--warn); }
|
||||
.module-head .dot.error { background: var(--danger); }
|
||||
|
||||
.module-name { font-size: 14px; font-weight: 700; }
|
||||
.module-version { color: var(--muted); font-size: 11px; }
|
||||
.module-head .spacer { flex: 1; }
|
||||
|
||||
.module-desc { color: var(--muted); font-size: 12px; margin: 6px 0 2px; }
|
||||
|
||||
.module-health {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
margin-top: 4px;
|
||||
min-height: 15px;
|
||||
}
|
||||
.module-health.error { color: var(--danger); }
|
||||
|
||||
.module-mount-error {
|
||||
margin-top: 8px;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid var(--danger);
|
||||
border-radius: 8px;
|
||||
color: var(--danger);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.module-form { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; }
|
||||
.module-form .field { max-width: 420px; }
|
||||
.module-form-empty { color: var(--muted); font-size: 12px; margin-top: 10px; }
|
||||
|
||||
.module-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.admin-status { min-height: 16px; font-size: 12px; color: var(--muted); margin-top: 8px; }
|
||||
.admin-status.error { color: var(--danger); }
|
||||
.admin-status.ok { color: var(--accent); }
|
||||
|
||||
/* enable/disable switch */
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
user-select: none;
|
||||
}
|
||||
.switch input { position: absolute; opacity: 0; pointer-events: none; }
|
||||
.switch .track {
|
||||
width: 34px;
|
||||
height: 19px;
|
||||
border-radius: 999px;
|
||||
background: var(--border);
|
||||
position: relative;
|
||||
transition: background 0.2s;
|
||||
flex: none;
|
||||
}
|
||||
.switch .track::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 2px; left: 2px;
|
||||
width: 15px; height: 15px;
|
||||
border-radius: 50%;
|
||||
background: var(--muted);
|
||||
transition: transform 0.2s, background 0.2s;
|
||||
}
|
||||
.switch input:checked + .track { background: var(--accent); }
|
||||
.switch input:checked + .track::after { transform: translateX(15px); background: var(--bg); }
|
||||
|
||||
.layout-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 9px 12px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.layout-row .name { flex: 1; font-size: 13px; font-weight: 600; }
|
||||
.layout-row .meta { color: var(--muted); font-size: 11px; }
|
||||
.layouts-empty { color: var(--muted); font-size: 13px; }
|
||||
@@ -0,0 +1,372 @@
|
||||
/* ProdDash admin client.
|
||||
|
||||
Everything here is server-wide: module enable/disable and admin config
|
||||
(written to config/modules.json, module re-inited on save), plus named
|
||||
layout management. Guarded by the shared passcode when one is set. */
|
||||
|
||||
const loginCard = document.getElementById('login-card');
|
||||
const loginStatus = document.getElementById('login-status');
|
||||
const passcodeInput = document.getElementById('passcode');
|
||||
const modulesSection = document.getElementById('modules-section');
|
||||
const modulesList = document.getElementById('modules-list');
|
||||
const layoutsSection = document.getElementById('layouts-section');
|
||||
const layoutsList = document.getElementById('layouts-list');
|
||||
const toastEl = document.getElementById('toast');
|
||||
|
||||
let toastTimer = null;
|
||||
function toast(msg, isError = false) {
|
||||
toastEl.textContent = msg;
|
||||
toastEl.classList.toggle('error', isError);
|
||||
toastEl.hidden = false;
|
||||
clearTimeout(toastTimer);
|
||||
toastTimer = setTimeout(() => { toastEl.hidden = true; }, 3200);
|
||||
}
|
||||
|
||||
async function api(path, opts = {}) {
|
||||
const res = await fetch(path, {
|
||||
...opts,
|
||||
headers: { 'Content-Type': 'application/json', ...(opts.headers || {}) },
|
||||
});
|
||||
const body = await res.json().catch(() => ({}));
|
||||
if (!res.ok) {
|
||||
const err = new Error(body.error || `Request failed (${res.status})`);
|
||||
err.status = res.status;
|
||||
err.authRequired = Boolean(body.authRequired);
|
||||
throw err;
|
||||
}
|
||||
return body;
|
||||
}
|
||||
|
||||
/* ── login ──────────────────────────────────────────────────────────── */
|
||||
|
||||
function showLogin() {
|
||||
loginCard.hidden = false;
|
||||
modulesSection.hidden = true;
|
||||
layoutsSection.hidden = true;
|
||||
passcodeInput.focus();
|
||||
}
|
||||
|
||||
async function login() {
|
||||
loginStatus.textContent = '';
|
||||
loginStatus.className = 'admin-status';
|
||||
try {
|
||||
await api('/api/admin/login', { method: 'POST', body: JSON.stringify({ passcode: passcodeInput.value }) });
|
||||
passcodeInput.value = '';
|
||||
loginCard.hidden = true;
|
||||
await loadState();
|
||||
} catch (e) {
|
||||
loginStatus.textContent = e.message;
|
||||
loginStatus.className = 'admin-status error';
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('login-btn').addEventListener('click', login);
|
||||
passcodeInput.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') login();
|
||||
});
|
||||
|
||||
/* ── module cards ───────────────────────────────────────────────────── */
|
||||
|
||||
/** moduleId -> { dot, healthEl, toggle } for cheap in-place status refreshes */
|
||||
const liveEls = new Map();
|
||||
|
||||
function healthClass(mod) {
|
||||
if (!mod.enabled) return '';
|
||||
if (mod.mountError) return 'error';
|
||||
return mod.health ? mod.health.status : 'ok';
|
||||
}
|
||||
|
||||
function healthText(mod) {
|
||||
if (!mod.enabled) return 'Disabled — hidden from the dashboard picker, server routes unmounted.';
|
||||
if (mod.mountError) return '';
|
||||
if (mod.health) return mod.health.message || mod.health.status;
|
||||
return mod.hasServer ? 'Mounted.' : 'Client-only module (no server part).';
|
||||
}
|
||||
|
||||
function fieldFor(key, spec, value, passwordSet) {
|
||||
const type = spec?.type || 'string';
|
||||
const label = spec?.label || key;
|
||||
const field = document.createElement('label');
|
||||
field.className = 'field' + (type === 'boolean' ? ' check' : '');
|
||||
let read;
|
||||
|
||||
if (type === 'boolean') {
|
||||
const input = document.createElement('input');
|
||||
input.type = 'checkbox';
|
||||
input.checked = Boolean(value);
|
||||
field.append(input, document.createTextNode(label));
|
||||
read = () => input.checked;
|
||||
} else if (type === 'select' && Array.isArray(spec.options)) {
|
||||
const span = document.createElement('span');
|
||||
span.textContent = label;
|
||||
const select = document.createElement('select');
|
||||
for (const opt of spec.options) {
|
||||
const o = document.createElement('option');
|
||||
o.value = String(typeof opt === 'object' ? opt.value : opt);
|
||||
o.textContent = String(typeof opt === 'object' ? (opt.label ?? opt.value) : opt);
|
||||
select.appendChild(o);
|
||||
}
|
||||
select.value = String(value ?? '');
|
||||
field.append(span, select);
|
||||
read = () => select.value;
|
||||
} else {
|
||||
const span = document.createElement('span');
|
||||
span.textContent = label;
|
||||
const input = document.createElement('input');
|
||||
input.type = type === 'number' ? 'number' : (type === 'password' ? 'password' : 'text');
|
||||
if (type === 'password') {
|
||||
input.placeholder = passwordSet ? 'Saved — leave blank to keep' : 'Not set';
|
||||
input.autocomplete = 'new-password';
|
||||
} else {
|
||||
input.value = value === undefined || value === null ? '' : String(value);
|
||||
}
|
||||
field.append(span, input);
|
||||
read = () => (type === 'number' ? Number(input.value) : input.value);
|
||||
}
|
||||
return { field, read };
|
||||
}
|
||||
|
||||
function buildModuleCard(mod) {
|
||||
const card = document.createElement('section');
|
||||
card.className = 'admin-card';
|
||||
|
||||
const head = document.createElement('div');
|
||||
head.className = 'module-head';
|
||||
|
||||
const dot = document.createElement('span');
|
||||
dot.className = 'dot ' + healthClass(mod);
|
||||
|
||||
const name = document.createElement('span');
|
||||
name.className = 'module-name';
|
||||
name.textContent = mod.name;
|
||||
|
||||
const version = document.createElement('span');
|
||||
version.className = 'module-version';
|
||||
version.textContent = mod.version ? 'v' + mod.version : '';
|
||||
|
||||
const spacer = document.createElement('span');
|
||||
spacer.className = 'spacer';
|
||||
|
||||
const toggleLabel = document.createElement('label');
|
||||
toggleLabel.className = 'switch';
|
||||
const toggle = document.createElement('input');
|
||||
toggle.type = 'checkbox';
|
||||
toggle.checked = mod.enabled;
|
||||
const track = document.createElement('span');
|
||||
track.className = 'track';
|
||||
const toggleText = document.createElement('span');
|
||||
toggleText.textContent = mod.enabled ? 'Enabled' : 'Disabled';
|
||||
toggleLabel.append(toggle, track, toggleText);
|
||||
|
||||
head.append(dot, name, version, spacer, toggleLabel);
|
||||
card.appendChild(head);
|
||||
|
||||
const desc = document.createElement('div');
|
||||
desc.className = 'module-desc';
|
||||
desc.textContent = mod.description;
|
||||
card.appendChild(desc);
|
||||
|
||||
const healthEl = document.createElement('div');
|
||||
healthEl.className = 'module-health ' + (healthClass(mod) === 'error' ? 'error' : '');
|
||||
healthEl.textContent = healthText(mod);
|
||||
card.appendChild(healthEl);
|
||||
|
||||
const mountError = document.createElement('div');
|
||||
mountError.className = 'module-mount-error';
|
||||
mountError.hidden = !mod.mountError;
|
||||
mountError.textContent = mod.mountError ? `Failed to start: ${mod.mountError}` : '';
|
||||
card.appendChild(mountError);
|
||||
|
||||
liveEls.set(mod.id, { dot, healthEl, toggle, toggleText, mountError });
|
||||
|
||||
toggle.addEventListener('change', async () => {
|
||||
try {
|
||||
await api(`/api/admin/modules/${encodeURIComponent(mod.id)}/enabled`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({ enabled: toggle.checked }),
|
||||
});
|
||||
toggleText.textContent = toggle.checked ? 'Enabled' : 'Disabled';
|
||||
toast(`${mod.name} ${toggle.checked ? 'enabled' : 'disabled'}`);
|
||||
refreshStatus();
|
||||
} catch (e) {
|
||||
toggle.checked = !toggle.checked;
|
||||
if (e.authRequired) showLogin();
|
||||
else toast(e.message, true);
|
||||
}
|
||||
});
|
||||
|
||||
const schemaKeys = Object.entries(mod.configSchema || {});
|
||||
if (schemaKeys.length) {
|
||||
const form = document.createElement('div');
|
||||
form.className = 'module-form';
|
||||
const readers = new Map();
|
||||
for (const [key, spec] of schemaKeys) {
|
||||
const { field, read } = fieldFor(key, spec, mod.config[key], mod.passwordSet[key]);
|
||||
readers.set(key, read);
|
||||
form.appendChild(field);
|
||||
}
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'module-actions';
|
||||
const save = document.createElement('button');
|
||||
save.className = 'btn primary';
|
||||
save.textContent = 'Save & re-init';
|
||||
const status = document.createElement('span');
|
||||
status.className = 'admin-status';
|
||||
actions.append(save, status);
|
||||
form.appendChild(actions);
|
||||
card.appendChild(form);
|
||||
|
||||
save.addEventListener('click', async () => {
|
||||
const config = {};
|
||||
for (const [key, read] of readers) config[key] = read();
|
||||
save.disabled = true;
|
||||
status.textContent = 'Saving…';
|
||||
status.className = 'admin-status';
|
||||
try {
|
||||
await api(`/api/admin/modules/${encodeURIComponent(mod.id)}/config`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({ config }),
|
||||
});
|
||||
status.textContent = 'Saved — module re-initialised. Open tiles reconnect on their own.';
|
||||
status.className = 'admin-status ok';
|
||||
refreshStatus();
|
||||
} catch (e) {
|
||||
status.textContent = e.message;
|
||||
status.className = 'admin-status error';
|
||||
if (e.authRequired) showLogin();
|
||||
} finally {
|
||||
save.disabled = false;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
const none = document.createElement('div');
|
||||
none.className = 'module-form-empty';
|
||||
none.textContent = 'No server-wide settings — this module is configured per tile.';
|
||||
card.appendChild(none);
|
||||
}
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
/* ── status refresh (leaves form inputs alone) ──────────────────────── */
|
||||
|
||||
async function refreshStatus() {
|
||||
let state;
|
||||
try {
|
||||
state = await api('/api/admin/state');
|
||||
} catch {
|
||||
return; // transient — the next tick will get it
|
||||
}
|
||||
for (const mod of state.modules || []) {
|
||||
const els = liveEls.get(mod.id);
|
||||
if (!els) continue;
|
||||
els.dot.className = 'dot ' + healthClass(mod);
|
||||
els.healthEl.textContent = healthText(mod);
|
||||
els.healthEl.className = 'module-health ' + (healthClass(mod) === 'error' ? 'error' : '');
|
||||
els.mountError.hidden = !mod.mountError;
|
||||
els.mountError.textContent = mod.mountError ? `Failed to start: ${mod.mountError}` : '';
|
||||
if (document.activeElement !== els.toggle) {
|
||||
els.toggle.checked = mod.enabled;
|
||||
els.toggleText.textContent = mod.enabled ? 'Enabled' : 'Disabled';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ── named layouts ──────────────────────────────────────────────────── */
|
||||
|
||||
async function loadLayouts() {
|
||||
let body;
|
||||
try {
|
||||
body = await api('/api/layouts');
|
||||
} catch {
|
||||
layoutsSection.hidden = true;
|
||||
return;
|
||||
}
|
||||
layoutsSection.hidden = false;
|
||||
layoutsList.innerHTML = '';
|
||||
const layouts = body.layouts || [];
|
||||
if (!layouts.length) {
|
||||
const none = document.createElement('div');
|
||||
none.className = 'layouts-empty';
|
||||
none.textContent = 'No named layouts saved yet. Save one from the dashboard’s Layout menu.';
|
||||
layoutsList.appendChild(none);
|
||||
return;
|
||||
}
|
||||
for (const layout of layouts) {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'layout-row';
|
||||
const name = document.createElement('span');
|
||||
name.className = 'name';
|
||||
name.textContent = layout.name;
|
||||
const meta = document.createElement('span');
|
||||
meta.className = 'meta';
|
||||
meta.textContent = `${layout.tiles} tile${layout.tiles === 1 ? '' : 's'}`
|
||||
+ (layout.updated ? ` · ${new Date(layout.updated).toLocaleString()}` : '');
|
||||
const rename = document.createElement('button');
|
||||
rename.className = 'btn';
|
||||
rename.textContent = 'Rename';
|
||||
rename.addEventListener('click', async () => {
|
||||
const next = prompt('New name for this layout:', layout.name);
|
||||
if (!next || next.trim() === '' || next === layout.name) return;
|
||||
try {
|
||||
await api(`/api/layouts/${encodeURIComponent(layout.name)}/rename`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ name: next.trim() }),
|
||||
});
|
||||
toast('Layout renamed');
|
||||
loadLayouts();
|
||||
} catch (e) {
|
||||
if (e.authRequired) showLogin();
|
||||
else toast(e.message, true);
|
||||
}
|
||||
});
|
||||
const del = document.createElement('button');
|
||||
del.className = 'btn';
|
||||
del.textContent = 'Delete';
|
||||
del.addEventListener('click', async () => {
|
||||
if (!confirm(`Delete the layout “${layout.name}”? Browsers using it keep their current tiles.`)) return;
|
||||
try {
|
||||
await api(`/api/layouts/${encodeURIComponent(layout.name)}`, { method: 'DELETE' });
|
||||
toast('Layout deleted');
|
||||
loadLayouts();
|
||||
} catch (e) {
|
||||
if (e.authRequired) showLogin();
|
||||
else toast(e.message, true);
|
||||
}
|
||||
});
|
||||
row.append(name, meta, rename, del);
|
||||
layoutsList.appendChild(row);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── boot ───────────────────────────────────────────────────────────── */
|
||||
|
||||
async function loadState() {
|
||||
let state;
|
||||
try {
|
||||
state = await api('/api/admin/state');
|
||||
} catch (e) {
|
||||
if (e.status === 401 || e.authRequired) {
|
||||
showLogin();
|
||||
return;
|
||||
}
|
||||
toast('ProdDash server unreachable — retrying…', true);
|
||||
setTimeout(loadState, 4000);
|
||||
return;
|
||||
}
|
||||
loginCard.hidden = true;
|
||||
modulesSection.hidden = false;
|
||||
modulesList.innerHTML = '';
|
||||
liveEls.clear();
|
||||
for (const mod of state.modules || []) {
|
||||
modulesList.appendChild(buildModuleCard(mod));
|
||||
}
|
||||
loadLayouts();
|
||||
}
|
||||
|
||||
setInterval(() => {
|
||||
if (modulesSection.hidden) return;
|
||||
refreshStatus();
|
||||
}, 5000);
|
||||
|
||||
loadState();
|
||||
@@ -0,0 +1,49 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>ProdDash Admin</title>
|
||||
<meta name="theme-color" content="#0b0e12">
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<link rel="stylesheet" href="/admin/admin.css">
|
||||
</head>
|
||||
<body>
|
||||
<header id="topbar">
|
||||
<span id="brand">Prod<span class="accent">Dash</span> <span class="admin-tag">Admin</span></span>
|
||||
<span class="spacer"></span>
|
||||
<a class="tb-btn" href="/">← Dashboard</a>
|
||||
</header>
|
||||
|
||||
<main id="admin-main">
|
||||
<section class="admin-card" id="login-card" hidden>
|
||||
<h2>Admin passcode</h2>
|
||||
<p class="admin-copy">This page changes the server-wide configuration for every dashboard in the building.</p>
|
||||
<div class="login-row">
|
||||
<input type="password" id="passcode" placeholder="Passcode" autocomplete="current-password">
|
||||
<button class="btn primary" id="login-btn">Unlock</button>
|
||||
</div>
|
||||
<div class="admin-status" id="login-status"></div>
|
||||
</section>
|
||||
|
||||
<section id="modules-section" hidden>
|
||||
<h1 class="admin-h1">Modules</h1>
|
||||
<p class="admin-copy">Server-wide settings, shared by every dashboard. Saving re-initialises the
|
||||
module immediately — open tiles reconnect on their own. Per-tile options (filters, text size)
|
||||
live in each tile's gear menu instead.</p>
|
||||
<div id="modules-list"></div>
|
||||
</section>
|
||||
|
||||
<section id="layouts-section" hidden>
|
||||
<h1 class="admin-h1">Named layouts</h1>
|
||||
<p class="admin-copy">Layouts saved to the server from the dashboard's Layout menu. Loading one
|
||||
copies it into that browser; deleting one here does not touch any browser's current layout.</p>
|
||||
<div id="layouts-list"></div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div id="toast" hidden></div>
|
||||
|
||||
<script type="module" src="/admin/admin.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+55
-2
@@ -461,8 +461,11 @@ function buildModuleApi(tile, man, entry) {
|
||||
id: man.id,
|
||||
instanceId: tile.id,
|
||||
|
||||
/** Admin (server-wide) config, read-only. Password fields never reach the client. */
|
||||
config: Object.freeze({ ...(man.config || {}) }),
|
||||
/** Admin (server-wide) config, read-only. Password fields never reach
|
||||
the client. Live: reflects the latest registry after admin saves. */
|
||||
get config() {
|
||||
return { ...((registry.get(man.id) || man).config || {}) };
|
||||
},
|
||||
|
||||
/** Per-tile settings: schema defaults overlaid with what this tile saved. */
|
||||
get instanceSettings() {
|
||||
@@ -716,6 +719,55 @@ wireDropdown('layout-btn', 'layout-menu', async (menu) => {
|
||||
}, { danger: true, sub: 'Remove every tile from this browser' }));
|
||||
});
|
||||
|
||||
/* ── live updates from the admin page ───────────────────────────────── */
|
||||
|
||||
/* The server broadcasts `modules-changed` on /api/events whenever admin
|
||||
config or enabled flags change. Tiles of a changed module get
|
||||
onConfigChange(cfg) if they implement it, otherwise a clean remount. */
|
||||
|
||||
let eventsSource = null;
|
||||
let eventsRetry = null;
|
||||
|
||||
function subscribeEvents() {
|
||||
try { eventsSource?.close(); } catch { /* not open */ }
|
||||
eventsSource = new EventSource('/api/events');
|
||||
eventsSource.addEventListener('modules-changed', () => handleModulesChanged());
|
||||
eventsSource.onerror = () => {
|
||||
if (eventsSource.readyState === EventSource.CLOSED) {
|
||||
clearTimeout(eventsRetry);
|
||||
eventsRetry = setTimeout(subscribeEvents, 4000);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
async function handleModulesChanged() {
|
||||
const before = registry;
|
||||
if (!(await loadRegistry())) return;
|
||||
for (const tile of [...tiles]) {
|
||||
const oldMan = before.get(tile.module);
|
||||
const newMan = registry.get(tile.module);
|
||||
if (!newMan !== !oldMan) {
|
||||
// enabled or disabled: rebuild the tile body (shows the module, or
|
||||
// an "unavailable" note)
|
||||
remountTile(tile);
|
||||
continue;
|
||||
}
|
||||
if (!newMan) continue;
|
||||
if (JSON.stringify(oldMan.config || {}) !== JSON.stringify(newMan.config || {})) {
|
||||
const entry = tileEls.get(tile.id);
|
||||
if (typeof entry?.instance?.onConfigChange === 'function') {
|
||||
try {
|
||||
entry.instance.onConfigChange({ ...newMan.config });
|
||||
} catch {
|
||||
remountTile(tile);
|
||||
}
|
||||
} else {
|
||||
remountTile(tile);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ── boot ───────────────────────────────────────────────────────────── */
|
||||
|
||||
async function boot() {
|
||||
@@ -726,6 +778,7 @@ async function boot() {
|
||||
return;
|
||||
}
|
||||
renderLayout(loadLayoutFromStorage());
|
||||
subscribeEvents();
|
||||
}
|
||||
|
||||
boot();
|
||||
|
||||
Reference in New Issue
Block a user