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.
62 lines
1.7 KiB
JavaScript
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);
|