Extract CSS and JS from index.html into separate ES modules

2026-01-30 11:38:09 -08:00
parent 052d3b89dd
commit e3aa25d85f
12 changed files with 3379 additions and 3300 deletions
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -0,0 +1,127 @@
+import { setConnectionStatus, setupErrorPanelListeners } from './ui.js';
+import { render } from './render.js';
+import { renderTable } from './table.js';
+import { showFlowView, closeFlowView } from './flow.js';
+import {
+    setCurrentConfig, setCurrentMode, setCurrentView, setTableSortKeys,
+    currentMode, currentView, flowViewData
+} from './state.js';
+
+let currentConfig = null;
+
+function connectSSE() {
+    const evtSource = new EventSource('/api/status/stream');
+    let heartbeatTimeout = null;
+
+    function resetHeartbeat() {
+        if (heartbeatTimeout) clearTimeout(heartbeatTimeout);
+        heartbeatTimeout = setTimeout(() => {
+            setConnectionStatus(false);
+            evtSource.close();
+            setTimeout(connectSSE, 2000);
+        }, 10000);
+    }
+
+    evtSource.addEventListener('status', (event) => {
+        resetHeartbeat();
+        const data = JSON.parse(event.data);
+        currentConfig = data.config || {};
+        setCurrentConfig(currentConfig);
+        render(data, currentConfig);
+    });
+
+    evtSource.onopen = () => {
+        setConnectionStatus(true);
+        resetHeartbeat();
+    };
+
+    evtSource.onerror = () => {
+        if (heartbeatTimeout) clearTimeout(heartbeatTimeout);
+        setConnectionStatus(false);
+        evtSource.close();
+        setTimeout(connectSSE, 2000);
+    };
+}
+
+function updateHash() {
+    let hash = '';
+    if (currentMode !== 'network') hash = currentMode;
+    if (currentView === 'table') hash += (hash ? '-' : '') + 'table';
+    window.location.hash = hash;
+}
+
+function setMode(mode) {
+    setCurrentMode(mode);
+    document.body.classList.remove('dante-mode', 'artnet-mode', 'sacn-mode');
+    document.getElementById('mode-network').classList.remove('active');
+    document.getElementById('mode-dante').classList.remove('active');
+    document.getElementById('mode-artnet').classList.remove('active');
+    document.getElementById('mode-sacn').classList.remove('active');
+
+    if (mode === 'dante') {
+        document.body.classList.add('dante-mode');
+        document.getElementById('mode-dante').classList.add('active');
+    } else if (mode === 'artnet') {
+        document.body.classList.add('artnet-mode');
+        document.getElementById('mode-artnet').classList.add('active');
+    } else if (mode === 'sacn') {
+        document.body.classList.add('sacn-mode');
+        document.getElementById('mode-sacn').classList.add('active');
+    } else {
+        document.getElementById('mode-network').classList.add('active');
+    }
+
+    updateHash();
+    setTableSortKeys([]);
+    if (currentView === 'table') {
+        renderTable();
+    }
+}
+
+function setView(view) {
+    setCurrentView(view);
+    document.getElementById('view-map').classList.toggle('active', view === 'map');
+    document.getElementById('view-table').classList.toggle('active', view === 'table');
+    document.body.classList.toggle('table-view', view === 'table');
+    updateHash();
+    if (view === 'table') {
+        renderTable();
+    }
+}
+
+function parseHash() {
+    const hash = window.location.hash.slice(1);
+    if (hash.startsWith('flow/')) {
+        if (flowViewData) showFlowView(hash.slice(5));
+        return;
+    }
+    closeFlowView();
+    const hashParts = hash.split('-');
+    const hashMode = hashParts[0];
+    const hashView = hashParts.includes('table') ? 'table' : 'map';
+
+    if (hashMode === 'dante' || hashMode === 'artnet' || hashMode === 'sacn') {
+        setMode(hashMode);
+    } else if (currentMode !== 'network') {
+        setMode('network');
+    }
+    if (hashView === 'table' && currentView !== 'table') {
+        setView('table');
+    } else if (hashView !== 'table' && currentView === 'table') {
+        setView('map');
+    }
+}
+
+document.getElementById('mode-network').addEventListener('click', () => setMode('network'));
+document.getElementById('mode-dante').addEventListener('click', () => setMode('dante'));
+document.getElementById('mode-artnet').addEventListener('click', () => setMode('artnet'));
+document.getElementById('mode-sacn').addEventListener('click', () => setMode('sacn'));
+document.getElementById('view-map').addEventListener('click', () => setView('map'));
+document.getElementById('view-table').addEventListener('click', () => setView('table'));
+
+setupErrorPanelListeners();
+
+window.addEventListener('hashchange', parseHash);
+parseHash();
+
+connectSSE();