From b7da4ab6b5cd058a3cca86ed30ac6b4b3492703c Mon Sep 17 00:00:00 2001 From: "alexei.dolgolyov" Date: Thu, 2 Apr 2026 15:29:38 +0300 Subject: [PATCH] feat: add Integrations tab and responsive icon-only tabs Move HA sources, weather sources, game integration, and MQTT settings into a dedicated Integrations top-level tab with tab-registry pattern. Collapse tab labels to icon-only at narrow desktop widths (<=1100px) to prevent toolbar overflow. --- .../src/wled_controller/static/css/layout.css | 26 +-- server/src/wled_controller/static/js/app.ts | 9 +- .../static/js/core/entity-events.ts | 10 + .../static/js/core/navigation.ts | 14 +- .../static/js/core/tab-registry.ts | 86 ++++++++ .../static/js/features/automations.ts | 11 +- .../static/js/features/color-strips.ts | 2 +- .../static/js/features/dashboard.ts | 7 +- .../static/js/features/game-integration.ts | 6 +- .../static/js/features/ha-light-targets.ts | 2 +- .../js/features/home-assistant-sources.ts | 5 +- .../static/js/features/integrations.ts | 187 ++++++++++++++++++ .../static/js/features/perf-charts.ts | 4 +- .../static/js/features/scene-presets.ts | 3 +- .../static/js/features/streams.ts | 71 +------ .../static/js/features/tabs.ts | 48 ++--- .../static/js/features/targets.ts | 7 +- .../static/js/features/value-sources.ts | 2 +- .../static/js/features/weather-sources.ts | 5 +- .../wled_controller/static/locales/en.json | 1 + .../wled_controller/static/locales/ru.json | 1 + .../wled_controller/static/locales/zh.json | 1 + .../src/wled_controller/templates/index.html | 12 +- 23 files changed, 369 insertions(+), 151 deletions(-) create mode 100644 server/src/wled_controller/static/js/core/tab-registry.ts create mode 100644 server/src/wled_controller/static/js/features/integrations.ts diff --git a/server/src/wled_controller/static/css/layout.css b/server/src/wled_controller/static/css/layout.css index de69aaf..3f3ad82 100644 --- a/server/src/wled_controller/static/css/layout.css +++ b/server/src/wled_controller/static/css/layout.css @@ -770,6 +770,21 @@ h2 { text-align: center; } +@media (max-width: 1100px) { + .tab-btn { + padding: 10px 10px; + } + + .tab-btn > span[data-i18n] { + display: none; + } + + .tab-btn .icon { + width: 20px; + height: 20px; + } +} + @media (max-width: 900px) { header { flex-direction: column; @@ -781,14 +796,3 @@ h2 { padding: 12px; } } - -@media (max-width: 600px) { - .tab-bar { - flex-wrap: wrap; - } - - .tab-btn { - padding: 8px 12px; - font-size: 0.9rem; - } -} diff --git a/server/src/wled_controller/static/js/app.ts b/server/src/wled_controller/static/js/app.ts index da68e89..16ba3fa 100644 --- a/server/src/wled_controller/static/js/app.ts +++ b/server/src/wled_controller/static/js/app.ts @@ -92,6 +92,9 @@ import { openSetupInstructions, closeSetupInstructions, autoSetupGameIntegration, } from './features/game-integration.ts'; +import { + loadIntegrations, switchIntegrationTab, +} from './features/integrations.ts'; import { openScenePresetCapture, editScenePreset, saveScenePreset, closeScenePresetEditor, activateScenePreset, cloneScenePreset, deleteScenePreset, @@ -403,6 +406,10 @@ Object.assign(window, { deleteScenePreset, addSceneTarget, + // integrations + loadIntegrations, + switchIntegrationTab, + // game integration showGameIntegrationEditor, saveGameIntegration, @@ -632,7 +639,7 @@ document.addEventListener('keydown', (e) => { // Tab shortcuts: Ctrl+1..4 (skip when typing in inputs) if (!inInput && e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey) { - const tabMap = { '1': 'dashboard', '2': 'automations', '3': 'targets', '4': 'streams', '5': 'graph' }; + const tabMap = { '1': 'dashboard', '2': 'automations', '3': 'targets', '4': 'streams', '5': 'integrations', '6': 'graph' }; const tab = tabMap[e.key]; if (tab) { e.preventDefault(); diff --git a/server/src/wled_controller/static/js/core/entity-events.ts b/server/src/wled_controller/static/js/core/entity-events.ts index b4d07f3..e0223f5 100644 --- a/server/src/wled_controller/static/js/core/entity-events.ts +++ b/server/src/wled_controller/static/js/core/entity-events.ts @@ -11,6 +11,8 @@ import { syncClocksCache, automationsCacheObj, scenePresetsCache, captureTemplatesCache, audioTemplatesCache, ppTemplatesCache, patternTemplatesCache, + weatherSourcesCache, haSourcesCache, mqttSourcesCache, + gameIntegrationsCache, } from './state.ts'; /** Maps entity_type string from the server event to its DataCache instance. */ @@ -28,6 +30,10 @@ const ENTITY_CACHE_MAP = { audio_template: audioTemplatesCache, pp_template: ppTemplatesCache, pattern_template: patternTemplatesCache, + weather_source: weatherSourcesCache, + home_assistant_source: haSourcesCache, + mqtt_source: mqttSourcesCache, + game_integration: gameIntegrationsCache, }; /** Maps entity_type to the window load function that refreshes its UI. */ @@ -45,6 +51,10 @@ const ENTITY_LOADER_MAP = { pp_template: 'loadPictureSources', automation: 'loadAutomations', scene_preset: 'loadAutomations', + weather_source: 'loadIntegrations', + home_assistant_source: 'loadIntegrations', + mqtt_source: 'loadIntegrations', + game_integration: 'loadIntegrations', }; /** Debounce timers per loader function name — coalesces rapid WS events and diff --git a/server/src/wled_controller/static/js/core/navigation.ts b/server/src/wled_controller/static/js/core/navigation.ts index 731d447..e0918e0 100644 --- a/server/src/wled_controller/static/js/core/navigation.ts +++ b/server/src/wled_controller/static/js/core/navigation.ts @@ -3,6 +3,7 @@ */ import { switchTab } from '../features/tabs.ts'; +import { callSubTabSwitcher, callTabLoader } from './tab-registry.ts'; /** * Navigate to a card on any tab/subtab, expanding the section and scrolling to it. @@ -25,13 +26,7 @@ export function navigateToCard(tab: string, subTab: string | null, sectionKey: s requestAnimationFrame(() => { if (subTab) { - if (tab === 'targets' && typeof window.switchTargetSubTab === 'function') { - window.switchTargetSubTab(subTab); - } else if (tab === 'streams' && typeof window.switchStreamTab === 'function') { - window.switchStreamTab(subTab); - } else if (tab === 'automations' && typeof window.switchAutomationTab === 'function') { - window.switchAutomationTab(subTab); - } + callSubTabSwitcher(tab, subTab); } // Expand section if collapsed @@ -89,10 +84,7 @@ function _highlightCard(card: Element) { /** Trigger the tab's data load function (used when card wasn't found in DOM). */ function _triggerTabLoad(tab: string) { - if (tab === 'dashboard' && typeof window.loadDashboard === 'function') window.loadDashboard(); - else if (tab === 'automations' && typeof window.loadAutomations === 'function') window.loadAutomations(); - else if (tab === 'streams' && typeof window.loadPictureSources === 'function') window.loadPictureSources(); - else if (tab === 'targets' && typeof window.loadTargetsTab === 'function') window.loadTargetsTab(); + callTabLoader(tab); } function _showDimOverlay(duration: number) { diff --git a/server/src/wled_controller/static/js/core/tab-registry.ts b/server/src/wled_controller/static/js/core/tab-registry.ts new file mode 100644 index 0000000..c63dd74 --- /dev/null +++ b/server/src/wled_controller/static/js/core/tab-registry.ts @@ -0,0 +1,86 @@ +/** + * Tab Registry — single source of truth for tab metadata, subtab storage keys, + * loader/switcher function names, and active-tab queries. + * + * Eliminates scattered if-chains that compare tab IDs as string literals. + */ + +interface SubTabConfig { + storageKey: string; + defaultSubTab: string; + switchFnName: string; +} + +interface TabConfig { + loadFnName: string; + subTab?: SubTabConfig; + autoRefresh?: boolean; +} + +const TAB_REGISTRY: Readonly> = { + dashboard: { loadFnName: 'loadDashboard', autoRefresh: true }, + targets: { loadFnName: 'loadTargetsTab', autoRefresh: true, + subTab: { storageKey: 'activeTargetSubTab', defaultSubTab: 'led-devices', switchFnName: 'switchTargetSubTab' } }, + streams: { loadFnName: 'loadPictureSources', + subTab: { storageKey: 'activeStreamTab', defaultSubTab: 'raw', switchFnName: 'switchStreamTab' } }, + integrations: { loadFnName: 'loadIntegrations', + subTab: { storageKey: 'activeIntegrationTab', defaultSubTab: 'weather', switchFnName: 'switchIntegrationTab' } }, + automations: { loadFnName: 'loadAutomations', + subTab: { storageKey: 'activeAutomationTab', defaultSubTab: 'automations', switchFnName: 'switchAutomationTab' } }, + graph: { loadFnName: 'loadGraphEditor' }, +}; + +/** Get the full config for a tab, or undefined if not registered. */ +export function getTabConfig(tab: string): TabConfig | undefined { + return TAB_REGISTRY[tab]; +} + +/** Get the subtab config for a tab, or undefined if the tab has no subtabs. */ +export function getSubTabConfig(tab: string): SubTabConfig | undefined { + return TAB_REGISTRY[tab]?.subTab; +} + +/** Read the active subtab from localStorage (with default fallback), or null if tab has no subtabs. */ +export function getActiveSubTab(tab: string): string | null { + const cfg = TAB_REGISTRY[tab]?.subTab; + if (!cfg) return null; + return localStorage.getItem(cfg.storageKey) || cfg.defaultSubTab; +} + +/** Write the active subtab to localStorage. No-op if tab has no subtabs. */ +export function setActiveSubTab(tab: string, subTab: string): void { + const cfg = TAB_REGISTRY[tab]?.subTab; + if (cfg) localStorage.setItem(cfg.storageKey, subTab); +} + +/** Call the tab's loader function via window. Returns true if the function existed and was called. */ +export function callTabLoader(tab: string): boolean { + const fnName = TAB_REGISTRY[tab]?.loadFnName; + if (fnName && typeof (window as any)[fnName] === 'function') { + (window as any)[fnName](); + return true; + } + return false; +} + +/** Call the tab's subtab switcher function via window. Returns true if the function existed and was called. */ +export function callSubTabSwitcher(tab: string, subTab: string): boolean { + const fnName = TAB_REGISTRY[tab]?.subTab?.switchFnName; + if (fnName && typeof (window as any)[fnName] === 'function') { + (window as any)[fnName](subTab); + return true; + } + return false; +} + +/** Check whether the given tab is currently active. */ +export function isActiveTab(tab: string): boolean { + return (localStorage.getItem('activeTab') || 'dashboard') === tab; +} + +/** Get all tab names that have autoRefresh enabled. */ +export function getAutoRefreshTabs(): string[] { + return Object.entries(TAB_REGISTRY) + .filter(([, cfg]) => cfg.autoRefresh) + .map(([name]) => name); +} diff --git a/server/src/wled_controller/static/js/features/automations.ts b/server/src/wled_controller/static/js/features/automations.ts index 0f7e27e..18f35c6 100644 --- a/server/src/wled_controller/static/js/features/automations.ts +++ b/server/src/wled_controller/static/js/features/automations.ts @@ -10,6 +10,7 @@ import { showToast, showConfirm, setTabRefreshing } from '../core/ui.ts'; import { Modal } from '../core/modal.ts'; import { CardSection } from '../core/card-sections.ts'; import { updateTabBadge, updateSubTabHash } from './tabs.ts'; +import { isActiveTab, getActiveSubTab, setActiveSubTab } from '../core/tab-registry.ts'; import { ICON_SETTINGS, ICON_START, ICON_PAUSE, ICON_CLOCK, ICON_AUTOMATION, ICON_HELP, ICON_OK, ICON_TIMER, ICON_MONITOR, ICON_RADIO, ICON_SCENE, ICON_CLONE, ICON_TRASH, ICON_CIRCLE_OFF, ICON_UNDO, ICON_WEB, ICON_SEARCH } from '../core/icons.ts'; import * as P from '../core/icon-paths.ts'; import { wrapCard } from '../core/card-colors.ts'; @@ -154,7 +155,7 @@ export function switchAutomationTab(tabKey: string) { document.querySelectorAll('.automation-sub-tab-panel').forEach(panel => (panel as HTMLElement).classList.toggle('active', panel.id === `automation-tab-${tabKey}`) ); - localStorage.setItem('activeAutomationTab', tabKey); + setActiveSubTab('automations', tabKey); updateSubTabHash('automations', tabKey); if (!_automationsTreeTriggered) { _automationsTree.setActive(tabKey); @@ -180,14 +181,12 @@ function _ensureRuleLogicIconSelect() { // Re-render automations when language changes (only if tab is active) document.addEventListener('languageChanged', () => { - if (apiKey && (localStorage.getItem('activeTab') || 'dashboard') === 'automations') loadAutomations(); + if (apiKey && isActiveTab('automations')) loadAutomations(); }); // React to real-time automation state changes from global events WS document.addEventListener('server:automation_state_changed', () => { - if (apiKey && (localStorage.getItem('activeTab') || 'dashboard') === 'automations') { - loadAutomations(); - } + if (apiKey && isActiveTab('automations')) loadAutomations(); }); export async function loadAutomations() { @@ -223,7 +222,7 @@ function renderAutomations(automations: any, sceneMap: any) { const autoItems = csAutomations.applySortOrder(automations.map(a => ({ key: a.id, html: createAutomationCard(a, sceneMap) }))); const sceneItems = csScenes.applySortOrder(scenePresetsCache.data.map(s => ({ key: s.id, html: createSceneCard(s) }))); - const activeTab = localStorage.getItem('activeAutomationTab') || 'automations'; + const activeTab = getActiveSubTab('automations')!; const treeItems = [ { key: 'automations', icon: ICON_AUTOMATION, titleKey: 'automations.title', count: automations.length }, diff --git a/server/src/wled_controller/static/js/features/color-strips.ts b/server/src/wled_controller/static/js/features/color-strips.ts index 73da41c..dc14e1b 100644 --- a/server/src/wled_controller/static/js/features/color-strips.ts +++ b/server/src/wled_controller/static/js/features/color-strips.ts @@ -1752,7 +1752,7 @@ const CSS_CARD_RENDERERS: Record = { const ws = (_cachedWeatherSources || []).find((w: any) => w.id === source.weather_source_id); const wsName = ws?.name || '—'; const wsLink = ws - ? ` stream-card-link" onclick="event.stopPropagation(); navigateToCard('streams','weather','weather-sources','data-id','${source.weather_source_id}')` + ? ` stream-card-link" onclick="event.stopPropagation(); navigateToCard('integrations','weather','weather-sources','data-id','${source.weather_source_id}')` : ''; return ` ${ICON_LINK_SOURCE} ${escapeHtml(wsName)} diff --git a/server/src/wled_controller/static/js/features/dashboard.ts b/server/src/wled_controller/static/js/features/dashboard.ts index b3a16e2..50a3d6b 100644 --- a/server/src/wled_controller/static/js/features/dashboard.ts +++ b/server/src/wled_controller/static/js/features/dashboard.ts @@ -8,6 +8,7 @@ import { t } from '../core/i18n.ts'; import { showToast, showConfirm, formatUptime, formatCompact, setTabRefreshing } from '../core/ui.ts'; import { renderPerfSection, renderPerfModeToggle, setPerfMode, initPerfCharts, startPerfPolling, stopPerfPolling } from './perf-charts.ts'; import { startAutoRefresh, updateTabBadge } from './tabs.ts'; +import { isActiveTab } from '../core/tab-registry.ts'; import { ICON_TARGET, ICON_AUTOMATION, ICON_CLOCK, ICON_WARNING, ICON_OK, ICON_STOP, ICON_STOP_PLAIN, ICON_START, ICON_PAUSE, ICON_HELP, ICON_SCENE, @@ -266,7 +267,7 @@ function _renderIntegrationCard(conn: HomeAssistantConnectionStatus): string { ? `${conn.entity_count} ${t('dashboard.integrations.entities')}` : t('ha_source.disconnected'); - return `
+ return `
${ICON_HOME}
@@ -283,7 +284,7 @@ function _renderMQTTIntegrationCard(conn: MQTTConnectionStatus): string { const statusDot = ``; const subtitle = conn.connected ? escapeHtml(conn.broker) : t('mqtt_source.disconnected'); - return `
+ return `
${ICON_RADIO}
@@ -914,7 +915,7 @@ export function stopUptimeTimer(): void { // React to global server events when dashboard tab is active function _isDashboardActive(): boolean { - return (localStorage.getItem('activeTab') || 'dashboard') === 'dashboard'; + return isActiveTab('dashboard'); } let _eventDebounceTimer: ReturnType | undefined = undefined; diff --git a/server/src/wled_controller/static/js/features/game-integration.ts b/server/src/wled_controller/static/js/features/game-integration.ts index a13c066..5c679d8 100644 --- a/server/src/wled_controller/static/js/features/game-integration.ts +++ b/server/src/wled_controller/static/js/features/game-integration.ts @@ -749,13 +749,13 @@ export function showGameEventMonitor(integrationId: string) { showGameIntegrationEditor(integrationId); } -// ── Load function (called from streams.ts) ── +// ── Load function (called from integrations.ts) ── export async function loadGameIntegrations() { await Promise.all([ gameIntegrationsCache.fetch(), gameAdaptersCache.fetch(), ]); - // Streams.ts handles rendering via its own renderPictureSourcesList - if (window.loadPictureSources) window.loadPictureSources(); + // Integrations.ts handles rendering via loadIntegrations + if ((window as any).loadIntegrations) (window as any).loadIntegrations(); } diff --git a/server/src/wled_controller/static/js/features/ha-light-targets.ts b/server/src/wled_controller/static/js/features/ha-light-targets.ts index 3c0eab0..41a8a66 100644 --- a/server/src/wled_controller/static/js/features/ha-light-targets.ts +++ b/server/src/wled_controller/static/js/features/ha-light-targets.ts @@ -512,7 +512,7 @@ export function createHALightTargetCard(target: any, haSourceMap: Record${P.home}`; @@ -136,7 +135,7 @@ export async function saveHASource(): Promise { showToast(t(id ? 'ha_source.updated' : 'ha_source.created'), 'success'); haSourceModal.forceClose(); haSourcesCache.invalidate(); - await loadPictureSources(); + if (typeof (window as any).loadIntegrations === 'function') await (window as any).loadIntegrations(); } catch (e: any) { if (e.isAuth) return; haSourceModal.showError(e.message); @@ -182,7 +181,7 @@ export async function deleteHASource(sourceId: string): Promise { } showToast(t('ha_source.deleted'), 'success'); haSourcesCache.invalidate(); - await loadPictureSources(); + if (typeof (window as any).loadIntegrations === 'function') await (window as any).loadIntegrations(); } catch (e: any) { if (e.isAuth) return; showToast(e.message, 'error'); diff --git a/server/src/wled_controller/static/js/features/integrations.ts b/server/src/wled_controller/static/js/features/integrations.ts new file mode 100644 index 0000000..758de7a --- /dev/null +++ b/server/src/wled_controller/static/js/features/integrations.ts @@ -0,0 +1,187 @@ +/** + * Integrations — Weather, Home Assistant, MQTT, Game integration sources. + * Extracted from streams.ts to a dedicated top-level tab. + */ + +import { + _cachedWeatherSources, _cachedHASources, _cachedMQTTSources, + _cachedGameIntegrations, _cachedGameAdapters, + weatherSourcesCache, haSourcesCache, mqttSourcesCache, + gameIntegrationsCache, gameAdaptersCache, + apiKey, +} from '../core/state.ts'; +import { t } from '../core/i18n.ts'; +import { CardSection } from '../core/card-sections.ts'; +import { TreeNav } from '../core/tree-nav.ts'; +import { updateSubTabHash } from './tabs.ts'; +import { getActiveSubTab, setActiveSubTab } from '../core/tab-registry.ts'; +import { fetchWithAuth } from '../core/api.ts'; +import { showToast, setTabRefreshing } from '../core/ui.ts'; +import { createWeatherSourceCard, initWeatherSourceDelegation } from './weather-sources.ts'; +import { createHASourceCard, initHASourceDelegation } from './home-assistant-sources.ts'; +import { createMQTTSourceCard, initMQTTSourceDelegation } from './mqtt-sources.ts'; +import { createGameIntegrationCard, csGameIntegrations } from './game-integration.ts'; +import { ICON_GAMEPAD, ICON_TRASH, ICON_HELP } from '../core/icons.ts'; +import * as P from '../core/icon-paths.ts'; + +// ── Bulk action handlers ── + +function _bulkDeleteFactory(endpoint: string, cache: any, toast: string) { + return async (ids: string[]) => { + const results = await Promise.allSettled(ids.map(id => + fetchWithAuth(`/${endpoint}/${id}`, { method: 'DELETE' }) + )); + const failed = results.filter(r => r.status === 'rejected' || ((r as any).value && !(r as any).value.ok)).length; + if (failed) showToast(`${ids.length - failed}/${ids.length} deleted`, 'warning'); + else showToast(t(toast), 'success'); + cache.invalidate(); + await loadIntegrations(); + }; +} + +const _weatherSourceDeleteAction = [{ key: 'delete', labelKey: 'bulk.delete', icon: ICON_TRASH, style: 'danger', confirm: 'bulk.confirm_delete', handler: _bulkDeleteFactory('weather-sources', weatherSourcesCache, 'weather_source.deleted') }]; +const _haSourceDeleteAction = [{ key: 'delete', labelKey: 'bulk.delete', icon: ICON_TRASH, style: 'danger', confirm: 'bulk.confirm_delete', handler: _bulkDeleteFactory('home-assistant/sources', haSourcesCache, 'ha_source.deleted') }]; +const _mqttSourceDeleteAction = [{ key: 'delete', labelKey: 'bulk.delete', icon: ICON_TRASH, style: 'danger', confirm: 'bulk.confirm_delete', handler: _bulkDeleteFactory('mqtt/sources', mqttSourcesCache, 'mqtt_source.deleted') }]; + +// ── Card section instances ── + +const csWeatherSources = new CardSection('weather-sources', { titleKey: 'weather_source.group.title', gridClass: 'templates-grid', addCardOnclick: "showWeatherSourceModal()", keyAttr: 'data-id', emptyKey: 'section.empty.weather_sources', bulkActions: _weatherSourceDeleteAction }); +const csHASources = new CardSection('ha-sources', { titleKey: 'ha_source.group.title', gridClass: 'templates-grid', addCardOnclick: "showHASourceModal()", keyAttr: 'data-id', emptyKey: 'section.empty.ha_sources', bulkActions: _haSourceDeleteAction }); +const csMQTTSources = new CardSection('mqtt-sources', { titleKey: 'mqtt_source.group.title', gridClass: 'templates-grid', addCardOnclick: "showMQTTSourceModal()", keyAttr: 'data-id', emptyKey: 'section.empty.mqtt_sources', bulkActions: _mqttSourceDeleteAction }); + +// Re-render integrations when language changes +document.addEventListener('languageChanged', () => { if (apiKey) loadIntegrations(); }); + +// ── Loading state ── + +let _integrationsLoading = false; + +// ── Tree navigation ── + +let _integrationsTreeTriggered = false; + +const _integrationsTree = new TreeNav('integrations-tree-nav', { + onSelect: (key) => { + _integrationsTreeTriggered = true; + switchIntegrationTab(key); + _integrationsTreeTriggered = false; + } +}); + +// ── Tab switching ── + +export function switchIntegrationTab(tabKey: string) { + document.querySelectorAll('.stream-tab-panel[id^="integration-tab-"]').forEach(panel => + panel.classList.toggle('active', panel.id === `integration-tab-${tabKey}`) + ); + setActiveSubTab('integrations', tabKey); + updateSubTabHash('integrations', tabKey); + if (!_integrationsTreeTriggered) { + _integrationsTree.setActive(tabKey); + } +} + +// ── Tab-to-section mapping ── + +const _integrationSectionMap: Record = { + weather: [csWeatherSources], + home_assistant: [csHASources], + mqtt: [csMQTTSources], + game: [csGameIntegrations], +}; + +// ── Load integrations ── + +export async function loadIntegrations() { + if (_integrationsLoading) return; + _integrationsLoading = true; + if (!csWeatherSources.isMounted()) setTabRefreshing('integrations-list', true); + try { + await Promise.all([ + weatherSourcesCache.fetch(), + haSourcesCache.fetch(), + mqttSourcesCache.fetch(), + gameIntegrationsCache.fetch(), + gameAdaptersCache.fetch(), + ]); + renderIntegrationsList(); + } catch (error: any) { + if (error.isAuth) return; + console.error('Error loading integrations:', error); + document.getElementById('integrations-list')!.innerHTML = ` +
${t('streams.error.load')}: ${error.message}
+ `; + } finally { + _integrationsLoading = false; + setTabRefreshing('integrations-list', false); + } +} + +// ── Render ── + +function renderIntegrationsList() { + const container = document.getElementById('integrations-list')!; + const activeTab = getActiveSubTab('integrations')!; + + const tabs = [ + { key: 'weather', icon: `${P.cloudSun}`, titleKey: 'streams.group.weather', count: _cachedWeatherSources.length }, + { key: 'home_assistant', icon: `${P.home}`, titleKey: 'streams.group.home_assistant', count: _cachedHASources.length }, + { key: 'mqtt', icon: `${P.radio}`, titleKey: 'streams.group.mqtt', count: _cachedMQTTSources.length }, + { key: 'game', icon: ICON_GAMEPAD, titleKey: 'streams.group.game', count: _cachedGameIntegrations.length }, + ]; + + // Build tree navigation structure + const treeGroups = [ + { key: 'weather', titleKey: 'streams.group.weather', icon: `${P.cloudSun}`, count: _cachedWeatherSources.length }, + { key: 'home_assistant', titleKey: 'streams.group.home_assistant', icon: `${P.home}`, count: _cachedHASources.length }, + { key: 'mqtt', titleKey: 'streams.group.mqtt', icon: `${P.radio}`, count: _cachedMQTTSources.length }, + { key: 'game', titleKey: 'streams.group.game', icon: ICON_GAMEPAD, count: _cachedGameIntegrations.length }, + ]; + + // Build card items + const weatherSourceItems = csWeatherSources.applySortOrder(_cachedWeatherSources.map(s => ({ key: s.id, html: createWeatherSourceCard(s) }))); + const haSourceItems = csHASources.applySortOrder(_cachedHASources.map(s => ({ key: s.id, html: createHASourceCard(s) }))); + const mqttSourceItems = csMQTTSources.applySortOrder(_cachedMQTTSources.map(s => ({ key: s.id, html: createMQTTSourceCard(s) }))); + const gameIntegrationItems = csGameIntegrations.applySortOrder(_cachedGameIntegrations.map(g => ({ key: g.id, html: createGameIntegrationCard(g) }))); + + if (csWeatherSources.isMounted()) { + // Incremental update: reconcile cards in-place + _integrationsTree.updateCounts({ + weather: _cachedWeatherSources.length, + home_assistant: _cachedHASources.length, + mqtt: _cachedMQTTSources.length, + game: _cachedGameIntegrations.length, + }); + csWeatherSources.reconcile(weatherSourceItems); + csHASources.reconcile(haSourceItems); + csMQTTSources.reconcile(mqttSourceItems); + csGameIntegrations.reconcile(gameIntegrationItems); + } else { + // First render: build full HTML + const panels = tabs.map(tab => { + let panelContent = ''; + if (tab.key === 'weather') panelContent = csWeatherSources.render(weatherSourceItems); + else if (tab.key === 'home_assistant') panelContent = csHASources.render(haSourceItems); + else if (tab.key === 'mqtt') panelContent = csMQTTSources.render(mqttSourceItems); + else if (tab.key === 'game') panelContent = csGameIntegrations.render(gameIntegrationItems); + return `
${panelContent}
`; + }).join(''); + + container.innerHTML = panels; + CardSection.bindAll([csWeatherSources, csHASources, csMQTTSources, csGameIntegrations]); + + // Event delegation for card actions + initWeatherSourceDelegation(container); + initHASourceDelegation(container); + initMQTTSourceDelegation(container); + + // Render tree sidebar + _integrationsTree.update(treeGroups, activeTab); + _integrationsTree.observeSections('integrations-list', { + 'weather-sources': 'weather', + 'ha-sources': 'home_assistant', + 'mqtt-sources': 'mqtt', + 'game-integrations': 'game', + }); + } +} diff --git a/server/src/wled_controller/static/js/features/perf-charts.ts b/server/src/wled_controller/static/js/features/perf-charts.ts index 420c01c..1c96261 100644 --- a/server/src/wled_controller/static/js/features/perf-charts.ts +++ b/server/src/wled_controller/static/js/features/perf-charts.ts @@ -11,6 +11,7 @@ window.Chart = Chart; // expose globally for targets.js, dashboard.js import { API_BASE, getHeaders, fetchMetricsHistory } from '../core/api.ts'; import { t } from '../core/i18n.ts'; import { dashboardPollInterval } from '../core/state.ts'; +import { isActiveTab } from '../core/tab-registry.ts'; import { createColorPicker, registerColorPicker } from '../core/color-picker.ts'; const MAX_SAMPLES = 120; @@ -387,7 +388,6 @@ document.addEventListener('visibilitychange', () => { stopPerfPolling(); } else { // Only resume if dashboard is active - const activeTab = localStorage.getItem('activeTab') || 'dashboard'; - if (activeTab === 'dashboard') startPerfPolling(); + if (isActiveTab('dashboard')) startPerfPolling(); } }); diff --git a/server/src/wled_controller/static/js/features/scene-presets.ts b/server/src/wled_controller/static/js/features/scene-presets.ts index dcc70ff..03f221e 100644 --- a/server/src/wled_controller/static/js/features/scene-presets.ts +++ b/server/src/wled_controller/static/js/features/scene-presets.ts @@ -16,6 +16,7 @@ import { TagInput, renderTagChips } from '../core/tag-input.ts'; import { cardColorStyle, cardColorButton } from '../core/card-colors.ts'; import { EntityPalette } from '../core/entity-palette.ts'; import { navigateToCard } from '../core/navigation.ts'; +import { isActiveTab } from '../core/tab-registry.ts'; import type { ScenePreset } from '../types.ts'; let _editingId: string | null = null; @@ -532,7 +533,7 @@ export function initScenePresetDelegation(container: HTMLElement): void { function _reloadScenesTab(): void { // Reload automations tab (which includes scenes section) - if ((localStorage.getItem('activeTab') || 'dashboard') === 'automations') { + if (isActiveTab('automations')) { if (typeof window.loadAutomations === 'function') window.loadAutomations(); } // Also refresh dashboard (scene presets section) diff --git a/server/src/wled_controller/static/js/features/streams.ts b/server/src/wled_controller/static/js/features/streams.ts index 4b70ed7..264d8c6 100644 --- a/server/src/wled_controller/static/js/features/streams.ts +++ b/server/src/wled_controller/static/js/features/streams.ts @@ -22,9 +22,6 @@ import { _cachedAudioSources, _cachedValueSources, _cachedSyncClocks, - _cachedWeatherSources, - _cachedHASources, - _cachedMQTTSources, mqttSourcesCache, _cachedAudioTemplates, _cachedCSPTemplates, _csptModalFilters, set_csptModalFilters, @@ -36,12 +33,10 @@ import { _sourcesLoading, set_sourcesLoading, apiKey, streamsCache, ppTemplatesCache, captureTemplatesCache, - audioSourcesCache, audioTemplatesCache, valueSourcesCache, syncClocksCache, weatherSourcesCache, haSourcesCache, assetsCache, _cachedAssets, filtersCache, + audioSourcesCache, audioTemplatesCache, valueSourcesCache, syncClocksCache, assetsCache, _cachedAssets, filtersCache, colorStripSourcesCache, csptCache, stripFiltersCache, gradientsCache, GradientEntity, - gameIntegrationsCache, gameAdaptersCache, - _cachedGameIntegrations, _cachedGameAdapters, audioProcessingTemplatesCache, _cachedAudioProcessingTemplates, audioFilterDefsCache, } from '../core/state.ts'; @@ -53,15 +48,12 @@ import { openDisplayPicker, formatDisplayLabel } from './displays.ts'; import { CardSection } from '../core/card-sections.ts'; import { TreeNav } from '../core/tree-nav.ts'; import { updateSubTabHash } from './tabs.ts'; +import { getActiveSubTab, setActiveSubTab } from '../core/tab-registry.ts'; import { createValueSourceCard } from './value-sources.ts'; import { createSyncClockCard, initSyncClockDelegation } from './sync-clocks.ts'; -import { createWeatherSourceCard, initWeatherSourceDelegation } from './weather-sources.ts'; -import { createHASourceCard, initHASourceDelegation } from './home-assistant-sources.ts'; -import { createMQTTSourceCard, initMQTTSourceDelegation } from './mqtt-sources.ts'; import { createAssetCard, initAssetDelegation } from './assets.ts'; import { createColorStripCard } from './color-strips.ts'; import { initAudioSourceDelegation } from './audio-sources.ts'; -import { createGameIntegrationCard, csGameIntegrations } from './game-integration.ts'; import { createAudioProcessingTemplateCard } from './audio-processing-templates.ts'; import { getEngineIcon, getAudioEngineIcon, getPictureSourceIcon, getAudioSourceIcon, getColorStripIcon, @@ -69,10 +61,8 @@ import { ICON_FPS, ICON_WEB, ICON_VALUE_SOURCE, ICON_CLOCK, ICON_AUDIO_LOOPBACK, ICON_AUDIO_INPUT, ICON_AUDIO_TEMPLATE, ICON_MONITOR, ICON_WRENCH, ICON_CAPTURE_TEMPLATE, ICON_PP_TEMPLATE, ICON_CSPT, ICON_HELP, ICON_TRASH, ICON_PALETTE, ICON_ASSET, - ICON_GAMEPAD, getAssetTypeIcon, } from '../core/icons.ts'; -import * as P from '../core/icon-paths.ts'; const _icon = (d: string) => `${d}`; import { wrapCard } from '../core/card-colors.ts'; @@ -108,9 +98,6 @@ const _audioTemplateDeleteAction = [{ key: 'delete', labelKey: 'bulk.delete', ic const _colorStripDeleteAction = [{ key: 'delete', labelKey: 'bulk.delete', icon: ICON_TRASH, style: 'danger', confirm: 'bulk.confirm_delete', handler: _bulkDeleteFactory('color-strip-sources', colorStripSourcesCache, 'color_strip.deleted') }]; const _valueSourceDeleteAction = [{ key: 'delete', labelKey: 'bulk.delete', icon: ICON_TRASH, style: 'danger', confirm: 'bulk.confirm_delete', handler: _bulkDeleteFactory('value-sources', valueSourcesCache, 'value_source.deleted') }]; const _syncClockDeleteAction = [{ key: 'delete', labelKey: 'bulk.delete', icon: ICON_TRASH, style: 'danger', confirm: 'bulk.confirm_delete', handler: _bulkDeleteFactory('sync-clocks', syncClocksCache, 'sync_clock.deleted') }]; -const _weatherSourceDeleteAction = [{ key: 'delete', labelKey: 'bulk.delete', icon: ICON_TRASH, style: 'danger', confirm: 'bulk.confirm_delete', handler: _bulkDeleteFactory('weather-sources', weatherSourcesCache, 'weather_source.deleted') }]; -const _haSourceDeleteAction = [{ key: 'delete', labelKey: 'bulk.delete', icon: ICON_TRASH, style: 'danger', confirm: 'bulk.confirm_delete', handler: _bulkDeleteFactory('home-assistant/sources', haSourcesCache, 'ha_source.deleted') }]; -const _mqttSourceDeleteAction = [{ key: 'delete', labelKey: 'bulk.delete', icon: ICON_TRASH, style: 'danger', confirm: 'bulk.confirm_delete', handler: _bulkDeleteFactory('mqtt/sources', mqttSourcesCache, 'mqtt_source.deleted') }]; const _assetDeleteAction = [{ key: 'delete', labelKey: 'bulk.delete', icon: ICON_TRASH, style: 'danger', confirm: 'bulk.confirm_delete', handler: _bulkDeleteFactory('assets', assetsCache, 'asset.deleted') }]; const _csptDeleteAction = [{ key: 'delete', labelKey: 'bulk.delete', icon: ICON_TRASH, style: 'danger', confirm: 'bulk.confirm_delete', handler: _bulkDeleteFactory('color-strip-processing-templates', csptCache, 'templates.deleted') }]; const _aptDeleteAction = [{ key: 'delete', labelKey: 'bulk.delete', icon: ICON_TRASH, style: 'danger', confirm: 'bulk.confirm_delete', handler: _bulkDeleteFactory('audio-processing-templates', audioProcessingTemplatesCache, 'audio_processing.deleted') }]; @@ -180,9 +167,6 @@ const csAudioTemplates = new CardSection('audio-templates', { titleKey: 'audio_t const csColorStrips = new CardSection('color-strips', { titleKey: 'targets.section.color_strips', gridClass: 'templates-grid', addCardOnclick: "showCSSEditor()", keyAttr: 'data-css-id', emptyKey: 'section.empty.color_strips', bulkActions: _colorStripDeleteAction }); const csValueSources = new CardSection('value-sources', { titleKey: 'value_source.group.title', gridClass: 'templates-grid', addCardOnclick: "showValueSourceModal()", keyAttr: 'data-id', emptyKey: 'section.empty.value_sources', bulkActions: _valueSourceDeleteAction }); const csSyncClocks = new CardSection('sync-clocks', { titleKey: 'sync_clock.group.title', gridClass: 'templates-grid', addCardOnclick: "showSyncClockModal()", keyAttr: 'data-id', emptyKey: 'section.empty.sync_clocks', bulkActions: _syncClockDeleteAction }); -const csWeatherSources = new CardSection('weather-sources', { titleKey: 'weather_source.group.title', gridClass: 'templates-grid', addCardOnclick: "showWeatherSourceModal()", keyAttr: 'data-id', emptyKey: 'section.empty.weather_sources', bulkActions: _weatherSourceDeleteAction }); -const csHASources = new CardSection('ha-sources', { titleKey: 'ha_source.group.title', gridClass: 'templates-grid', addCardOnclick: "showHASourceModal()", keyAttr: 'data-id', emptyKey: 'section.empty.ha_sources', bulkActions: _haSourceDeleteAction }); -const csMQTTSources = new CardSection('mqtt-sources', { titleKey: 'mqtt_source.group.title', gridClass: 'templates-grid', addCardOnclick: "showMQTTSourceModal()", keyAttr: 'data-id', emptyKey: 'section.empty.mqtt_sources', bulkActions: _mqttSourceDeleteAction }); const csAssets = new CardSection('assets', { titleKey: 'asset.group.title', gridClass: 'templates-grid', addCardOnclick: "showAssetUploadModal()", keyAttr: 'data-id', emptyKey: 'section.empty.assets', bulkActions: _assetDeleteAction }); const csCSPTemplates = new CardSection('css-proc-templates', { titleKey: 'css_processing.title', gridClass: 'templates-grid', addCardOnclick: "showAddCSPTModal()", keyAttr: 'data-cspt-id', emptyKey: 'section.empty.cspt', bulkActions: _csptDeleteAction }); const _gradientDeleteAction = [{ key: 'delete', labelKey: 'bulk.delete', icon: ICON_TRASH, style: 'danger', confirm: 'bulk.confirm_delete', handler: _bulkDeleteFactory('gradients', gradientsCache, 'gradient.deleted') }]; @@ -297,16 +281,11 @@ export async function loadPictureSources() { audioSourcesCache.fetch(), valueSourcesCache.fetch(), syncClocksCache.fetch(), - weatherSourcesCache.fetch(), - haSourcesCache.fetch(), - mqttSourcesCache.fetch(), assetsCache.fetch(), audioTemplatesCache.fetch(), colorStripSourcesCache.fetch(), csptCache.fetch(), gradientsCache.fetch(), - gameIntegrationsCache.fetch(), - gameAdaptersCache.fetch(), audioProcessingTemplatesCache.fetch(), audioFilterDefsCache.data.length === 0 ? audioFilterDefsCache.fetch() : Promise.resolve(audioFilterDefsCache.data), filtersCache.data.length === 0 ? filtersCache.fetch() : Promise.resolve(filtersCache.data), @@ -338,7 +317,7 @@ export function switchStreamTab(tabKey: string) { document.querySelectorAll('.stream-tab-panel[id^="stream-tab-"]').forEach(panel => panel.classList.toggle('active', panel.id === `stream-tab-${tabKey}`) ); - localStorage.setItem('activeStreamTab', tabKey); + setActiveSubTab('streams', tabKey); updateSubTabHash('streams', tabKey); // Update tree active state (unless the tree triggered this switch) if (!_streamsTreeTriggered) { @@ -361,10 +340,6 @@ const _streamSectionMap = { audio_processing: [csAudioProcessingTemplates], value: [csValueSources], sync: [csSyncClocks], - weather: [csWeatherSources], - home_assistant: [csHASources], - mqtt: [csMQTTSources], - game: [csGameIntegrations], }; type StreamCardRenderer = (stream: any) => string; @@ -416,7 +391,7 @@ const PICTURE_SOURCE_CARD_RENDERERS: Record = { function renderPictureSourcesList(streams: any) { const container = document.getElementById('streams-list')!; - const activeTab = localStorage.getItem('activeStreamTab') || 'raw'; + const activeTab = getActiveSubTab('streams')!; const renderStreamCard = (stream: any) => { const typeIcon = getPictureSourceIcon(stream.stream_type); @@ -590,11 +565,7 @@ function renderPictureSourcesList(streams: any) { { key: 'audio_processing', icon: ICON_AUDIO_TEMPLATE, titleKey: 'streams.group.audio_processing', count: audioProcessingTemplates.length }, { key: 'value', icon: ICON_VALUE_SOURCE, titleKey: 'streams.group.value', count: _cachedValueSources.length }, { key: 'sync', icon: ICON_CLOCK, titleKey: 'streams.group.sync', count: _cachedSyncClocks.length }, - { key: 'weather', icon: `${P.cloudSun}`, titleKey: 'streams.group.weather', count: _cachedWeatherSources.length }, - { key: 'home_assistant', icon: `${P.home}`, titleKey: 'streams.group.home_assistant', count: _cachedHASources.length }, - { key: 'mqtt', icon: `${P.radio}`, titleKey: 'streams.group.mqtt', count: _cachedMQTTSources.length }, { key: 'assets', icon: ICON_ASSET, titleKey: 'streams.group.assets', count: _cachedAssets.length }, - { key: 'game', icon: ICON_GAMEPAD, titleKey: 'streams.group.game', count: _cachedGameIntegrations.length }, ]; // Build tree navigation structure @@ -652,15 +623,6 @@ function renderPictureSourcesList(streams: any) { }, ] }, - { - key: 'integrations_group', icon: `${P.wifi}`, titleKey: 'tree.group.integrations', - children: [ - { key: 'weather', titleKey: 'streams.group.weather', icon: `${P.cloudSun}`, count: _cachedWeatherSources.length }, - { key: 'home_assistant', titleKey: 'streams.group.home_assistant', icon: `${P.home}`, count: _cachedHASources.length }, - { key: 'mqtt', titleKey: 'streams.group.mqtt', icon: `${P.radio}`, count: _cachedMQTTSources.length }, - { key: 'game', titleKey: 'streams.group.game', icon: ICON_GAMEPAD, count: _cachedGameIntegrations.length }, - ] - }, { key: 'utility_group', icon: ICON_WRENCH, titleKey: 'tree.group.utility', children: [ @@ -812,12 +774,8 @@ function renderPictureSourcesList(streams: any) { const gradientItems = csGradients.applySortOrder(gradients.map(g => ({ key: g.id, html: renderGradientCard(g) }))); const valueItems = csValueSources.applySortOrder(_cachedValueSources.map(s => ({ key: s.id, html: createValueSourceCard(s) }))); const syncClockItems = csSyncClocks.applySortOrder(_cachedSyncClocks.map(s => ({ key: s.id, html: createSyncClockCard(s) }))); - const weatherSourceItems = csWeatherSources.applySortOrder(_cachedWeatherSources.map(s => ({ key: s.id, html: createWeatherSourceCard(s) }))); - const haSourceItems = csHASources.applySortOrder(_cachedHASources.map(s => ({ key: s.id, html: createHASourceCard(s) }))); - const mqttSourceItems = csMQTTSources.applySortOrder(_cachedMQTTSources.map(s => ({ key: s.id, html: createMQTTSourceCard(s) }))); const assetItems = csAssets.applySortOrder(_cachedAssets.map(a => ({ key: a.id, html: createAssetCard(a) }))); const csptItems = csCSPTemplates.applySortOrder(csptTemplates.map(t => ({ key: t.id, html: renderCSPTCard(t) }))); - const gameIntegrationItems = csGameIntegrations.applySortOrder(_cachedGameIntegrations.map(g => ({ key: g.id, html: createGameIntegrationCard(g) }))); const audioProcessingTemplateItems = csAudioProcessingTemplates.applySortOrder(audioProcessingTemplates.map(t => ({ key: t.id, html: createAudioProcessingTemplateCard(t) }))); if (csRawStreams.isMounted()) { @@ -837,11 +795,7 @@ function renderPictureSourcesList(streams: any) { audio_processing: audioProcessingTemplates.length, value: _cachedValueSources.length, sync: _cachedSyncClocks.length, - weather: _cachedWeatherSources.length, - home_assistant: _cachedHASources.length, - mqtt: _cachedMQTTSources.length, assets: _cachedAssets.length, - game: _cachedGameIntegrations.length, }); csRawStreams.reconcile(rawStreamItems); csRawTemplates.reconcile(rawTemplateItems); @@ -858,11 +812,7 @@ function renderPictureSourcesList(streams: any) { csVideoStreams.reconcile(videoItems); csValueSources.reconcile(valueItems); csSyncClocks.reconcile(syncClockItems); - csWeatherSources.reconcile(weatherSourceItems); - csHASources.reconcile(haSourceItems); - csMQTTSources.reconcile(mqttSourceItems); csAssets.reconcile(assetItems); - csGameIntegrations.reconcile(gameIntegrationItems); } else { // First render: build full HTML const panels = tabs.map(tab => { @@ -880,24 +830,17 @@ function renderPictureSourcesList(streams: any) { else if (tab.key === 'audio_processing') panelContent = csAudioProcessingTemplates.render(audioProcessingTemplateItems); else if (tab.key === 'value') panelContent = csValueSources.render(valueItems); else if (tab.key === 'sync') panelContent = csSyncClocks.render(syncClockItems); - else if (tab.key === 'weather') panelContent = csWeatherSources.render(weatherSourceItems); - else if (tab.key === 'home_assistant') panelContent = csHASources.render(haSourceItems); - else if (tab.key === 'mqtt') panelContent = csMQTTSources.render(mqttSourceItems); else if (tab.key === 'assets') panelContent = csAssets.render(assetItems); - else if (tab.key === 'game') panelContent = csGameIntegrations.render(gameIntegrationItems); else if (tab.key === 'video') panelContent = csVideoStreams.render(videoItems); else panelContent = csStaticStreams.render(staticItems); return `
${panelContent}
`; }).join(''); container.innerHTML = panels; - CardSection.bindAll([csRawStreams, csRawTemplates, csProcStreams, csProcTemplates, csCSPTemplates, csColorStrips, csGradients, csAudioCapture, csAudioProcessed, csAudioTemplates, csAudioProcessingTemplates, csStaticStreams, csVideoStreams, csValueSources, csSyncClocks, csWeatherSources, csHASources, csMQTTSources, csAssets, csGameIntegrations]); + CardSection.bindAll([csRawStreams, csRawTemplates, csProcStreams, csProcTemplates, csCSPTemplates, csColorStrips, csGradients, csAudioCapture, csAudioProcessed, csAudioTemplates, csAudioProcessingTemplates, csStaticStreams, csVideoStreams, csValueSources, csSyncClocks, csAssets]); // Event delegation for card actions (replaces inline onclick handlers) initSyncClockDelegation(container); - initWeatherSourceDelegation(container); - initHASourceDelegation(container); - initMQTTSourceDelegation(container); initAudioSourceDelegation(container); initAssetDelegation(container); @@ -917,11 +860,7 @@ function renderPictureSourcesList(streams: any) { 'audio-processing-templates': 'audio_processing', 'value-sources': 'value', 'sync-clocks': 'sync', - 'weather-sources': 'weather', - 'ha-sources': 'home_assistant', - 'mqtt-sources': 'mqtt', 'assets': 'assets', - 'game-integrations': 'game', }); } } diff --git a/server/src/wled_controller/static/js/features/tabs.ts b/server/src/wled_controller/static/js/features/tabs.ts index 378d589..ae45421 100644 --- a/server/src/wled_controller/static/js/features/tabs.ts +++ b/server/src/wled_controller/static/js/features/tabs.ts @@ -3,6 +3,7 @@ */ import { apiKey, refreshInterval, setRefreshInterval, dashboardPollInterval } from '../core/state.ts'; +import { getActiveSubTab, setActiveSubTab, callTabLoader, callSubTabSwitcher, getSubTabConfig, getTabConfig } from '../core/tab-registry.ts'; /** Parse location.hash into {tab, subTab}. */ export function parseHash(): { tab?: string; subTab?: string } { @@ -44,19 +45,12 @@ export function switchTab(name: string, { updateHash = true, skipLoad = false }: requestAnimationFrame(() => window.scrollTo(0, _tabScrollPositions[name] || 0)); if (updateHash && !_suppressHashUpdate) { - const subTab = name === 'targets' - ? (localStorage.getItem('activeTargetSubTab') || 'led') - : name === 'streams' - ? (localStorage.getItem('activeStreamTab') || 'raw') - : name === 'automations' - ? (localStorage.getItem('activeAutomationTab') || 'automations') - : null; - _setHash(name, subTab); + _setHash(name, getActiveSubTab(name)); } if (name === 'dashboard') { // Use window.* to avoid circular imports with feature modules - if (!skipLoad && apiKey && typeof window.loadDashboard === 'function') window.loadDashboard(); + if (!skipLoad && apiKey) callTabLoader(name); } else { if (typeof window.stopPerfPolling === 'function') window.stopPerfPolling(); if (typeof window.stopUptimeTimer === 'function') window.stopUptimeTimer(); @@ -66,15 +60,7 @@ export function switchTab(name: string, { updateHash = true, skipLoad = false }: if (typeof window.disconnectAllLedPreviewWS === 'function') window.disconnectAllLedPreviewWS(); } if (!apiKey || skipLoad) return; - if (name === 'streams') { - if (typeof window.loadPictureSources === 'function') window.loadPictureSources(); - } else if (name === 'targets') { - if (typeof window.loadTargetsTab === 'function') window.loadTargetsTab(); - } else if (name === 'automations') { - if (typeof window.loadAutomations === 'function') window.loadAutomations(); - } else if (name === 'graph') { - if (typeof window.loadGraphEditor === 'function') window.loadGraphEditor(); - } + callTabLoader(name); } } @@ -87,9 +73,7 @@ export function initTabs(): void { saved = hashRoute.tab; // Pre-set sub-tab so the sub-tab switch functions pick it up if (hashRoute.subTab) { - if (saved === 'targets') localStorage.setItem('activeTargetSubTab', hashRoute.subTab); - if (saved === 'streams') localStorage.setItem('activeStreamTab', hashRoute.subTab); - if (saved === 'automations') localStorage.setItem('activeAutomationTab', hashRoute.subTab); + setActiveSubTab(saved, hashRoute.subTab); } } else { saved = localStorage.getItem('activeTab'); @@ -115,14 +99,14 @@ export function startAutoRefresh(): void { setRefreshInterval(setInterval(() => { if (!apiKey || document.hidden) return; const activeTab = localStorage.getItem('activeTab') || 'dashboard'; + const cfg = getTabConfig(activeTab); + if (!cfg?.autoRefresh) return; + // Skip refresh while user interacts with a picker or slider if (activeTab === 'targets') { - // Skip refresh while user interacts with a picker or slider const panel = document.getElementById('targets-panel-content'); if (panel && panel.contains(document.activeElement) && document.activeElement!.matches('input')) return; - if (typeof window.loadTargetsTab === 'function') window.loadTargetsTab(); - } else if (activeTab === 'dashboard') { - if (typeof window.loadDashboard === 'function') window.loadDashboard(); } + callTabLoader(activeTab); }, dashboardPollInterval)); } @@ -142,15 +126,11 @@ export function handlePopState(): void { } if (hashRoute.subTab) { - if (hashRoute.tab === 'targets') { - const currentSub = localStorage.getItem('activeTargetSubTab'); - if (hashRoute.subTab !== currentSub && typeof window.switchTargetSubTab === 'function') { - window.switchTargetSubTab(hashRoute.subTab); - } - } else if (hashRoute.tab === 'streams') { - const currentSub = localStorage.getItem('activeStreamTab'); - if (hashRoute.subTab !== currentSub && typeof window.switchStreamTab === 'function') { - window.switchStreamTab(hashRoute.subTab); + const subCfg = getSubTabConfig(hashRoute.tab); + if (subCfg) { + const currentSub = localStorage.getItem(subCfg.storageKey); + if (hashRoute.subTab !== currentSub) { + callSubTabSwitcher(hashRoute.tab, hashRoute.subTab); } } } diff --git a/server/src/wled_controller/static/js/features/targets.ts b/server/src/wled_controller/static/js/features/targets.ts index 097807c..64f9fb5 100644 --- a/server/src/wled_controller/static/js/features/targets.ts +++ b/server/src/wled_controller/static/js/features/targets.ts @@ -35,6 +35,7 @@ import { createFpsSparkline } from '../core/chart-utils.ts'; import { CardSection } from '../core/card-sections.ts'; import { TreeNav } from '../core/tree-nav.ts'; import { updateSubTabHash, updateTabBadge } from './tabs.ts'; +import { isActiveTab, getActiveSubTab, setActiveSubTab } from '../core/tab-registry.ts'; import type { OutputTarget, LedOutputTarget } from '../types.ts'; import { bindableSourceId, bindableValue } from '../types.ts'; import { BindableScalarWidget } from '../core/bindable-scalar.ts'; @@ -99,7 +100,7 @@ const csHALightTargets = new CardSection('ha-light-targets', { titleKey: 'ha_lig // Re-render targets tab when language changes (only if tab is active) document.addEventListener('languageChanged', () => { - if (apiKey && localStorage.getItem('activeTab') === 'targets') loadTargetsTab(); + if (apiKey && isActiveTab('targets')) loadTargetsTab(); }); // --- FPS sparkline history and chart instances for target cards --- @@ -568,7 +569,7 @@ export function switchTargetSubTab(tabKey: any) { document.querySelectorAll('.target-sub-tab-panel').forEach(panel => (panel as HTMLElement).classList.toggle('active', panel.id === `target-sub-tab-${tabKey}`) ); - localStorage.setItem('activeTargetSubTab', tabKey); + setActiveSubTab('targets', tabKey); updateSubTabHash('targets', tabKey); // Update tree active state (unless the tree triggered this switch) if (!_treeTriggered) { @@ -649,7 +650,7 @@ export async function loadTargetsTab() { const runningCount = targetsWithState.filter(t => t.state && t.state.processing).length; updateTabBadge('targets', runningCount); - const activeSubTab = localStorage.getItem('activeTargetSubTab') || 'led'; + const activeSubTab = getActiveSubTab('targets')!; // Build tree navigation structure const treeGroups = [ diff --git a/server/src/wled_controller/static/js/features/value-sources.ts b/server/src/wled_controller/static/js/features/value-sources.ts index a2df23a..1de7ae4 100644 --- a/server/src/wled_controller/static/js/features/value-sources.ts +++ b/server/src/wled_controller/static/js/features/value-sources.ts @@ -1303,7 +1303,7 @@ export function createValueSourceCard(src: ValueSource) { const entityId = (src as any).entity_id || ''; const attr = (src as any).attribute; const haBadge = haSrc - ? `${ICON_HOME} ${escapeHtml(haName)}` + ? `${ICON_HOME} ${escapeHtml(haName)}` : `${ICON_HOME} ${escapeHtml(haName)}`; propsHtml = ` ${haBadge} diff --git a/server/src/wled_controller/static/js/features/weather-sources.ts b/server/src/wled_controller/static/js/features/weather-sources.ts index 5072090..da296c0 100644 --- a/server/src/wled_controller/static/js/features/weather-sources.ts +++ b/server/src/wled_controller/static/js/features/weather-sources.ts @@ -12,7 +12,6 @@ import * as P from '../core/icon-paths.ts'; import { IconSelect } from '../core/icon-select.ts'; import { wrapCard } from '../core/card-colors.ts'; import { TagInput, renderTagChips } from '../core/tag-input.ts'; -import { loadPictureSources } from './streams.ts'; import type { WeatherSource } from '../types.ts'; const ICON_WEATHER = `${P.cloudSun}`; @@ -161,7 +160,7 @@ export async function saveWeatherSource(): Promise { showToast(t(id ? 'weather_source.updated' : 'weather_source.created'), 'success'); weatherSourceModal.forceClose(); weatherSourcesCache.invalidate(); - await loadPictureSources(); + if (typeof (window as any).loadIntegrations === 'function') await (window as any).loadIntegrations(); } catch (e: any) { if (e.isAuth) return; weatherSourceModal.showError(e.message); @@ -207,7 +206,7 @@ export async function deleteWeatherSource(sourceId: string): Promise { } showToast(t('weather_source.deleted'), 'success'); weatherSourcesCache.invalidate(); - await loadPictureSources(); + if (typeof (window as any).loadIntegrations === 'function') await (window as any).loadIntegrations(); } catch (e: any) { if (e.isAuth) return; showToast(e.message, 'error'); diff --git a/server/src/wled_controller/static/locales/en.json b/server/src/wled_controller/static/locales/en.json index 4e5da27..4d895ec 100644 --- a/server/src/wled_controller/static/locales/en.json +++ b/server/src/wled_controller/static/locales/en.json @@ -459,6 +459,7 @@ "section.expand_all": "Expand all sections", "section.collapse_all": "Collapse all sections", "streams.title": "Sources", + "integrations.title": "Integrations", "streams.description": "Sources define the capture pipeline. A raw source captures from a display using a capture template. A processed source applies postprocessing to another source. Assign sources to devices.", "streams.group.raw": "Sources", "streams.group.raw_templates": "Engine Templates", diff --git a/server/src/wled_controller/static/locales/ru.json b/server/src/wled_controller/static/locales/ru.json index b41a072..a08b322 100644 --- a/server/src/wled_controller/static/locales/ru.json +++ b/server/src/wled_controller/static/locales/ru.json @@ -461,6 +461,7 @@ "section.expand_all": "Развернуть все секции", "section.collapse_all": "Свернуть все секции", "streams.title": "Источники", + "integrations.title": "Интеграции", "streams.description": "Источники определяют конвейер захвата. Сырой источник захватывает экран с помощью шаблона захвата. Обработанный источник применяет постобработку к другому источнику. Назначайте источники устройствам.", "streams.group.raw": "Источники", "streams.group.raw_templates": "Шаблоны движка", diff --git a/server/src/wled_controller/static/locales/zh.json b/server/src/wled_controller/static/locales/zh.json index acac713..8a1da66 100644 --- a/server/src/wled_controller/static/locales/zh.json +++ b/server/src/wled_controller/static/locales/zh.json @@ -461,6 +461,7 @@ "section.expand_all": "全部展开", "section.collapse_all": "全部折叠", "streams.title": "源", + "integrations.title": "集成", "streams.description": "源定义采集管线。原始源使用采集模板从显示器采集。处理源对另一个源应用后处理。将源分配给设备。", "streams.group.raw": "源", "streams.group.raw_templates": "引擎模板", diff --git a/server/src/wled_controller/templates/index.html b/server/src/wled_controller/templates/index.html index 53e7856..38e0148 100644 --- a/server/src/wled_controller/templates/index.html +++ b/server/src/wled_controller/templates/index.html @@ -47,7 +47,8 @@ - + +
API @@ -145,6 +146,15 @@
+
+
+ +
+ +
+
+
+