Files
KCal/public/js/kiosk.js
T
ort 962d5bab7f Fix kiosk weekend visibility and landscape weekday layout
The kiosk deliberately ignored calendar.showWeekend when it was built,
treating the parent's toggle as print-only -- but that's not what parents
actually expect: hiding the weekend on the dashboard should hide it on
the tablet too. kiosk.js now toggles weekendWrap's hidden class the same
way the parent editor does.

Separately, weekdayBoard's auto-fit/minmax(240px) grid only fit 4 columns
on real tablet landscape widths (~1024-1180px), pushing Friday to a
second row. Since weekdayBoard always holds exactly 5 day-cards, forcing
repeat(5, 1fr) once there's clearly tablet-landscape width (960px+,
excludes large phones in landscape) fits all 5 comfortably instead of
relying on auto-fit's width heuristic.

Verified both at real tablet landscape sizes (1024x768, 1180x820) with
the Browser tool: 5 weekday columns fit in one row, and the weekend
section correctly appears/disappears with showWeekend.
2026-08-15 17:16:16 -04:00

62 lines
1.7 KiB
JavaScript

const token = window.location.pathname.split('/').filter(Boolean).pop();
const weekdayBoard = document.getElementById('weekdayBoard');
const weekendWrap = document.getElementById('weekendWrap');
async function apiGet(path) {
const res = await fetch(path, { credentials: 'omit' });
if (!res.ok) throw new Error('request failed');
return res.json();
}
async function apiPatch(path, body) {
const res = await fetch(path, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body),
});
if (!res.ok) throw new Error('request failed');
return res.json();
}
const handlers = {
onToggleDone: (taskId, done) => apiPatch(`/api/kiosk/${token}/tasks/${taskId}`, { done }).catch(() => {}),
};
function todayName() {
return new Date().toLocaleDateString('en-US', { weekday: 'long' });
}
function draw(calendar) {
document.getElementById('childName').textContent = calendar.childName || '';
document.getElementById('calTitle').textContent = calendar.title || '';
renderCalendar({
calendar,
editable: false,
weekdayBoard,
weekendWrap,
handlers,
todayName: todayName(),
});
weekendWrap.classList.toggle('hidden', !calendar.showWeekend);
}
async function poll() {
try {
const data = await apiGet(`/api/kiosk/${token}/calendar`);
if (!data.calendar) {
document.getElementById('emptyState').style.display = 'block';
document.getElementById('childName').textContent = data.child ? data.child.name : '';
return;
}
document.getElementById('emptyState').style.display = 'none';
draw(data.calendar);
} catch {
// transient network error — try again next tick
}
}
poll();
setInterval(poll, 4000);