feat: improve UI

2025-10-11 18:25:00 +02:00
parent 30814807aa
commit 294d86f24b
6 changed files with 842 additions and 155 deletions
--- a/public/scripts/navigation.js
+++ b/public/scripts/navigation.js
@@ -0,0 +1,139 @@
+// Navigation Manager for SPORE LEDLab
+
+class NavigationManager {
+    constructor() {
+        this.currentView = 'stream';
+        this.init();
+    }
+
+    init() {
+        this.setupNavigationListeners();
+        // Sync settings values on init
+        this.syncSettingsValues();
+    }
+
+    setupNavigationListeners() {
+        // Navigation tab listeners
+        const navTabs = document.querySelectorAll('.nav-tab');
+        navTabs.forEach(tab => {
+            tab.addEventListener('click', () => {
+                const view = tab.dataset.view;
+                this.switchView(view);
+            });
+        });
+
+        // Settings apply button
+        const settingsApplyBtn = document.getElementById('settings-apply-matrix-btn');
+        if (settingsApplyBtn) {
+            settingsApplyBtn.addEventListener('click', () => {
+                this.applySettingsFromView();
+            });
+        }
+
+        // Sync settings when stream view matrix config changes
+        const streamWidthInput = document.getElementById('matrix-width');
+        const streamHeightInput = document.getElementById('matrix-height');
+        
+        if (streamWidthInput) {
+            streamWidthInput.addEventListener('change', () => this.syncSettingsValues());
+        }
+        if (streamHeightInput) {
+            streamHeightInput.addEventListener('change', () => this.syncSettingsValues());
+        }
+    }
+
+    switchView(viewName) {
+        // Hide all views
+        const allViews = document.querySelectorAll('.view-content');
+        allViews.forEach(view => view.classList.remove('active'));
+
+        // Deactivate all tabs
+        const allTabs = document.querySelectorAll('.nav-tab');
+        allTabs.forEach(tab => tab.classList.remove('active'));
+
+        // Show selected view
+        const targetView = document.getElementById(`${viewName}-view`);
+        if (targetView) {
+            targetView.classList.add('active');
+        }
+
+        // Activate selected tab
+        const targetTab = document.querySelector(`.nav-tab[data-view="${viewName}"]`);
+        if (targetTab) {
+            targetTab.classList.add('active');
+        }
+
+        this.currentView = viewName;
+
+        // Sync values when switching to settings
+        if (viewName === 'settings') {
+            this.syncSettingsValues();
+        }
+
+        console.log(`Switched to ${viewName} view`);
+    }
+
+    syncSettingsValues() {
+        // Sync matrix configuration values from stream to settings
+        const streamWidth = document.getElementById('matrix-width');
+        const streamHeight = document.getElementById('matrix-height');
+        const settingsWidth = document.getElementById('settings-matrix-width');
+        const settingsHeight = document.getElementById('settings-matrix-height');
+
+        if (streamWidth && settingsWidth) {
+            settingsWidth.value = streamWidth.value;
+        }
+        if (streamHeight && settingsHeight) {
+            settingsHeight.value = streamHeight.value;
+        }
+    }
+
+    applySettingsFromView() {
+        const settingsWidth = document.getElementById('settings-matrix-width');
+        const settingsHeight = document.getElementById('settings-matrix-height');
+        const streamWidth = document.getElementById('matrix-width');
+        const streamHeight = document.getElementById('matrix-height');
+
+        if (settingsWidth && streamWidth) {
+            streamWidth.value = settingsWidth.value;
+        }
+        if (settingsHeight && streamHeight) {
+            streamHeight.value = settingsHeight.value;
+        }
+
+        // Trigger the apply button in the stream view
+        const applyBtn = document.getElementById('apply-matrix-btn');
+        if (applyBtn) {
+            applyBtn.click();
+        }
+
+        // Show success feedback
+        const btn = document.getElementById('settings-apply-matrix-btn');
+        if (btn) {
+            const originalText = btn.textContent;
+            btn.textContent = '✓ Applied!';
+            btn.style.background = 'linear-gradient(135deg, var(--accent-success) 0%, #22c55e 100%)';
+            
+            setTimeout(() => {
+                btn.textContent = originalText;
+                btn.style.background = '';
+            }, 2000);
+        }
+    }
+
+    getCurrentView() {
+        return this.currentView;
+    }
+}
+
+// Initialize navigation when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+    window.navigationManager = new NavigationManager();
+    console.log('Navigation manager initialized');
+});
+
+// Export for use in other modules
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = NavigationManager;
+}
+