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 = '