Add per-task timers with milestone audio for ADHD-friendly time awareness

Every task now has a duration (10 min default) and a child-initiated start:
a play icon on the kiosk, alongside the checkbox, begins a server-anchored
countdown for that specific task. Deliberately not a beep-every-minute
alarm -- audio is milestone-only (start/halfway/almost-done/time's-up),
since frequent interrupting alerts can backfire for ADHD kids rather than
help. Countdown is drift-free (recomputed each tick from the fixed
started_at anchor, never decremented), audio is synthesized client-side
via Web Audio (zero external assets, matching this app's existing
hand-rolled-PNG-icon philosophy), and the child's own start tap is what
unlocks audio playback for the rest of the session on iOS.

Two real bugs caught and fixed during design, before they shipped:
- Marking a task done now clears started_at (both the kiosk and parent
  routes) -- without this, unchecking a finished task later would
  resurrect a stale timer and instantly show "time's up" on a task the
  child hasn't touched today.
- The parent editor's poll-pause guard only covered contenteditable
  fields; a plain number input for duration would have been silently
  unprotected from being clobbered by an incoming 4s poll mid-edit.
  Extended the guard to cover it, verified live that the DOM and focus
  both survive a poll while the field is focused.

Schema: calendar_tasks gains duration_minutes (NOT NULL DEFAULT 10) and
started_at (nullable). Verified against a simulated copy of the real
production schema/data that the static DEFAULT backfills every existing
row automatically (no business-logic backfill needed, unlike is_admin),
and that repeated boots stay idempotent. Duplicate-calendar carries
durations forward but always resets started_at, verified end-to-end.

Kiosk countdown/milestone-firing verified live in-browser end-to-end: real
timer start, halfway/almost-done/done firing at the correct proportional
thresholds (not fixed minutes, so it scales from ~1min to 20+min tasks),
and a mid-countdown page reload resuming at the correct remaining time
with already-passed milestones backfilled silently rather than replayed.
This commit is contained in:
ort
2026-08-16 11:29:22 -04:00
parent 8c7710d981
commit 1768ce7740
14 changed files with 357 additions and 36 deletions
+14 -3
View File
@@ -26,6 +26,7 @@ const handlers = {
return task;
},
onDeleteTask: (taskId) => api.del(`/api/calendars/${calendarId}/tasks/${taskId}`).catch(() => showToast('Could not delete')),
onDurationEdit: (taskId, durationMinutes) => api.patch(`/api/calendars/${calendarId}/tasks/${taskId}`, { durationMinutes }).catch(() => showToast('Could not save')),
};
function todayName() {
@@ -121,14 +122,24 @@ childNameEl.addEventListener('input', debouncedChildNameSave);
// Polling keeps this view in sync with kiosk checkbox taps (and the other
// parent's edits) without a manual reload. Paused while the parent is mid-edit
// in any contenteditable field, so an incoming poll can't yank their cursor.
function isEditableTarget(el) {
// isContentEditable covers task/label/title/child-name text; duration is a
// plain <input type=number> instead (isContentEditable is always false for
// form fields), so it needs its own explicit check — a narrow class match
// rather than a blanket tag check, so unrelated inputs elsewhere (e.g. the
// period-toggle checkboxes, which commit instantly and don't need this)
// aren't also paused.
return !!el && (el.isContentEditable || el.classList.contains('duration-input'));
}
let isEditingFocused = false;
document.addEventListener('focusin', (e) => {
if (e.target.isContentEditable) isEditingFocused = true;
if (isEditableTarget(e.target)) isEditingFocused = true;
});
document.addEventListener('focusout', (e) => {
if (e.target.isContentEditable) {
if (isEditableTarget(e.target)) {
setTimeout(() => {
isEditingFocused = !!(document.activeElement && document.activeElement.isContentEditable);
isEditingFocused = isEditableTarget(document.activeElement);
}, 0);
}
});