wn/home-automation
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

garaga page 13

Browse Source
This commit is contained in:
Wolfgang Hottgenroth
2025-11-28 08:29:38 +01:00
parent 9010e9587f
commit 426f63124b
1 changed files with 53 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
apps/ui/templates/garage.html
View File

@@ -329,58 +329,48 @@
}
function createDeviceSection(device) {
const section = document.createElement('div');
section.className = 'device-section';
section.dataset.deviceId = device.device_id;
const fragment = document.createDocumentFragment();
// Device content (no header for Car Outlet)
const content = document.createElement('div');
content.className = 'device-content';
// Create separate sections for each component
renderDeviceContent(fragment, device);
renderDeviceContent(content, device);
section.appendChild(content);
return section;
return fragment;
}
function renderDeviceContent(container, device) {
// Clear existing content
container.innerHTML = '';
// Render all content in one column for Car Outlet
// Render all content as separate device sections for Car Outlet
if (device.device_id === 'power_relay_caroutlet') {
// Header card
const headerCard = document.createElement('div');
headerCard.className = 'card';
headerCard.innerHTML = `
// 1. Header section
const headerSection = document.createElement('div');
headerSection.className = 'device-section';
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
renderOutletControls(container, device);
// 2. Control section
const controlSection = document.createElement('div');
controlSection.className = 'device-section';
controlSection.dataset.deviceId = device.device_id;
renderOutletControls(controlSection, device);
container.appendChild(controlSection);
// State card
renderStateDisplay(container, device);
// Find and render powermeter
// 3. Powermeter section
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(card);
container.appendChild(controlGroup);
}
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');
card.className = 'card';
card.innerHTML = '<div class="card-title">Leistungsmessung</div>';
// 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');
@@ -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(card);
container.appendChild(phaseCard);
container.appendChild(phaseGrid);
}
async function toggleOutlet(deviceId, newState) {