started 4

apps/ui/templates/garage.html

@@ -416,6 +416,7 @@
                 if (feedbackDevice) {
                     const feedbackSection = document.createElement('div');
                     feedbackSection.className = 'device-section';
+                    feedbackSection.dataset.deviceId = feedbackDevice.device_id;
                     renderFeedbackDisplay(feedbackSection, feedbackDevice);
                     container.appendChild(feedbackSection);
                 }
@@ -466,9 +467,9 @@
             console.log(`Rendering feedback for ${device.device_id}:`, state);
 
             if (state.contact === 'closed') {
-                label.textContent = 'Strom an';
+                label.textContent = 'Schütz ✅ eingeschaltet';
             } else {
-                label.textContent = 'Strom aus';
+                label.textContent = 'Schütz 🅾️ ausgeschaltet';
             }
 
             controlGroup.appendChild(label);
@@ -607,12 +608,14 @@
             const state = deviceStates[deviceId];
             console.log(`Updating UI for ${deviceId}:`, state);
 
-            switch (device.type) {
-                case 'relay':
-                case 'outlet':
+            switch (deviceId) {
+                case 'power_relay_caroutlet':
                     updateOutletUI(deviceId, state);
                     break;
-                case 'three_phase_powermeter':
+                case 'sensor_caroutlet':
+                    updateFeedbackDisplay(deviceId, state);
+                    break;
+                case 'powermeter_caroutlet':
                     updateThreePhasePowerUI(deviceId, state);
                     break;
             }
@@ -643,6 +646,29 @@
             }
         }
 
+        function updateFeedbackDisplay(deviceId, state) {
+            const section = document.querySelector(`[data-device-id="${deviceId}"]`);
+            if (!section) return;
+
+            const label = section.querySelector('.toggle-label');
+
+            if (label) {
+                const isOn = state.contact === 'closed';
+                label.textContent = isOn ? 'Schütz ✅ eingeschaltet' : 'Schütz 🅾️ ausgeschaltet';
+
+                // Update state display in separate card
+                const cards = section.querySelectorAll('.card');
+                if (cards.length >= 3) { // Header, Control, State
+                    const stateCard = cards[2];
+                    stateCard.innerHTML = `
+                        <div style="font-size: 18px; font-weight: 600; color: ${isOn ? '#34c759' : '#666'};">
+                            Status: ${isOn ? 'Eingeschaltet' : 'Ausgeschaltet'}
+                        </div>
+                    `;
+                }
+            }
+        }
+
         function updateThreePhasePowerUI(deviceId, state) {
             // Update overview
             const totalPower = document.getElementById(`total-power-${deviceId}`);