From e409e5fdd121658a78bd3c0a911b4678e6456180 Mon Sep 17 00:00:00 2001
From: Wolfgang Hottgenroth <wolfgang.hottgenroth@icloud.com>
Date: Fri, 28 Nov 2025 08:11:22 +0100
Subject: [PATCH] garaga page 9

---
 apps/ui/templates/garage.html | 92 ++++++++++++++++-------------------
 1 file changed, 43 insertions(+), 49 deletions(-)

diff --git a/apps/ui/templates/garage.html b/apps/ui/templates/garage.html
index 1d705c7..b6026ea 100644
--- a/apps/ui/templates/garage.html
+++ b/apps/ui/templates/garage.html
@@ -30,12 +30,6 @@
             gap: 20px;
         }
 
-        @media (min-width: 768px) {
-            .devices-container {
-                grid-template-columns: 1fr 1fr;
-            }
-        }
-
         .device-section {
             background: rgba(255, 255, 255, 0.95);
             border-radius: 12px;
@@ -313,11 +307,12 @@
                 loading.style.display = 'none';
                 container.style.display = 'grid';
 
-                // Render devices
-                garageDevices.forEach(device => {
-                    const deviceSection = createDeviceSection(device);
+                // Render only the relay device (it will include the powermeter)
+                const relayDevice = garageDevices.find(d => d.device_id === 'power_relay_caroutlet');
+                if (relayDevice) {
+                    const deviceSection = createDeviceSection(relayDevice);
                     container.appendChild(deviceSection);
-                });
+                }
 
                 // Start SSE for live updates
                 connectRealtime();
@@ -338,34 +333,7 @@
             section.className = 'device-section';
             section.dataset.deviceId = device.device_id;
 
-            // Device header
-            const header = document.createElement('div');
-            header.className = 'device-header';
-
-            const icon = document.createElement('div');
-            icon.className = 'device-icon';
-            icon.textContent = getDeviceIcon(device.type);
-
-            const info = document.createElement('div');
-            info.className = 'device-info';
-
-            const name = document.createElement('h2');
-            name.className = 'device-name';
-            name.textContent = device.name;
-
-            const type = document.createElement('p');
-            type.className = 'device-type';
-            type.textContent = getTypeLabel(device.type);
-
-            info.appendChild(name);
-            info.appendChild(type);
-
-            header.appendChild(icon);
-            header.appendChild(info);
-
-            section.appendChild(header);
-
-            // Device content
+            // Device content (no header for Car Outlet)
             const content = document.createElement('div');
             content.className = 'device-content';
 
@@ -380,23 +348,33 @@
             // Clear existing content
             container.innerHTML = '';
 
-            switch (device.type) {
-                case 'relay':
-                case 'outlet':
-                    renderOutletControls(container, device);
-                    break;
-                case 'three_phase_powermeter':
-                    renderThreePhasePowerDisplay(container, device);
-                    break;
-                default:
-                    container.innerHTML = '<div class="card">Keine Steuerung verfügbar</div>';
+            // Render all content in one column for Car Outlet
+            if (device.device_id === 'power_relay_caroutlet') {
+                // Header card
+                const headerCard = document.createElement('div');
+                headerCard.className = 'card';
+                headerCard.innerHTML = `
+                    <div style="display: flex; align-items: center; justify-content: center; gap: 12px;">
+                        <div style="font-size: 32px;">⚡</div>
+                        <div style="font-size: 20px; font-weight: 600; color: #333;">Car Outlet</div>
+                    </div>
+                `;
+                container.appendChild(headerCard);
+
+                // Control card
+                renderOutletControls(container, device);
+
+                // Find and render powermeter
+                const powermeterDevice = Object.values(devicesData).find(d => d.device_id === 'powermeter_caroutlet');
+                if (powermeterDevice) {
+                    renderThreePhasePowerDisplay(container, powermeterDevice);
+                }
             }
         }
 
         function renderOutletControls(container, device) {
             const card = document.createElement('div');
             card.className = 'card';
-            card.innerHTML = '<div class="card-title">Steuerung</div>';
 
             const controlGroup = document.createElement('div');
             controlGroup.className = 'control-group';
@@ -416,8 +394,17 @@
             label.className = 'toggle-label';
             label.textContent = currentPower ? 'Ein' : 'Aus';
 
+            // State 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);
 
             card.appendChild(controlGroup);
             container.appendChild(card);
@@ -577,6 +564,13 @@
                 const isOn = state.power === 'on';
                 toggleSwitch.className = `toggle-switch ${isOn ? 'on' : ''}`;
                 label.textContent = isOn ? 'Ein' : 'Aus';
+
+                // Update state display
+                const stateDisplay = section.querySelector('.control-group div:last-child');
+                if (stateDisplay) {
+                    stateDisplay.style.color = isOn ? '#34c759' : '#666';
+                    stateDisplay.textContent = `Status: ${isOn ? 'Eingeschaltet' : 'Ausgeschaltet'}`;
+                }
             }
         }