diff --git a/server/src/wled_controller/static/js/features/dashboard.js b/server/src/wled_controller/static/js/features/dashboard.js index e8d797d..956f4fc 100644 --- a/server/src/wled_controller/static/js/features/dashboard.js +++ b/server/src/wled_controller/static/js/features/dashboard.js @@ -25,9 +25,10 @@ export async function loadDashboard() { if (!container) { set_dashboardLoading(false); return; } try { - const [targetsResp, profilesResp] = await Promise.all([ + const [targetsResp, profilesResp, devicesResp] = await Promise.all([ fetch(`${API_BASE}/picture-targets`, { headers: getHeaders() }), fetch(`${API_BASE}/profiles`, { headers: getHeaders() }).catch(() => null), + fetch(`${API_BASE}/devices`, { headers: getHeaders() }).catch(() => null), ]); if (targetsResp.status === 401) { handle401Error(); return; } @@ -35,6 +36,9 @@ export async function loadDashboard() { const targets = targetsData.targets || []; const profilesData = profilesResp && profilesResp.ok ? await profilesResp.json() : { profiles: [] }; const profiles = profilesData.profiles || []; + const devicesData = devicesResp && devicesResp.ok ? await devicesResp.json() : { devices: [] }; + const devicesMap = {}; + for (const d of (devicesData.devices || [])) { devicesMap[d.id] = d; } if (targets.length === 0 && profiles.length === 0) { container.innerHTML = `
${t('dashboard.no_targets')}
`; @@ -81,7 +85,7 @@ export async function loadDashboard() { ${running.length} - ${running.map(target => renderDashboardTarget(target, true)).join('')} + ${running.map(target => renderDashboardTarget(target, true, devicesMap)).join('')} `; } @@ -91,7 +95,7 @@ export async function loadDashboard() { ${t('dashboard.section.stopped')} ${stopped.length} - ${stopped.map(target => renderDashboardTarget(target, false)).join('')} + ${stopped.map(target => renderDashboardTarget(target, false, devicesMap)).join('')} `; } @@ -105,7 +109,7 @@ export async function loadDashboard() { } } -function renderDashboardTarget(target, isRunning) { +function renderDashboardTarget(target, isRunning, devicesMap = {}) { const state = target.state || {}; const metrics = target.metrics || {}; const isLed = target.target_type === 'led' || target.target_type === 'wled'; @@ -113,8 +117,11 @@ function renderDashboardTarget(target, isRunning) { const typeLabel = isLed ? 'LED' : 'Key Colors'; let subtitleParts = [typeLabel]; - if (isLed && state.device_name) { - subtitleParts.push(state.device_name); + if (isLed) { + const device = target.device_id ? devicesMap[target.device_id] : null; + if (device) { + subtitleParts.push((device.device_type || '').toUpperCase()); + } } if (isRunning) {