Service Times 1.0.0: every campus's services, and what production can't use
Four campuses run different Sunday schedules and take their resi feed from one of two broadcast origins. When a service goes wrong — a machine crashes, a feed is unusable — the booth has to know which service at which campus can be altered, and which campuses are riding on the one that broke. That lived in people's heads and in messages. The times come from the church website rather than from configuration, because the site is what stays current when services change through the year. Each campus page carries a "Times" block; the module reads it and re-reads it on a timer. Two things on those pages are not services and are excluded on purpose: the main-office hours in every page's footer, and the "Office Hours" block Apollo Beach carries inside its own Times section. The parse is bounded to the Times heading and stops at either. A mark on a service — issue, replay, do not use, with a note, and for a resi campus which of the origin's services it is taking — is the booth's shared answer, so it lives in the module's server state and reaches every tile over SSE. Per-tile settings would let two campuses disagree about whether the 9:30 is going out. Marks are written to the data directory so a restart mid-morning does not lose them, and they expire after 36 hours so last week's never greet a new Sunday. Campuses added by hand in admin are a stopgap for a site that has not caught up yet: as soon as the website publishes that campus, the site's times take over and the admin health line says the manual line can be removed. Verified: the parser against all five live campus pages, and 31 unit tests plus 16 client checks, each proven to fail under mutation — both parse guards, the merge rule, dependent recording, and three client behaviours. The suite is run here under JavaScriptCore, since this machine has no Node. Not verified here: the module guide's resilience checklist needs a running ProdDash — upstream loss and recovery, two tiles side by side, and tile removal leaving no timers behind. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -0,0 +1,471 @@
|
||||
/* Service Times — the board.
|
||||
*
|
||||
* One card per campus, one row per service, and a mark on any service that
|
||||
* production has to treat differently this week. Everything is drawn from the
|
||||
* server's SSE state so every booth sees the same marks at the same moment;
|
||||
* nothing here talks to the website.
|
||||
*
|
||||
* Marking lives in the tile body, not the title bar, because the bar folds
|
||||
* away in fullscreen and on an auto-hiding dashboard — a control an operator
|
||||
* needs mid-service may not disappear with it.
|
||||
*/
|
||||
|
||||
const STATUSES = [
|
||||
{ value: 'ok', label: 'Clear', short: '' },
|
||||
{ value: 'issue', label: 'Issue', short: 'Issue' },
|
||||
{ value: 'replay', label: 'Replay', short: 'Replay' },
|
||||
{ value: 'skip', label: 'Do not use', short: 'Do not use' },
|
||||
];
|
||||
|
||||
const ICON_REFRESH = '<svg viewBox="0 0 16 16" width="13" height="13" aria-hidden="true">'
|
||||
+ '<path d="M13.5 8a5.5 5.5 0 1 1-1.6-3.9" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>'
|
||||
+ '<path d="M13.6 1.9v3.2h-3.2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>';
|
||||
const ICON_CLEAR = '<svg viewBox="0 0 16 16" width="13" height="13" aria-hidden="true">'
|
||||
+ '<path d="M3 4h10M6.5 4V2.8h3V4M4.4 4l.7 8.4a1 1 0 0 0 1 .9h3.8a1 1 0 0 0 1-.9L11.6 4"'
|
||||
+ ' fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>';
|
||||
const ICON_SMALLER = '<svg viewBox="0 0 16 16" width="13" height="13" aria-hidden="true">'
|
||||
+ '<path d="M3.5 8h9" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>';
|
||||
const ICON_BIGGER = '<svg viewBox="0 0 16 16" width="13" height="13" aria-hidden="true">'
|
||||
+ '<path d="M3.5 8h9M8 3.5v9" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>';
|
||||
|
||||
const TEXT_MIN = 0.8;
|
||||
const TEXT_MAX = 1.8;
|
||||
const TEXT_STEP = 0.1;
|
||||
|
||||
export default function create({ root, moduleApi }) {
|
||||
let stream = null;
|
||||
let state = null;
|
||||
let editing = null; // { campus, service } while the editor is open
|
||||
let pendingRender = false; // a state arrived while the editor was open
|
||||
let board = null;
|
||||
let closeEditor = null;
|
||||
|
||||
const settings = () => moduleApi.instanceSettings;
|
||||
|
||||
function el(tag, className, text) {
|
||||
const node = document.createElement(tag);
|
||||
if (className) node.className = className;
|
||||
if (text != null) node.textContent = text;
|
||||
return node;
|
||||
}
|
||||
|
||||
/** The campuses this tile is asked to show; no choice made means all of them. */
|
||||
function visibleCampuses() {
|
||||
const all = state?.campuses || [];
|
||||
const chosen = settings().campuses;
|
||||
if (!Array.isArray(chosen) || !chosen.length) return all;
|
||||
return all.filter((campus) => chosen.includes(campus.slug));
|
||||
}
|
||||
|
||||
function textScale() {
|
||||
const saved = Number(settings().textSize);
|
||||
return Number.isFinite(saved) ? Math.min(TEXT_MAX, Math.max(TEXT_MIN, saved)) : 1;
|
||||
}
|
||||
|
||||
function serviceLabel(service) {
|
||||
return service.label ? `${service.label} ${service.text}` : service.text;
|
||||
}
|
||||
|
||||
/** Every service of the campus a resi campus takes its feed from. */
|
||||
function sourceServices(campus) {
|
||||
if (!campus.source) return [];
|
||||
const origin = (state?.campuses || []).find((c) => c.slug === campus.source);
|
||||
return origin ? origin.services : [];
|
||||
}
|
||||
|
||||
/** The mark on the origin service a resi service is taking, if any. */
|
||||
function upstreamTrouble(campus, service) {
|
||||
const sourceId = service.mark?.source;
|
||||
if (!sourceId || !campus.source) return null;
|
||||
const origin = (state?.campuses || []).find((c) => c.slug === campus.source);
|
||||
const upstream = origin?.services.find((s) => s.id === sourceId);
|
||||
if (!upstream?.mark || upstream.mark.status === 'ok') return null;
|
||||
return { origin, upstream };
|
||||
}
|
||||
|
||||
/** Resi services pointed at this broadcast service. */
|
||||
function dependentsOf(campus, service) {
|
||||
if (campus.role !== 'broadcast') return [];
|
||||
const out = [];
|
||||
for (const other of state?.campuses || []) {
|
||||
if (other.source !== campus.slug) continue;
|
||||
for (const theirs of other.services) {
|
||||
if (theirs.mark?.source === service.id) out.push({ campus: other, service: theirs });
|
||||
}
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
/* ── drawing ──────────────────────────────────────────────────────── */
|
||||
|
||||
function renderServiceRow(campus, service) {
|
||||
const opts = settings();
|
||||
const row = el('button', 'st-row');
|
||||
row.type = 'button';
|
||||
const status = service.mark?.status || 'ok';
|
||||
if (status !== 'ok') row.classList.add(`st-${status}`);
|
||||
|
||||
const time = el('span', 'st-time', serviceLabel(service));
|
||||
row.appendChild(time);
|
||||
|
||||
if (opts.showDay && service.day) row.appendChild(el('span', 'st-day', service.day));
|
||||
|
||||
const chips = el('span', 'st-chips');
|
||||
const statusDef = STATUSES.find((s) => s.value === status);
|
||||
if (statusDef?.short) chips.appendChild(el('span', `st-chip st-chip-${status}`, statusDef.short));
|
||||
|
||||
// A resi service says which of the origin's services it is taking…
|
||||
if (opts.showSource && campus.role === 'resi' && service.mark?.source) {
|
||||
const origin = (state?.campuses || []).find((c) => c.slug === campus.source);
|
||||
const upstream = origin?.services.find((s) => s.id === service.mark.source);
|
||||
if (upstream) chips.appendChild(el('span', 'st-chip st-chip-source', `← ${upstream.text}`));
|
||||
}
|
||||
// …and turns red when that service is the one in trouble.
|
||||
const trouble = upstreamTrouble(campus, service);
|
||||
if (trouble) {
|
||||
row.classList.add('st-affected');
|
||||
const what = STATUSES.find((s) => s.value === trouble.upstream.mark.status)?.short || 'marked';
|
||||
chips.appendChild(el('span', 'st-chip st-chip-skip', `source ${what.toLowerCase()}`));
|
||||
}
|
||||
|
||||
// A broadcast service says who is riding on it.
|
||||
if (opts.showDependents && campus.role === 'broadcast') {
|
||||
const riders = dependentsOf(campus, service);
|
||||
if (riders.length && status !== 'ok') {
|
||||
chips.appendChild(el('span', 'st-chip st-chip-warn',
|
||||
`affects ${riders.map((r) => r.campus.name).join(', ')}`));
|
||||
} else if (riders.length) {
|
||||
chips.appendChild(el('span', 'st-chip st-chip-quiet', `→ ${riders.length}`));
|
||||
}
|
||||
}
|
||||
row.appendChild(chips);
|
||||
|
||||
if (opts.showNotes && service.mark?.note) {
|
||||
row.appendChild(el('span', 'st-note', service.mark.note));
|
||||
}
|
||||
|
||||
row.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
openEditor(campus, service, row);
|
||||
});
|
||||
return row;
|
||||
}
|
||||
|
||||
function renderCampus(campus) {
|
||||
const opts = settings();
|
||||
const card = el('section', 'st-campus');
|
||||
if (campus.role === 'broadcast') card.classList.add('st-is-broadcast');
|
||||
|
||||
const head = el('header', 'st-campus-head');
|
||||
head.appendChild(el('h3', 'st-campus-name', campus.name));
|
||||
|
||||
if (opts.showRole) {
|
||||
if (campus.role === 'broadcast') {
|
||||
head.appendChild(el('span', 'st-role st-role-broadcast', 'Broadcast'));
|
||||
} else if (campus.source) {
|
||||
head.appendChild(el('span', 'st-role', campus.sourceMissing
|
||||
? `resi ← ${campus.sourceName} (not listed)`
|
||||
: `resi ← ${campus.sourceName}`));
|
||||
} else {
|
||||
head.appendChild(el('span', 'st-role st-role-unset', 'no resi source'));
|
||||
}
|
||||
}
|
||||
if (campus.manual) head.appendChild(el('span', 'st-role st-role-manual', 'manual'));
|
||||
card.appendChild(head);
|
||||
|
||||
if (opts.showDependents && campus.role === 'broadcast' && campus.dependents?.length) {
|
||||
card.appendChild(el('p', 'st-feeds', `feeds ${campus.dependents.map((d) => d.name).join(', ')}`));
|
||||
}
|
||||
|
||||
if (!campus.services.length) {
|
||||
card.appendChild(el('p', 'st-empty', campus.error || 'No times published'));
|
||||
return card;
|
||||
}
|
||||
const list = el('div', 'st-rows');
|
||||
for (const service of campus.services) list.appendChild(renderServiceRow(campus, service));
|
||||
card.appendChild(list);
|
||||
return card;
|
||||
}
|
||||
|
||||
function render() {
|
||||
if (closeEditor) closeEditor();
|
||||
root.innerHTML = '';
|
||||
board = el('div', 'st-board');
|
||||
board.style.fontSize = `${textScale()}em`;
|
||||
root.appendChild(board);
|
||||
|
||||
if (!state) {
|
||||
board.appendChild(el('p', 'st-empty', 'Waiting for the server…'));
|
||||
return;
|
||||
}
|
||||
if (!state.configured) {
|
||||
board.appendChild(el('p', 'st-empty', 'No website address configured — set one in Admin.'));
|
||||
return;
|
||||
}
|
||||
|
||||
const campuses = visibleCampuses();
|
||||
if (!campuses.length) {
|
||||
board.appendChild(el('p', 'st-empty', state.reachable
|
||||
? 'No campuses to show. Pick some in Admin, or in this tile’s settings.'
|
||||
: 'No service times yet.'));
|
||||
} else {
|
||||
const grid = el('div', settings().layout === 'list' ? 'st-grid st-grid-list' : 'st-grid');
|
||||
for (const campus of campuses) grid.appendChild(renderCampus(campus));
|
||||
board.appendChild(grid);
|
||||
}
|
||||
|
||||
if (!state.reachable && state.lastError) {
|
||||
board.appendChild(el('p', 'st-warn', `Website unreachable — ${state.lastError}. Showing the last times read.`));
|
||||
}
|
||||
if (settings().showUpdated && state.lastFetched) {
|
||||
board.appendChild(el('p', 'st-updated',
|
||||
`Times read ${new Date(state.lastFetched).toLocaleString([], { hour: 'numeric', minute: '2-digit', month: 'short', day: 'numeric' })}`));
|
||||
}
|
||||
}
|
||||
|
||||
/* ── the mark editor ──────────────────────────────────────────────── */
|
||||
|
||||
function openEditor(campus, service, anchor) {
|
||||
if (closeEditor) closeEditor();
|
||||
editing = { campus: campus.slug, service: service.id };
|
||||
|
||||
const panel = el('div', 'st-editor');
|
||||
panel.appendChild(el('div', 'st-editor-title', `${campus.name} — ${serviceLabel(service)}`));
|
||||
|
||||
const mark = service.mark || { status: 'ok', note: '', source: '' };
|
||||
let status = mark.status || 'ok';
|
||||
|
||||
const row = el('div', 'st-editor-status');
|
||||
const buttons = new Map();
|
||||
for (const def of STATUSES) {
|
||||
const button = el('button', 'st-pick', def.label);
|
||||
button.type = 'button';
|
||||
if (def.value === status) button.classList.add('active');
|
||||
button.addEventListener('click', () => {
|
||||
status = def.value;
|
||||
for (const [value, node] of buttons) node.classList.toggle('active', value === status);
|
||||
});
|
||||
buttons.set(def.value, button);
|
||||
row.appendChild(button);
|
||||
}
|
||||
panel.appendChild(row);
|
||||
|
||||
// Which of the origin's services this one is taking — the answer to
|
||||
// "which service, and where, can be altered".
|
||||
let sourceSelect = null;
|
||||
const origins = campus.role === 'resi' ? sourceServices(campus) : [];
|
||||
if (origins.length) {
|
||||
const wrap = el('label', 'st-editor-field');
|
||||
wrap.appendChild(el('span', 'st-editor-label', `Taking from ${campus.sourceName}`));
|
||||
sourceSelect = el('select', 'st-editor-input');
|
||||
const none = el('option', null, '— not set —');
|
||||
none.value = '';
|
||||
sourceSelect.appendChild(none);
|
||||
for (const candidate of origins) {
|
||||
const option = el('option', null, serviceLabel(candidate));
|
||||
option.value = candidate.id;
|
||||
if (candidate.id === mark.source) option.selected = true;
|
||||
sourceSelect.appendChild(option);
|
||||
}
|
||||
wrap.appendChild(sourceSelect);
|
||||
panel.appendChild(wrap);
|
||||
}
|
||||
|
||||
const noteWrap = el('label', 'st-editor-field');
|
||||
noteWrap.appendChild(el('span', 'st-editor-label', 'Note'));
|
||||
const note = el('input', 'st-editor-input');
|
||||
note.type = 'text';
|
||||
note.maxLength = 280;
|
||||
note.value = mark.note || '';
|
||||
note.placeholder = 'What production needs to know';
|
||||
noteWrap.appendChild(note);
|
||||
panel.appendChild(noteWrap);
|
||||
|
||||
const actions = el('div', 'st-editor-actions');
|
||||
const save = el('button', 'st-pick st-save', 'Save');
|
||||
save.type = 'button';
|
||||
const cancel = el('button', 'st-pick', 'Cancel');
|
||||
cancel.type = 'button';
|
||||
actions.append(save, cancel);
|
||||
panel.appendChild(actions);
|
||||
|
||||
async function commit() {
|
||||
const body = {
|
||||
campus: campus.slug,
|
||||
service: service.id,
|
||||
status,
|
||||
note: note.value.trim(),
|
||||
source: sourceSelect ? sourceSelect.value : (mark.source || ''),
|
||||
};
|
||||
close();
|
||||
try {
|
||||
const response = await moduleApi.fetch('/mark', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
if (!response.ok) throw new Error(`${response.status}`);
|
||||
} catch (err) {
|
||||
moduleApi.setStatus('error', `Could not save the mark: ${err.message || err}`);
|
||||
}
|
||||
}
|
||||
|
||||
save.addEventListener('click', commit);
|
||||
cancel.addEventListener('click', () => close());
|
||||
note.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Enter') commit();
|
||||
if (event.key === 'Escape') close();
|
||||
});
|
||||
panel.addEventListener('click', (event) => event.stopPropagation());
|
||||
|
||||
function onOutside() { close(); }
|
||||
function onKey(event) { if (event.key === 'Escape') close(); }
|
||||
|
||||
function close() {
|
||||
if (closeEditor !== close) return;
|
||||
panel.remove();
|
||||
anchor?.classList.remove('st-open');
|
||||
root.removeEventListener('click', onOutside);
|
||||
document.removeEventListener('keydown', onKey);
|
||||
closeEditor = null;
|
||||
editing = null;
|
||||
if (pendingRender) {
|
||||
pendingRender = false;
|
||||
render(); // closeEditor is already null, so this cannot re-enter
|
||||
}
|
||||
}
|
||||
|
||||
closeEditor = close;
|
||||
anchor?.classList.add('st-open');
|
||||
board.appendChild(panel);
|
||||
root.addEventListener('click', onOutside);
|
||||
document.addEventListener('keydown', onKey);
|
||||
note.focus();
|
||||
note.select();
|
||||
}
|
||||
|
||||
/* ── lifecycle ────────────────────────────────────────────────────── */
|
||||
|
||||
function applyState(next) {
|
||||
state = next;
|
||||
if (!state) {
|
||||
moduleApi.setStatus('connecting', 'Waiting for the server');
|
||||
} else if (!state.configured) {
|
||||
moduleApi.setStatus('error', 'No website address configured');
|
||||
} else if (!state.reachable) {
|
||||
moduleApi.setStatus('error', state.lastError
|
||||
? `Website unreachable — ${state.lastError}`
|
||||
: 'Website unreachable');
|
||||
} else if (state.lastError) {
|
||||
moduleApi.setStatus('connecting', state.lastError);
|
||||
} else {
|
||||
const count = (state.campuses || []).reduce((sum, c) => sum + c.services.length, 0);
|
||||
moduleApi.setStatus('ok', `${count} service(s) across ${(state.campuses || []).length} campus(es)`);
|
||||
}
|
||||
// Re-rendering would close an open editor mid-sentence, so hold the change
|
||||
// back while someone is typing — and draw it the moment they are done, or
|
||||
// the board would sit stale until the next change happened to arrive.
|
||||
if (editing) {
|
||||
pendingRender = true;
|
||||
return;
|
||||
}
|
||||
render();
|
||||
}
|
||||
|
||||
async function loadState() {
|
||||
try {
|
||||
const response = await moduleApi.fetch('/state');
|
||||
const body = await response.json();
|
||||
applyState(body.state);
|
||||
} catch {
|
||||
/* the stream will bring it */
|
||||
}
|
||||
}
|
||||
|
||||
function setTextSize(delta) {
|
||||
const next = Math.min(TEXT_MAX, Math.max(TEXT_MIN, textScale() + delta));
|
||||
moduleApi.saveInstanceSettings({ textSize: Number(next.toFixed(2)) });
|
||||
if (board) board.style.fontSize = `${next}em`;
|
||||
}
|
||||
|
||||
return {
|
||||
start() {
|
||||
moduleApi.setStatus('connecting', 'Reading service times');
|
||||
render();
|
||||
|
||||
moduleApi.header.addButton({
|
||||
icon: ICON_REFRESH,
|
||||
title: 'Refresh times',
|
||||
onClick: async () => {
|
||||
moduleApi.setStatus('connecting', 'Re-reading the website');
|
||||
try {
|
||||
const response = await moduleApi.fetch('/refresh', { method: 'POST' });
|
||||
const body = await response.json();
|
||||
if (body.state) applyState(body.state);
|
||||
} catch (err) {
|
||||
moduleApi.setStatus('error', `Refresh failed: ${err.message || err}`);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
moduleApi.header.addButton({
|
||||
icon: ICON_CLEAR,
|
||||
title: 'Clear marks',
|
||||
onClick: async () => {
|
||||
const marked = (state?.campuses || []).reduce(
|
||||
(sum, campus) => sum + campus.services.filter((s) => s.mark).length, 0
|
||||
);
|
||||
if (!marked) return;
|
||||
// Marks are shared by every campus watching — never wipe them silently.
|
||||
if (!window.confirm(`Clear ${marked} mark${marked === 1 ? '' : 's'} for every campus?`)) return;
|
||||
try {
|
||||
await moduleApi.fetch('/clear', { method: 'POST' });
|
||||
} catch (err) {
|
||||
moduleApi.setStatus('error', `Could not clear marks: ${err.message || err}`);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
moduleApi.header.addButton({
|
||||
icon: ICON_SMALLER,
|
||||
title: 'Smaller text',
|
||||
onClick: () => setTextSize(-TEXT_STEP),
|
||||
});
|
||||
moduleApi.header.addButton({
|
||||
icon: ICON_BIGGER,
|
||||
title: 'Larger text',
|
||||
onClick: () => setTextSize(TEXT_STEP),
|
||||
});
|
||||
|
||||
stream = moduleApi.sse('/stream', {
|
||||
open() {
|
||||
// The shared connection was (re)made — we may have missed a change.
|
||||
loadState();
|
||||
},
|
||||
error() {
|
||||
moduleApi.setStatus('error', 'Lost the connection to ProdDash');
|
||||
},
|
||||
events: {
|
||||
state(event) {
|
||||
try {
|
||||
applyState(JSON.parse(event.data));
|
||||
} catch { /* a truncated frame; the next one will be whole */ }
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
loadState();
|
||||
},
|
||||
|
||||
stop() {
|
||||
pendingRender = false; // nothing to catch up on: the tile is going away
|
||||
if (closeEditor) closeEditor();
|
||||
stream?.close();
|
||||
stream = null;
|
||||
state = null;
|
||||
editing = null;
|
||||
board = null;
|
||||
root.innerHTML = '';
|
||||
},
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user