Remove idle color feature, simplify power to turn-off only, fix settings serial port bug
- Remove static/idle color from entire stack (storage, API, processing, UI, CSS, locales) - Simplify device power button to turn-off only (send black frame, no toggle) - Send black frame on serial port close (AdalightClient.close) - Fix settings modal serial port dropdown showing WLED devices due to stale deviceType Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -69,7 +69,7 @@ export function createDeviceCard(device) {
|
||||
return `
|
||||
<div class="card" data-device-id="${device.id}">
|
||||
<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>` : ''}
|
||||
${(device.capabilities || []).includes('power_control') ? `<button class="card-top-btn card-power-btn" onclick="turnOffDevice('${device.id}')" title="${t('device.button.power_off')}">⏹</button>` : ''}
|
||||
<button class="card-remove-btn" onclick="removeDevice('${device.id}')" title="${t('device.button.remove')}">✕</button>
|
||||
</div>
|
||||
<div class="card-header">
|
||||
@@ -85,7 +85,6 @@ export function createDeviceCard(device) {
|
||||
${ledCount ? `<span class="card-meta" title="${t('device.led_count')}">💡 ${ledCount}</span>` : ''}
|
||||
${state.device_led_type ? `<span class="card-meta">🔌 ${state.device_led_type.replace(/ RGBW$/, '')}</span>` : ''}
|
||||
<span class="card-meta" title="${state.device_rgbw ? 'RGBW' : 'RGB'}"><span class="channel-indicator"><span class="ch" style="background:#e53935"></span><span class="ch" style="background:#43a047"></span><span class="ch" style="background:#1e88e5"></span>${state.device_rgbw ? '<span class="ch" style="background:#eee"></span>' : ''}</span></span>
|
||||
${(device.capabilities || []).includes('static_color') ? `<span class="card-meta static-color-control" data-color-wrap="${device.id}"><input type="color" class="static-color-picker" value="${device.static_color ? rgbToHex(...device.static_color) : '#000000'}" data-device-color="${device.id}" onchange="saveDeviceStaticColor('${device.id}', this.value)" title="${t('device.static_color.hint')}"><button class="btn-clear-color" onclick="clearDeviceStaticColor('${device.id}')" title="${t('device.static_color.clear')}" ${!device.static_color ? 'style="display:none"' : ''}>✕</button></span>` : ''}
|
||||
</div>
|
||||
${(device.capabilities || []).includes('brightness_control') ? `
|
||||
<div class="brightness-control${_deviceBrightnessCache[device.id] == null ? ' brightness-loading' : ''}" data-brightness-wrap="${device.id}">
|
||||
@@ -106,26 +105,21 @@ export function createDeviceCard(device) {
|
||||
`;
|
||||
}
|
||||
|
||||
export async function toggleDevicePower(deviceId) {
|
||||
export async function turnOffDevice(deviceId) {
|
||||
try {
|
||||
const getResp = await fetchWithAuth(`/devices/${deviceId}/power`);
|
||||
if (!getResp.ok) { showToast('Failed to get power state', 'error'); return; }
|
||||
const current = await getResp.json();
|
||||
const newState = !current.on;
|
||||
|
||||
const setResp = await fetchWithAuth(`/devices/${deviceId}/power`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({ on: newState })
|
||||
body: JSON.stringify({ on: false })
|
||||
});
|
||||
if (setResp.ok) {
|
||||
showToast(t(newState ? 'device.power.on_success' : 'device.power.off_success'), 'success');
|
||||
showToast(t('device.power.off_success'), 'success');
|
||||
} else {
|
||||
const error = await setResp.json();
|
||||
showToast(error.detail || 'Failed', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
if (error.isAuth) return;
|
||||
showToast('Failed to toggle power', 'error');
|
||||
showToast('Failed to turn off device', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -162,6 +156,11 @@ export async function showSettings(deviceId) {
|
||||
|
||||
const device = await deviceResponse.json();
|
||||
const isAdalight = isSerialDevice(device.device_type);
|
||||
const caps = device.capabilities || [];
|
||||
|
||||
// Set modal state before populating fields (so async helpers read correct type)
|
||||
settingsModal.deviceType = device.device_type;
|
||||
settingsModal.capabilities = caps;
|
||||
|
||||
document.getElementById('settings-device-id').value = device.id;
|
||||
document.getElementById('settings-device-name').value = device.name;
|
||||
@@ -181,7 +180,6 @@ export async function showSettings(deviceId) {
|
||||
serialGroup.style.display = 'none';
|
||||
}
|
||||
|
||||
const caps = device.capabilities || [];
|
||||
const ledCountGroup = document.getElementById('settings-led-count-group');
|
||||
if (caps.includes('manual_led_count')) {
|
||||
ledCountGroup.style.display = '';
|
||||
@@ -205,9 +203,6 @@ export async function showSettings(deviceId) {
|
||||
}
|
||||
|
||||
document.getElementById('settings-auto-shutdown').checked = !!device.auto_shutdown;
|
||||
|
||||
settingsModal.deviceType = device.device_type;
|
||||
settingsModal.capabilities = caps;
|
||||
settingsModal.snapshot();
|
||||
settingsModal.open();
|
||||
|
||||
@@ -314,54 +309,6 @@ export async function fetchDeviceBrightness(deviceId) {
|
||||
}
|
||||
}
|
||||
|
||||
// Static color helpers
|
||||
export function rgbToHex(r, g, b) {
|
||||
return '#' + [r, g, b].map(c => c.toString(16).padStart(2, '0')).join('');
|
||||
}
|
||||
|
||||
export function hexToRgb(hex) {
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : null;
|
||||
}
|
||||
|
||||
export async function saveDeviceStaticColor(deviceId, hexValue) {
|
||||
const rgb = hexToRgb(hexValue);
|
||||
try {
|
||||
await fetch(`${API_BASE}/devices/${deviceId}/color`, {
|
||||
method: 'PUT',
|
||||
headers: { ...getHeaders(), 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ color: rgb })
|
||||
});
|
||||
const wrap = document.querySelector(`[data-color-wrap="${deviceId}"]`);
|
||||
if (wrap) {
|
||||
const clearBtn = wrap.querySelector('.btn-clear-color');
|
||||
if (clearBtn) clearBtn.style.display = '';
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to set static color:', err);
|
||||
showToast('Failed to set static color', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
export async function clearDeviceStaticColor(deviceId) {
|
||||
try {
|
||||
await fetch(`${API_BASE}/devices/${deviceId}/color`, {
|
||||
method: 'PUT',
|
||||
headers: { ...getHeaders(), 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ color: null })
|
||||
});
|
||||
const picker = document.querySelector(`[data-device-color="${deviceId}"]`);
|
||||
if (picker) picker.value = '#000000';
|
||||
const wrap = document.querySelector(`[data-color-wrap="${deviceId}"]`);
|
||||
if (wrap) {
|
||||
const clearBtn = wrap.querySelector('.btn-clear-color');
|
||||
if (clearBtn) clearBtn.style.display = 'none';
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to clear static color:', err);
|
||||
}
|
||||
}
|
||||
|
||||
// FPS hint helpers (shared with device-discovery)
|
||||
export function _computeMaxFps(baudRate, ledCount, deviceType) {
|
||||
if (!baudRate || !ledCount || ledCount < 1) return null;
|
||||
|
||||
Reference in New Issue
Block a user