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

garaga page 4

Browse Source
This commit is contained in:
Wolfgang Hottgenroth
2025-11-28 07:41:39 +01:00
parent fec97e54c1
commit 740ac6c9ad
1 changed files with 60 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -132,34 +132,55 @@
gap: 8px; gap: 8px;
} }
.control-button { .toggle-switch {
flex: 1; position: relative;
padding: 12px 16px; display: inline-block;
border: none; width: 100px;
border-radius: 8px; height: 50px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.control-button.on {
background: #34c759;
color: white;
}
.control-button.off {
background: #e0e0e0; background: #e0e0e0;
color: #666; border-radius: 25px;
cursor: pointer;
transition: background 0.3s ease;
border: none;
outline: none;
} }
.control-button:hover { .toggle-switch.on {
transform: translateY(-2px); background: #34c759;
}
.toggle-switch::after {
content: '';
position: absolute;
top: 4px;
left: 4px;
width: 42px;
height: 42px;
background: white;
border-radius: 50%;
transition: transform 0.3s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.toggle-switch.on::after {
transform: translateX(50px);
}
.toggle-switch:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
} }
.control-button:active { .toggle-switch:active::after {
transform: translateY(0); width: 50px;
}
.toggle-label {
display: block;
text-align: center;
margin-top: 8px;
font-size: 14px;
font-weight: 500;
color: #666;
} }
.phase-grid { .phase-grid {
@@ -219,6 +240,10 @@
text-align: center; text-align: center;
margin-bottom: 20px; margin-bottom: 20px;
} }
#error-container:empty {
margin-bottom: 0;
}
</style> </style>
</head> </head>
<body> <body>
@@ -375,32 +400,21 @@
const controlGroup = document.createElement('div'); const controlGroup = document.createElement('div');
controlGroup.className = 'control-group'; controlGroup.className = 'control-group';
controlGroup.style.textAlign = 'center';
const label = document.createElement('label');
label.className = 'control-label';
label.textContent = 'Status';
const buttonGroup = document.createElement('div');
buttonGroup.className = 'button-group';
const state = deviceStates[device.device_id]; const state = deviceStates[device.device_id];
const currentPower = state?.power === 'on'; const currentPower = state?.power === 'on';
const onButton = document.createElement('button'); const toggleSwitch = document.createElement('button');
onButton.className = `control-button ${currentPower ? 'on' : 'off'}`; toggleSwitch.className = `toggle-switch ${currentPower ? 'on' : ''}`;
onButton.textContent = 'Ein'; toggleSwitch.onclick = () => toggleOutlet(device.device_id, currentPower ? 'off' : 'on');
onButton.onclick = () => toggleOutlet(device.device_id, 'on');
const offButton = document.createElement('button'); const label = document.createElement('div');
offButton.className = `control-button ${!currentPower ? 'on' : 'off'}`; label.className = 'toggle-label';
offButton.textContent = 'Aus'; label.textContent = currentPower ? 'Ein' : 'Aus';
offButton.onclick = () => toggleOutlet(device.device_id, 'off');
buttonGroup.appendChild(onButton);
buttonGroup.appendChild(offButton);
controlGroup.appendChild(toggleSwitch);
controlGroup.appendChild(label); controlGroup.appendChild(label);
controlGroup.appendChild(buttonGroup);
card.appendChild(controlGroup); card.appendChild(controlGroup);
container.appendChild(card); container.appendChild(card);
@@ -544,13 +558,13 @@
const section = document.querySelector(`[data-device-id="${deviceId}"]`); const section = document.querySelector(`[data-device-id="${deviceId}"]`);
if (!section) return; if (!section) return;
const onButton = section.querySelector('.control-button:nth-child(1)'); const toggleSwitch = section.querySelector('.toggle-switch');
const offButton = section.querySelector('.control-button:nth-child(2)'); const label = section.querySelector('.toggle-label');
if (onButton && offButton && state.power) { if (toggleSwitch && label && state.power) {
const isOn = state.power === 'on'; const isOn = state.power === 'on';
onButton.className = `control-button ${isOn ? 'on' : 'off'}`; toggleSwitch.className = `toggle-switch ${isOn ? 'on' : ''}`;
offButton.className = `control-button ${!isOn ? 'on' : 'off'}`; label.textContent = isOn ? 'Ein' : 'Aus';
} }
} }