started

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,16 @@
                 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';
+                    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 +434,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 +449,43 @@
             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';
+
+            const values = Object.values(state || {});
+            const isActive = values.some(v =>
+                v === true ||
+                v === 'on' ||
+                v === 1
+            );
+
+            if (values.length === 0) {
+                label.textContent = 'Kein Status verfügbar';
+            } else {
+                label.textContent = isActive
+                    ? 'Fahrzeug verbunden'
+                    : 'Kein Fahrzeug verbunden';
+            }
+
+            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 +500,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 = `