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