diff --git a/apps/ui/templates/device.html b/apps/ui/templates/device.html index 7082dbb..ab73082 100644 --- a/apps/ui/templates/device.html +++ b/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 = '
Leistungsmessung
'; + + // Übersicht + const overviewGrid = document.createElement('div'); + overviewGrid.className = 'state-grid'; + overviewGrid.innerHTML = ` +
+
${deviceState.total_power?.toFixed(0) || '--'} W
+
Gesamtleistung
+
+
+
${deviceState.energy?.toFixed(2) || '--'} kWh
+
Energie
+
+ `; + card.appendChild(overviewGrid); + + // Phasen Details + const phaseCard = document.createElement('div'); + phaseCard.className = 'card'; + phaseCard.innerHTML = '
Phasen
'; + phaseCard.style.marginTop = '20px'; + + const phaseGrid = document.createElement('div'); + phaseGrid.className = 'phase-grid'; + phaseGrid.innerHTML = ` +
+

Phase 1

+
+
+ ${deviceState.phase1_power?.toFixed(0) || '--'} + W +
+
+ ${deviceState.phase1_voltage?.toFixed(1) || '--'} + V +
+
+ ${deviceState.phase1_current?.toFixed(2) || '--'} + A +
+
+
+
+

Phase 2

+
+
+ ${deviceState.phase2_power?.toFixed(0) || '--'} + W +
+
+ ${deviceState.phase2_voltage?.toFixed(1) || '--'} + V +
+
+ ${deviceState.phase2_current?.toFixed(2) || '--'} + A +
+
+
+
+

Phase 3

+
+
+ ${deviceState.phase3_power?.toFixed(0) || '--'} + W +
+
+ ${deviceState.phase3_voltage?.toFixed(1) || '--'} + V +
+
+ ${deviceState.phase3_current?.toFixed(2) || '--'} + A +
+
+
+ `; + phaseCard.appendChild(phaseGrid); + + container.appendChild(card); + container.appendChild(phaseCard); + } + function renderCoverControls(container) { const card = document.createElement('div'); card.className = 'card'; diff --git a/apps/ui/templates/room.html b/apps/ui/templates/room.html index 68d270a..e7e671f 100644 --- a/apps/ui/templates/room.html +++ b/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 = `
${state.total_power.toFixed(0)} W
`; + if (state.energy != null) { + html += `
${state.energy.toFixed(2)} kWh
`; + } + } + break; + case 'relay': case 'outlet': if (state.power) { diff --git a/config/layout.yaml b/config/layout.yaml index 0e5ad75..d2344db 100644 --- a/config/layout.yaml +++ b/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 +