diff --git a/apps/ui/templates/garage.html b/apps/ui/templates/garage.html index f914275..3eeb4a0 100644 --- a/apps/ui/templates/garage.html +++ b/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 = ` diff --git a/config/layout.yaml b/config/layout.yaml index 02bde6a..69f76ac 100644 --- a/config/layout.yaml +++ b/config/layout.yaml @@ -317,13 +317,13 @@ rooms: title: Ladestrom icon: ⚡ rank: 310 + - device_id: sensor_caroutlet + title: Kabelstatus + icon: 🔌 + rank: 315 - device_id: powermeter_caroutlet - title: Ladestrom + title: Messwerte icon: 📊 rank: 320 - - device_id: sensor_caroutlet - title: Ladestrom - icon: 🪟 - rank: 330