272 lines
8.0 KiB
JavaScript
272 lines
8.0 KiB
JavaScript
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 btnLearn = document.getElementById('btn-learn');
|
|
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 or learning
|
|
const running = state.timerActive;
|
|
const learning = state.countMode;
|
|
btnRun.disabled = running || learning;
|
|
durInput.disabled = running || learning;
|
|
btnOpen.disabled = running || learning;
|
|
btnClose.disabled = running || learning;
|
|
|
|
// Learn button toggles label and action
|
|
if (learning) {
|
|
btnLearn.textContent = '⏹ Stop Learn';
|
|
btnLearn.onclick = doStopLearn;
|
|
btnLearn.classList.add('active-learn');
|
|
} else {
|
|
btnLearn.textContent = '📐 Learn';
|
|
btnLearn.onclick = doLearn;
|
|
btnLearn.classList.remove('active-learn');
|
|
}
|
|
btnLearn.disabled = running; // can't start learn while timer runs
|
|
|
|
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) {
|
|
const elapsed = state.countStart
|
|
? Math.max(0, (Date.now() + serverOffset) - state.countStart)
|
|
: 0;
|
|
ring.style.strokeDashoffset = CIRC;
|
|
cd.textContent = fmt(elapsed);
|
|
cd.className = 'countdown';
|
|
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'); }
|
|
|
|
async function doLearn() { await apiPost('/api/learn'); }
|
|
async function doStopLearn() { await apiPost('/api/stop-learn'); }
|
|
|
|
|
|
// 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 });
|
|
}
|
|
});
|
|
|
|
// ── Button online status ──
|
|
const deviceDot = document.getElementById('device-dot');
|
|
const deviceState = document.getElementById('device-state');
|
|
const valveDot = document.getElementById('valve-dot');
|
|
const valveState = document.getElementById('valve-state');
|
|
|
|
function updateDeviceWidget(dot, stateEl, online) {
|
|
if (online === true) {
|
|
dot.className = 'device-dot online';
|
|
stateEl.className = 'device-state online';
|
|
stateEl.textContent = 'Online';
|
|
} else if (online === false) {
|
|
dot.className = 'device-dot offline';
|
|
stateEl.className = 'device-state offline';
|
|
stateEl.textContent = 'Offline';
|
|
} else {
|
|
dot.className = 'device-dot';
|
|
stateEl.className = 'device-state';
|
|
stateEl.textContent = 'Unknown';
|
|
}
|
|
}
|
|
|
|
async function pollButtonOnline() {
|
|
try {
|
|
const r = await fetch('/api/button-online');
|
|
const d = await r.json();
|
|
updateDeviceWidget(deviceDot, deviceState, d.online);
|
|
} catch {
|
|
updateDeviceWidget(deviceDot, deviceState, null);
|
|
}
|
|
}
|
|
|
|
async function pollValveOnline() {
|
|
try {
|
|
const r = await fetch('/api/valve-online');
|
|
const d = await r.json();
|
|
updateDeviceWidget(valveDot, valveState, d.online);
|
|
} catch {
|
|
updateDeviceWidget(valveDot, valveState, null);
|
|
}
|
|
}
|
|
|
|
pollButtonOnline();
|
|
pollValveOnline();
|
|
setInterval(pollButtonOnline, 10000);
|
|
setInterval(pollValveOnline, 10000);
|