technicalkiwi/led-controller
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update frontend for presets, tabs, and help

Browse Source 
Align frontend with new preset ID usage and shortened driver fields, improve tab/preset interactions, and refine help and editor UI.
This commit is contained in:
jimmy
2026-01-28 23:27:50 +13:00
parent 5fdeb57b74
commit fd37183400
4 changed files with 183 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
src/static/presets.js
View File

@@ -53,9 +53,10 @@ const sendEspnowMessage = (obj) => {
};
// Send a select message for a preset to all device names in the current tab.
const sendSelectForCurrentTabDevices = (presetName, sectionEl) => {
// Uses the preset ID as the select key.
const sendSelectForCurrentTabDevices = (presetId, sectionEl) => {
const section = sectionEl || document.querySelector('.presets-section[data-tab-id]');
if (!section || !presetName) {
if (!section || !presetId) {
return;
}
const namesAttr = section.getAttribute('data-device-names');
@@ -69,7 +70,7 @@ const sendSelectForCurrentTabDevices = (presetName, sectionEl) => {
const select = {};
deviceNames.forEach((name) => {
select[name] = [presetName];
select[name] = [presetId];
});
const message = {
@@ -719,20 +720,26 @@ document.addEventListener('DOMContentLoaded', () => {
}
const allPresets = await response.json();
// Get current tab's presets to exclude already added ones
// Load only the current tab's presets so we can avoid duplicates within this tab.
let currentTabPresets = [];
if (tabId) {
try {
const tabResponse = await fetch(`/tabs/${tabId}`, {
headers: { Accept: 'application/json' },
});
if (tabResponse.ok) {
const tabData = await tabResponse.json();
currentTabPresets = tabData.presets || [];
try {
const tabResponse = await fetch(`/tabs/${tabId}`, {
headers: { Accept: 'application/json' },
});
if (tabResponse.ok) {
const tabData = await tabResponse.json();
if (Array.isArray(tabData.presets_flat)) {
currentTabPresets = tabData.presets_flat.slice();
} else if (Array.isArray(tabData.presets)) {
if (tabData.presets.length && typeof tabData.presets[0] === 'string') {
currentTabPresets = tabData.presets.slice();
} else if (Array.isArray(tabData.presets[0])) {
currentTabPresets = tabData.presets.flat();
}
}
} catch (e) {
console.warn('Could not load current tab presets:', e);
}
} catch (e) {
console.warn('Could not load current tab presets:', e);
}
// Create modal
@@ -759,7 +766,7 @@ document.addEventListener('DOMContentLoaded', () => {
} else {
presetNames.forEach(presetId => {
const preset = allPresets[presetId];
const isAlreadyAdded = currentTabPresets.includes(presetId);
const isInCurrentTab = currentTabPresets.includes(presetId);
const row = document.createElement('div');
row.className = 'profiles-row';
@@ -773,17 +780,19 @@ document.addEventListener('DOMContentLoaded', () => {
details.textContent = preset.pattern || '-';
const actionButton = document.createElement('button');
if (isAlreadyAdded) {
if (isInCurrentTab) {
// Already in this tab: allow removing from this tab
actionButton.className = 'btn btn-danger btn-small';
actionButton.textContent = 'Remove';
actionButton.addEventListener('click', async (e) => {
e.stopPropagation();
if (confirm(`Remove preset "${preset.name || presetId}" from this tab?`)) {
await removePresetFromTab(presetId, tabId);
await removePresetFromTab(tabId, presetId);
modal.remove();
}
});
} else {
// Not yet in this tab: allow adding (even if used in other tabs)
actionButton.className = 'btn btn-primary btn-small';
actionButton.textContent = 'Add';
actionButton.addEventListener('click', async () => {
@@ -847,35 +856,50 @@ document.addEventListener('DOMContentLoaded', () => {
}
const tabData = await tabResponse.json();
// Add preset to tab's presets array if not already present
const presets = tabData.presets || [];
if (!presets.includes(presetId)) {
presets.push(presetId);
// Update tab
const updateResponse = await fetch(`/tabs/${tabId}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ ...tabData, presets }),
});
if (!updateResponse.ok) {
throw new Error('Failed to update tab');
// Normalize to flat array to check and update usage
let flat = [];
if (Array.isArray(tabData.presets_flat)) {
flat = tabData.presets_flat.slice();
} else if (Array.isArray(tabData.presets)) {
if (tabData.presets.length && typeof tabData.presets[0] === 'string') {
flat = tabData.presets.slice();
} else if (Array.isArray(tabData.presets[0])) {
flat = tabData.presets.flat();
}
// Reload the tab content to show the new preset
if (window.htmx) {
htmx.ajax('GET', `/tabs/${tabId}/content-fragment`, {
target: '#tab-content',
swap: 'innerHTML'
});
// The htmx:afterSwap event listener will call renderTabPresets
} else {
// Fallback: reload the page
window.location.reload();
}
} else {
}
if (flat.includes(presetId)) {
alert('Preset is already added to this tab.');
return;
}
flat.push(presetId);
const newGrid = arrayToGrid(flat, 3);
tabData.presets = newGrid;
tabData.presets_flat = flat;
// Update tab
const updateResponse = await fetch(`/tabs/${tabId}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(tabData),
});
if (!updateResponse.ok) {
throw new Error('Failed to update tab');
}
// Reload the tab content to show the new preset
if (typeof renderTabPresets === 'function') {
await renderTabPresets(tabId);
} else if (window.htmx) {
htmx.ajax('GET', `/tabs/${tabId}/content-fragment`, {
target: '#tab-content',
swap: 'innerHTML'
});
} else {
// Fallback: reload the page
window.location.reload();
}
} catch (error) {
console.error('Failed to add preset to tab:', error);
@@ -978,14 +1002,18 @@ document.addEventListener('DOMContentLoaded', () => {
alert('Preset name is required to send.');
return;
}
// Send current editor values and select on all devices in the current tab (if any)
// Send current editor values and then select on all devices in the current tab (if any)
const section = document.querySelector('.presets-section[data-tab-id]');
const namesAttr = section && section.getAttribute('data-device-names');
const deviceNames = namesAttr
? namesAttr.split(',').map((n) => n.trim()).filter((n) => n.length > 0)
: [];
sendPresetViaEspNow(payload.name, payload, deviceNames);
// Work out the preset ID: for existing presets use currentEditId, otherwise fall back to name
const presetId = currentEditId || payload.name;
// First send/override the preset definition under its ID
sendPresetViaEspNow(presetId, payload, null);
// Then send a separate select-only message for this preset ID to all devices in the tab
sendSelectForCurrentTabDevices(presetId, section);
});
}
@@ -1021,8 +1049,8 @@ document.addEventListener('DOMContentLoaded', () => {
const saved = await response.json().catch(() => null);
if (saved && typeof saved === 'object') {
if (currentEditId) {
// PUT returns the preset object directly
sendPresetViaEspNow(payload.name, saved, deviceNames);
// PUT returns the preset object directly; use the existing ID
sendPresetViaEspNow(currentEditId, saved, deviceNames);
} else {
// POST returns { id: preset }
const entries = Object.entries(saved);
@@ -1100,12 +1128,6 @@ document.addEventListener('DOMContentLoaded', () => {
// for the given device names, then send it via WebSocket.
const sendPresetViaEspNow = (presetId, preset, deviceNames) => {
try {
const presetName = preset.name || presetId;
if (!presetName) {
alert('Preset has no name and cannot be sent.');
return;
}
const colors = Array.isArray(preset.colors) && preset.colors.length
? preset.colors
: ['#FFFFFF'];
@@ -1113,7 +1135,7 @@ const sendPresetViaEspNow = (presetId, preset, deviceNames) => {
const message = {
v: '1',
presets: {
[presetName]: {
[presetId]: {
pattern: preset.pattern || 'off',
colors,
delay: typeof preset.delay === 'number' ? preset.delay : 100,
@@ -1136,7 +1158,7 @@ const sendPresetViaEspNow = (presetId, preset, deviceNames) => {
const select = {};
deviceNames.forEach((name) => {
if (name) {
select[name] = [presetName];
select[name] = [presetId];
}
});
if (Object.keys(select).length > 0) {
@@ -1526,9 +1548,8 @@ const createPresetButton = (presetId, preset, tabId, isSelected = false) => {
selectedPresets[tabId] = presetId;
// Build and send a select message via WebSocket for all device names in this tab.
const presetName = preset.name || presetId;
const section = button.closest('.presets-section');
sendSelectForCurrentTabDevices(presetName, section);
sendSelectForCurrentTabDevices(presetId, section);
});
button.addEventListener('contextmenu', async (e) => {