1e1d0c539d
Read-only static band from public/devices.json (ARP scan), grouped Smart Home / Entertainment / Personal / Network / Flagged. Kept distinct from Little Blue's service health band. Live discovery deferred. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
57 lines
2.6 KiB
JavaScript
57 lines
2.6 KiB
JavaScript
import { el, mount } from '../dom.js';
|
|
import { api } from '../api.js';
|
|
import { renderHealthBand, stopHealthBand } from './health_band.js';
|
|
import { renderDevicesBand, stopDevicesBand } from './devices_band.js';
|
|
import { svCard } from '../components/sv_card.js';
|
|
import { attachReorder } from '../components/sv_reorder.js';
|
|
import { orderCards } from './cards/registry.js';
|
|
import clock from './cards/clock.js';
|
|
import weather from './cards/weather.js';
|
|
import hostPerf from './cards/host_perf.js';
|
|
import jobs from './cards/jobs.js';
|
|
import inbox from './cards/inbox.js';
|
|
import search from './cards/search.js';
|
|
import speedtest from './cards/speedtest.js';
|
|
|
|
const CARD_MODULES = [clock, weather, hostPerf, jobs, inbox, search, speedtest]; // grows in later tasks
|
|
let active = []; // mounted cards needing stop()
|
|
let renderGen = 0; // guards against overlapping async renders
|
|
|
|
export async function render(main) {
|
|
const myGen = ++renderGen;
|
|
active.forEach(c => c.stop && c.stop()); active = []; stopHealthBand(); stopDevicesBand();
|
|
mount(main,
|
|
el('h1', { class: 'view-h1' }, 'Sacred Valley'),
|
|
el('p', { class: 'view-sub' }, 'The homelab, at a glance.'),
|
|
el('div', { id: 'sv-cards' }),
|
|
el('div', { id: 'sv-health' }),
|
|
el('div', { id: 'sv-devices' })
|
|
);
|
|
|
|
let layout = { card_order: [], hidden: [], sizes: {} };
|
|
try { layout = await api.get('/api/dashboard/layout'); } catch { /* defaults */ }
|
|
// A newer render() started while we awaited — bail before mounting timers/DOM
|
|
// so we don't double-mount cards or leak intervals onto the live grid.
|
|
if (myGen !== renderGen) return;
|
|
|
|
const grid = document.getElementById('sv-cards');
|
|
const ordered = orderCards(CARD_MODULES, layout);
|
|
for (const def of ordered) {
|
|
const size = layout.sizes?.[def.id] || def.size;
|
|
const { root, body } = svCard({ ...def, size });
|
|
grid.appendChild(root);
|
|
try { def.mount(body); def.start && def.start(); active.push(def); }
|
|
catch (e) { body.appendChild(el('span', { class: 'muted' }, 'card failed')); console.error(def.id, e); }
|
|
}
|
|
attachReorder(grid, async (newOrder) => {
|
|
// reflect immediately
|
|
const frag = document.createDocumentFragment();
|
|
newOrder.forEach(id => { const n = grid.querySelector(`.sv-card[data-card-id="${id}"]`); if (n) frag.appendChild(n); });
|
|
grid.appendChild(frag);
|
|
try { await api.put('/api/dashboard/layout', { ...layout, card_order: newOrder }); layout.card_order = newOrder; }
|
|
catch (e) { console.error('save layout', e); }
|
|
});
|
|
renderHealthBand(document.getElementById('sv-health'));
|
|
renderDevicesBand(document.getElementById('sv-devices'));
|
|
}
|