e368ea41d8
Adds HTML5 drag-to-reorder for .sv-card elements in Sacred Valley. The pure moveId helper is unit-tested. Drop calls PUT /api/dashboard/layout to persist the new card_order; DOM reflects the new order immediately. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
44 lines
1.9 KiB
JavaScript
44 lines
1.9 KiB
JavaScript
import { el, mount } from '../dom.js';
|
|
import { api } from '../api.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';
|
|
|
|
const CARD_MODULES = [clock, weather, hostPerf]; // grows in later tasks
|
|
let active = []; // mounted cards needing stop()
|
|
|
|
export async function render(main) {
|
|
active.forEach(c => c.stop && c.stop()); active = [];
|
|
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' })
|
|
);
|
|
|
|
let layout = { card_order: [], hidden: [], sizes: {} };
|
|
try { layout = await api.get('/api/dashboard/layout'); } catch { /* defaults */ }
|
|
|
|
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); }
|
|
});
|
|
// health band wiring arrives in Task 22.
|
|
}
|