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

garaga page 10

Browse Source
This commit is contained in:
Wolfgang Hottgenroth
2025-11-28 08:18:51 +01:00
parent e409e5fdd1
commit 69b2742f2a
1 changed files with 20 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -394,20 +394,22 @@
label.className = 'toggle-label'; label.className = 'toggle-label';
label.textContent = currentPower ? 'Ein' : 'Aus'; label.textContent = currentPower ? 'Ein' : 'Aus';
// State 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(toggleSwitch);
controlGroup.appendChild(label); controlGroup.appendChild(label);
controlGroup.appendChild(stateDisplay);
card.appendChild(controlGroup); card.appendChild(controlGroup);
container.appendChild(card); container.appendChild(card);
// State display as separate card
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) { function renderThreePhasePowerDisplay(container, device) {
@@ -565,11 +567,15 @@
toggleSwitch.className = `toggle-switch ${isOn ? 'on' : ''}`; toggleSwitch.className = `toggle-switch ${isOn ? 'on' : ''}`;
label.textContent = isOn ? 'Ein' : 'Aus'; label.textContent = isOn ? 'Ein' : 'Aus';
// Update state display // Update state display in separate card
const stateDisplay = section.querySelector('.control-group div:last-child'); const cards = section.querySelectorAll('.card');
if (stateDisplay) { if (cards.length >= 3) { // Header, Control, State
stateDisplay.style.color = isOn ? '#34c759' : '#666'; const stateCard = cards[2];
stateDisplay.textContent = `Status: ${isOn ? 'Eingeschaltet' : 'Ausgeschaltet'}`; stateCard.innerHTML = `
<div style="font-size: 18px; font-weight: 600; color: ${isOn ? '#34c759' : '#666'};">
Status: ${isOn ? 'Eingeschaltet' : 'Ausgeschaltet'}
</div>
`;
} }
} }
} }