started 4

apps/ui/templates/garage.html

@@ -312,7 +312,8 @@
         // Device IDs for garage devices
         const GARAGE_DEVICES = [
             'power_relay_caroutlet',
-            'powermeter_caroutlet'
+            'powermeter_caroutlet',
+            'sensor_caroutlet'
         ];
 
         // Device states
@@ -410,7 +411,17 @@
                 renderOutletControls(controlSection, device);
                 container.appendChild(controlSection);
 
-                // 3. Powermeter section
+                // 3. Feedback section
+                const feedbackDevice = Object.values(devicesData).find(d => d.device_id === 'sensor_caroutlet');
+                if (feedbackDevice) {
+                    const feedbackSection = document.createElement('div');
+                    feedbackSection.className = 'device-section';
+                    feedbackSection.dataset.deviceId = feedbackDevice.device_id;
+                    renderFeedbackDisplay(feedbackSection, feedbackDevice);
+                    container.appendChild(feedbackSection);
+                }
+
+                // 4. Powermeter section
                 const powermeterDevice = Object.values(devicesData).find(d => d.device_id === 'powermeter_caroutlet');
                 if (powermeterDevice) {
                     const powermeterSection = document.createElement('div');
@@ -424,7 +435,6 @@
         function renderOutletControls(container, device) {
             const controlGroup = document.createElement('div');
             controlGroup.style.textAlign = 'center';
-            // controlGroup.style.marginBottom = '8px';
 
             const state = deviceStates[device.device_id];
             const currentPower = state?.power === 'on';
@@ -440,36 +450,36 @@
             label.className = 'toggle-label';
             label.textContent = currentPower ? 'Ein' : 'Aus';
 
-            // Status display
-            // const stateDisplay = document.createElement('div');
-            // stateDisplay.style.marginTop = '16px';
-            // stateDisplay.style.fontSize = '18px';
-            // stateDisplay.style.fontWeight = '600';
-            // stateDisplay.style.color = currentPower ? '#34c759' : '#666';
-            // stateDisplay.textContent = `Status: ${currentPower ? 'Eingeschaltet' : 'Ausgeschaltet'}`;
-
             controlGroup.appendChild(toggleSwitch);
             controlGroup.appendChild(label);
-            // controlGroup.appendChild(stateDisplay);
 
             container.appendChild(controlGroup);
         }
 
+        function renderFeedbackDisplay(container, device) {
+            const state = deviceStates[device.device_id] || {};
+            const controlGroup = document.createElement('div');
+            controlGroup.style.textAlign = 'center';
+
+            const label = document.createElement('div');
+            label.className = 'toggle-label';
+
+            console.log(`Rendering feedback for ${device.device_id}:`, state);
+
+            if (state.contact === 'closed') {
+                label.textContent = 'Schütz ✅ eingeschaltet';
+            } else {
+                label.textContent = 'Schütz 🅾️ ausgeschaltet';
+            }
+
+            controlGroup.appendChild(label);
+            container.appendChild(controlGroup);
+        }
 
 
         function renderThreePhasePowerDisplay(container, device) {
             const state = deviceStates[device.device_id] || {};
 
-            // Leistungsmessung Title
-            // const title = document.createElement('h3');
-            // title.style.margin = '0 0 20px 0';
-            // title.style.fontSize = '18px';
-            // title.style.fontWeight = '600';
-            // title.style.color = '#333';
-            // title.textContent = 'Leistungsmessung';
-            // container.appendChild(title);
-
-            // Übersicht
             const overviewGrid = document.createElement('div');
             overviewGrid.className = 'state-grid';
             overviewGrid.innerHTML = `
@@ -484,16 +494,13 @@
             `;
             container.appendChild(overviewGrid);
 
-            // Phasen Title
             const phaseTitle = document.createElement('h4');
             phaseTitle.style.margin = '20px 0 8px 0';
             phaseTitle.style.fontSize = '16px';
             phaseTitle.style.fontWeight = '600';
             phaseTitle.style.color = '#333';
-            // phaseTitle.textContent = 'Phasen';
             container.appendChild(phaseTitle);
 
-            // Phasen Details
             const phaseGrid = document.createElement('div');
             phaseGrid.className = 'phase-grid';
             phaseGrid.innerHTML = `
@@ -601,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;
             }
@@ -637,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}`);

config/layout.yaml

@@ -317,13 +317,13 @@ rooms:
     title: Ladestrom
     icon: ⚡
     rank: 310
+  - device_id: sensor_caroutlet
+    title: Schützzustand
+    icon: 🔌
+    rank: 315
   - device_id: powermeter_caroutlet
-    title: Ladestrom
+    title: Messwerte
     icon: 📊
     rank: 320
-  - device_id: sensor_caroutlet
-    title: Ladestrom
-    icon: 🪟
-    rank: 330