add thunder configuration

Signed-off-by: Peter Siegmund <developer@mars3142.org>

firmware/storage/www/js/app.js

@@ -47,6 +47,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     await initCapabilities();
     initWebSocket();
     updateConnectionStatus();
+    loadLightStatus();
 
     // Only load scenes and devices if thread is enabled
     if (isThreadEnabled()) {

firmware/storage/www/js/i18n.js

@@ -33,8 +33,8 @@ const translations = {
 
         // Light Control
         'control.light.title': 'Lichtsteuerung',
-        'control.light.onoff': 'Ein/Aus',
         'control.light.light': 'Licht',
+        'control.light.thunder': 'Gewitter',
         'control.mode.title': 'Betriebsmodus',
         'control.schema.active': 'Aktives Schema',
         'control.status.title': 'Aktueller Status',
@@ -204,8 +204,8 @@ const translations = {
 
         // Light Control
         'control.light.title': 'Light Control',
-        'control.light.onoff': 'On/Off',
         'control.light.light': 'Light',
+        'control.light.thunder': 'Thunder',
         'control.mode.title': 'Operating Mode',
         'control.schema.active': 'Active Schema',
         'control.status.title': 'Current Status',

firmware/storage/www/js/light.js

@@ -1,4 +1,6 @@
 // Light control
+let thunderOn = false;
+
 async function toggleLight() {
     lightOn = !lightOn;
     updateLightToggle();
@@ -36,6 +38,44 @@ function updateLightToggle() {
     }
 }
 
+// Thunder control
+async function toggleThunder() {
+    thunderOn = !thunderOn;
+    updateThunderToggle();
+
+    try {
+        const response = await fetch('/api/light/thunder', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ on: thunderOn })
+        });
+
+        if (response.ok) {
+            showStatus('light-status', `${t('control.light.thunder')} ${thunderOn ? t('common.on') : t('common.off')}`, 'success');
+        } else {
+            throw new Error(t('error'));
+        }
+    } catch (error) {
+        showStatus('light-status', `Demo: ${t('control.light.thunder')} ${thunderOn ? t('common.on') : t('common.off')}`, 'success');
+    }
+}
+
+function updateThunderToggle() {
+    const toggle = document.getElementById('thunder-toggle');
+    const state = document.getElementById('thunder-state');
+    const icon = document.getElementById('thunder-icon');
+
+    if (thunderOn) {
+        toggle.classList.add('active');
+        state.textContent = t('common.on');
+        icon.textContent = '⛈️';
+    } else {
+        toggle.classList.remove('active');
+        state.textContent = t('common.off');
+        icon.textContent = '⚡';
+    }
+}
+
 // Mode control
 async function setMode(mode) {
     currentMode = mode;
@@ -100,3 +140,52 @@ async function setActiveSchema() {
         document.getElementById('current-schema').textContent = schemaName;
     }
 }
+
+/**
+ * Load light status from server
+ */
+async function loadLightStatus() {
+    try {
+        const response = await fetch('/api/light/status');
+        if (response.ok) {
+            const status = await response.json();
+
+            // Update light state
+            if (typeof status.on === 'boolean') {
+                lightOn = status.on;
+                updateLightToggle();
+            }
+
+            // Update thunder state
+            if (typeof status.thunder === 'boolean') {
+                thunderOn = status.thunder;
+                updateThunderToggle();
+            }
+
+            // Update mode
+            if (status.mode) {
+                currentMode = status.mode;
+                updateModeButtons();
+                updateSimulationOptions();
+                document.getElementById('current-mode').textContent = t(`mode.${status.mode}`);
+            }
+
+            // Update schema
+            if (status.schema) {
+                document.getElementById('active-schema').value = status.schema;
+                const schemaNum = status.schema.replace('schema_0', '').replace('.csv', '');
+                document.getElementById('current-schema').textContent = t(`schema.name.${schemaNum}`);
+            }
+
+            // Update current color
+            if (status.color) {
+                const colorPreview = document.getElementById('current-color');
+                if (colorPreview) {
+                    colorPreview.style.backgroundColor = `rgb(${status.color.r}, ${status.color.g}, ${status.color.b})`;
+                }
+            }
+        }
+    } catch (error) {
+        console.log('Light status not available');
+    }
+}