alexei.dolgolyov/ledgrab
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 14 Wiki Activity

Add power toggle button to LED device cards

Browse Source 
WLED: native on/off via JSON API. Adalight: sends all-black frame
to blank LEDs (uses existing client if target is running, otherwise
opens temporary serial connection). Toggle button placed next to
delete button in card top-right corner.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-02-17 19:18:39 +03:00
parent f4503d36b4
commit cc91ccd75a
9 changed files with 193 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/src/wled_controller/static/app.js
+31 -1
View File
@@ -650,7 +650,10 @@ function createDeviceCard(device) {
return `
<div class="card" data-device-id="${device.id}">
<button class="card-remove-btn" onclick="removeDevice('${device.id}')" title="${t('device.button.remove')}">&#x2715;</button>
<div class="card-top-actions">
${(device.capabilities || []).includes('power_control') ? `<button class="card-top-btn card-power-btn" onclick="toggleDevicePower('${device.id}')" title="${t('device.button.power_toggle')}">⏻</button>` : ''}
<button class="card-remove-btn" onclick="removeDevice('${device.id}')" title="${t('device.button.remove')}">&#x2715;</button>
</div>
<div class="card-header">
<div class="card-title">
<span class="health-dot ${healthClass}" title="${healthTitle}"></span>
@@ -686,6 +689,33 @@ function createDeviceCard(device) {
`;
}
async function toggleDevicePower(deviceId) {
try {
// Get current power state
const getResp = await fetch(`${API_BASE}/devices/${deviceId}/power`, { headers: getHeaders() });
if (getResp.status === 401) { handle401Error(); return; }
if (!getResp.ok) { showToast('Failed to get power state', 'error'); return; }
const current = await getResp.json();
const newState = !current.on;
// Toggle
const setResp = await fetch(`${API_BASE}/devices/${deviceId}/power`, {
method: 'PUT',
headers: { ...getHeaders(), 'Content-Type': 'application/json' },
body: JSON.stringify({ on: newState })
});
if (setResp.status === 401) { handle401Error(); return; }
if (setResp.ok) {
showToast(t(newState ? 'device.power.on_success' : 'device.power.off_success'), 'success');
} else {
const error = await setResp.json();
showToast(error.detail || 'Failed', 'error');
}
} catch (error) {
showToast('Failed to toggle power', 'error');
}
}
function attachDeviceListeners(deviceId) {
// Add any specific event listeners here if needed
}