diff --git a/index.html b/index.html index eed2092..12fdc63 100644 --- a/index.html +++ b/index.html @@ -15,12 +15,20 @@ #log { padding: 1em; + padding-top: calc(1em + 2 * 1em + 20px); font-family: monospace; } #status { + position: fixed; + left: 0; + top: 0; + right: 0; + height: 20px; padding: 1em; - background: #eee; + background: #00000015; + backdrop-filter: blur(5px); + -webkit-backdrop-filter: blur(5px); border-bottom: 1px solid #ddd; font-family: "Helvetica", sans-serif; } @@ -318,9 +326,9 @@ '': { // name: '', // zone: '', - on: '', - brightness: '', - after: '' + on: '', + brightness: '', + delay: '' }, }, ], @@ -364,17 +372,32 @@ if (!device) continue; const deviceZone = await device.getZone(); + const delay = newState.delay ?? 0; if (newState.on !== undefined) { - logMessage(`

🔌 ${device.name} (${deviceZone.name}): ${newState.on ? 'On' : 'Off'}

`); - device.setCapabilityValue('onoff', newState.on) - .catch(err => console.error(err)); + if (delay) { + logMessage(`

⏳ ${device.name} (${deviceZone.name}): ${newState.on ? 'On' : 'Off'} in ${delay} seconds

`); + } else { + logMessage(`

⏩ ${device.name} (${deviceZone.name}): ${newState.on ? 'On' : 'Off'}

`); + } + + setTimeout(() => { + device.setCapabilityValue('onoff', newState.on) + .catch(err => console.error(err)); + }, delay * 1000); } if (newState.brightness !== undefined) { - logMessage(`

💡 ${device.name} (${deviceZone.name}): ${newState.brightness}%

`); - device.setCapabilityValue('dim', newState.brightness / 100) - .catch(err => console.error(err)); + if (delay) { + logMessage(`

⏳ ${device.name} (${deviceZone.name}): ${newState.brightness}% in ${delay} seconds

`); + } else { + logMessage(`

⏩ ${device.name} (${deviceZone.name}): ${newState.brightness}%

`); + } + + setTimeout(() => { + device.setCapabilityValue('dim', newState.brightness / 100) + .catch(err => console.error(err)); + }, delay * 1000); } } }