hottis modbus relay 6

apps/ui/templates/device.html

@@ -393,6 +393,9 @@
                 case 'temp_humidity_sensor':
                     renderTempHumidityDisplay(container);
                     break;
+                case 'three_phase_powermeter':
+                    renderThreePhasePowerDisplay(container);
+                    break;
                 case 'cover':
                     renderCoverControls(container);
                     break;
@@ -565,6 +568,93 @@
             container.appendChild(card);
         }
 
+        function renderThreePhasePowerDisplay(container) {
+            const card = document.createElement('div');
+            card.className = 'card';
+            card.innerHTML = '<div class="card-title">Leistungsmessung</div>';
+
+            // Übersicht
+            const overviewGrid = document.createElement('div');
+            overviewGrid.className = 'state-grid';
+            overviewGrid.innerHTML = `
+                <div class="state-item">
+                    <div class="state-value" id="total-power">${deviceState.total_power?.toFixed(0) || '--'} W</div>
+                    <div class="state-label">Gesamtleistung</div>
+                </div>
+                <div class="state-item">
+                    <div class="state-value" id="energy">${deviceState.energy?.toFixed(2) || '--'} kWh</div>
+                    <div class="state-label">Energie</div>
+                </div>
+            `;
+            card.appendChild(overviewGrid);
+
+            // 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 = `
+                <div class="phase-section">
+                    <h4>Phase 1</h4>
+                    <div class="phase-values">
+                        <div class="phase-value">
+                            <span class="value" id="phase1-power">${deviceState.phase1_power?.toFixed(0) || '--'}</span>
+                            <span class="unit">W</span>
+                        </div>
+                        <div class="phase-value">
+                            <span class="value" id="phase1-voltage">${deviceState.phase1_voltage?.toFixed(1) || '--'}</span>
+                            <span class="unit">V</span>
+                        </div>
+                        <div class="phase-value">
+                            <span class="value" id="phase1-current">${deviceState.phase1_current?.toFixed(2) || '--'}</span>
+                            <span class="unit">A</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="phase-section">
+                    <h4>Phase 2</h4>
+                    <div class="phase-values">
+                        <div class="phase-value">
+                            <span class="value" id="phase2-power">${deviceState.phase2_power?.toFixed(0) || '--'}</span>
+                            <span class="unit">W</span>
+                        </div>
+                        <div class="phase-value">
+                            <span class="value" id="phase2-voltage">${deviceState.phase2_voltage?.toFixed(1) || '--'}</span>
+                            <span class="unit">V</span>
+                        </div>
+                        <div class="phase-value">
+                            <span class="value" id="phase2-current">${deviceState.phase2_current?.toFixed(2) || '--'}</span>
+                            <span class="unit">A</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="phase-section">
+                    <h4>Phase 3</h4>
+                    <div class="phase-values">
+                        <div class="phase-value">
+                            <span class="value" id="phase3-power">${deviceState.phase3_power?.toFixed(0) || '--'}</span>
+                            <span class="unit">W</span>
+                        </div>
+                        <div class="phase-value">
+                            <span class="value" id="phase3-voltage">${deviceState.phase3_voltage?.toFixed(1) || '--'}</span>
+                            <span class="unit">V</span>
+                        </div>
+                        <div class="phase-value">
+                            <span class="value" id="phase3-current">${deviceState.phase3_current?.toFixed(2) || '--'}</span>
+                            <span class="unit">A</span>
+                        </div>
+                    </div>
+                </div>
+            `;
+            phaseCard.appendChild(phaseGrid);
+
+            container.appendChild(card);
+            container.appendChild(phaseCard);
+        }
+
         function renderCoverControls(container) {
             const card = document.createElement('div');
             card.className = 'card';

apps/ui/templates/room.html

@@ -231,6 +231,7 @@
             'thermostat': '🌡️',
             'contact': '🚪',
             'temp_humidity_sensor': '🌡️',
+            'three_phase_powermeter': '📊',
             'relay': '💡',
             'outlet': '💡',
             'cover': '🪟'
@@ -403,6 +404,15 @@
                     }
                     break;
 
+                case 'three_phase_powermeter':
+                    if (state.total_power != null) {
+                        html = `<div class="state-primary">${state.total_power.toFixed(0)} W</div>`;
+                        if (state.energy != null) {
+                            html += `<div class="state-secondary">${state.energy.toFixed(2)} kWh</div>`;
+                        }
+                    }
+                    break;
+
                 case 'relay':
                 case 'outlet':
                     if (state.power) {

config/layout.yaml

@@ -279,4 +279,15 @@ rooms:
     title: Licht Terasse
     icon: 💡
     rank: 290
+- name: Garage
+  devices:
+  - device_id: power_relay_caroutlet
+    title: Ladestrom
+    icon: ⚡
+    rank: 310
+  - device_id: powermeter_caroutlet
+    title: Ladestrom
+    icon: 📊
+    rank: 320
+