brightness

apps/ui/templates/index.html

@@ -196,12 +196,15 @@
             <div class="device-card">
                 <div class="device-header">
                     <div class="device-name">💡 Test Lampe 1</div>    
-                    <div class="device-type">Light</div>
+                    <div class="device-type">Light • Dimmbar</div>
                 </div>
                 
                 <div class="device-state">
                     <span class="state-label">Status:</span>
                     <span class="state-value off" id="state-test_lampe_1">off</span>
+                    <br>
+                    <span class="state-label">Helligkeit:</span>
+                    <span class="state-value" id="brightness-test_lampe_1">50</span>%
                 </div>
                 
                 <div class="controls">
@@ -211,6 +214,21 @@
                         onclick="toggleDevice('test_lampe_1')">
                         Einschalten
                     </button>
+                    
+                    <div style="margin-top: 1rem;">
+                        <label for="brightness-slider-test_lampe_1" style="font-size: 0.875rem; color: #666;">
+                            Helligkeit: <span id="brightness-value-test_lampe_1">50</span>%
+                        </label>
+                        <input 
+                            type="range" 
+                            id="brightness-slider-test_lampe_1" 
+                            min="0" 
+                            max="100" 
+                            value="50"
+                            style="width: 100%; margin-top: 0.5rem;"
+                            oninput="updateBrightnessValue('test_lampe_1', this.value)"
+                            onchange="setBrightness('test_lampe_1', this.value)">
+                    </div>
                 </div>
             </div>
             <div class="device-card">
@@ -282,8 +300,45 @@
             }
         }
         
+        // Update brightness value display
+        function updateBrightnessValue(deviceId, value) {
+            const valueSpan = document.getElementById(`brightness-value-${deviceId}`);
+            if (valueSpan) {
+                valueSpan.textContent = value;
+            }
+        }
+        
+        // Set brightness
+        async function setBrightness(deviceId, brightness) {
+            try {
+                const response = await fetch(`${API_BASE}/devices/${deviceId}/set`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        type: 'light',
+                        payload: {
+                            brightness: parseInt(brightness)
+                        }
+                    })
+                });
+                
+                if (response.ok) {
+                    console.log(`Sent brightness ${brightness} to ${deviceId}`);
+                    addEvent({
+                        action: 'brightness_set',
+                        device_id: deviceId,
+                        brightness: parseInt(brightness)
+                    });
+                }
+            } catch (error) {
+                console.error('Failed to set brightness:', error);
+            }
+        }
+        
         // Update device UI
-        function updateDeviceUI(deviceId, power) {
+        function updateDeviceUI(deviceId, power, brightness) {
             currentState[deviceId] = power;
             
             const stateSpan = document.getElementById(`state-${deviceId}`);
@@ -303,6 +358,23 @@
                     toggleButton.className = 'toggle-button off';
                 }
             }
+            
+            // Update brightness display and slider
+            if (brightness !== undefined) {
+                const brightnessSpan = document.getElementById(`brightness-${deviceId}`);
+                const brightnessValue = document.getElementById(`brightness-value-${deviceId}`);
+                const brightnessSlider = document.getElementById(`brightness-slider-${deviceId}`);
+                
+                if (brightnessSpan) {
+                    brightnessSpan.textContent = brightness;
+                }
+                if (brightnessValue) {
+                    brightnessValue.textContent = brightness;
+                }
+                if (brightnessSlider) {
+                    brightnessSlider.value = brightness;
+                }
+            }
         }
         
         // Add event to list
@@ -349,8 +421,12 @@
                 
                 // Update device state
                 if (data.type === 'state' && data.device_id) {
-                    if (data.payload && data.payload.power) {
-                        updateDeviceUI(data.device_id, data.payload.power);
+                    if (data.payload) {
+                        updateDeviceUI(
+                            data.device_id, 
+                            data.payload.power, 
+                            data.payload.brightness
+                        );
                     }
                 }
             });