'use strict'; // ---- Family board: what a family device shows before anyone signs in, and the "who is this?" step. Only the family's shared things are shown here. const $ = s => document.querySelector(s); const esc = s => String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c])); const ymd = d => d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0'); let data = null; function clock() { const d = new Date(); $('#clock').textContent = d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }); const h = d.getHours(); $('#hi').textContent = (h < 5 ? 'Good night' : h < 12 ? 'Good morning' : h < 18 ? 'Good afternoon' : 'Good evening') + ', family'; $('#date').textContent = d.toLocaleDateString(undefined, { weekday: 'long', month: 'long', day: 'numeric' }); } const card = (t, body) => `

${t}

${body}
`; const none = t => `

${t}

`; function draw() { const t0 = ymd(new Date()), t1 = ymd(new Date(Date.now() + 864e5)), d = data; $('#annc').innerHTML = d.announcement ? `
${esc(d.announcement.text)}
${esc(d.announcement.by)}
` : ''; $('#tiles').innerHTML = d.people.map(p => ``).join(''); $('#tiles').querySelectorAll('.tile').forEach(b => b.onclick = () => pick(d.people.find(p => p.id === b.dataset.id))); const day = (label, ds) => { const l = d.events.filter(e => e.allDay ? e.start <= ds && e.end > ds : ymd(new Date(e.start)) === ds).sort((a, b) => (b.allDay - a.allDay) || a.start - b.start); return `${label}` + (l.map(e => `
${esc(e.title)}${e.allDay ? 'All day' : new Date(e.start).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}
`).join('') || none('Nothing')); }; const per = {}; d.chores.forEach(c => { const k = c.userName; (per[k] = per[k] || []).push(c); }); const chores = Object.keys(per).map(k => { const l = per[k], dn = l.filter(c => c.done).length; return `
${esc(k)}${dn} of ${l.length}
${esc(l.filter(c => !c.done).slice(0, 3).map(c => c.title).join(' · ') || 'All done 🎉')}
`; }).join(''); $('#grid').innerHTML = card('Today and tomorrow', day('Today', t0) + day('Tomorrow', t1)) + card('Chores today', chores || none('No chores today')) + card('Shopping list', d.shopping.map(i => `
${esc(i.text)}
`).join('') || none('Nothing to buy')) + card('Family tasks', d.tasks.map(t => `
${esc(t.title)}${t.due === t0 ? 'Today' : esc(t.due)}
`).join('') || none('Nothing due')) + card('Family notes and lists', d.notes.map(n => `
${esc(n.title)}${n.type === 'list' ? ` ${n.done} of ${n.total} done${n.next ? ' · next: ' + esc(n.next) : ''}` : ` ${esc(n.body)}`}
`).join('') || none('No shared notes')); } async function load() { try { const r = await fetch('/api/board?day=' + ymd(new Date())); if (r.status === 403) { location.replace('/login'); return; } data = await r.json(); draw(); } catch {} } function pick(p) { if (!p) return; const ov = $('#ov'), box = $('#ovb'); ov.hidden = false; const close = () => { ov.hidden = true; box.innerHTML = ''; }; const go = async pin => { const r = await fetch('/api/board/switch', { method: 'POST', body: JSON.stringify({ uid: p.id, pin }) }), j = await r.json().catch(() => ({})); if (r.ok) return location.replace('/'); throw new Error(j.error || 'Could not sign in'); }; const head = `
${esc((p.name.trim()[0] || '?').toUpperCase())}${esc(p.name)}${p.kid ? 'KID' : ''}
`; if (p.kid && !p.pin) { box.innerHTML = head + `

Sign in as ${esc(p.name)}?

`; $('#no').onclick = close; $('#yes').onclick = () => go().catch(e => $('#e').textContent = e.message); return; } if (!p.pin) { box.innerHTML = head + `

${esc(p.name)} has not set a PIN yet. Set one in Settings on your own device, or sign in with your passkey.

`; $('#no').onclick = close; return; } let pin = ''; const paint = () => { $('#dots').innerHTML = Array.from({ length: Math.max(4, pin.length) }, (_, i) => ``).join(''); }; box.innerHTML = head + `

Enter your PIN

${[1, 2, 3, 4, 5, 6, 7, 8, 9, '⌫', 0, '✓'].map(k => ``).join('')}

`; paint(); $('#no').onclick = close; box.querySelectorAll('.pad button').forEach(b => b.onclick = async () => { const k = b.dataset.k; $('#e').textContent = ''; if (k === '⌫') pin = pin.slice(0, -1); else if (k === '✓') { try { await go(pin); } catch (e) { $('#e').textContent = e.message; pin = ''; } } else if (pin.length < 8) pin += k; paint(); }); } clock(); setInterval(clock, 15000); load(); setInterval(() => { if (!document.hidden && $('#ov').hidden) load(); }, 60000); document.addEventListener('visibilitychange', () => { if (!document.hidden) load(); });