Hynes/Void-Homelab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(devices): DB-backed devices band + discovered review/add/edit UI

Browse Source
This commit is contained in:
root
2026-06-08 21:06:05 +10:00
parent 0fe25d96ec
commit 056e6a099b
3 changed files with 105 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
public/style.css
View File

@@ -566,6 +566,14 @@ body.drawer-open #scrim { opacity: 1; pointer-events: auto; }
.dv-tile .dv-vendor { font-family: var(--font-ui); font-size: 11px; color: var(--muted); opacity: .7; }
.dv-tile.flag { border-color: var(--bad); background: #1a1012; }
.dv-tile.flag .dv-nm { color: var(--bad); }
.dv-tile.absent { opacity: .5; }
.dv-discovered { border: 1px solid var(--accent-dim); border-radius: 6px; padding: 10px 12px; margin: 10px 0; background: var(--accent-soft); }
.dv-disc-hd { font-family: var(--font-display); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); margin-bottom: 8px; }
.dv-disc-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 5px 0; }
.dv-disc-row .dv-edit-name { flex: 1 1 120px; }
.dv-disc-row .dv-add { background: var(--accent-dim); color: var(--text); border: 1px solid var(--accent); border-radius: 3px; padding: 4px 10px; cursor: pointer; font-family: var(--font-ui); font-size: 12px; }
.dv-disc-row .dv-add:hover { background: var(--accent); color: var(--bg); }
.dv-disc-row .ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: 3px; padding: 4px 10px; cursor: pointer; font-size: 12px; }
/* ===== Discovered services + scan (Plan: DB-backed registry) ===== */
.lb-scan { background: var(--accent-soft); border: 1px solid var(--accent-dim); color: var(--accent);

91
public/views/devices_band.js
View File

@@ -1,36 +1,67 @@
// Network Devices band — IoT / personal / unknown LAN devices, kept SEPARATE
// from Little Blue's homelab-service health band. Read-only, static source
// (public/devices.json), no health probing. Live discovery comes later.
import { el, mount } from '../dom.js';
// Network Devices band — DB-backed (GET /api/devices). Shows IP+MAC+vendor,
// a randomized-MAC badge, and an owner "Discovered" review panel to name/promote
// newly-seen devices. Kept SEPARATE from Little Blue's homelab-service band.
import { el, mount, clear } from '../dom.js';
import { api } from '../api.js';
let host;
const GROUPS = ['Smart Home', 'Entertainment', 'Personal', 'Network', 'Flagged'];
function tile(d) {
return el('div', { class: 'dv-tile' + (d.flagged ? ' flag' : '') + (d.present === false ? ' absent' : '') },
el('span', { class: 'dv-nm' }, d.name || 'Unknown'),
el('span', { class: 'dv-ip' }, d.ip || ''),
d.mac ? el('span', { class: 'dv-mac' }, d.mac) : null,
el('span', { class: 'dv-vendor' },
(d.vendor || '') + (d.randomized ? ' · randomized' : '') + (d.present === false ? ' · absent' : '')));
}
function discoveredRow(d, onDone) {
const nameI = el('input', { class: 'dv-edit-name', placeholder: d.vendor || 'name', value: d.name || '' });
const grpS = el('select', { class: 'dv-edit-grp' }, ...GROUPS.map(g => el('option', { value: g }, g)));
const add = el('button', { class: 'dv-add' }, 'Add');
add.onclick = async () => {
await api.patch('/api/devices/' + d.mac, { name: nameI.value.trim() || null, grp: grpS.value, status: 'known', flagged: false });
onDone();
};
const ignore = el('button', { class: 'ghost dv-ignore' }, 'Ignore');
ignore.onclick = async () => { await api.patch('/api/devices/' + d.mac, { status: 'ignored' }); onDone(); };
return el('div', { class: 'dv-disc-row' },
el('span', { class: 'dv-ip' }, d.ip || ''),
el('span', { class: 'dv-mac' }, d.mac + (d.randomized ? ' · randomized' : '')),
el('span', { class: 'dv-vendor' }, d.vendor || ''),
nameI, grpS, add, ignore);
}
async function load() {
if (!host) return;
try {
const res = await fetch('/devices.json');
const data = await res.json();
const total = data.groups.reduce((n, g) => n + g.devices.length, 0);
const sections = data.groups.map(g =>
el('div', { class: 'dv-section' },
el('div', { class: 'dv-group' },
el('span', { class: 'gname' }, g.name),
el('span', { class: 'gcount' }, String(g.devices.length)),
el('span', { class: 'line' })),
el('div', { class: 'dv-tiles' }, g.devices.map(d =>
el('div', { class: 'dv-tile' + (d.flag ? ' flag' : '') },
el('span', { class: 'dv-nm' }, d.name),
el('span', { class: 'dv-ip' }, d.ip),
d.mac ? el('span', { class: 'dv-mac' }, d.mac) : null,
el('span', { class: 'dv-vendor' }, d.vendor || ''))))));
mount(host,
el('div', { class: 'dv-hd' },
el('div', { class: 'dv-title' }, 'Network · Devices'),
el('span', { class: 'dv-count' }, `${total} on the LAN`)),
el('div', { class: 'dv-note' }, data.note || ''),
sections);
} catch {
mount(host, el('span', { class: 'muted' }, 'Device list unavailable'));
}
let data, discovered = [];
try { data = await api.get('/api/devices'); } catch { mount(host, el('div', { class: 'dv-note' }, 'Devices unavailable')); return; }
try { discovered = await api.get('/api/devices/discovered'); } catch { /* owner-only; ignore for non-owner */ }
const total = data.groups.reduce((n, g) => n + g.devices.length, 0);
const sections = data.groups.map(g =>
el('div', { class: 'dv-section' },
el('div', { class: 'dv-group' },
el('span', { class: 'gname' }, g.name),
el('span', { class: 'gcount' }, String(g.devices.length)),
el('span', { class: 'line' })),
el('div', { class: 'dv-tiles' }, g.devices.map(tile))));
const discPanel = discovered.length
? el('div', { class: 'dv-discovered' },
el('div', { class: 'dv-disc-hd' }, `Discovered · ${discovered.length} awaiting review`),
...discovered.map(d => discoveredRow(d, load)))
: null;
clear(host);
mount(host,
el('div', { class: 'dv-hd' },
el('div', { class: 'dv-title' }, 'Network · Devices'),
el('span', { class: 'dv-count' }, `${total} known${discovered.length ? ` · ${discovered.length} new` : ''}`)),
...sections,
discPanel);
}
export function renderDevicesBand(el_) { host = el_; load(); }
export function renderDevicesBand(root) { host = root; return load(); }
export function stopDevicesBand() { host = null; }