chore(release): beta-1.03
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -2,6 +2,48 @@
|
||||
let pollTimer = null;
|
||||
let lastBeatSeq = 0;
|
||||
|
||||
const STORAGE_KEY = "led-controller-audio-restore";
|
||||
const STORAGE_VERSION = 1;
|
||||
|
||||
function readRestorePrefs() {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY);
|
||||
if (!raw) return null;
|
||||
const o = JSON.parse(raw);
|
||||
if (!o || o.v !== STORAGE_VERSION || !o.restore) return null;
|
||||
return {
|
||||
override: typeof o.override === "string" ? o.override : "",
|
||||
select: typeof o.select === "string" ? o.select : "",
|
||||
};
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function writeRestorePrefs(override, select) {
|
||||
try {
|
||||
localStorage.setItem(
|
||||
STORAGE_KEY,
|
||||
JSON.stringify({
|
||||
v: STORAGE_VERSION,
|
||||
restore: true,
|
||||
override: override || "",
|
||||
select: select || "",
|
||||
}),
|
||||
);
|
||||
} catch (e) {
|
||||
console.warn("audio restore prefs save failed", e);
|
||||
}
|
||||
}
|
||||
|
||||
function clearRestorePrefs() {
|
||||
try {
|
||||
localStorage.removeItem(STORAGE_KEY);
|
||||
} catch (e) {
|
||||
console.warn("audio restore prefs clear failed", e);
|
||||
}
|
||||
}
|
||||
|
||||
function el(id) {
|
||||
return document.getElementById(id);
|
||||
}
|
||||
@@ -31,19 +73,27 @@
|
||||
node.textContent = `${label}${conf}`;
|
||||
}
|
||||
|
||||
function setTopBpmVisible(on) {
|
||||
const top = el("audio-top-indicator");
|
||||
if (!top) return;
|
||||
top.classList.toggle("audio-running", !!on);
|
||||
}
|
||||
|
||||
function flashBeat() {
|
||||
const node = el("audio-beat-flash");
|
||||
if (!node) return;
|
||||
node.classList.add("active");
|
||||
setTimeout(() => node.classList.remove("active"), 80);
|
||||
const top = el("audio-top-indicator");
|
||||
if (top) {
|
||||
if (top && top.classList.contains("audio-running")) {
|
||||
top.classList.add("flash");
|
||||
setTimeout(() => top.classList.remove("flash"), 90);
|
||||
}
|
||||
}
|
||||
|
||||
async function stopAudio() {
|
||||
/** Stop detector and polling; does not clear “resume on load” prefs (used before restart). */
|
||||
async function stopAudioOnly() {
|
||||
setTopBpmVisible(false);
|
||||
if (pollTimer) {
|
||||
clearInterval(pollTimer);
|
||||
pollTimer = null;
|
||||
@@ -57,6 +107,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
/** User-initiated stop: also forget auto-restart on next page load. */
|
||||
async function stopAudio() {
|
||||
await stopAudioOnly();
|
||||
clearRestorePrefs();
|
||||
}
|
||||
|
||||
async function pollStatus() {
|
||||
try {
|
||||
const res = await fetch("/api/audio/status");
|
||||
@@ -68,12 +124,14 @@
|
||||
node.textContent = String(status.error).trim().slice(0, 120);
|
||||
}
|
||||
updateBpmDisplay(null);
|
||||
setTopBpmVisible(!!status.running);
|
||||
if (!status.running && pollTimer) {
|
||||
clearInterval(pollTimer);
|
||||
pollTimer = null;
|
||||
}
|
||||
return;
|
||||
}
|
||||
setTopBpmVisible(!!status.running);
|
||||
updateBpmDisplay(status.bpm);
|
||||
updateHitTypeDisplay(status.beat_type, Number(status.beat_type_confidence));
|
||||
const seq = Number(status.beat_seq || 0);
|
||||
@@ -88,7 +146,7 @@
|
||||
}
|
||||
|
||||
async function startAudio() {
|
||||
await stopAudio();
|
||||
await stopAudioOnly();
|
||||
const override = (el("audio-device-override")?.value || "").trim();
|
||||
const selected = el("audio-device-select")?.value || "";
|
||||
const rawDevice = override !== "" ? override : selected;
|
||||
@@ -103,6 +161,7 @@
|
||||
const data = await res.json().catch(() => ({}));
|
||||
throw new Error(data.error || "Failed to start audio detector");
|
||||
}
|
||||
writeRestorePrefs(override, selected);
|
||||
updateBpmDisplay(null);
|
||||
updateHitTypeDisplay("unknown", NaN);
|
||||
updateBeatCounter(0);
|
||||
@@ -211,8 +270,30 @@
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
async function restoreAudioIfNeeded() {
|
||||
if (pollTimer) return;
|
||||
const prefs = readRestorePrefs();
|
||||
if (!prefs) return;
|
||||
const ov = el("audio-device-override");
|
||||
const sel = el("audio-device-select");
|
||||
if (ov) ov.value = prefs.override || "";
|
||||
try {
|
||||
await refreshDevices();
|
||||
} catch (e) {
|
||||
console.warn("audio restore refresh devices failed", e);
|
||||
}
|
||||
if (sel && prefs.select) sel.value = prefs.select;
|
||||
try {
|
||||
await startAudio();
|
||||
} catch (e) {
|
||||
console.warn("audio auto-restart failed", e);
|
||||
clearRestorePrefs();
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", async () => {
|
||||
bind();
|
||||
resumePollingIfDetectorRunning();
|
||||
await resumePollingIfDetectorRunning();
|
||||
await restoreAudioIfNeeded();
|
||||
});
|
||||
})();
|
||||
|
||||
@@ -149,8 +149,10 @@ function applyTransportVisibility(transport) {
|
||||
const isWifi = transport === 'wifi';
|
||||
const esp = document.getElementById('edit-device-address-espnow');
|
||||
const wifiWrap = document.getElementById('edit-device-address-wifi-wrap');
|
||||
const drvWrap = document.getElementById('edit-device-wifi-driver-wrap');
|
||||
if (esp) esp.hidden = isWifi;
|
||||
if (wifiWrap) wifiWrap.hidden = !isWifi;
|
||||
if (drvWrap) drvWrap.hidden = !isWifi;
|
||||
}
|
||||
|
||||
function getAddressForPayload(transport) {
|
||||
@@ -166,6 +168,63 @@ function getAddressForPayload(transport) {
|
||||
return hex || null;
|
||||
}
|
||||
|
||||
function collectDeviceEditPayload() {
|
||||
const idInput = document.getElementById('edit-device-id');
|
||||
const nameInput = document.getElementById('edit-device-name');
|
||||
const typeSel = document.getElementById('edit-device-type');
|
||||
const transportSel = document.getElementById('edit-device-transport');
|
||||
const devId = idInput && idInput.value;
|
||||
const transport = (transportSel && transportSel.value) || 'espnow';
|
||||
const address = getAddressForPayload(transport);
|
||||
const obr = document.getElementById('edit-device-output-brightness');
|
||||
let output_brightness = 255;
|
||||
if (obr && obr.value !== '') {
|
||||
const n = parseInt(obr.value, 10);
|
||||
output_brightness = !Number.isNaN(n) ? Math.max(0, Math.min(255, n)) : 255;
|
||||
}
|
||||
const payload = {
|
||||
name: nameInput ? nameInput.value.trim() : '',
|
||||
type: (typeSel && typeSel.value) || 'led',
|
||||
transport,
|
||||
address,
|
||||
output_brightness,
|
||||
};
|
||||
if (transport === 'wifi') {
|
||||
const dn = document.getElementById('edit-device-wifi-driver-name');
|
||||
const nl = document.getElementById('edit-device-wifi-num-leds');
|
||||
const co = document.getElementById('edit-device-wifi-color-order');
|
||||
const ws = document.getElementById('edit-device-wifi-startup-mode');
|
||||
if (dn && dn.value.trim()) payload.wifi_driver_display_name = dn.value.trim();
|
||||
if (nl && nl.value !== '') {
|
||||
const n = parseInt(nl.value, 10);
|
||||
if (!Number.isNaN(n) && n >= 1) payload.wifi_driver_num_leds = n;
|
||||
}
|
||||
if (co && co.value) payload.wifi_color_order = co.value;
|
||||
if (ws && ws.value) payload.wifi_startup_mode = ws.value;
|
||||
}
|
||||
return { devId, payload };
|
||||
}
|
||||
|
||||
function refreshEditDeviceDebug() {
|
||||
const ta = document.getElementById('edit-device-debug');
|
||||
if (!ta) return;
|
||||
try {
|
||||
const { devId, payload } = collectDeviceEditPayload();
|
||||
const loaded = window.__editDeviceLoadedSnapshot;
|
||||
ta.value = JSON.stringify(
|
||||
{
|
||||
device_id: devId || null,
|
||||
loaded_from_server: loaded != null ? loaded : null,
|
||||
save_payload_preview: payload,
|
||||
},
|
||||
null,
|
||||
2,
|
||||
);
|
||||
} catch (e) {
|
||||
ta.value = String(e);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadDevicesModal() {
|
||||
const container = document.getElementById('devices-list-modal');
|
||||
if (!container) return;
|
||||
@@ -307,6 +366,11 @@ function renderDevicesList(devices) {
|
||||
}
|
||||
|
||||
function openEditDeviceModal(devId, dev) {
|
||||
try {
|
||||
window.__editDeviceLoadedSnapshot = dev ? JSON.parse(JSON.stringify(dev)) : null;
|
||||
} catch (e) {
|
||||
window.__editDeviceLoadedSnapshot = dev || null;
|
||||
}
|
||||
const modal = document.getElementById('edit-device-modal');
|
||||
const idInput = document.getElementById('edit-device-id');
|
||||
const storageLabel = document.getElementById('edit-device-storage-id');
|
||||
@@ -325,20 +389,83 @@ function openEditDeviceModal(devId, dev) {
|
||||
applyTransportVisibility(tr);
|
||||
setAddressToBoxes(addressBoxes, tr === 'espnow' ? ((dev && dev.address) || '') : '');
|
||||
if (wifiInput) wifiInput.value = tr === 'wifi' ? ((dev && dev.address) || '') : '';
|
||||
const wName = document.getElementById('edit-device-wifi-driver-name');
|
||||
const wLeds = document.getElementById('edit-device-wifi-num-leds');
|
||||
const wCo = document.getElementById('edit-device-wifi-color-order');
|
||||
const wStart = document.getElementById('edit-device-wifi-startup-mode');
|
||||
if (wName) {
|
||||
const savedDisp =
|
||||
dev && Object.prototype.hasOwnProperty.call(dev, 'wifi_driver_display_name')
|
||||
? dev.wifi_driver_display_name
|
||||
: undefined;
|
||||
if (savedDisp != null && String(savedDisp).trim() !== '') {
|
||||
wName.value = String(savedDisp).trim();
|
||||
} else {
|
||||
wName.value = dev && dev.name ? String(dev.name) : '';
|
||||
}
|
||||
}
|
||||
if (wLeds) {
|
||||
wLeds.value =
|
||||
dev && dev.wifi_driver_num_leds != null && dev.wifi_driver_num_leds !== ''
|
||||
? String(dev.wifi_driver_num_leds)
|
||||
: '';
|
||||
}
|
||||
if (wCo) {
|
||||
const co = (dev && dev.wifi_color_order) || 'rgb';
|
||||
wCo.value = ['rgb', 'rbg', 'grb', 'gbr', 'brg', 'bgr'].includes(String(co).toLowerCase())
|
||||
? String(co).toLowerCase()
|
||||
: 'rgb';
|
||||
}
|
||||
if (wStart) {
|
||||
const sm = (dev && dev.wifi_startup_mode) || 'default';
|
||||
wStart.value = ['default', 'last', 'off'].includes(String(sm).toLowerCase())
|
||||
? String(sm).toLowerCase()
|
||||
: 'default';
|
||||
}
|
||||
const obr = document.getElementById('edit-device-output-brightness');
|
||||
const obv = document.getElementById('edit-device-output-brightness-value');
|
||||
if (obr) {
|
||||
let bv = 255;
|
||||
if (dev && dev.output_brightness != null && dev.output_brightness !== '') {
|
||||
const n = parseInt(String(dev.output_brightness), 10);
|
||||
if (!Number.isNaN(n)) bv = Math.max(0, Math.min(255, n));
|
||||
}
|
||||
obr.value = String(bv);
|
||||
if (obv) obv.textContent = String(bv);
|
||||
}
|
||||
refreshEditDeviceDebug();
|
||||
modal.classList.add('active');
|
||||
}
|
||||
|
||||
async function updateDevice(devId, name, type, transport, address) {
|
||||
async function updateDevice(devId, name, type, transport, address, wifiDriverFields, outputBrightness) {
|
||||
try {
|
||||
const payload = {
|
||||
name,
|
||||
type: type || 'led',
|
||||
transport: transport || 'espnow',
|
||||
address,
|
||||
};
|
||||
if (typeof outputBrightness === 'number') {
|
||||
payload.output_brightness = Math.max(0, Math.min(255, Math.round(outputBrightness)));
|
||||
}
|
||||
if (transport === 'wifi' && wifiDriverFields && typeof wifiDriverFields === 'object') {
|
||||
if (wifiDriverFields.wifi_driver_display_name != null) {
|
||||
payload.wifi_driver_display_name = wifiDriverFields.wifi_driver_display_name;
|
||||
}
|
||||
if (wifiDriverFields.wifi_driver_num_leds != null) {
|
||||
payload.wifi_driver_num_leds = wifiDriverFields.wifi_driver_num_leds;
|
||||
}
|
||||
if (wifiDriverFields.wifi_color_order != null) {
|
||||
payload.wifi_color_order = wifiDriverFields.wifi_color_order;
|
||||
}
|
||||
if (wifiDriverFields.wifi_startup_mode != null) {
|
||||
payload.wifi_startup_mode = wifiDriverFields.wifi_startup_mode;
|
||||
}
|
||||
}
|
||||
const res = await fetch(`/devices/${encodeURIComponent(devId)}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
name,
|
||||
type: type || 'led',
|
||||
transport: transport || 'espnow',
|
||||
address,
|
||||
}),
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (res.ok) {
|
||||
@@ -354,6 +481,41 @@ async function updateDevice(devId, name, type, transport, address) {
|
||||
}
|
||||
}
|
||||
|
||||
async function pushWifiDriverConfig(devId, fields) {
|
||||
const push = {};
|
||||
if (fields.name != null && String(fields.name).trim()) push.name = String(fields.name).trim();
|
||||
if (fields.num_leds != null && fields.num_leds !== '') {
|
||||
const n = parseInt(String(fields.num_leds), 10);
|
||||
if (!Number.isNaN(n) && n >= 1) push.num_leds = n;
|
||||
}
|
||||
if (fields.color_order != null && String(fields.color_order).trim()) {
|
||||
push.color_order = String(fields.color_order).trim().toLowerCase();
|
||||
}
|
||||
if (fields.startup_mode != null && String(fields.startup_mode).trim()) {
|
||||
const sm = String(fields.startup_mode).trim().toLowerCase();
|
||||
if (sm === 'default' || sm === 'last' || sm === 'off') push.startup_mode = sm;
|
||||
}
|
||||
if (Object.keys(push).length === 0) return { ok: true, skipped: true };
|
||||
try {
|
||||
const res = await fetch(`/devices/${encodeURIComponent(devId)}/driver-config`, {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
|
||||
body: JSON.stringify(push),
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) {
|
||||
alert(data.error || 'Could not send settings to the driver (is it connected?)');
|
||||
return { ok: false };
|
||||
}
|
||||
return { ok: true };
|
||||
} catch (e) {
|
||||
console.error('pushWifiDriverConfig:', e);
|
||||
alert('Could not send settings to the driver');
|
||||
return { ok: false };
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
window.addEventListener('deviceTcpStatus', (ev) => {
|
||||
const { ip, connected } = ev.detail || {};
|
||||
@@ -380,10 +542,19 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
makeHexAddressBoxes(document.getElementById('edit-device-address-boxes'));
|
||||
|
||||
const devOutBr = document.getElementById('edit-device-output-brightness');
|
||||
const devOutBrVal = document.getElementById('edit-device-output-brightness-value');
|
||||
if (devOutBr && devOutBrVal) {
|
||||
devOutBr.addEventListener('input', () => {
|
||||
devOutBrVal.textContent = devOutBr.value;
|
||||
});
|
||||
}
|
||||
|
||||
const transportEdit = document.getElementById('edit-device-transport');
|
||||
if (transportEdit) {
|
||||
transportEdit.addEventListener('change', () => {
|
||||
applyTransportVisibility(transportEdit.value);
|
||||
refreshEditDeviceDebug();
|
||||
});
|
||||
}
|
||||
|
||||
@@ -420,24 +591,67 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
|
||||
if (editForm) {
|
||||
editForm.addEventListener('input', () => refreshEditDeviceDebug());
|
||||
editForm.addEventListener('change', () => refreshEditDeviceDebug());
|
||||
editForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const idInput = document.getElementById('edit-device-id');
|
||||
const nameInput = document.getElementById('edit-device-name');
|
||||
const typeSel = document.getElementById('edit-device-type');
|
||||
const transportSel = document.getElementById('edit-device-transport');
|
||||
const devId = idInput && idInput.value;
|
||||
const { devId, payload } = collectDeviceEditPayload();
|
||||
if (!devId) return;
|
||||
const transport = (transportSel && transportSel.value) || 'espnow';
|
||||
const address = getAddressForPayload(transport);
|
||||
const transport = payload.transport || 'espnow';
|
||||
let wifiDriverFields = null;
|
||||
if (transport === 'wifi') {
|
||||
wifiDriverFields = {};
|
||||
if (payload.wifi_driver_display_name != null) {
|
||||
wifiDriverFields.wifi_driver_display_name = payload.wifi_driver_display_name;
|
||||
}
|
||||
if (payload.wifi_driver_num_leds != null) {
|
||||
wifiDriverFields.wifi_driver_num_leds = payload.wifi_driver_num_leds;
|
||||
}
|
||||
if (payload.wifi_color_order != null) {
|
||||
wifiDriverFields.wifi_color_order = payload.wifi_color_order;
|
||||
}
|
||||
if (payload.wifi_startup_mode != null) {
|
||||
wifiDriverFields.wifi_startup_mode = payload.wifi_startup_mode;
|
||||
}
|
||||
}
|
||||
const ok = await updateDevice(
|
||||
devId,
|
||||
nameInput ? nameInput.value.trim() : '',
|
||||
(typeSel && typeSel.value) || 'led',
|
||||
payload.name,
|
||||
payload.type,
|
||||
transport,
|
||||
address
|
||||
payload.address,
|
||||
wifiDriverFields,
|
||||
payload.output_brightness,
|
||||
);
|
||||
if (ok) editDeviceModal.classList.remove('active');
|
||||
if (!ok) return;
|
||||
try {
|
||||
const brRes = await fetch(`/devices/${encodeURIComponent(devId)}/brightness`, {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({}),
|
||||
});
|
||||
if (!brRes.ok && brRes.status !== 503) {
|
||||
const brData = await brRes.json().catch(() => ({}));
|
||||
console.warn('brightness push:', brData.error || brRes.status);
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('brightness push failed', e);
|
||||
}
|
||||
if (transport === 'wifi' && wifiDriverFields) {
|
||||
const dn = document.getElementById('edit-device-wifi-driver-name');
|
||||
const nl = document.getElementById('edit-device-wifi-num-leds');
|
||||
const co = document.getElementById('edit-device-wifi-color-order');
|
||||
const ws = document.getElementById('edit-device-wifi-startup-mode');
|
||||
const pushRes = await pushWifiDriverConfig(devId, {
|
||||
name: dn ? dn.value : '',
|
||||
num_leds: nl ? nl.value : '',
|
||||
color_order: co ? co.value : '',
|
||||
startup_mode: ws ? ws.value : '',
|
||||
});
|
||||
if (!pushRes.ok) return;
|
||||
}
|
||||
editDeviceModal.classList.remove('active');
|
||||
});
|
||||
}
|
||||
if (editCloseBtn) {
|
||||
|
||||
452
src/static/groups.js
Normal file
452
src/static/groups.js
Normal file
@@ -0,0 +1,452 @@
|
||||
// Device groups: members (MAC ids) + Wi‑Fi driver defaults; persisted via /groups.
|
||||
|
||||
async function fetchGroupsMap() {
|
||||
try {
|
||||
const response = await fetch('/groups', { headers: { Accept: 'application/json' } });
|
||||
if (!response.ok) return {};
|
||||
const data = await response.json();
|
||||
return data && typeof data === 'object' ? data : {};
|
||||
} catch (e) {
|
||||
console.error('fetchGroupsMap:', e);
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchDevicesMapForGroups() {
|
||||
try {
|
||||
const response = await fetch('/devices', { headers: { Accept: 'application/json' } });
|
||||
if (!response.ok) return {};
|
||||
const data = await response.json();
|
||||
return data && typeof data === 'object' ? data : {};
|
||||
} catch (e) {
|
||||
console.error('fetchDevicesMapForGroups:', e);
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
function renderGroupDevicesEditor(containerEl, macRows, devicesMap) {
|
||||
if (!containerEl) return;
|
||||
containerEl.innerHTML = '';
|
||||
const entries = Object.entries(devicesMap || {}).sort(([a], [b]) => a.localeCompare(b));
|
||||
|
||||
macRows.forEach((row, idx) => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'zone-device-row profiles-row';
|
||||
const label = document.createElement('span');
|
||||
label.className = 'zone-device-row-label';
|
||||
const strong = document.createElement('strong');
|
||||
strong.textContent = row.label || row.mac || '—';
|
||||
label.appendChild(strong);
|
||||
label.appendChild(document.createTextNode(' '));
|
||||
const sub = document.createElement('span');
|
||||
sub.className = 'muted-text';
|
||||
sub.textContent = row.mac || '';
|
||||
label.appendChild(sub);
|
||||
|
||||
const rm = document.createElement('button');
|
||||
rm.type = 'button';
|
||||
rm.className = 'btn btn-danger btn-small';
|
||||
rm.textContent = 'Remove';
|
||||
rm.addEventListener('click', () => {
|
||||
macRows.splice(idx, 1);
|
||||
renderGroupDevicesEditor(containerEl, macRows, devicesMap);
|
||||
});
|
||||
div.appendChild(label);
|
||||
div.appendChild(rm);
|
||||
containerEl.appendChild(div);
|
||||
});
|
||||
|
||||
const macsInRows = new Set(macRows.map((r) => r.mac).filter(Boolean));
|
||||
const addWrap = document.createElement('div');
|
||||
addWrap.className = 'zone-devices-add profiles-actions';
|
||||
const sel = document.createElement('select');
|
||||
sel.className = 'zone-device-add-select';
|
||||
sel.appendChild(new Option('Add device…', ''));
|
||||
entries.forEach(([mac, d]) => {
|
||||
if (macsInRows.has(mac)) return;
|
||||
const labelName = d && d.name ? String(d.name).trim() : '';
|
||||
const optLabel = labelName ? `${labelName} — ${mac}` : mac;
|
||||
sel.appendChild(new Option(optLabel, mac));
|
||||
});
|
||||
const addBtn = document.createElement('button');
|
||||
addBtn.type = 'button';
|
||||
addBtn.className = 'btn btn-primary btn-small';
|
||||
addBtn.textContent = 'Add';
|
||||
addBtn.addEventListener('click', () => {
|
||||
const mac = sel.value;
|
||||
if (!mac || !devicesMap[mac]) return;
|
||||
const n = String((devicesMap[mac].name || '').trim() || mac);
|
||||
macRows.push({ mac, label: n });
|
||||
sel.value = '';
|
||||
renderGroupDevicesEditor(containerEl, macRows, devicesMap);
|
||||
});
|
||||
addWrap.appendChild(sel);
|
||||
addWrap.appendChild(addBtn);
|
||||
containerEl.appendChild(addWrap);
|
||||
refreshEditGroupDebug();
|
||||
}
|
||||
|
||||
function collectGroupEditPayload() {
|
||||
const idInput = document.getElementById('edit-group-id');
|
||||
const nameInput = document.getElementById('edit-group-name');
|
||||
const gid = idInput && idInput.value;
|
||||
const rows = window.__editGroupDeviceRows || [];
|
||||
const devices = rows.map((r) => r.mac).filter(Boolean);
|
||||
const payload = {
|
||||
name: nameInput ? nameInput.value.trim() : '',
|
||||
devices,
|
||||
};
|
||||
const dn = document.getElementById('edit-group-wifi-driver-name');
|
||||
const nl = document.getElementById('edit-group-wifi-num-leds');
|
||||
const co = document.getElementById('edit-group-wifi-color-order');
|
||||
const ws = document.getElementById('edit-group-wifi-startup-mode');
|
||||
if (dn && dn.value.trim()) payload.wifi_driver_display_name = dn.value.trim();
|
||||
else payload.wifi_driver_display_name = null;
|
||||
if (nl && nl.value !== '') {
|
||||
const n = parseInt(nl.value, 10);
|
||||
if (!Number.isNaN(n) && n >= 1) payload.wifi_driver_num_leds = n;
|
||||
else payload.wifi_driver_num_leds = null;
|
||||
} else payload.wifi_driver_num_leds = null;
|
||||
if (co && co.value) payload.wifi_color_order = co.value;
|
||||
if (ws && ws.value) payload.wifi_startup_mode = ws.value;
|
||||
const gob = document.getElementById('edit-group-output-brightness');
|
||||
if (gob && gob.value !== '') {
|
||||
const nb = parseInt(gob.value, 10);
|
||||
if (!Number.isNaN(nb)) payload.output_brightness = Math.max(0, Math.min(255, nb));
|
||||
}
|
||||
return { gid, payload };
|
||||
}
|
||||
|
||||
function refreshEditGroupDebug() {
|
||||
const ta = document.getElementById('edit-group-debug');
|
||||
if (!ta) return;
|
||||
try {
|
||||
const { gid, payload } = collectGroupEditPayload();
|
||||
const loaded = window.__editGroupLoadedSnapshot;
|
||||
ta.value = JSON.stringify(
|
||||
{
|
||||
group_id: gid || null,
|
||||
loaded_from_server: loaded != null ? loaded : null,
|
||||
save_payload_preview: payload,
|
||||
},
|
||||
null,
|
||||
2,
|
||||
);
|
||||
} catch (e) {
|
||||
ta.value = String(e);
|
||||
}
|
||||
}
|
||||
|
||||
function loadWifiFieldsFromGroup(g) {
|
||||
const wName = document.getElementById('edit-group-wifi-driver-name');
|
||||
const wLeds = document.getElementById('edit-group-wifi-num-leds');
|
||||
const wCo = document.getElementById('edit-group-wifi-color-order');
|
||||
const wStart = document.getElementById('edit-group-wifi-startup-mode');
|
||||
if (wName) {
|
||||
const v = g && Object.prototype.hasOwnProperty.call(g, 'wifi_driver_display_name')
|
||||
? g.wifi_driver_display_name
|
||||
: null;
|
||||
wName.value = v != null && String(v).trim() !== '' ? String(v).trim() : '';
|
||||
}
|
||||
if (wLeds) {
|
||||
const v = g && g.wifi_driver_num_leds;
|
||||
wLeds.value =
|
||||
v != null && v !== '' && String(v).trim() !== ''
|
||||
? String(v)
|
||||
: '';
|
||||
}
|
||||
if (wCo) {
|
||||
const co = (g && g.wifi_color_order) || 'rgb';
|
||||
wCo.value = ['rgb', 'rbg', 'grb', 'gbr', 'brg', 'bgr'].includes(String(co).toLowerCase())
|
||||
? String(co).toLowerCase()
|
||||
: 'rgb';
|
||||
}
|
||||
if (wStart) {
|
||||
const sm = (g && g.wifi_startup_mode) || 'default';
|
||||
wStart.value = ['default', 'last', 'off'].includes(String(sm).toLowerCase())
|
||||
? String(sm).toLowerCase()
|
||||
: 'default';
|
||||
}
|
||||
const gob = document.getElementById('edit-group-output-brightness');
|
||||
const gobv = document.getElementById('edit-group-output-brightness-value');
|
||||
if (gob) {
|
||||
let bv = 255;
|
||||
if (g && g.output_brightness != null && g.output_brightness !== '') {
|
||||
const n = parseInt(String(g.output_brightness), 10);
|
||||
if (!Number.isNaN(n)) bv = Math.max(0, Math.min(255, n));
|
||||
}
|
||||
gob.value = String(bv);
|
||||
if (gobv) gobv.textContent = String(bv);
|
||||
}
|
||||
}
|
||||
|
||||
async function openEditGroupModal(groupId, groupDoc) {
|
||||
const modal = document.getElementById('edit-group-modal');
|
||||
const idInput = document.getElementById('edit-group-id');
|
||||
const nameInput = document.getElementById('edit-group-name');
|
||||
const editor = document.getElementById('edit-group-devices-editor');
|
||||
|
||||
let g = groupDoc;
|
||||
if (!g || typeof g !== 'object') {
|
||||
try {
|
||||
const response = await fetch(`/groups/${encodeURIComponent(groupId)}`);
|
||||
if (response.ok) g = await response.json();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
g = g || {};
|
||||
try {
|
||||
window.__editGroupLoadedSnapshot = JSON.parse(JSON.stringify(g));
|
||||
} catch (e) {
|
||||
window.__editGroupLoadedSnapshot = g;
|
||||
}
|
||||
|
||||
if (idInput) idInput.value = groupId;
|
||||
if (nameInput) nameInput.value = g.name || '';
|
||||
|
||||
const dm = await fetchDevicesMapForGroups();
|
||||
const macs = Array.isArray(g.devices) ? g.devices : [];
|
||||
window.__editGroupDeviceRows = macs.map((m) => {
|
||||
const mac = String(m).trim().toLowerCase().replace(/:/g, '').replace(/-/g, '');
|
||||
const d = dm[mac];
|
||||
return {
|
||||
mac,
|
||||
label: d && d.name ? String(d.name).trim() : mac,
|
||||
};
|
||||
});
|
||||
renderGroupDevicesEditor(editor, window.__editGroupDeviceRows, dm);
|
||||
loadWifiFieldsFromGroup(g);
|
||||
refreshEditGroupDebug();
|
||||
if (modal) modal.classList.add('active');
|
||||
}
|
||||
|
||||
async function loadGroupsModal() {
|
||||
const container = document.getElementById('groups-list-modal');
|
||||
if (!container) return;
|
||||
container.innerHTML = '<span class="muted-text">Loading...</span>';
|
||||
try {
|
||||
const data = await fetchGroupsMap();
|
||||
renderGroupsList(data || {});
|
||||
} catch (e) {
|
||||
console.error('loadGroupsModal:', e);
|
||||
container.innerHTML = '<span class="muted-text">Failed to load groups.</span>';
|
||||
}
|
||||
}
|
||||
|
||||
function renderGroupsList(groups) {
|
||||
const container = document.getElementById('groups-list-modal');
|
||||
if (!container) return;
|
||||
container.innerHTML = '';
|
||||
const ids = Object.keys(groups).filter((k) => groups[k] && typeof groups[k] === 'object');
|
||||
if (ids.length === 0) {
|
||||
const p = document.createElement('p');
|
||||
p.className = 'muted-text';
|
||||
p.textContent = 'No groups yet. Create one to assign devices and Wi‑Fi defaults.';
|
||||
container.appendChild(p);
|
||||
return;
|
||||
}
|
||||
ids.sort((a, b) => parseInt(a, 10) - parseInt(b, 10));
|
||||
ids.forEach((gid) => {
|
||||
const g = groups[gid];
|
||||
const row = document.createElement('div');
|
||||
row.className = 'profiles-row';
|
||||
row.style.display = 'flex';
|
||||
row.style.alignItems = 'center';
|
||||
row.style.gap = '0.5rem';
|
||||
row.style.flexWrap = 'wrap';
|
||||
|
||||
const label = document.createElement('span');
|
||||
const devs = Array.isArray(g.devices) ? g.devices : [];
|
||||
label.textContent = `${g.name || gid} (${devs.length} device${devs.length === 1 ? '' : 's'})`;
|
||||
label.style.flex = '1';
|
||||
|
||||
const editBtn = document.createElement('button');
|
||||
editBtn.className = 'btn btn-secondary btn-small';
|
||||
editBtn.textContent = 'Edit';
|
||||
editBtn.addEventListener('click', () => openEditGroupModal(gid, g));
|
||||
|
||||
const brightBtn = document.createElement('button');
|
||||
brightBtn.className = 'btn btn-secondary btn-small';
|
||||
brightBtn.type = 'button';
|
||||
brightBtn.textContent = 'Apply brightness';
|
||||
brightBtn.title = 'Push group output brightness to Wi‑Fi drivers in this group';
|
||||
brightBtn.addEventListener('click', async () => {
|
||||
try {
|
||||
const res = await fetch(`/groups/${encodeURIComponent(gid)}/brightness`, {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({}),
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) {
|
||||
alert(data.error || 'Apply brightness failed');
|
||||
return;
|
||||
}
|
||||
const n = typeof data.sent === 'number' ? data.sent : 0;
|
||||
alert(
|
||||
n
|
||||
? `Sent brightness to ${n} driver(s).`
|
||||
: 'No Wi‑Fi drivers received brightness (check connections).',
|
||||
);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
alert('Apply brightness failed');
|
||||
}
|
||||
});
|
||||
|
||||
const applyBtn = document.createElement('button');
|
||||
applyBtn.className = 'btn btn-primary btn-small';
|
||||
applyBtn.type = 'button';
|
||||
applyBtn.textContent = 'Apply defaults to drivers';
|
||||
applyBtn.title = 'Push Wi‑Fi defaults to each connected driver in this group';
|
||||
applyBtn.addEventListener('click', async () => {
|
||||
try {
|
||||
const res = await fetch(`/groups/${encodeURIComponent(gid)}/driver-config`, {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({}),
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) {
|
||||
alert(data.error || 'Apply failed');
|
||||
return;
|
||||
}
|
||||
const n = typeof data.sent === 'number' ? data.sent : 0;
|
||||
alert(
|
||||
n
|
||||
? `Sent defaults to ${n} driver(s).`
|
||||
: 'No Wi‑Fi drivers received the config (check defaults and connections).',
|
||||
);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
alert('Apply failed');
|
||||
}
|
||||
});
|
||||
|
||||
const delBtn = document.createElement('button');
|
||||
delBtn.className = 'btn btn-danger btn-small';
|
||||
delBtn.textContent = 'Delete';
|
||||
delBtn.addEventListener('click', async () => {
|
||||
if (!confirm(`Delete group "${g.name || gid}"? Zones referencing it may need updating.`)) return;
|
||||
try {
|
||||
const res = await fetch(`/groups/${encodeURIComponent(gid)}`, { method: 'DELETE' });
|
||||
if (res.ok) await loadGroupsModal();
|
||||
else {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
alert(data.error || 'Delete failed');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
alert('Delete failed');
|
||||
}
|
||||
});
|
||||
|
||||
row.appendChild(label);
|
||||
row.appendChild(editBtn);
|
||||
row.appendChild(brightBtn);
|
||||
row.appendChild(applyBtn);
|
||||
row.appendChild(delBtn);
|
||||
container.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const groupsBtn = document.getElementById('groups-btn');
|
||||
const groupsModal = document.getElementById('groups-modal');
|
||||
const groupsCloseBtn = document.getElementById('groups-close-btn');
|
||||
const newNameInput = document.getElementById('new-group-name');
|
||||
const createBtn = document.getElementById('create-group-btn');
|
||||
const editForm = document.getElementById('edit-group-form');
|
||||
const editCloseBtn = document.getElementById('edit-group-close-btn');
|
||||
const editModal = document.getElementById('edit-group-modal');
|
||||
|
||||
if (groupsBtn && groupsModal) {
|
||||
groupsBtn.addEventListener('click', () => {
|
||||
groupsModal.classList.add('active');
|
||||
loadGroupsModal();
|
||||
});
|
||||
}
|
||||
if (groupsCloseBtn && groupsModal) {
|
||||
groupsCloseBtn.addEventListener('click', () => groupsModal.classList.remove('active'));
|
||||
}
|
||||
|
||||
const grpOutBr = document.getElementById('edit-group-output-brightness');
|
||||
const grpOutBrVal = document.getElementById('edit-group-output-brightness-value');
|
||||
if (grpOutBr && grpOutBrVal) {
|
||||
grpOutBr.addEventListener('input', () => {
|
||||
grpOutBrVal.textContent = grpOutBr.value;
|
||||
});
|
||||
}
|
||||
|
||||
const createHandler = async () => {
|
||||
const name = newNameInput && newNameInput.value.trim();
|
||||
if (!name) return;
|
||||
try {
|
||||
const res = await fetch('/groups', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
|
||||
body: JSON.stringify({ name }),
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) {
|
||||
alert(data.error || 'Create failed');
|
||||
return;
|
||||
}
|
||||
if (newNameInput) newNameInput.value = '';
|
||||
await loadGroupsModal();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
alert('Create failed');
|
||||
}
|
||||
};
|
||||
if (createBtn) createBtn.addEventListener('click', createHandler);
|
||||
if (newNameInput) {
|
||||
newNameInput.addEventListener('keypress', (ev) => {
|
||||
if (ev.key === 'Enter') createHandler();
|
||||
});
|
||||
}
|
||||
|
||||
if (editForm) {
|
||||
editForm.addEventListener('input', () => refreshEditGroupDebug());
|
||||
editForm.addEventListener('change', () => refreshEditGroupDebug());
|
||||
editForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const { gid, payload } = collectGroupEditPayload();
|
||||
if (!gid) return;
|
||||
|
||||
try {
|
||||
const res = await fetch(`/groups/${encodeURIComponent(gid)}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) {
|
||||
alert(data.error || 'Save failed');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await fetch(`/groups/${encodeURIComponent(gid)}/brightness`, {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({}),
|
||||
});
|
||||
} catch (_) {
|
||||
/* ignore push errors after save */
|
||||
}
|
||||
if (editModal) editModal.classList.remove('active');
|
||||
await loadGroupsModal();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
alert('Save failed');
|
||||
}
|
||||
});
|
||||
}
|
||||
if (editCloseBtn && editModal) {
|
||||
editCloseBtn.addEventListener('click', () => editModal.classList.remove('active'));
|
||||
}
|
||||
});
|
||||
@@ -1694,7 +1694,8 @@ const sendPresetViaEspNow = async (
|
||||
: [];
|
||||
|
||||
const sequence = [presetMessage];
|
||||
if (names.length > 0) {
|
||||
// Auto: apply preset immediately via select. Manual: load definition only — first step is on the next audio beat.
|
||||
if (names.length > 0 && presetAuto) {
|
||||
const select = {};
|
||||
names.forEach((name) => {
|
||||
if (name) {
|
||||
|
||||
@@ -94,10 +94,11 @@ header {
|
||||
background-color: #1a1a1a;
|
||||
padding: 0.75rem 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: flex-start;
|
||||
border-bottom: 2px solid #4a4a4a;
|
||||
gap: 0.75rem;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
@@ -105,14 +106,15 @@ header h1 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* BPM + desktop actions + mobile menu share one row; BPM stays visible on mobile. */
|
||||
/* Second header row: BPM, brightness, desktop buttons / mobile menu */
|
||||
.header-end {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: nowrap;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
margin-left: auto;
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@@ -196,7 +198,7 @@ header h1 {
|
||||
}
|
||||
|
||||
.audio-top-indicator {
|
||||
display: inline-flex;
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.25rem 0.55rem;
|
||||
@@ -206,6 +208,10 @@ header h1 {
|
||||
min-width: 6.5rem;
|
||||
}
|
||||
|
||||
.audio-top-indicator.audio-running {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.audio-top-indicator-label {
|
||||
font-size: 0.72rem;
|
||||
color: #bdbdbd;
|
||||
@@ -294,8 +300,9 @@ body.preset-ui-run .edit-mode-only {
|
||||
|
||||
.zones-container {
|
||||
background-color: transparent;
|
||||
padding: 0.5rem 0;
|
||||
flex: 1;
|
||||
padding: 0.35rem 0 0;
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
@@ -1087,12 +1094,16 @@ body.preset-ui-run .edit-mode-only {
|
||||
/* Mobile-friendly layout */
|
||||
@media (max-width: 1000px) {
|
||||
header {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
} header h1 {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.1rem;
|
||||
} /* On mobile, hide header buttons; all actions (including Tabs) are in the Menu dropdown */
|
||||
}
|
||||
|
||||
/* On mobile, hide header buttons; all actions (including Tabs) are in the Menu dropdown */
|
||||
.header-actions {
|
||||
display: none;
|
||||
}
|
||||
@@ -1123,8 +1134,9 @@ body.preset-ui-run .edit-mode-only {
|
||||
}
|
||||
|
||||
.zones-container {
|
||||
padding: 0.5rem 0;
|
||||
padding: 0.35rem 0 0;
|
||||
border-bottom: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.zone-content {
|
||||
|
||||
@@ -64,6 +64,47 @@ function sendZoneBrightness(zoneId, value) {
|
||||
? await window.tabsManager.resolveTabDeviceMacs(names)
|
||||
: [];
|
||||
if (typeof window.postDriverSequence === 'function') {
|
||||
if (targetMacs.length > 0) {
|
||||
let resolved = {};
|
||||
try {
|
||||
const rr = await fetch('/devices/resolve-brightness', {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Accept: 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
macs: targetMacs,
|
||||
zone_brightness: val,
|
||||
}),
|
||||
});
|
||||
if (rr.ok) {
|
||||
const pack = await rr.json().catch(() => ({}));
|
||||
if (pack && pack.values && typeof pack.values === 'object') {
|
||||
resolved = pack.values;
|
||||
}
|
||||
}
|
||||
} catch (re) {
|
||||
console.warn('resolve-brightness failed:', re);
|
||||
}
|
||||
for (const mac of targetMacs) {
|
||||
const k = String(mac).toLowerCase();
|
||||
const b =
|
||||
resolved[k] != null && resolved[k] !== ''
|
||||
? parseInt(resolved[k], 10)
|
||||
: val;
|
||||
const bv = Number.isNaN(b)
|
||||
? val
|
||||
: Math.max(0, Math.min(255, b));
|
||||
await window.postDriverSequence(
|
||||
[{ v: '1', b: bv, save: true }],
|
||||
[mac],
|
||||
0,
|
||||
);
|
||||
}
|
||||
return;
|
||||
}
|
||||
await window.postDriverSequence([{ v: '1', b: val, save: true }], targetMacs, 0);
|
||||
return;
|
||||
}
|
||||
@@ -107,8 +148,81 @@ async function fetchDevicesMap() {
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchGroupsMap() {
|
||||
try {
|
||||
const response = await fetch("/groups", { headers: { Accept: "application/json" } });
|
||||
if (!response.ok) return {};
|
||||
const data = await response.json();
|
||||
return data && typeof data === "object" ? data : {};
|
||||
} catch (e) {
|
||||
console.error("fetchGroupsMap:", e);
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Resolve registry names + MACs for a zone document (``group_ids`` expands groups;
|
||||
* otherwise legacy ``names``).
|
||||
*/
|
||||
async function computeZoneTargets(zone) {
|
||||
const dm = await fetchDevicesMap();
|
||||
const gids = Array.isArray(zone && zone.group_ids)
|
||||
? zone.group_ids.map((x) => String(x).trim()).filter((x) => x.length > 0)
|
||||
: [];
|
||||
if (gids.length > 0) {
|
||||
const gm = await fetchGroupsMap();
|
||||
const seen = new Set();
|
||||
const names = [];
|
||||
const macs = [];
|
||||
for (const gid of gids) {
|
||||
const g = gm[gid];
|
||||
if (!g || !Array.isArray(g.devices)) continue;
|
||||
for (const raw of g.devices) {
|
||||
const m = String(raw || "")
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
.replace(/:/g, "")
|
||||
.replace(/-/g, "");
|
||||
if (m.length !== 12) continue;
|
||||
if (seen.has(m)) continue;
|
||||
seen.add(m);
|
||||
const d = dm[m];
|
||||
const n = d && String((d.name || "").trim()) ? String(d.name).trim() : m;
|
||||
names.push(n);
|
||||
macs.push(m);
|
||||
}
|
||||
}
|
||||
return { names, macs };
|
||||
}
|
||||
const zoneNames = Array.isArray(zone && zone.names) ? zone.names : [];
|
||||
const rows = namesToRows(zoneNames, dm);
|
||||
return {
|
||||
names: rowsToNames(rows),
|
||||
macs: [...new Set(rows.map((r) => r.mac).filter(Boolean))],
|
||||
};
|
||||
}
|
||||
|
||||
async function resolveZoneDeviceMacsFromZoneData(zone) {
|
||||
const t = await computeZoneTargets(zone);
|
||||
return t.macs;
|
||||
}
|
||||
|
||||
/** Registry MACs for zone device names (order matches zone names; skips unknown names). */
|
||||
async function resolveZoneDeviceMacs(zoneNames) {
|
||||
const section = document.querySelector(".presets-section[data-zone-id]");
|
||||
if (section) {
|
||||
const enc = section.getAttribute("data-zone-target-macs-json");
|
||||
if (enc) {
|
||||
try {
|
||||
const macs = JSON.parse(decodeURIComponent(enc));
|
||||
if (Array.isArray(macs) && macs.length) {
|
||||
return [...new Set(macs.map((m) => String(m).toLowerCase()))];
|
||||
}
|
||||
} catch (e) {
|
||||
/* fall through */
|
||||
}
|
||||
}
|
||||
}
|
||||
const dm = await fetchDevicesMap();
|
||||
const rows = namesToRows(Array.isArray(zoneNames) ? zoneNames : [], dm);
|
||||
const macs = rows.map((r) => r.mac).filter(Boolean);
|
||||
@@ -197,15 +311,72 @@ function renderZoneDevicesEditor(containerEl, rows, devicesMap) {
|
||||
containerEl.appendChild(addWrap);
|
||||
}
|
||||
|
||||
/** Default device name list when creating a zone (refined in Edit zone). */
|
||||
async function defaultDeviceNamesForNewTab() {
|
||||
const dm = await fetchDevicesMap();
|
||||
const macs = Object.keys(dm);
|
||||
if (macs.length > 0) {
|
||||
const m0 = macs[0];
|
||||
return [String((dm[m0].name || "").trim() || m0)];
|
||||
}
|
||||
return ["1"];
|
||||
function renderZoneGroupsEditor(containerEl, rows, groupsMap) {
|
||||
if (!containerEl) return;
|
||||
containerEl.innerHTML = "";
|
||||
const entries = Object.entries(groupsMap || {}).sort(([a], [b]) => a.localeCompare(b));
|
||||
|
||||
rows.forEach((row, idx) => {
|
||||
const div = document.createElement("div");
|
||||
div.className = "zone-device-row profiles-row";
|
||||
const label = document.createElement("span");
|
||||
label.className = "zone-device-row-label";
|
||||
const strong = document.createElement("strong");
|
||||
strong.textContent = row.name || row.id || "—";
|
||||
label.appendChild(strong);
|
||||
label.appendChild(document.createTextNode(" "));
|
||||
const sub = document.createElement("span");
|
||||
sub.className = "muted-text";
|
||||
sub.textContent = `group ${row.id}`;
|
||||
label.appendChild(sub);
|
||||
|
||||
const rm = document.createElement("button");
|
||||
rm.type = "button";
|
||||
rm.className = "btn btn-danger btn-small";
|
||||
rm.textContent = "Remove";
|
||||
rm.addEventListener("click", () => {
|
||||
rows.splice(idx, 1);
|
||||
renderZoneGroupsEditor(containerEl, rows, groupsMap);
|
||||
});
|
||||
div.appendChild(label);
|
||||
div.appendChild(rm);
|
||||
containerEl.appendChild(div);
|
||||
});
|
||||
|
||||
const idsInRows = new Set(rows.map((r) => String(r.id)));
|
||||
const addWrap = document.createElement("div");
|
||||
addWrap.className = "zone-devices-add profiles-actions";
|
||||
const sel = document.createElement("select");
|
||||
sel.className = "zone-device-add-select";
|
||||
sel.appendChild(new Option("Add group…", ""));
|
||||
entries.forEach(([gid, g]) => {
|
||||
if (idsInRows.has(gid)) return;
|
||||
const gn = g && g.name ? String(g.name).trim() : "";
|
||||
const optLabel = gn ? `${gn} (${gid})` : `Group ${gid}`;
|
||||
sel.appendChild(new Option(optLabel, gid));
|
||||
});
|
||||
const addBtn = document.createElement("button");
|
||||
addBtn.type = "button";
|
||||
addBtn.className = "btn btn-primary btn-small";
|
||||
addBtn.textContent = "Add";
|
||||
addBtn.addEventListener("click", () => {
|
||||
const gid = sel.value;
|
||||
if (!gid || !groupsMap[gid]) return;
|
||||
const gn = groupsMap[gid].name ? String(groupsMap[gid].name).trim() : gid;
|
||||
rows.push({ id: gid, name: gn });
|
||||
sel.value = "";
|
||||
renderZoneGroupsEditor(containerEl, rows, groupsMap);
|
||||
});
|
||||
addWrap.appendChild(sel);
|
||||
addWrap.appendChild(addBtn);
|
||||
containerEl.appendChild(addWrap);
|
||||
}
|
||||
|
||||
/** Default group for a new zone (empty if no groups exist yet). */
|
||||
async function defaultGroupIdsForNewTab() {
|
||||
const gm = await fetchGroupsMap();
|
||||
const ids = Object.keys(gm || {}).sort((a, b) => parseInt(a, 10) - parseInt(b, 10));
|
||||
return ids.length ? [ids[0]] : [];
|
||||
}
|
||||
|
||||
/** Read zone device names from the presets section (JSON attr preferred; legacy comma list fallback). */
|
||||
@@ -539,12 +710,16 @@ async function loadZoneContent(zoneId) {
|
||||
|
||||
// Render zone content (presets section)
|
||||
const tabName = zone.name || `Zone ${zoneId}`;
|
||||
const names = Array.isArray(zone.names) ? zone.names : [];
|
||||
const namesJsonAttr = encodeURIComponent(JSON.stringify(names));
|
||||
const legacyOk = names.length > 0 && !names.some((n) => /[",]/.test(String(n)));
|
||||
const legacyAttr = legacyOk ? ` data-device-names="${escapeHtmlAttr(names.join(","))}"` : "";
|
||||
const targets = await computeZoneTargets(zone);
|
||||
const namesJsonAttr = encodeURIComponent(JSON.stringify(targets.names));
|
||||
const macsJsonAttr = encodeURIComponent(JSON.stringify(targets.macs));
|
||||
const legacyOk =
|
||||
targets.names.length > 0 && !targets.names.some((n) => /[",]/.test(String(n)));
|
||||
const legacyAttr = legacyOk
|
||||
? ` data-device-names="${escapeHtmlAttr(targets.names.join(","))}"`
|
||||
: "";
|
||||
container.innerHTML = `
|
||||
<div class="presets-section" data-zone-id="${zoneId}" data-device-names-json="${namesJsonAttr}"${legacyAttr}>
|
||||
<div class="presets-section" data-zone-id="${zoneId}" data-device-names-json="${namesJsonAttr}" data-zone-target-macs-json="${macsJsonAttr}"${legacyAttr}>
|
||||
<div id="presets-list-zone" class="presets-list">
|
||||
<!-- Presets will be loaded here by presets.js -->
|
||||
</div>
|
||||
@@ -639,8 +814,7 @@ async function sendProfilePresets() {
|
||||
continue;
|
||||
}
|
||||
zonesWithPresets += 1;
|
||||
const zoneNames = Array.isArray(tabData.names) ? tabData.names : [];
|
||||
const targets = await resolveZoneDeviceMacs(zoneNames);
|
||||
const targets = await resolveZoneDeviceMacsFromZoneData(tabData);
|
||||
const payload = { preset_ids: presetIds };
|
||||
if (tabData.default_preset) {
|
||||
payload.default = tabData.default_preset;
|
||||
@@ -831,31 +1005,25 @@ async function openEditZoneModal(zoneId, zone) {
|
||||
if (idInput) idInput.value = zoneId;
|
||||
if (nameInput) nameInput.value = tabData.name || "";
|
||||
|
||||
const devicesMap = await fetchDevicesMap();
|
||||
const zoneNames =
|
||||
Array.isArray(tabData.names) && tabData.names.length > 0 ? tabData.names : ["1"];
|
||||
window.__editTabDeviceRows = namesToRows(zoneNames, devicesMap);
|
||||
renderZoneDevicesEditor(editor, window.__editTabDeviceRows, devicesMap);
|
||||
const groupsMap = await fetchGroupsMap();
|
||||
const rawGids = Array.isArray(tabData.group_ids) ? tabData.group_ids : [];
|
||||
window.__editTabGroupRows = rawGids.map((gid) => {
|
||||
const id = String(gid);
|
||||
const g = groupsMap[id];
|
||||
return { id, name: g && g.name ? String(g.name).trim() : id };
|
||||
});
|
||||
renderZoneGroupsEditor(editor, window.__editTabGroupRows, groupsMap);
|
||||
|
||||
if (modal) modal.classList.add("active");
|
||||
await refreshEditTabPresetsUi(zoneId);
|
||||
}
|
||||
|
||||
function normalizeTabNamesArg(namesOrString) {
|
||||
if (Array.isArray(namesOrString)) {
|
||||
return namesOrString.map((n) => String(n).trim()).filter((n) => n.length > 0);
|
||||
}
|
||||
if (typeof namesOrString === "string" && namesOrString.trim()) {
|
||||
return namesOrString.split(",").map((id) => id.trim()).filter((id) => id.length > 0);
|
||||
}
|
||||
return ["1"];
|
||||
}
|
||||
|
||||
// Update an existing zone
|
||||
async function updateZone(zoneId, name, namesOrString) {
|
||||
async function updateZone(zoneId, name, groupIds) {
|
||||
try {
|
||||
let names = normalizeTabNamesArg(namesOrString);
|
||||
if (!names.length) names = ["1"];
|
||||
const gids = Array.isArray(groupIds)
|
||||
? groupIds.map((x) => String(x).trim()).filter((x) => x.length > 0)
|
||||
: [];
|
||||
const response = await fetch(`/zones/${zoneId}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
@@ -863,7 +1031,8 @@ async function updateZone(zoneId, name, namesOrString) {
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: name,
|
||||
names: names
|
||||
group_ids: gids,
|
||||
names: [],
|
||||
})
|
||||
});
|
||||
|
||||
@@ -887,10 +1056,11 @@ async function updateZone(zoneId, name, namesOrString) {
|
||||
}
|
||||
|
||||
// Create a new zone
|
||||
async function createZone(name, namesOrString) {
|
||||
async function createZone(name, groupIds) {
|
||||
try {
|
||||
let names = normalizeTabNamesArg(namesOrString);
|
||||
if (!names.length) names = ["1"];
|
||||
const gids = Array.isArray(groupIds)
|
||||
? groupIds.map((x) => String(x).trim()).filter((x) => x.length > 0)
|
||||
: [];
|
||||
const response = await fetch('/zones', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
@@ -898,7 +1068,8 @@ async function createZone(name, namesOrString) {
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: name,
|
||||
names: names
|
||||
group_ids: gids,
|
||||
names: [],
|
||||
})
|
||||
});
|
||||
|
||||
@@ -979,8 +1150,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const name = newTabNameInput.value.trim();
|
||||
|
||||
if (name) {
|
||||
const deviceNames = await defaultDeviceNamesForNewTab();
|
||||
await createZone(name, deviceNames);
|
||||
const groupIds = await defaultGroupIdsForNewTab();
|
||||
await createZone(name, groupIds);
|
||||
if (newTabNameInput) newTabNameInput.value = "";
|
||||
}
|
||||
};
|
||||
@@ -1007,15 +1178,15 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
const zoneId = idInput ? idInput.value : null;
|
||||
const name = nameInput ? nameInput.value.trim() : "";
|
||||
const rows = window.__editTabDeviceRows || [];
|
||||
const deviceNames = rowsToNames(rows);
|
||||
const rows = window.__editTabGroupRows || [];
|
||||
const groupIds = rows.map((r) => r.id).filter(Boolean);
|
||||
|
||||
if (zoneId && name) {
|
||||
if (deviceNames.length === 0) {
|
||||
alert("Add at least one device.");
|
||||
if (groupIds.length === 0) {
|
||||
alert("Add at least one device group.");
|
||||
return;
|
||||
}
|
||||
await updateZone(zoneId, name, deviceNames);
|
||||
await updateZone(zoneId, name, groupIds);
|
||||
editZoneForm.reset();
|
||||
}
|
||||
});
|
||||
@@ -1066,6 +1237,7 @@ window.zonesManager = {
|
||||
updateZone,
|
||||
openEditZoneModal,
|
||||
resolveZoneDeviceMacs,
|
||||
resolveZoneDeviceMacsFromZoneData,
|
||||
resolveTabDeviceMacs: resolveZoneDeviceMacs,
|
||||
getCurrentZoneId: () => currentZoneId,
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user