garaga page 13

apps/ui/templates/garage.html

@@ -329,58 +329,48 @@
         }
 
         function createDeviceSection(device) {
-            const section = document.createElement('div');
+            const fragment = document.createDocumentFragment();
-            section.className = 'device-section';
-            section.dataset.deviceId = device.device_id;
             
-            // Device content (no header for Car Outlet)
+            // Create separate sections for each component
-            const content = document.createElement('div');
+            renderDeviceContent(fragment, device);
-            content.className = 'device-content';
             
-            renderDeviceContent(content, device);
+            return fragment;
-
-            section.appendChild(content);
-
-            return section;
         }
 
         function renderDeviceContent(container, device) {
-            // Clear existing content
+            // Render all content as separate device sections for Car Outlet
-            container.innerHTML = '';
-
-            // Render all content in one column for Car Outlet
             if (device.device_id === 'power_relay_caroutlet') {
-                // Header card
+                // 1. Header section
-                const headerCard = document.createElement('div');
+                const headerSection = document.createElement('div');
-                headerCard.className = 'card';
+                headerSection.className = 'device-section';
-                headerCard.innerHTML = `
+                headerSection.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);
+                container.appendChild(headerSection);
 
-                // Control card
+                // 2. Control section
-                renderOutletControls(container, device);
+                const controlSection = document.createElement('div');
+                controlSection.className = 'device-section';
+                controlSection.dataset.deviceId = device.device_id;
+                renderOutletControls(controlSection, device);
+                container.appendChild(controlSection);
 
-                // State card
+                // 3. Powermeter section
-                renderStateDisplay(container, device);
-
-                // Find and render powermeter
                 const powermeterDevice = Object.values(devicesData).find(d => d.device_id === 'powermeter_caroutlet');
                 if (powermeterDevice) {
-                    renderThreePhasePowerDisplay(container, powermeterDevice);
+                    const powermeterSection = document.createElement('div');
+                    powermeterSection.className = 'device-section';
+                    renderThreePhasePowerDisplay(powermeterSection, powermeterDevice);
+                    container.appendChild(powermeterSection);
                 }
             }
         }
 
         function renderOutletControls(container, device) {
-            const card = document.createElement('div');
-            card.className = 'card';
-
             const controlGroup = document.createElement('div');
-            controlGroup.className = 'control-group';
             controlGroup.style.textAlign = 'center';
 
             const state = deviceStates[device.device_id];
@@ -397,35 +387,34 @@
             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);
 
-            card.appendChild(controlGroup);
+            container.appendChild(controlGroup);
-            container.appendChild(card);
         }
 
-        function renderStateDisplay(container, device) {
-            // State display as separate card
-            const state = deviceStates[device.device_id];
-            const currentPower = state?.power === 'on';
 
-            const stateCard = document.createElement('div');
-            stateCard.className = 'card';
-            stateCard.style.textAlign = 'center';
-            stateCard.innerHTML = `
-                <div style="font-size: 18px; font-weight: 600; color: ${currentPower ? '#34c759' : '#666'};">
-                    Status: ${currentPower ? 'Eingeschaltet' : 'Ausgeschaltet'}
-                </div>
-            `;
-            container.appendChild(stateCard);
-        }
 
         function renderThreePhasePowerDisplay(container, device) {
             const state = deviceStates[device.device_id] || {};
 
-            const card = document.createElement('div');
+            // Leistungsmessung Title
-            card.className = 'card';
+            const title = document.createElement('h3');
-            card.innerHTML = '<div class="card-title">Leistungsmessung</div>';
+            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');
@@ -440,14 +429,18 @@
                     <div class="state-label">Energie</div>
                 </div>
             `;
-            card.appendChild(overviewGrid);
+            container.appendChild(overviewGrid);
+
+            // Phasen Title
+            const phaseTitle = document.createElement('h4');
+            phaseTitle.style.margin = '20px 0 12px 0';
+            phaseTitle.style.fontSize = '16px';
+            phaseTitle.style.fontWeight = '600';
+            phaseTitle.style.color = '#333';
+            phaseTitle.textContent = 'Phasen';
+            container.appendChild(phaseTitle);
 
             // Phasen Details
-            const phaseCard = document.createElement('div');
-            phaseCard.className = 'card';
-            phaseCard.innerHTML = '<div class="card-title">Phasen</div>';
-            phaseCard.style.marginTop = '20px';
-
             const phaseGrid = document.createElement('div');
             phaseGrid.className = 'phase-grid';
             phaseGrid.innerHTML = `
@@ -503,10 +496,7 @@
                     </div>
                 </div>
             `;
-            phaseCard.appendChild(phaseGrid);
+            container.appendChild(phaseGrid);
-
-            container.appendChild(card);
-            container.appendChild(phaseCard);
         }
 
         async function toggleOutlet(deviceId, newState) {