feat: Implement a Blockly-based UI for defining and testing rules.
This commit is contained in:
sebseb7
@@ -17,6 +17,7 @@
|
||||
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import http from 'http';
|
||||
import { fileURLToPath } from 'url';
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
@@ -87,7 +88,9 @@ function getState(mac) {
|
||||
countMode: false,
|
||||
countStart: 0,
|
||||
storedDuration: persisted.storedDuration || 5000,
|
||||
timer: null
|
||||
timer: null,
|
||||
timerStartedAt: null,
|
||||
timerEndsAt: null
|
||||
});
|
||||
}
|
||||
return deviceState.get(mac);
|
||||
@@ -284,12 +287,16 @@ async function handleBotMessage(msg) {
|
||||
if (resolvedCmd === '/open') {
|
||||
if (state.timer) { clearTimeout(state.timer); state.timer = null; }
|
||||
state.countMode = false;
|
||||
state.timerStartedAt = null;
|
||||
state.timerEndsAt = null;
|
||||
await setLight(sendRPC, WATER_BUTTON_MAC, false, 0); // light off = switch on = valve open
|
||||
await reply(chatId, 'Valve opened.', durSec);
|
||||
|
||||
} else if (resolvedCmd === '/close') {
|
||||
if (state.timer) { clearTimeout(state.timer); state.timer = null; }
|
||||
state.countMode = false;
|
||||
state.timerStartedAt = null;
|
||||
state.timerEndsAt = null;
|
||||
await setLight(sendRPC, WATER_BUTTON_MAC, true, 95); // light on = switch off = valve closed
|
||||
await reply(chatId, 'Valve closed.', durSec);
|
||||
|
||||
@@ -298,6 +305,8 @@ async function handleBotMessage(msg) {
|
||||
state.countMode = false;
|
||||
await setLight(sendRPC, WATER_BUTTON_MAC, false, 0); // open valve
|
||||
const duration = state.storedDuration;
|
||||
state.timerStartedAt = Date.now();
|
||||
state.timerEndsAt = Date.now() + duration;
|
||||
await reply(chatId, `Valve opened. Closing in ${(duration / 1000).toFixed(1)}s…`, durSec);
|
||||
|
||||
state.timer = setTimeout(async () => {
|
||||
@@ -305,6 +314,8 @@ async function handleBotMessage(msg) {
|
||||
const rpc = global.__waterBotRPC;
|
||||
if (rpc) await setLight(rpc, WATER_BUTTON_MAC, true, 95); // close valve
|
||||
state.timer = null;
|
||||
state.timerStartedAt = null;
|
||||
state.timerEndsAt = null;
|
||||
await reply(chatId, 'Timer elapsed — valve closed.', (getState(WATER_BUTTON_MAC).storedDuration / 1000).toFixed(1));
|
||||
} catch (err) {
|
||||
console.error('[TelegramBot] Timer callback error:', err);
|
||||
@@ -431,6 +442,8 @@ export default {
|
||||
const state = getState(WATER_BUTTON_MAC);
|
||||
if (state.timer) { clearTimeout(state.timer); state.timer = null; }
|
||||
state.countMode = false;
|
||||
state.timerStartedAt = null;
|
||||
state.timerEndsAt = null;
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -454,6 +467,8 @@ export default {
|
||||
const timerWasActive = state.timer !== null;
|
||||
|
||||
if (state.timer) { clearTimeout(state.timer); state.timer = null; }
|
||||
state.timerStartedAt = null;
|
||||
state.timerEndsAt = null;
|
||||
|
||||
if (state.countMode) {
|
||||
await setLight(ctx.sendRPC, mac, false, 0);
|
||||
@@ -497,11 +512,16 @@ export default {
|
||||
lastAction: 'Timer started'
|
||||
});
|
||||
|
||||
state.timerStartedAt = Date.now();
|
||||
state.timerEndsAt = Date.now() + state.storedDuration;
|
||||
|
||||
state.timer = setTimeout(async () => {
|
||||
ctx.log('Timer elapsed. Turning light on.');
|
||||
const rpc = global.__waterBotRPC;
|
||||
if (rpc) await setLight(rpc, mac, true, 95);
|
||||
state.timer = null;
|
||||
state.timerStartedAt = null;
|
||||
state.timerEndsAt = null;
|
||||
|
||||
updateStatus({
|
||||
storedDuration: state.storedDuration,
|
||||
@@ -516,6 +536,8 @@ export default {
|
||||
// long_push — enter count mode
|
||||
if (ctx.trigger.event === 'long_push' && !state.countMode) {
|
||||
if (state.timer) { clearTimeout(state.timer); state.timer = null; }
|
||||
state.timerStartedAt = null;
|
||||
state.timerEndsAt = null;
|
||||
|
||||
ctx.log('Entering count mode...');
|
||||
|
||||
@@ -541,3 +563,710 @@ export default {
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// ── HTTP Status Page ──────────────────────────────────────────────────────────
|
||||
|
||||
const STATUS_PORT = 8082;
|
||||
|
||||
function getStatusJSON() {
|
||||
const state = getState(WATER_BUTTON_MAC);
|
||||
return {
|
||||
valveOpen: state.timer !== null || (!state.countMode && state.timer === null),
|
||||
timerActive: state.timer !== null,
|
||||
countMode: state.countMode,
|
||||
storedDuration: state.storedDuration,
|
||||
timerStartedAt: state.timerStartedAt,
|
||||
timerEndsAt: state.timerEndsAt,
|
||||
now: Date.now()
|
||||
};
|
||||
}
|
||||
|
||||
const statusPageHTML = `<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||||
<title>Water Timer</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
--bg: #0a0e1a;
|
||||
--surface: #131829;
|
||||
--border: rgba(255,255,255,0.06);
|
||||
--text: #e2e8f0;
|
||||
--text-dim: #64748b;
|
||||
--blue: #3b82f6;
|
||||
--cyan: #06b6d4;
|
||||
--green: #22c55e;
|
||||
--red: #ef4444;
|
||||
--orange: #f59e0b;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
min-height: 100dvh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 380px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* ── Progress Ring ── */
|
||||
.ring-wrapper {
|
||||
position: relative;
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
}
|
||||
|
||||
.ring-svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.ring-bg {
|
||||
fill: none;
|
||||
stroke: var(--border);
|
||||
stroke-width: 8;
|
||||
}
|
||||
|
||||
.ring-fg {
|
||||
fill: none;
|
||||
stroke: url(#grad);
|
||||
stroke-width: 8;
|
||||
stroke-linecap: round;
|
||||
transition: stroke-dashoffset 0.4s ease;
|
||||
}
|
||||
|
||||
.ring-center {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.countdown {
|
||||
font-size: 3.2rem;
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
line-height: 1;
|
||||
background: linear-gradient(135deg, var(--blue), var(--cyan));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.countdown.idle {
|
||||
font-size: 1.6rem;
|
||||
background: none;
|
||||
-webkit-text-fill-color: var(--text-dim);
|
||||
}
|
||||
|
||||
.countdown-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* ── Status Badge ── */
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.6rem 1.4rem;
|
||||
border-radius: 100px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.badge .dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.badge.running .dot {
|
||||
background: var(--cyan);
|
||||
box-shadow: 0 0 8px var(--cyan);
|
||||
animation: pulse-dot 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.badge.open .dot {
|
||||
background: var(--green);
|
||||
box-shadow: 0 0 8px var(--green);
|
||||
}
|
||||
|
||||
.badge.closed .dot {
|
||||
background: var(--red);
|
||||
box-shadow: 0 0 6px var(--red);
|
||||
}
|
||||
|
||||
.badge.counting .dot {
|
||||
background: var(--orange);
|
||||
box-shadow: 0 0 8px var(--orange);
|
||||
animation: pulse-dot 0.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-dot {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
}
|
||||
|
||||
/* ── Info row ── */
|
||||
.info {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-dim);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
|
||||
/* ── Glow effect behind ring ── */
|
||||
.glow {
|
||||
position: absolute;
|
||||
inset: 20px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(6,182,212,0.12) 0%, transparent 70%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.6s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.glow.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ── Controls ── */
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.run-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
#btn-run {
|
||||
flex-grow: 1;
|
||||
font-size: 1.4rem;
|
||||
padding: 1.2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.65rem 1.2rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
font-family: inherit;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: rgba(59,130,246,0.12);
|
||||
border-color: var(--blue);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
.btn.primary {
|
||||
background: linear-gradient(135deg, var(--blue), var(--cyan));
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn.primary:hover {
|
||||
filter: brightness(1.15);
|
||||
background: linear-gradient(135deg, var(--blue), var(--cyan));
|
||||
}
|
||||
|
||||
.btn.danger {
|
||||
border-color: rgba(239,68,68,0.3);
|
||||
}
|
||||
|
||||
.btn.danger:hover {
|
||||
background: rgba(239,68,68,0.15);
|
||||
border-color: var(--red);
|
||||
}
|
||||
|
||||
.btn.success {
|
||||
border-color: rgba(34,197,94,0.3);
|
||||
}
|
||||
|
||||
.btn.success:hover {
|
||||
background: rgba(34,197,94,0.15);
|
||||
border-color: var(--green);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.45;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.dur-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 0 0.8rem;
|
||||
transition: border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.dur-input-group:focus-within {
|
||||
border-color: var(--blue);
|
||||
}
|
||||
|
||||
.dur-input {
|
||||
width: 64px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text);
|
||||
font-family: inherit;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
padding: 0.8rem 0;
|
||||
outline: none;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.dur-input::-webkit-inner-spin-button { opacity: 0.3; }
|
||||
|
||||
.dur-unit {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-dim);
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>💧 Water Timer</h1>
|
||||
|
||||
<div class="ring-wrapper">
|
||||
<div class="glow" id="glow"></div>
|
||||
<svg class="ring-svg" viewBox="0 0 120 120">
|
||||
<defs>
|
||||
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#3b82f6"/>
|
||||
<stop offset="100%" stop-color="#06b6d4"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle class="ring-bg" cx="60" cy="60" r="52"/>
|
||||
<circle class="ring-fg" id="ring" cx="60" cy="60" r="52"
|
||||
stroke-dasharray="326.73" stroke-dashoffset="326.73"/>
|
||||
</svg>
|
||||
<div class="ring-center">
|
||||
<div class="countdown idle" id="countdown">—</div>
|
||||
<div class="countdown-label" id="label">IDLE</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="badge closed" id="badge">
|
||||
<span class="dot"></span>
|
||||
<span id="badge-text">Loading…</span>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<div class="run-container">
|
||||
<div class="dur-input-group">
|
||||
<input type="number" class="dur-input" id="dur-input" min="1" max="300" step="1" value="">
|
||||
<span class="dur-unit">sec</span>
|
||||
</div>
|
||||
<button class="btn primary" id="btn-run" onclick="doRun()">▶ Run</button>
|
||||
</div>
|
||||
<button class="btn success" id="btn-open" onclick="doOpen()">🔓 Open</button>
|
||||
<button class="btn danger" id="btn-close" onclick="doClose()">🔒 Close</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const CIRC = 2 * Math.PI * 52; // ~326.73
|
||||
const ring = document.getElementById('ring');
|
||||
const cd = document.getElementById('countdown');
|
||||
const label = document.getElementById('label');
|
||||
const badge = document.getElementById('badge');
|
||||
const badgeTxt = document.getElementById('badge-text');
|
||||
const glow = document.getElementById('glow');
|
||||
const durInput = document.getElementById('dur-input');
|
||||
const btnRun = document.getElementById('btn-run');
|
||||
const btnOpen = document.getElementById('btn-open');
|
||||
const btnClose = document.getElementById('btn-close');
|
||||
|
||||
function fmt(ms) {
|
||||
if (ms <= 0) return '0.0';
|
||||
const totalSec = ms / 1000;
|
||||
if (totalSec < 60) return totalSec.toFixed(1);
|
||||
const m = Math.floor(totalSec / 60);
|
||||
const s = Math.floor(totalSec % 60);
|
||||
return m + ':' + String(s).padStart(2, '0');
|
||||
}
|
||||
|
||||
function fmtDur(ms) {
|
||||
const s = (ms / 1000).toFixed(1);
|
||||
return s + 's';
|
||||
}
|
||||
|
||||
let state = null;
|
||||
let serverOffset = 0; // server time - client time
|
||||
|
||||
async function poll() {
|
||||
try {
|
||||
const r = await fetch('/api/status');
|
||||
state = await r.json();
|
||||
// Compute clock offset so countdown works even with clock skew
|
||||
serverOffset = state.now - Date.now();
|
||||
} catch(e) { /* retry next tick */ }
|
||||
}
|
||||
|
||||
function render() {
|
||||
if (!state) return;
|
||||
|
||||
// Sync duration input if user isn't editing it
|
||||
if (document.activeElement !== durInput) {
|
||||
const secs = Math.round(state.storedDuration / 1000);
|
||||
if (durInput.value !== String(secs)) durInput.value = secs;
|
||||
}
|
||||
|
||||
// Disable controls while timer is running
|
||||
const running = state.timerActive;
|
||||
btnRun.disabled = running;
|
||||
durInput.disabled = running;
|
||||
|
||||
if (state.timerActive && state.timerStartedAt && state.timerEndsAt) {
|
||||
const total = state.timerEndsAt - state.timerStartedAt;
|
||||
const serverNow = Date.now() + serverOffset;
|
||||
const remaining = Math.max(0, state.timerEndsAt - serverNow);
|
||||
const progress = total > 0 ? remaining / total : 0;
|
||||
|
||||
ring.style.strokeDashoffset = CIRC * (1 - progress);
|
||||
cd.textContent = fmt(remaining);
|
||||
cd.className = 'countdown';
|
||||
label.textContent = 'REMAINING';
|
||||
badge.className = 'badge running';
|
||||
badgeTxt.textContent = 'Timer Running';
|
||||
glow.classList.add('active');
|
||||
} else if (state.countMode) {
|
||||
ring.style.strokeDashoffset = CIRC;
|
||||
cd.textContent = '⏱';
|
||||
cd.className = 'countdown idle';
|
||||
label.textContent = 'LEARNING';
|
||||
badge.className = 'badge counting';
|
||||
badgeTxt.textContent = 'Count Mode';
|
||||
glow.classList.remove('active');
|
||||
} else {
|
||||
ring.style.strokeDashoffset = CIRC;
|
||||
cd.textContent = '—';
|
||||
cd.className = 'countdown idle';
|
||||
label.textContent = 'IDLE';
|
||||
badge.className = 'badge closed';
|
||||
badgeTxt.textContent = 'Idle';
|
||||
glow.classList.remove('active');
|
||||
}
|
||||
}
|
||||
|
||||
// Quindar tones via Web Audio API
|
||||
let audioCtx = null;
|
||||
let endBeeped = false;
|
||||
let wasTimerActive = false;
|
||||
|
||||
function playTone(freq) {
|
||||
if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
|
||||
const t = audioCtx.currentTime;
|
||||
const osc = audioCtx.createOscillator();
|
||||
const gain = audioCtx.createGain();
|
||||
osc.type = 'sine';
|
||||
osc.frequency.value = freq;
|
||||
gain.gain.setValueAtTime(0.3, t);
|
||||
gain.gain.setValueAtTime(0.3, t + 0.24);
|
||||
gain.gain.linearRampToValueAtTime(0, t + 0.25);
|
||||
osc.connect(gain);
|
||||
gain.connect(audioCtx.destination);
|
||||
osc.start(t);
|
||||
osc.stop(t + 0.25);
|
||||
}
|
||||
|
||||
function checkBeep() {
|
||||
if (!state) return;
|
||||
const active = state.timerActive && state.timerStartedAt && state.timerEndsAt;
|
||||
|
||||
// Start tone (2525 Hz) when timer begins
|
||||
if (active && !wasTimerActive) {
|
||||
playTone(2525);
|
||||
endBeeped = false;
|
||||
}
|
||||
|
||||
// End tone (2475 Hz) at 10s remaining
|
||||
if (active) {
|
||||
const serverNow = Date.now() + serverOffset;
|
||||
const remaining = Math.max(0, state.timerEndsAt - serverNow);
|
||||
if (remaining <= 10000 && remaining > 0 && !endBeeped) {
|
||||
endBeeped = true;
|
||||
playTone(2475);
|
||||
}
|
||||
} else {
|
||||
endBeeped = false;
|
||||
}
|
||||
|
||||
wasTimerActive = !!active;
|
||||
}
|
||||
|
||||
// ── Wake Lock ──
|
||||
let wakeLock = null;
|
||||
let lockAcquired = false;
|
||||
|
||||
async function requestWakeLock() {
|
||||
try {
|
||||
if ('wakeLock' in navigator && !wakeLock) {
|
||||
wakeLock = await navigator.wakeLock.request('screen');
|
||||
wakeLock.addEventListener('release', () => { wakeLock = null; });
|
||||
}
|
||||
} catch(e) { console.error('Wake Lock error:', e); }
|
||||
}
|
||||
|
||||
function releaseWakeLock() {
|
||||
if (wakeLock) { wakeLock.release().catch(()=>{}); wakeLock = null; }
|
||||
}
|
||||
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (document.visibilityState === 'visible' && lockAcquired) requestWakeLock();
|
||||
});
|
||||
|
||||
function checkWakeLock() {
|
||||
if (!state) return;
|
||||
const active = state.timerActive || state.countMode;
|
||||
if (active && !lockAcquired) {
|
||||
requestWakeLock();
|
||||
lockAcquired = true;
|
||||
} else if (!active && lockAcquired) {
|
||||
releaseWakeLock();
|
||||
lockAcquired = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Poll server every 2s, render locally at 20fps for smooth countdown
|
||||
poll();
|
||||
setInterval(poll, 2000);
|
||||
setInterval(() => { render(); checkBeep(); checkWakeLock(); }, 50);
|
||||
|
||||
// ── Control actions ──
|
||||
async function apiPost(path, body = {}) {
|
||||
try {
|
||||
const r = await fetch(path, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body)
|
||||
});
|
||||
const d = await r.json();
|
||||
if (!d.ok) console.error('API error:', d.error);
|
||||
await poll();
|
||||
} catch(e) { console.error('API call failed:', e); }
|
||||
}
|
||||
|
||||
async function doRun() {
|
||||
// Save duration first if changed
|
||||
const secs = parseInt(durInput.value, 10);
|
||||
if (secs > 0 && secs <= 300) {
|
||||
await apiPost('/api/duration', { seconds: secs });
|
||||
}
|
||||
await apiPost('/api/run');
|
||||
}
|
||||
|
||||
function doOpen() { apiPost('/api/open'); }
|
||||
function doClose() { apiPost('/api/close'); }
|
||||
|
||||
// Also save duration on Enter or blur
|
||||
durInput.addEventListener('change', () => {
|
||||
const secs = parseInt(durInput.value, 10);
|
||||
if (secs > 0 && secs <= 300) {
|
||||
apiPost('/api/duration', { seconds: secs });
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>`;
|
||||
|
||||
function startStatusServer() {
|
||||
// Prevent duplicate listeners across hot reloads
|
||||
if (global.__waterStatusServer) {
|
||||
try { global.__waterStatusServer.close(); } catch (e) { }
|
||||
}
|
||||
|
||||
const srv = http.createServer((req, res) => {
|
||||
const url = new URL(req.url, `http://${req.headers.host}`);
|
||||
|
||||
const jsonHeaders = {
|
||||
'Content-Type': 'application/json',
|
||||
'Cache-Control': 'no-cache',
|
||||
'Access-Control-Allow-Origin': '*'
|
||||
};
|
||||
|
||||
if (url.pathname === '/api/status') {
|
||||
res.writeHead(200, jsonHeaders);
|
||||
res.end(JSON.stringify(getStatusJSON()));
|
||||
return;
|
||||
}
|
||||
|
||||
// ── POST command endpoints ──
|
||||
if (req.method === 'POST' && url.pathname.startsWith('/api/')) {
|
||||
let body = '';
|
||||
req.on('data', c => body += c);
|
||||
req.on('end', async () => {
|
||||
const sendRPC = global.__waterBotRPC;
|
||||
const state = getState(WATER_BUTTON_MAC);
|
||||
|
||||
if (!sendRPC) {
|
||||
res.writeHead(503, jsonHeaders);
|
||||
res.end(JSON.stringify({ ok: false, error: 'Not ready — no device connection' }));
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
if (url.pathname === '/api/run') {
|
||||
if (state.timer) { clearTimeout(state.timer); state.timer = null; }
|
||||
state.countMode = false;
|
||||
await setLight(sendRPC, WATER_BUTTON_MAC, false, 0);
|
||||
const duration = state.storedDuration;
|
||||
state.timerStartedAt = Date.now();
|
||||
state.timerEndsAt = Date.now() + duration;
|
||||
state.timer = setTimeout(async () => {
|
||||
try {
|
||||
const rpc = global.__waterBotRPC;
|
||||
if (rpc) await setLight(rpc, WATER_BUTTON_MAC, true, 95);
|
||||
state.timer = null;
|
||||
state.timerStartedAt = null;
|
||||
state.timerEndsAt = null;
|
||||
} catch (err) {
|
||||
console.error('[WaterStatus] Timer callback error:', err);
|
||||
}
|
||||
}, duration);
|
||||
res.writeHead(200, jsonHeaders);
|
||||
res.end(JSON.stringify({ ok: true, action: 'run', duration }));
|
||||
|
||||
} else if (url.pathname === '/api/open') {
|
||||
if (state.timer) { clearTimeout(state.timer); state.timer = null; }
|
||||
state.countMode = false;
|
||||
state.timerStartedAt = null;
|
||||
state.timerEndsAt = null;
|
||||
await setLight(sendRPC, WATER_BUTTON_MAC, false, 0);
|
||||
res.writeHead(200, jsonHeaders);
|
||||
res.end(JSON.stringify({ ok: true, action: 'open' }));
|
||||
|
||||
} else if (url.pathname === '/api/close') {
|
||||
if (state.timer) { clearTimeout(state.timer); state.timer = null; }
|
||||
state.countMode = false;
|
||||
state.timerStartedAt = null;
|
||||
state.timerEndsAt = null;
|
||||
await setLight(sendRPC, WATER_BUTTON_MAC, true, 95);
|
||||
res.writeHead(200, jsonHeaders);
|
||||
res.end(JSON.stringify({ ok: true, action: 'close' }));
|
||||
|
||||
} else if (url.pathname === '/api/duration') {
|
||||
const data = JSON.parse(body || '{}');
|
||||
const ms = Math.round((data.seconds || 0) * 1000);
|
||||
if (ms <= 0 || ms > 300000) {
|
||||
res.writeHead(400, jsonHeaders);
|
||||
res.end(JSON.stringify({ ok: false, error: 'Duration must be 1-300s' }));
|
||||
return;
|
||||
}
|
||||
state.storedDuration = ms;
|
||||
persistedState[WATER_BUTTON_MAC] = { storedDuration: ms };
|
||||
saveState(persistedState);
|
||||
res.writeHead(200, jsonHeaders);
|
||||
res.end(JSON.stringify({ ok: true, action: 'duration', ms }));
|
||||
|
||||
} else {
|
||||
res.writeHead(404, jsonHeaders);
|
||||
res.end(JSON.stringify({ ok: false, error: 'Unknown endpoint' }));
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('[WaterStatus] API error:', err);
|
||||
res.writeHead(500, jsonHeaders);
|
||||
res.end(JSON.stringify({ ok: false, error: err.message }));
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Serve HTML status page
|
||||
res.writeHead(200, {
|
||||
'Content-Type': 'text/html',
|
||||
'Cache-Control': 'no-cache'
|
||||
});
|
||||
res.end(statusPageHTML);
|
||||
});
|
||||
|
||||
srv.listen(STATUS_PORT, () => {
|
||||
console.log(`[WaterStatus] Status page at http://localhost:${STATUS_PORT}`);
|
||||
});
|
||||
|
||||
global.__waterStatusServer = srv;
|
||||
}
|
||||
|
||||
startStatusServer();
|
||||
|
||||
Reference in New Issue
Block a user