Band Lineup module, as it runs in North Attleboro
The backstage stage board as a ProdDash tile: everyone scheduled on the band, vocal and production teams for the upcoming Planning Center plan, placed into their mic slot with photo, name and mic/pack label. Birthdays in the service week get confetti. The display half of the standalone Band Lineup Electron app, ported to a module — imported here exactly as installed on NA-Ingest (v1.10.1), so the repo is where it lives from now on.
This commit is contained in:
@@ -0,0 +1,52 @@
|
||||
# Band Lineup module
|
||||
|
||||
The backstage stage board as a ProdDash tile: everyone scheduled on the band /
|
||||
vocal / production teams for the upcoming Planning Center plan, placed into their
|
||||
mic slot with photo, name and mic/pack label. People whose birthday falls in the
|
||||
current service week (Wednesday→Tuesday) get raining confetti and a gold glow.
|
||||
|
||||
This is the display half of the standalone **Band Lineup** Electron app, ported
|
||||
to ProdDash. (The ProPresenter Now/Next half of that app is the separate
|
||||
`propresenter-now-next` module.)
|
||||
|
||||
## How it fills the board
|
||||
|
||||
1. **Slots** are the mic/pack labels you write in admin, one per line, in the
|
||||
order they sit on stage — e.g. `[VOX 2] MIX 2`, `[DRUMS]`, `[MC] MC1`. A
|
||||
blank line is an empty spot.
|
||||
2. Each refresh the server reads the upcoming plan's **team members** (any team
|
||||
whose name matches a line in *Teams to include*), and matches each person to
|
||||
a slot by their Planning Center **position** — the same loose matching the
|
||||
Electron app uses (`matching.js`; `[VOX 2] MIX 2` takes whoever is on *Vox
|
||||
2*). A numbered role only matches the same number, and the `MIX n` part is
|
||||
ignored, so Vox 2 and Vox 3 never swap.
|
||||
3. **Photos and birthdays** come from Planning Center (birthdays via the People
|
||||
API; only month + day is kept). Photos are cached on disk and served by the
|
||||
module; birthdays drive the confetti.
|
||||
|
||||
## Manual photos (people not on the plan)
|
||||
|
||||
Guest speakers, MCs, stage managers — anyone not scheduled in Planning Center —
|
||||
are pinned per slot from the tile's **Edit** button (title bar): set a name,
|
||||
optionally upload a photo, optionally a `MM-DD` birthday. A manual pin overrides
|
||||
the PCO match for that slot and is kept until you Clear it. Uploaded photos live
|
||||
in the ProdDash data directory, never in the repo.
|
||||
|
||||
## Settings
|
||||
|
||||
- **Admin** (server-wide): Planning Center credentials, service type, plan, the
|
||||
teams to include, the stage slots, columns, refresh interval.
|
||||
- **Per tile** (gear): birthday confetti on/off + intensity, a force-birthday
|
||||
test picker, parallax, and show/hide for names and mic labels.
|
||||
|
||||
## Testing without Planning Center
|
||||
|
||||
```bash
|
||||
node modules/band-lineup/tools/pco-band-mock.js 24710 # mock PCO
|
||||
BAND_LINEUP_API_BASE=http://127.0.0.1:24710 node server.js # point the module at it
|
||||
node modules/band-lineup/matching.test.js # slot-matching unit tests
|
||||
```
|
||||
|
||||
Then in `/admin` under Band Lineup enter any Client ID + Secret, pick "Sunday
|
||||
Service", and the board fills — one person (on Drums) has a birthday this week,
|
||||
so their tile rains confetti.
|
||||
@@ -0,0 +1,299 @@
|
||||
// Band Lineup — client. Renders the shared stage board from /state + /stream.
|
||||
// The Edit button opens an editor: an uploaded-photo library you drag (or click)
|
||||
// into slots, plus rename / clear / upload / delete. Edits go to the server and
|
||||
// come back over SSE, so every Band Lineup screen stays in sync. Birthday week
|
||||
// (Wed→Tue) rains confetti.
|
||||
|
||||
const CONFETTI_COLORS = ['#f5c451', '#ff6b81', '#4fd1c5', '#a78bfa', '#ffffff'];
|
||||
|
||||
export default function create({ root, moduleApi }) {
|
||||
let stream = null;
|
||||
let state = null;
|
||||
let editing = false;
|
||||
let choirBtn = null;
|
||||
let selectedLibId = ''; // click-to-place fallback for touch
|
||||
const canvases = new Set();
|
||||
let raf = null;
|
||||
// Auto-scroll the editor while dragging a photo (native DnD won't do it reliably).
|
||||
let dragScrolling = false;
|
||||
let dragY = 0;
|
||||
let dragBody = null;
|
||||
let dragRaf = null;
|
||||
function startDragAutoScroll() {
|
||||
if (dragRaf) return;
|
||||
const tick = () => {
|
||||
if (!dragScrolling || !dragBody || !dragBody.isConnected) { dragRaf = null; return; }
|
||||
const r = dragBody.getBoundingClientRect();
|
||||
const zone = 90; // generous edge band so you don't have to be pixel-accurate
|
||||
let dy = 0;
|
||||
if (dragY < r.top + zone) dy = -Math.ceil((r.top + zone - dragY) / 4) - 3;
|
||||
else if (dragY > r.bottom - zone) dy = Math.ceil((dragY - (r.bottom - zone)) / 4) + 3;
|
||||
if (dy) dragBody.scrollTop += dy;
|
||||
dragRaf = requestAnimationFrame(tick);
|
||||
};
|
||||
dragRaf = requestAnimationFrame(tick);
|
||||
}
|
||||
function stopDragAutoScroll() { dragScrolling = false; if (dragRaf) { cancelAnimationFrame(dragRaf); dragRaf = null; } }
|
||||
|
||||
/* ---------- confetti (always animates) ---------- */
|
||||
function makeParticle(w, h, intensity, seedY) {
|
||||
const ribbon = Math.random() < 0.55;
|
||||
return {
|
||||
x: Math.random() * w, y: seedY != null ? seedY : Math.random() * h,
|
||||
w: ribbon ? 4 + Math.random() * 4 : 5 + Math.random() * 5, h: ribbon ? 9 + Math.random() * 8 : 0, ribbon,
|
||||
color: CONFETTI_COLORS[(Math.random() * CONFETTI_COLORS.length) | 0],
|
||||
rot: Math.random() * Math.PI * 2, vr: -0.14 + Math.random() * 0.28,
|
||||
sway: 0.6 + Math.random() * 1.1, phase: Math.random() * Math.PI * 2,
|
||||
vy: (intensity === 'subtle' ? 0.6 : 1.0) * (1.1 + Math.random() * 1.5),
|
||||
};
|
||||
}
|
||||
function seed(c, w, h) { const base = c._intensity === 'subtle' ? 26 : 64; const n = Math.max(10, Math.round((base * (w * h)) / (300 * 500))); c._parts = Array.from({ length: n }, () => makeParticle(w, h, c._intensity)); }
|
||||
function step(c) {
|
||||
const w = c.clientWidth, h = c.clientHeight; if (!w || !h) return;
|
||||
const dpr = Math.min(window.devicePixelRatio || 1, 2);
|
||||
if (c._w !== w || c._h !== h) { c.width = w * dpr; c.height = h * dpr; c._ctx = c.getContext('2d'); c._ctx.setTransform(dpr, 0, 0, dpr, 0, 0); c._w = w; c._h = h; seed(c, w, h); }
|
||||
const ctx = c._ctx; ctx.clearRect(0, 0, w, h);
|
||||
for (const p of c._parts) {
|
||||
p.phase += 0.03; p.y += p.vy; p.x += Math.sin(p.phase) * p.sway; p.rot += p.vr;
|
||||
if (p.y > h + 16) Object.assign(p, makeParticle(w, h, c._intensity, -16));
|
||||
ctx.save(); ctx.translate(p.x, p.y); ctx.rotate(p.rot); ctx.fillStyle = p.color;
|
||||
if (p.ribbon) ctx.fillRect(-p.w / 2, -p.h / 2, p.w, p.h); else { ctx.beginPath(); ctx.arc(0, 0, p.w / 2, 0, Math.PI * 2); ctx.fill(); }
|
||||
ctx.restore();
|
||||
}
|
||||
}
|
||||
function loop() { for (const c of [...canvases]) { if (!c.isConnected) { canvases.delete(c); continue; } step(c); } raf = canvases.size ? requestAnimationFrame(loop) : null; }
|
||||
function addConfetti(host, intensity) { const c = document.createElement('canvas'); c.className = 'bl-confetti'; c._intensity = intensity; host.appendChild(c); canvases.add(c); if (!raf) raf = requestAnimationFrame(loop); }
|
||||
|
||||
/* ---------- helpers ---------- */
|
||||
function initials(name) { const p = String(name || '').trim().split(/\s+/).filter(Boolean).slice(0, 2); return p.length ? p.map((x) => x[0]).join('').toUpperCase() : ''; }
|
||||
// Per-tile Columns wins; 0 falls back to the admin default.
|
||||
function resolveCols() { const per = Number(moduleApi.instanceSettings.columns) || 0; return Math.max(1, per > 0 ? per : (Number(state && state.columns) || 7)); }
|
||||
function el(tag, cls, text) { const e = document.createElement(tag); if (cls) e.className = cls; if (text != null) e.textContent = text; return e; }
|
||||
function photoNode(person, cls) {
|
||||
if (person && person.photo) { const img = el('img', cls || 'bl-img'); img.alt = ''; img.src = person.photo; img.loading = 'lazy'; return img; }
|
||||
return el('div', 'bl-initials', initials(person && person.name));
|
||||
}
|
||||
async function api(pathStr, opts) { try { return await moduleApi.fetch(pathStr, opts); } catch { return null; } }
|
||||
|
||||
/* ---------- display board ---------- */
|
||||
function stopConfetti() { canvases.clear(); if (raf) { cancelAnimationFrame(raf); raf = null; } }
|
||||
|
||||
function render() {
|
||||
stopConfetti();
|
||||
stopParallax();
|
||||
root.innerHTML = '';
|
||||
if (choirBtn) choirBtn.classList.toggle('active', !!(state && state.choir));
|
||||
if (editing) { renderEditor(); return; }
|
||||
|
||||
const board = el('div', 'bl-board');
|
||||
if (!state) { board.classList.add('bl-message'); board.textContent = 'Connecting…'; root.appendChild(board); return; }
|
||||
|
||||
const s = moduleApi.instanceSettings;
|
||||
const birthdays = s.birthdays !== false;
|
||||
const intensity = s.birthdayIntensity === 'full' ? 'full' : 'subtle';
|
||||
const testIndex = birthdays ? String(s.birthdayTest || '') : '';
|
||||
const cols = resolveCols();
|
||||
const rows = Math.max(1, Math.ceil((state.slots ? state.slots.length : 1) / cols));
|
||||
board.style.setProperty('--bl-cols', cols);
|
||||
board.style.setProperty('--bl-rows', rows);
|
||||
|
||||
for (const slot of state.slots || []) {
|
||||
const cell = el('div', 'bl-slot');
|
||||
const person = slot.person;
|
||||
if (person) {
|
||||
const tile = el('div', 'bl-tile');
|
||||
const photo = el('div', 'bl-photo');
|
||||
photo.appendChild(photoNode(person));
|
||||
const celebrating = birthdays && (person.celebrating || (testIndex !== '' && testIndex === String(slot.index)));
|
||||
if (celebrating) { tile.classList.add('bl-birthday', `bl-birthday-${intensity}`); addConfetti(photo, intensity); }
|
||||
if (s.showNames !== false && person.name) photo.appendChild(el('div', 'bl-name', person.name));
|
||||
tile.appendChild(photo);
|
||||
if (s.showLabels !== false && slot.label) tile.appendChild(el('div', 'bl-label', slot.label));
|
||||
cell.appendChild(tile);
|
||||
} else {
|
||||
const empty = el('div', 'bl-tile bl-empty');
|
||||
empty.appendChild(el('div', 'bl-label bl-label-empty', slot.label || `Slot ${slot.index + 1}`));
|
||||
cell.appendChild(empty);
|
||||
}
|
||||
board.appendChild(cell);
|
||||
}
|
||||
root.appendChild(board);
|
||||
applyParallax(board, s.parallax !== false);
|
||||
reportStatus();
|
||||
}
|
||||
|
||||
/* ---------- parallax: each photo drifts on its own, automatically ---------- */
|
||||
let parallaxRaf = null;
|
||||
let parallaxImgs = [];
|
||||
function stopParallax() { if (parallaxRaf) { cancelAnimationFrame(parallaxRaf); parallaxRaf = null; } parallaxImgs = []; }
|
||||
function applyParallax(board, on) {
|
||||
stopParallax();
|
||||
const imgs = [...board.querySelectorAll('.bl-img')];
|
||||
if (!on) { imgs.forEach((i) => { i.style.transform = ''; }); return; }
|
||||
// Give each image its own gentle, endless drift — different amplitude, speed and phase,
|
||||
// so the wall never looks frozen and no two photos move together. No mouse needed.
|
||||
parallaxImgs = imgs.map((img) => ({
|
||||
img,
|
||||
ax: 4 + Math.random() * 5, ay: 4 + Math.random() * 5,
|
||||
// Very slow: a full drift cycle takes roughly a minute, so the motion only
|
||||
// registers if you actually watch for it.
|
||||
sx: 0.03 + Math.random() * 0.05, sy: 0.03 + Math.random() * 0.05,
|
||||
px: Math.random() * Math.PI * 2, py: Math.random() * Math.PI * 2,
|
||||
}));
|
||||
const tick = () => {
|
||||
const t = performance.now() / 1000;
|
||||
for (const p of parallaxImgs) {
|
||||
if (!p.img.isConnected) continue;
|
||||
p.img.style.transform = `scale(1.08) translate(${(Math.sin(t * p.sx + p.px) * p.ax).toFixed(2)}px, ${(Math.cos(t * p.sy + p.py) * p.ay).toFixed(2)}px)`;
|
||||
}
|
||||
parallaxRaf = requestAnimationFrame(tick);
|
||||
};
|
||||
parallaxRaf = requestAnimationFrame(tick);
|
||||
}
|
||||
|
||||
function reportStatus() {
|
||||
if (!state) return moduleApi.setStatus('connecting', 'Connecting…');
|
||||
if (state.configured && !state.reachable) return moduleApi.setStatus('error', state.lastError || 'Planning Center unreachable');
|
||||
return moduleApi.setStatus('ok', state.plan?.dates ? `Plan: ${state.plan.dates}` : 'Ready');
|
||||
}
|
||||
|
||||
/* ---------- editor ---------- */
|
||||
function renderEditor() {
|
||||
// No top bar: the photo source is managed in Admin (Google Drive link). Edit mode is just the
|
||||
// board on top and the picture picker (library) below it.
|
||||
const wrap = el('div', 'bl-editor bl-editor-nobar');
|
||||
const body = el('div', 'bl-editor-body');
|
||||
// Feed the drag auto-scroller the pointer position anywhere over the editor.
|
||||
body.addEventListener('dragover', (e) => { dragY = e.clientY; });
|
||||
|
||||
// Slots (drop targets)
|
||||
const boardEl = el('div', 'bl-edit-board');
|
||||
boardEl.style.setProperty('--bl-cols', resolveCols());
|
||||
for (const slot of state?.slots || []) {
|
||||
const cell = el('div', 'bl-edit-slot');
|
||||
cell.dataset.index = String(slot.index);
|
||||
const photo = el('div', 'bl-edit-photo');
|
||||
photo.appendChild(slot.person ? photoNode(slot.person) : el('div', 'bl-edit-drop', '＋'));
|
||||
cell.appendChild(photo);
|
||||
// An occupied card is a drag SOURCE too — move/swap it to another slot.
|
||||
if (slot.person) {
|
||||
cell.draggable = true;
|
||||
cell.addEventListener('dragstart', (e) => {
|
||||
e.dataTransfer.setData('text/plain', 'slot:' + slot.index); e.dataTransfer.effectAllowed = 'move';
|
||||
dragBody = body; dragScrolling = true; startDragAutoScroll();
|
||||
});
|
||||
cell.addEventListener('dragend', stopDragAutoScroll);
|
||||
}
|
||||
const nameRow = el('div', 'bl-edit-namerow');
|
||||
const nameBtn = el('button', 'bl-edit-name', (slot.person && slot.person.name) || 'Name…');
|
||||
nameBtn.addEventListener('click', () => renameSlot(slot.index, slot.person ? slot.person.name : ''));
|
||||
nameRow.appendChild(nameBtn);
|
||||
if (slot.person) { const clr = el('button', 'bl-edit-clear', '×'); clr.title = 'Clear'; clr.addEventListener('click', () => api(`/slot/${slot.index}/clear`, { method: 'POST' })); nameRow.appendChild(clr); }
|
||||
cell.appendChild(nameRow);
|
||||
cell.appendChild(el('div', 'bl-edit-label', slot.label || `Slot ${slot.index + 1}`));
|
||||
// drop
|
||||
cell.addEventListener('dragover', (e) => { e.preventDefault(); cell.classList.add('bl-drop-over'); });
|
||||
cell.addEventListener('dragleave', () => cell.classList.remove('bl-drop-over'));
|
||||
cell.addEventListener('drop', (e) => {
|
||||
e.preventDefault(); stopDragAutoScroll(); cell.classList.remove('bl-drop-over');
|
||||
const data = e.dataTransfer.getData('text/plain') || '';
|
||||
if (data.startsWith('lib:')) assign(slot.index, data.slice(4));
|
||||
else if (data.startsWith('slot:')) { const from = data.slice(5); if (from !== String(slot.index)) api(`/move?from=${from}&to=${slot.index}`, { method: 'POST' }); }
|
||||
});
|
||||
cell.addEventListener('click', (e) => { if (e.target.closest('.bl-edit-name') || e.target.closest('.bl-edit-clear')) return; if (selectedLibId) assign(slot.index, selectedLibId); });
|
||||
boardEl.appendChild(cell);
|
||||
}
|
||||
body.appendChild(boardEl);
|
||||
|
||||
// Library
|
||||
const lib = el('div', 'bl-library');
|
||||
const list = state?.library || [];
|
||||
if (!list.length) lib.appendChild(el('div', 'bl-lib-empty', 'No photos yet — set a Google Drive folder link in Admin, or hit Sync. Then drag a photo onto a slot.'));
|
||||
for (const person of list) {
|
||||
const item = el('div', 'bl-lib-item'); item.draggable = true; item.dataset.id = person.id;
|
||||
if (person.id === selectedLibId) item.classList.add('bl-lib-selected');
|
||||
const ph = el('div', 'bl-lib-photo'); ph.appendChild(photoNode(person, 'bl-lib-img')); item.appendChild(ph);
|
||||
const nm = el('button', 'bl-lib-name', person.name || 'Name…');
|
||||
nm.addEventListener('click', (e) => { e.stopPropagation(); renameLibrary(person.id, person.name); });
|
||||
item.appendChild(nm);
|
||||
const del = el('button', 'bl-lib-del', '×'); del.title = 'Delete photo';
|
||||
del.addEventListener('click', (e) => { e.stopPropagation(); if (confirm(`Delete ${person.name || 'this photo'} from the library?`)) api(`/library/${person.id}/delete`, { method: 'POST' }); });
|
||||
item.appendChild(del);
|
||||
item.addEventListener('dragstart', (e) => {
|
||||
e.dataTransfer.setData('text/plain', 'lib:' + person.id); e.dataTransfer.effectAllowed = 'copy';
|
||||
dragBody = body; dragScrolling = true; startDragAutoScroll();
|
||||
});
|
||||
item.addEventListener('dragend', stopDragAutoScroll);
|
||||
item.addEventListener('click', () => { selectedLibId = selectedLibId === person.id ? '' : person.id; renderEditor(); });
|
||||
lib.appendChild(item);
|
||||
}
|
||||
body.appendChild(lib);
|
||||
wrap.appendChild(body);
|
||||
|
||||
root.innerHTML = '';
|
||||
root.appendChild(wrap);
|
||||
}
|
||||
|
||||
function assign(slotIndex, personId) {
|
||||
selectedLibId = '';
|
||||
api(`/assign?slot=${slotIndex}&personId=${encodeURIComponent(personId)}`, { method: 'POST' });
|
||||
}
|
||||
function renameSlot(slotIndex, currentName) {
|
||||
const name = prompt('Name for this spot (leave blank to remove a name-only spot):', currentName || '');
|
||||
if (name === null) return;
|
||||
api(`/slot/${slotIndex}/name?name=${encodeURIComponent(name.trim())}`, { method: 'POST' });
|
||||
}
|
||||
function renameLibrary(id, currentName) {
|
||||
const name = prompt('Rename this photo:', currentName || '');
|
||||
if (name === null) return;
|
||||
api(`/library/${id}?name=${encodeURIComponent(name.trim())}`, { method: 'POST' });
|
||||
}
|
||||
|
||||
/* ---------- lifecycle ---------- */
|
||||
return {
|
||||
start() {
|
||||
moduleApi.setStatus('connecting', 'Connecting…');
|
||||
const SYNC_ICON = '<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 4v6h-6"/><path d="M1 20v-6h6"/><path d="M3.5 9a9 9 0 0 1 14.9-3.4L23 10M1 14l4.6 4.4A9 9 0 0 0 20.5 15"/></svg>';
|
||||
const EDIT_ICON = '<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z"/></svg>';
|
||||
moduleApi.header.addButton({
|
||||
icon: SYNC_ICON,
|
||||
title: 'Sync',
|
||||
onClick() { moduleApi.setStatus('connecting', 'Syncing with Planning Center…'); api('/sync', { method: 'POST' }); },
|
||||
});
|
||||
const editBtn = moduleApi.header.addButton({ icon: EDIT_ICON, title: 'Edit board', onClick() { editing = !editing; editBtn.classList.toggle('active', editing); render(); } });
|
||||
// Columns −/+ (touch-friendly; replaces the gear number field).
|
||||
const MINUS_ICON = '<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M5 12h14"/></svg>';
|
||||
const PLUS_ICON = '<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>';
|
||||
const bumpCols = (d) => {
|
||||
const max = Math.max(1, state && state.slots ? state.slots.length : 12);
|
||||
const next = Math.max(1, Math.min(max, resolveCols() + d));
|
||||
moduleApi.saveInstanceSettings({ columns: next });
|
||||
render();
|
||||
};
|
||||
moduleApi.header.addButton({ icon: MINUS_ICON, title: 'Fewer columns', onClick() { bumpCols(-1); } });
|
||||
moduleApi.header.addButton({ icon: PLUS_ICON, title: 'More columns', onClick() { bumpCols(1); } });
|
||||
const CHOIR_ICON = '<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="18" r="2.5"/><circle cx="17" cy="16" r="2.5"/><path d="M8.5 18V5l11-2v13"/><path d="M8.5 8.5l11-2"/></svg>';
|
||||
choirBtn = moduleApi.header.addButton({ icon: CHOIR_ICON, title: 'Choir', onClick() { api('/choir', { method: 'POST' }); } });
|
||||
moduleApi.fetch('/state').then((r) => r.json()).then((d) => { state = d.state; render(); }).catch(() => {});
|
||||
stream = moduleApi.sse('/stream', {
|
||||
error() { reportStatus(); },
|
||||
events: {
|
||||
state(e) {
|
||||
try { state = JSON.parse(e.data); } catch { return; }
|
||||
// While editing, don't yank a rename prompt out from under the user:
|
||||
// re-render the editor only (state carries board + library).
|
||||
render();
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
onResize() {},
|
||||
stop() {
|
||||
if (stream) { stream.close(); stream = null; }
|
||||
stopConfetti();
|
||||
stopParallax();
|
||||
stopDragAutoScroll();
|
||||
root.innerHTML = '';
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,198 @@
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Slot ↔ Planning Center position matching for the Band Lineup module.
|
||||
*
|
||||
* A "slot" is a mic/pack label the operator wrote for a spot on stage, e.g.
|
||||
* "[LEADER, VOX 1, ACOUSTIC] MIX 1". A scheduled person carries their PCO
|
||||
* team-position name, e.g. "Vox 1" or "Acoustic / Worship Leader". We assign
|
||||
* people to slots by loose token overlap — the same logic the backstage
|
||||
* Electron app used, lifted here unchanged so the board matches what the booth
|
||||
* is used to. Pure functions only: no I/O, so this file is unit-testable.
|
||||
*/
|
||||
|
||||
function normalizeTeamName(value) {
|
||||
return String(value || '').trim().toLowerCase();
|
||||
}
|
||||
|
||||
/** Does a person's PCO team count as a band/stage team we display? `keywords` comes from admin config. */
|
||||
function isAllowedTeamName(value, keywords) {
|
||||
const normalized = normalizeTeamName(value);
|
||||
if (!normalized) return false;
|
||||
return (keywords || []).some((kw) => {
|
||||
const k = normalizeTeamName(kw);
|
||||
return k && (normalized === k || normalized.includes(k));
|
||||
});
|
||||
}
|
||||
|
||||
function normalizeLabel(value) {
|
||||
return String(value || '')
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, ' ')
|
||||
.replace(/\s+/g, ' ')
|
||||
.trim();
|
||||
}
|
||||
|
||||
/** Fold a single token to a canonical instrument/role word (drops mic/pack noise, pluralises down). */
|
||||
function normalizeToken(token) {
|
||||
const normalized = String(token || '').trim().toLowerCase();
|
||||
if (!normalized) return '';
|
||||
if (/^\d+$/.test(normalized)) return '';
|
||||
if (['mix', 'mic', 'slot', 'channel', 'ch', 'pack', 'wireless', 'input', 'headset'].includes(normalized)) return '';
|
||||
if (['vox', 'vocal', 'vocalist', 'vocalists', 'vocals', 'singer', 'singers'].includes(normalized)) return 'vocals';
|
||||
if (['keys', 'keyboard', 'keyboards'].includes(normalized)) return 'keys';
|
||||
if (['drum', 'drums', 'drummer', 'drummers'].includes(normalized)) return 'drums';
|
||||
if (['perc', 'percussionist', 'percussionists'].includes(normalized)) return 'percussion';
|
||||
if (['gtr', 'guitar', 'guitars'].includes(normalized)) return 'guitar';
|
||||
if (['electric', 'electricguitar'].includes(normalized)) return 'electric';
|
||||
if (['acoustic', 'acousticguitar'].includes(normalized)) return 'acoustic';
|
||||
if (['b', 'bandleader', 'leader', 'lead'].includes(normalized)) return normalized === 'b' ? '' : 'leader';
|
||||
if (['worship', 'calltoworship'].includes(normalized)) return normalized === 'calltoworship' ? 'call' : normalized;
|
||||
if (normalized.endsWith('s') && normalized.length > 4) return normalized.slice(0, -1);
|
||||
return normalized;
|
||||
}
|
||||
|
||||
function labelTokens(value) {
|
||||
const normalized = normalizeLabel(value);
|
||||
if (!normalized) return [];
|
||||
const tokens = normalized.split(' ').map((t) => normalizeToken(t)).filter(Boolean);
|
||||
if (!tokens.length && normalized) return [normalized];
|
||||
return [...new Set(tokens)];
|
||||
}
|
||||
|
||||
/**
|
||||
* The role part of a slot label to match on: the bracketed content when present
|
||||
* ("[VOX 2] MIX 2" → "VOX 2, "), else the whole label ("STAGE MANAGER"). This
|
||||
* drops the "MIX n / MC n / HEADSET" mic-assignment noise so a mic number can't
|
||||
* be mistaken for a position number.
|
||||
*/
|
||||
function slotRoleText(label) {
|
||||
const brackets = String(label || '').match(/\[([^\]]*)\]/g);
|
||||
if (brackets && brackets.length) return brackets.map((b) => b.slice(1, -1)).join(', ');
|
||||
return String(label || '');
|
||||
}
|
||||
|
||||
/** The set of standalone numbers in a label ("vox 2" → {"2"}). */
|
||||
function numbersIn(value) {
|
||||
return new Set(normalizeLabel(value).split(' ').filter((t) => /^\d+$/.test(t)));
|
||||
}
|
||||
|
||||
/** 0–~140 similarity between a slot label and a PCO position name; higher is a better fit. */
|
||||
function scoreMatch(slotLabel, positionLabel) {
|
||||
const slotNormalized = normalizeLabel(slotLabel);
|
||||
const positionNormalized = normalizeLabel(positionLabel);
|
||||
if (!slotNormalized || !positionNormalized) return 0;
|
||||
// A numbered role only matches the same number: "Vox 3" must not take "Vox 2".
|
||||
const slotNums = numbersIn(slotLabel);
|
||||
const posNums = numbersIn(positionLabel);
|
||||
if (slotNums.size && posNums.size && ![...posNums].some((n) => slotNums.has(n))) return 0;
|
||||
if (slotNormalized === positionNormalized) return 120;
|
||||
if (slotNormalized.includes(positionNormalized) || positionNormalized.includes(slotNormalized)) return 95;
|
||||
|
||||
const slotTokens = labelTokens(slotLabel);
|
||||
const positionTokens = labelTokens(positionLabel);
|
||||
if (!slotTokens.length || !positionTokens.length) return 0;
|
||||
|
||||
const positionSet = new Set(positionTokens);
|
||||
const slotSet = new Set(slotTokens);
|
||||
const overlap = slotTokens.filter((t) => positionSet.has(t));
|
||||
if (!overlap.length) return 0;
|
||||
|
||||
const overlapCount = overlap.length;
|
||||
const slotCoverage = overlapCount / slotSet.size;
|
||||
const positionCoverage = overlapCount / positionSet.size;
|
||||
const sharedPhrase = overlap.join(' ');
|
||||
|
||||
let score = Math.round(slotCoverage * 70 + positionCoverage * 20 + overlapCount * 4);
|
||||
if (slotCoverage === 1) score += 18;
|
||||
if (positionCoverage === 1) score += 10;
|
||||
if (sharedPhrase && slotNormalized.includes(sharedPhrase) && positionNormalized.includes(sharedPhrase)) score += 8;
|
||||
return score;
|
||||
}
|
||||
|
||||
/**
|
||||
* Assign scheduled members to the ordered slot list. Greedy by best score, each
|
||||
* member used once. Returns an array aligned to `slots`, each entry the chosen
|
||||
* member or null. `MIN_SCORE` keeps a weak coincidence from claiming a slot.
|
||||
*/
|
||||
const MIN_SCORE = 60;
|
||||
function assignMembersToSlots(slots, members) {
|
||||
const pool = members.slice();
|
||||
return slots.map((slotLabel) => {
|
||||
const role = slotRoleText(slotLabel);
|
||||
let bestIndex = -1;
|
||||
let bestScore = MIN_SCORE - 1;
|
||||
for (let i = 0; i < pool.length; i += 1) {
|
||||
const score = scoreMatch(role, pool[i].label);
|
||||
if (score > bestScore) { bestScore = score; bestIndex = i; }
|
||||
}
|
||||
if (bestIndex < 0) return null;
|
||||
return pool.splice(bestIndex, 1)[0];
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Best library photo for a Planning Center person, matched by name so Sync can use the folder
|
||||
* photo instead of the PCO headshot. Handles full names, "First L" and first-name-only files,
|
||||
* preferring the most specific. Returns the entry, or null when there's no confident, UNAMBIGUOUS
|
||||
* match (e.g. two people share a first name and the photo is first-name-only) — then PCO's photo is used.
|
||||
* `entries` is [{ ...whatever, name }].
|
||||
*/
|
||||
function bestLibraryMatch(pcoName, entries) {
|
||||
const target = normalizeLabel(pcoName);
|
||||
if (!target) return null;
|
||||
const T = target.split(' ').filter(Boolean);
|
||||
const scoreOf = (name) => {
|
||||
const ln = normalizeLabel(name);
|
||||
if (!ln) return 0;
|
||||
if (ln === target) return 100; // exact full name
|
||||
const L = ln.split(' ').filter(Boolean);
|
||||
if (!L.length || !T.length) return 0;
|
||||
// Align the library name against a leading run of the person's name, token by token.
|
||||
// Every library token must equal the person's token in that position — except the LAST
|
||||
// library token, which may be an initial/prefix ("m" of "Moniz"). This makes "Brian M"
|
||||
// match "Brian Moniz" and "Alex" match "Alex Gaitan", but NOT "Alex" → "Alexander Zinni".
|
||||
let ok = true; let exact = 0; let usedPrefix = false;
|
||||
for (let k = 0; k < L.length; k += 1) {
|
||||
const lt = L[k]; const tt = T[k];
|
||||
if (!tt) { ok = false; break; }
|
||||
if (lt === tt) { exact += 1; continue; }
|
||||
if (k === L.length - 1 && tt.startsWith(lt)) { usedPrefix = true; continue; }
|
||||
ok = false; break;
|
||||
}
|
||||
if (ok) {
|
||||
if (L.length >= 2) return usedPrefix ? 86 : 92; // "brian m" / "alex gaitan"
|
||||
if (exact === 1) return 90; // first name matches exactly ("alex")
|
||||
if (usedPrefix) return 45; // "alex" vs "alexander" — too ambiguous
|
||||
}
|
||||
// Otherwise: a library surname that appears anywhere in the person's name.
|
||||
const last = L[L.length - 1];
|
||||
if (last && last.length >= 3 && T.includes(last)) return 78;
|
||||
return 0;
|
||||
};
|
||||
let best = null;
|
||||
let bestScore = 0;
|
||||
let tie = false;
|
||||
for (const e of entries) {
|
||||
const s = scoreOf(e.name);
|
||||
if (s > bestScore) { bestScore = s; best = e; tie = false; }
|
||||
else if (s === bestScore && s > 0) tie = true;
|
||||
}
|
||||
if (bestScore < 60 || tie) return null; // no confident / unambiguous winner → PCO photo
|
||||
return best;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
normalizeTeamName,
|
||||
isAllowedTeamName,
|
||||
bestLibraryMatch,
|
||||
normalizeLabel,
|
||||
normalizeToken,
|
||||
labelTokens,
|
||||
slotRoleText,
|
||||
numbersIn,
|
||||
scoreMatch,
|
||||
assignMembersToSlots,
|
||||
MIN_SCORE,
|
||||
};
|
||||
@@ -0,0 +1,67 @@
|
||||
'use strict';
|
||||
const assert = require('assert');
|
||||
const { assignMembersToSlots, isAllowedTeamName, slotRoleText, scoreMatch } = require('./matching');
|
||||
|
||||
const SLOTS = [
|
||||
'[LEADER, VOX 1, ACOUSTIC] MIX 1', '[VOX 2] MIX 2', '[VOX 3] MIX 3', '[VOX 4] MIX 4',
|
||||
'[GUITAR, LEAD] MIX 5', '[BASS] MIX 6', '[VOX 5] MIX 7', '[PIANO]', '[DRUMS]',
|
||||
'[KEYS 2]', '[CALL TO WORSHIP] MC2', 'STAGE MANAGER', '[MC] MC1', '[SPEAKER] HEADSET',
|
||||
];
|
||||
const M = (label) => ({ label, name: label });
|
||||
const members = [
|
||||
M('Vox 3'), M('Vox 2'), M('Vox 1'), M('Guitar / Lead'), M('Bass'), M('Piano'), M('Drums'), M('MC'), M('Keys 2'),
|
||||
];
|
||||
const out = assignMembersToSlots(SLOTS, members).map((m) => (m ? m.label : null));
|
||||
|
||||
// Numbered vocals land in the RIGHT slot (this is the swap bug we fixed).
|
||||
assert.strictEqual(out[0], 'Vox 1', 'slot 0 → Vox 1');
|
||||
assert.strictEqual(out[1], 'Vox 2', 'slot 1 → Vox 2');
|
||||
assert.strictEqual(out[2], 'Vox 3', 'slot 2 → Vox 3');
|
||||
assert.strictEqual(out[3], null, 'slot 3 (Vox 4) unfilled — nobody scheduled');
|
||||
assert.strictEqual(out[4], 'Guitar / Lead', 'slot 4 → Guitar/Lead');
|
||||
assert.strictEqual(out[5], 'Bass', 'slot 5 → Bass');
|
||||
assert.strictEqual(out[6], null, 'slot 6 (Vox 5) unfilled');
|
||||
assert.strictEqual(out[7], 'Piano', 'slot 7 → Piano');
|
||||
assert.strictEqual(out[8], 'Drums', 'slot 8 → Drums');
|
||||
assert.strictEqual(out[9], 'Keys 2', 'slot 9 → Keys 2');
|
||||
assert.strictEqual(out[12], 'MC', 'slot 12 → MC');
|
||||
|
||||
// A different number never matches.
|
||||
assert.strictEqual(scoreMatch(slotRoleText('[VOX 2] MIX 2'), 'Vox 3'), 0, 'Vox 3 must not match Vox 2 slot');
|
||||
// Mic number no longer pollutes: Vox 7 must not grab "[VOX 5] MIX 7".
|
||||
assert.strictEqual(scoreMatch(slotRoleText('[VOX 5] MIX 7'), 'Vox 7'), 0, 'Vox 7 must not match the MIX 7 slot');
|
||||
|
||||
// Team allow-list (singular stems match plurals/variants via substring).
|
||||
assert.ok(isAllowedTeamName('Band', ['band', 'vocal']));
|
||||
assert.ok(isAllowedTeamName('Vocals', ['band', 'vocal']));
|
||||
assert.ok(isAllowedTeamName('Vocal Team', ['band', 'vocal']));
|
||||
assert.ok(!isAllowedTeamName('Video', ['band', 'vocal', 'production']));
|
||||
|
||||
console.log('matching.test.js: all assertions passed ✓');
|
||||
console.log('assignment:', JSON.stringify(out));
|
||||
|
||||
// --- bestLibraryMatch: folder-photo → PCO person by name ---
|
||||
{
|
||||
const { bestLibraryMatch } = require('./matching');
|
||||
const name = (n) => (e) => (e ? e.name : null);
|
||||
const lib = [
|
||||
{ id: 'a', name: 'Alex' }, { id: 'g', name: 'AlexG' }, { id: 'bm', name: 'Brian M' },
|
||||
{ id: 'c', name: 'Courtney' }, { id: 'gn', name: 'Gaitan' }, { id: 'wes', name: 'Wes' },
|
||||
];
|
||||
const pick = (n, list = lib) => { const e = bestLibraryMatch(n, list); return e ? e.name : null; };
|
||||
assert.strictEqual(pick('Alex Gaitan'), 'Alex', 'first name matches "Alex"');
|
||||
assert.strictEqual(pick('Brian Moniz'), 'Brian M', '"Brian M" matches "Brian Moniz"');
|
||||
assert.strictEqual(pick('Courtney Maranda'), 'Courtney', 'first name matches');
|
||||
assert.strictEqual(pick('Alexander Zinni'), null, '"Alex" must NOT grab "Alexander Zinni"');
|
||||
assert.strictEqual(pick('Wes Carter'), 'Wes', 'first name matches "Wes"');
|
||||
// surname-named photo
|
||||
assert.strictEqual(pick('Someone Gaitan'), 'Gaitan', 'surname photo matches by last name');
|
||||
// two people share a first name + only a first-name photo → ambiguous only if two matches tie;
|
||||
// here a single "Alex" photo still maps to whoever's first name is exactly Alex.
|
||||
assert.strictEqual(pick('Alex Johnson'), 'Alex', 'first-name photo maps to any exact-first-name person');
|
||||
// exact full name beats a first-name photo
|
||||
assert.strictEqual(pick('Alex Gaitan', [{ id: 'x', name: 'Alex Gaitan' }, { id: 'a', name: 'Alex' }]), 'Alex Gaitan', 'exact full name wins');
|
||||
// tie → no match (two identical-scoring photos)
|
||||
assert.strictEqual(bestLibraryMatch('Chris Smith', [{ id: '1', name: 'Chris' }, { id: '2', name: 'Chris' }]), null, 'ambiguous tie → null');
|
||||
console.log('bestLibraryMatch: all assertions passed ✓');
|
||||
}
|
||||
@@ -0,0 +1,162 @@
|
||||
{
|
||||
"id": "band-lineup",
|
||||
"name": "Band Lineup",
|
||||
"version": "1.10.1",
|
||||
"proddash": ">=1.4.0",
|
||||
"description": "Stage lineup photos with mic/pack labels \u2014 a drag-in photo library plus optional Planning Center auto-fill",
|
||||
"client": "client.js",
|
||||
"server": "server.js",
|
||||
"style": "style.css",
|
||||
"minSize": {
|
||||
"w": 4,
|
||||
"h": 3
|
||||
},
|
||||
"defaultSize": {
|
||||
"w": 8,
|
||||
"h": 5
|
||||
},
|
||||
"configGroups": {
|
||||
"Planning Center credentials": {
|
||||
"collapsed": "whenSet",
|
||||
"help": "Create a Personal Access Token at api.planningcenteronline.com and paste its Client ID + Secret here, or paste an OAuth 2.0 access token instead. Reading photos and birthdays needs People access on the token. Saved secrets never reach browsers."
|
||||
},
|
||||
"Stage": {
|
||||
"help": "One mic/pack label per line, in the order they sit on stage. Scheduled people are matched into these by their Planning Center position (e.g. a line '[VOX 2] MIX 2' takes whoever is scheduled on Vox 2). Blank lines are empty spots."
|
||||
},
|
||||
"Photo library": {
|
||||
"help": "Paste a Google Drive folder share link (set the folder to 'Anyone with the link \u2192 Viewer'). Every image is imported (file name \u2192 person's name) and kept in sync \u2014 add or remove photos in Drive and the board follows. A local folder path also works. If Drive can't be read, the board falls back to Planning Center photos."
|
||||
}
|
||||
},
|
||||
"configSchema": {
|
||||
"appId": {
|
||||
"type": "string",
|
||||
"label": "Client ID",
|
||||
"default": "",
|
||||
"group": "Planning Center credentials"
|
||||
},
|
||||
"secret": {
|
||||
"type": "password",
|
||||
"label": "Secret",
|
||||
"default": "",
|
||||
"group": "Planning Center credentials"
|
||||
},
|
||||
"accessToken": {
|
||||
"type": "password",
|
||||
"label": "OAuth 2.0 access token (instead of Client ID + Secret)",
|
||||
"default": "",
|
||||
"group": "Planning Center credentials"
|
||||
},
|
||||
"serviceTypeId": {
|
||||
"type": "select",
|
||||
"label": "Service type",
|
||||
"default": "",
|
||||
"optionsRoute": "/service-types"
|
||||
},
|
||||
"planId": {
|
||||
"type": "select",
|
||||
"label": "Plan",
|
||||
"default": "",
|
||||
"options": [
|
||||
{
|
||||
"value": "",
|
||||
"label": "Automatic \u2014 today's plan, else the next upcoming"
|
||||
}
|
||||
],
|
||||
"optionsRoute": "/plans",
|
||||
"optionsDependsOn": "serviceTypeId"
|
||||
},
|
||||
"teams": {
|
||||
"type": "text",
|
||||
"label": "Teams to include",
|
||||
"default": "Band\nWorship\nVocal\nProduction\nCommunication",
|
||||
"help": "One team name (or keyword) per line. A person on any matching Planning Center team is eligible for the board."
|
||||
},
|
||||
"slots": {
|
||||
"type": "text",
|
||||
"label": "Stage slots",
|
||||
"default": "[LEADER, VOX 1, ACOUSTIC] MIX 1\n[VOX 2] MIX 2\n[VOX 3] MIX 3\n[VOX 4] MIX 4\n[GUITAR, LEAD] MIX 5\n[BASS] MIX 6\n[VOX 5] MIX 7\n[PIANO]\n[DRUMS]\n[KEYS 2]\n[CALL TO WORSHIP] MC2\nSTAGE MANAGER\n[MC] MC1\n[SPEAKER] HEADSET",
|
||||
"group": "Stage"
|
||||
},
|
||||
"columns": {
|
||||
"type": "number",
|
||||
"label": "Columns",
|
||||
"default": 7,
|
||||
"group": "Stage",
|
||||
"help": "Default slots per row (each screen can still adjust with the \u2212 / + buttons in its title bar)."
|
||||
},
|
||||
"photoFolder": {
|
||||
"type": "string",
|
||||
"label": "Google Drive folder link",
|
||||
"default": "",
|
||||
"group": "Photo library",
|
||||
"help": "e.g. https://drive.google.com/drive/folders/\u2026 (a local folder path also works). Leave blank to use Planning Center photos only."
|
||||
}
|
||||
},
|
||||
"instanceGroups": {
|
||||
"Birthday": {
|
||||
"toggle": "birthdays"
|
||||
},
|
||||
"Show / hide": {
|
||||
"collapsed": true,
|
||||
"columns": 2
|
||||
}
|
||||
},
|
||||
"instanceSchema": {
|
||||
"birthdays": {
|
||||
"type": "switch",
|
||||
"label": "Birthday confetti",
|
||||
"default": true,
|
||||
"group": "Birthday"
|
||||
},
|
||||
"birthdayIntensity": {
|
||||
"type": "select",
|
||||
"label": "Intensity",
|
||||
"default": "subtle",
|
||||
"group": "Birthday",
|
||||
"showWhen": "birthdays",
|
||||
"options": [
|
||||
{
|
||||
"value": "subtle",
|
||||
"label": "Subtle"
|
||||
},
|
||||
{
|
||||
"value": "full",
|
||||
"label": "Full"
|
||||
}
|
||||
]
|
||||
},
|
||||
"birthdayTest": {
|
||||
"type": "select",
|
||||
"label": "Force on (test)",
|
||||
"default": "",
|
||||
"group": "Birthday",
|
||||
"showWhen": "birthdays",
|
||||
"options": [
|
||||
{
|
||||
"value": "",
|
||||
"label": "Off"
|
||||
}
|
||||
],
|
||||
"optionsRoute": "/people",
|
||||
"help": "Force one person's tile to celebrate for testing. Clears when you set it back to Off."
|
||||
},
|
||||
"parallax": {
|
||||
"type": "boolean",
|
||||
"label": "Parallax motion",
|
||||
"default": true,
|
||||
"group": "Show / hide"
|
||||
},
|
||||
"showNames": {
|
||||
"type": "boolean",
|
||||
"label": "Names",
|
||||
"default": true,
|
||||
"group": "Show / hide"
|
||||
},
|
||||
"showLabels": {
|
||||
"type": "boolean",
|
||||
"label": "Mic labels",
|
||||
"default": true,
|
||||
"group": "Show / hide"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,764 @@
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Band Lineup — server part.
|
||||
*
|
||||
* Owns the shared stage board and the uploaded-photo library, plus the one
|
||||
* Planning Center connection. The board is server-side and global: whoever
|
||||
* edits it (drag a library photo onto a slot, rename, clear) changes it for
|
||||
* every Band Lineup tile on every screen, over SSE. Planning Center sync is an
|
||||
* optional auto-fill — it only fills slots nobody has placed by hand. Browsers
|
||||
* never talk to Planning Center directly.
|
||||
*
|
||||
* GET /state → { state } (board + library; instant paint)
|
||||
* GET /stream → SSE `state` events (change-detected, heartbeat)
|
||||
* GET /library → { people } (the drag-in photo library)
|
||||
* GET /service-types → { options } (admin "Service type" select)
|
||||
* GET /plans → { options } (admin "Plan" select)
|
||||
* GET /people → { options } (gear "Force birthday" select)
|
||||
* GET /photo/<file> → image bytes (library + cached PCO photos)
|
||||
* POST /library/<id> → rename / set birthday / replace photo (raw image body; ?name=&birthday=)
|
||||
* POST /library/<id>/delete→ remove from the library and any slot
|
||||
* POST /assign → ?slot=&personId= place a library person in a slot
|
||||
* POST /move → ?from=&to= move or swap one slot's occupant
|
||||
* POST /slot/<index>/name → ?name= rename the occupant (or make a name-only spot)
|
||||
* POST /slot/<index>/clear → empty the slot
|
||||
* POST /choir → ?on=1|0 toggle the extra CHOIR slot (shared)
|
||||
* POST /sync → run a Planning Center + photo-folder sync now
|
||||
*/
|
||||
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const os = require('os');
|
||||
const crypto = require('crypto');
|
||||
|
||||
const { isAllowedTeamName, assignMembersToSlots, bestLibraryMatch } = require('./matching');
|
||||
|
||||
const DEFAULT_API_BASE = 'https://api.planningcenteronline.com';
|
||||
const API_BASE = String(process.env.BAND_LINEUP_API_BASE || process.env.PCO_PLAN_API_BASE || DEFAULT_API_BASE).replace(/\/+$/, '');
|
||||
const SERVICES = '/services/v2';
|
||||
const PEOPLE = '/people/v2';
|
||||
|
||||
const REQUEST_TIMEOUT_MS = 12000;
|
||||
const PHOTO_TIMEOUT_MS = 15000;
|
||||
const MIN_POLL_S = 10;
|
||||
const RETRY_MS = 15000;
|
||||
const HEARTBEAT_MS = 15000;
|
||||
const MODULE_ID = 'band-lineup';
|
||||
const MAX_UPLOAD = 20 * 1024 * 1024;
|
||||
|
||||
let current = null; // set by init(), read by routes; rebuilt together on remount
|
||||
|
||||
/* ── data directory (library + board + photo cache live here, never in the repo) ── */
|
||||
|
||||
function resolveDataDir() {
|
||||
const home = os.homedir();
|
||||
const fromEnv = String(process.env.PRODDASH_DATA_DIR || '').trim();
|
||||
const root = path.join(__dirname, '..', '..');
|
||||
if (fromEnv) return path.resolve(root, fromEnv);
|
||||
if (process.platform === 'win32') return path.join(process.env.APPDATA || path.join(home, 'AppData', 'Roaming'), 'ProdDash');
|
||||
if (process.platform === 'darwin') return path.join(home, 'Library', 'Application Support', 'ProdDash');
|
||||
return path.join(process.env.XDG_CONFIG_HOME || path.join(home, '.config'), 'proddash');
|
||||
}
|
||||
|
||||
/* ── small helpers ─────────────────────────────────────────────────── */
|
||||
|
||||
function lines(text) { return String(text || '').split('\n').map((s) => s.trim()); }
|
||||
function nonEmptyLines(text) { return lines(text).filter(Boolean); }
|
||||
function localYmd(d) { return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`; }
|
||||
function birthdayMmdd(raw) {
|
||||
const s = String(raw || '').trim();
|
||||
const full = s.match(/^\d{4}-(\d{2})-(\d{2})$/);
|
||||
if (full) return `${full[1]}-${full[2]}`;
|
||||
return /^\d{2}-\d{2}$/.test(s) ? s : '';
|
||||
}
|
||||
function birthdayWeekSet(now = new Date()) {
|
||||
const daysSinceWed = (now.getDay() - 3 + 7) % 7;
|
||||
const start = new Date(now.getFullYear(), now.getMonth(), now.getDate() - daysSinceWed);
|
||||
const set = new Set();
|
||||
for (let i = 0; i < 7; i += 1) {
|
||||
const d = new Date(start.getFullYear(), start.getMonth(), start.getDate() + i);
|
||||
set.add(`${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`);
|
||||
}
|
||||
return set;
|
||||
}
|
||||
function extFromContentType(ct) {
|
||||
const t = String(ct || '').toLowerCase();
|
||||
if (t.includes('png')) return 'png';
|
||||
if (t.includes('webp')) return 'webp';
|
||||
if (t.includes('gif')) return 'gif';
|
||||
return 'jpg';
|
||||
}
|
||||
function contentTypeForFile(file) {
|
||||
const e = path.extname(file).toLowerCase();
|
||||
if (e === '.png') return 'image/png';
|
||||
if (e === '.webp') return 'image/webp';
|
||||
if (e === '.gif') return 'image/gif';
|
||||
return 'image/jpeg';
|
||||
}
|
||||
function json(res, status, body) {
|
||||
res.writeHead(status, { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'no-store' });
|
||||
res.end(JSON.stringify(body));
|
||||
}
|
||||
function readJsonFile(file, fallback) { try { return JSON.parse(fs.readFileSync(file, 'utf8')) || fallback; } catch { return fallback; } }
|
||||
function newId() { return crypto.randomBytes(6).toString('hex'); }
|
||||
function photoUrlFor(file) { return file ? `/api/modules/${MODULE_ID}/photo/${encodeURIComponent(file)}` : ''; }
|
||||
|
||||
/* ── Planning Center client ────────────────────────────────────────── */
|
||||
|
||||
function createPcoClient(config) {
|
||||
const token = String(config.accessToken || '').trim();
|
||||
const appId = String(config.appId || '').trim();
|
||||
const secret = String(config.secret || '');
|
||||
let auth = '';
|
||||
if (token) auth = `Bearer ${token}`;
|
||||
else if (appId && secret) auth = 'Basic ' + Buffer.from(`${appId}:${secret}`).toString('base64');
|
||||
const configured = Boolean(auth);
|
||||
|
||||
async function get(target, params) {
|
||||
const url = new URL(/^https?:\/\//.test(target) ? target : API_BASE + target);
|
||||
for (const [k, v] of Object.entries(params || {})) url.searchParams.set(k, String(v));
|
||||
let response;
|
||||
try {
|
||||
response = await fetch(url, { headers: { Authorization: auth, Accept: 'application/json' }, signal: AbortSignal.timeout(REQUEST_TIMEOUT_MS) });
|
||||
} catch (err) {
|
||||
const e = new Error(`Planning Center unreachable: ${err?.message || err}`); e.network = true; throw e;
|
||||
}
|
||||
if (!response.ok) { const e = new Error(`Planning Center ${response.status}`); e.status = response.status; throw e; }
|
||||
const text = await response.text();
|
||||
return text ? JSON.parse(text) : {};
|
||||
}
|
||||
async function getAll(target, params) {
|
||||
const data = []; const included = []; let next = null;
|
||||
let query = { per_page: 100, ...(params || {}) }; let guard = 0;
|
||||
do {
|
||||
const body = next ? await get(next) : await get(target, query);
|
||||
if (Array.isArray(body.data)) data.push(...body.data);
|
||||
if (Array.isArray(body.included)) included.push(...body.included);
|
||||
next = body?.links?.next || null; query = null; guard += 1;
|
||||
} while (next && guard < 50);
|
||||
return { data, included };
|
||||
}
|
||||
return { configured, get, getAll };
|
||||
}
|
||||
|
||||
/* ── Google Drive (public "anyone with the link" folder, no API key) ── */
|
||||
|
||||
const DRIVE_TIMEOUT_MS = 30000;
|
||||
const DRIVE_UA = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/537.36';
|
||||
|
||||
/** Pull the folder id out of a Drive share link (or '' if it isn't a Drive folder link). */
|
||||
function parseDriveFolderId(s) {
|
||||
const str = String(s || '');
|
||||
if (!/drive\.google\.com/i.test(str)) return '';
|
||||
const m = /\/folders\/([A-Za-z0-9_-]{10,})/.exec(str) || /[?&]id=([A-Za-z0-9_-]{10,})/.exec(str);
|
||||
return m ? m[1] : '';
|
||||
}
|
||||
|
||||
/** List a public folder's files via Drive's embedded folder view — [{ id, name }]. */
|
||||
async function driveList(folderId) {
|
||||
const resp = await fetch(`https://drive.google.com/embeddedfolderview?id=${encodeURIComponent(folderId)}#list`, {
|
||||
headers: { 'User-Agent': DRIVE_UA }, redirect: 'follow', signal: AbortSignal.timeout(DRIVE_TIMEOUT_MS),
|
||||
});
|
||||
if (!resp.ok) throw new Error(`Drive folder list ${resp.status}`);
|
||||
const html = await resp.text();
|
||||
const out = []; const seen = new Set();
|
||||
const re = /id="entry-([A-Za-z0-9_-]{20,})"[\s\S]*?flip-entry-title[^>]*>([^<]+)</g;
|
||||
let m;
|
||||
while ((m = re.exec(html))) {
|
||||
const id = m[1]; const name = m[2].trim();
|
||||
if (id && !seen.has(id)) { seen.add(id); out.push({ id, name }); }
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
/** Download one public Drive file at full resolution (falls back to a large thumbnail). */
|
||||
async function driveFetchImage(fileId) {
|
||||
const base = 'https://drive.usercontent.google.com/download';
|
||||
const opts = { headers: { 'User-Agent': DRIVE_UA }, redirect: 'follow', signal: AbortSignal.timeout(DRIVE_TIMEOUT_MS) };
|
||||
let resp = await fetch(`${base}?id=${fileId}&export=download`, opts);
|
||||
let ct = String(resp.headers.get('content-type') || '');
|
||||
if (resp.ok && ct.startsWith('image/')) return { buf: Buffer.from(await resp.arrayBuffer()), ext: extFromContentType(ct) };
|
||||
// Large-file virus-scan interstitial: grab the confirm token and retry.
|
||||
if (ct.includes('text/html')) {
|
||||
const html = await resp.text();
|
||||
const conf = /name="confirm"\s+value="([^"]+)"/.exec(html) || /[?&]confirm=([0-9A-Za-z_-]+)/.exec(html);
|
||||
const uuid = /name="uuid"\s+value="([^"]+)"/.exec(html);
|
||||
if (conf) {
|
||||
resp = await fetch(`${base}?id=${fileId}&export=download&confirm=${conf[1]}${uuid ? `&uuid=${uuid[1]}` : ''}`, opts);
|
||||
ct = String(resp.headers.get('content-type') || '');
|
||||
if (resp.ok && ct.startsWith('image/')) return { buf: Buffer.from(await resp.arrayBuffer()), ext: extFromContentType(ct) };
|
||||
}
|
||||
}
|
||||
const th = await fetch(`https://drive.google.com/thumbnail?id=${fileId}&sz=w2000`, opts);
|
||||
const tct = String(th.headers.get('content-type') || '');
|
||||
if (th.ok && tct.startsWith('image/')) return { buf: Buffer.from(await th.arrayBuffer()), ext: extFromContentType(tct) };
|
||||
throw new Error('not an image');
|
||||
}
|
||||
|
||||
/* ── the module ────────────────────────────────────────────────────── */
|
||||
|
||||
module.exports = {
|
||||
init({ config, log }) {
|
||||
const streams = new Set();
|
||||
const dataDir = path.join(resolveDataDir(), MODULE_ID);
|
||||
const photoDir = path.join(dataDir, 'photos');
|
||||
const libraryPath = path.join(dataDir, 'library.json');
|
||||
const boardPath = path.join(dataDir, 'board.json');
|
||||
try { fs.mkdirSync(photoDir, { recursive: true }); } catch (err) { log(`cannot create ${photoDir}: ${err?.message || err}`); }
|
||||
|
||||
const slots = nonEmptyLines(config.slots).length ? lines(config.slots) : [];
|
||||
const teamKeywords = nonEmptyLines(config.teams).length ? nonEmptyLines(config.teams) : ['band', 'worship', 'vocal', 'production', 'communication'];
|
||||
const columns = Math.max(1, Number(config.columns) || 7);
|
||||
const serviceTypeId = String(config.serviceTypeId || '').trim();
|
||||
const planIdCfg = String(config.planId || '').trim();
|
||||
// Photos folder: the admin "Photos folder" field wins when set; otherwise it's whatever the
|
||||
// tile's "Choose folder…" picker saved into module state. Admin can't host a native picker
|
||||
// (the shell renders plain fields), so the picker lives in the tile as the no-typing option.
|
||||
const settingsPath = path.join(dataDir, 'settings.json');
|
||||
const settings = readJsonFile(settingsPath, {}) || {};
|
||||
const photoFolder = String(config.photoFolder || settings.photoFolder || '').trim(); // admin field (Drive link or local path)
|
||||
let choirOn = Boolean(settings.choir); // optional extra "CHOIR" slot, toggled from the tile
|
||||
function saveSettings() { try { fs.writeFileSync(settingsPath, JSON.stringify(settings, null, 2)); } catch (err) { log(`save settings failed: ${err?.message || err}`); } }
|
||||
|
||||
const CHOIR_LABEL = 'CHOIR';
|
||||
// The board's slots plus an extra CHOIR spot when the toggle is on. Its index is slots.length,
|
||||
// so its assignment persists in board.json across toggles.
|
||||
const effectiveSlots = () => (choirOn ? slots.concat([CHOIR_LABEL]) : slots);
|
||||
|
||||
const pco = createPcoClient(config);
|
||||
|
||||
// Persisted, shared editor state.
|
||||
let library = readJsonFile(libraryPath, {}); // { id: { name, file, birthday } }
|
||||
let board = readJsonFile(boardPath, {}); // { slotIndex: { personId, name } }
|
||||
function saveLibrary() { try { fs.writeFileSync(libraryPath, JSON.stringify(library, null, 2)); } catch (err) { log(`save library failed: ${err?.message || err}`); } }
|
||||
function saveBoard() { try { fs.writeFileSync(boardPath, JSON.stringify(board, null, 2)); } catch (err) { log(`save board failed: ${err?.message || err}`); } }
|
||||
|
||||
let latest = clearedState();
|
||||
let lastFrame = '';
|
||||
let celebrateTimer = null;
|
||||
let drivePollTimer = null;
|
||||
let watcher = null;
|
||||
let watchDebounce = null;
|
||||
let stopped = false;
|
||||
let syncing = false;
|
||||
|
||||
function clearedState() {
|
||||
return {
|
||||
configured: pco.configured, serviceTypeSet: Boolean(serviceTypeId),
|
||||
reachable: false, lastError: '', lastFetched: 0, columns,
|
||||
plan: null,
|
||||
slots: effectiveSlots().map((label, index) => ({ index, label, person: null })),
|
||||
library: [], choir: choirOn,
|
||||
};
|
||||
}
|
||||
|
||||
function libraryList() {
|
||||
return Object.entries(library)
|
||||
.map(([id, v]) => ({ id, name: v.name || '', photo: photoUrlFor(v.file || ''), birthday: v.birthday || '' }))
|
||||
.sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }));
|
||||
}
|
||||
|
||||
function broadcast() {
|
||||
if (!streams.size) return;
|
||||
let frame; try { frame = JSON.stringify(latest); } catch { return; }
|
||||
if (frame === lastFrame) return;
|
||||
lastFrame = frame;
|
||||
const payload = `event: state\ndata: ${frame}\n\n`;
|
||||
for (const res of streams) { try { res.write(payload); } catch { streams.delete(res); } }
|
||||
}
|
||||
|
||||
async function listPlans(stId) {
|
||||
const [future, past] = await Promise.all([
|
||||
pco.get(`${SERVICES}/service_types/${encodeURIComponent(stId)}/plans`, { filter: 'future', order: 'sort_date', per_page: 6 }),
|
||||
pco.get(`${SERVICES}/service_types/${encodeURIComponent(stId)}/plans`, { filter: 'past', order: '-sort_date', per_page: 2 }),
|
||||
]);
|
||||
const rows = [...(future.data || []), ...(past.data || [])];
|
||||
return rows.map((rec) => ({
|
||||
id: String(rec.id), sortDate: Date.parse(rec.attributes?.sort_date || '') || 0,
|
||||
title: String(rec.attributes?.title || rec.attributes?.series_title || '').trim(),
|
||||
dates: String(rec.attributes?.dates || rec.attributes?.short_dates || '').trim(),
|
||||
}));
|
||||
}
|
||||
function pickPlan(plans) {
|
||||
if (planIdCfg) return plans.find((p) => p.id === planIdCfg) || { id: planIdCfg, title: '', dates: '' };
|
||||
const todayY = localYmd(new Date());
|
||||
const today = plans.find((p) => p.sortDate && localYmd(new Date(p.sortDate)) === todayY);
|
||||
if (today) return today;
|
||||
const now = Date.now();
|
||||
const upcoming = plans.filter((p) => p.sortDate >= now - 12 * 3600000).sort((a, b) => a.sortDate - b.sortDate);
|
||||
return upcoming[0] || plans.sort((a, b) => b.sortDate - a.sortDate)[0] || null;
|
||||
}
|
||||
|
||||
async function cachePcoPhoto(personId, url) {
|
||||
if (!url) return '';
|
||||
const hash = crypto.createHash('sha1').update(url).digest('hex').slice(0, 8);
|
||||
const existing = fs.existsSync(photoDir) ? fs.readdirSync(photoDir).find((f) => f.startsWith(`pco-${personId}-${hash}.`)) : null;
|
||||
if (existing) return existing;
|
||||
try {
|
||||
const resp = await fetch(url, { signal: AbortSignal.timeout(PHOTO_TIMEOUT_MS) });
|
||||
if (!resp.ok) return '';
|
||||
const buf = Buffer.from(await resp.arrayBuffer());
|
||||
if (!buf.length) return '';
|
||||
const file = `pco-${personId}-${hash}.${extFromContentType(resp.headers.get('content-type'))}`;
|
||||
fs.writeFileSync(path.join(photoDir, file), buf);
|
||||
return file;
|
||||
} catch { return ''; }
|
||||
}
|
||||
|
||||
/**
|
||||
* Import a folder of photos into the library and keep it in sync: new files are added
|
||||
* (filename → name), changed files refreshed, and files removed from the folder dropped
|
||||
* from the library (and any slot they filled). Manually-uploaded photos (no folderKey) are
|
||||
* left alone, so a folder and hand-uploads can coexist. Returns true if anything changed.
|
||||
*/
|
||||
const IMG_RE = /\.(jpe?g|png|webp|gif)$/i;
|
||||
const cleanNameFromFile = (f) => f.replace(/\.[^.]+$/, '').replace(/[_-]+/g, ' ').trim();
|
||||
function extOf(f) { const m = f.match(IMG_RE); const e = (m ? m[1] : 'jpg').toLowerCase(); return e === 'jpeg' ? 'jpg' : e; }
|
||||
function scanFolder() {
|
||||
if (!photoFolder) return false;
|
||||
let names; try { names = fs.readdirSync(photoFolder); } catch { return false; } // folder gone/unreadable
|
||||
const files = names.filter((n) => IMG_RE.test(n));
|
||||
const present = new Set(files);
|
||||
const byKey = new Map();
|
||||
for (const [id, v] of Object.entries(library)) if (v.folderKey) byKey.set(v.folderKey, id);
|
||||
let changed = false;
|
||||
for (const f of files) {
|
||||
let mtime = 0; try { mtime = fs.statSync(path.join(photoFolder, f)).mtimeMs; } catch { continue; }
|
||||
const id = byKey.get(f);
|
||||
try {
|
||||
if (id) {
|
||||
const v = library[id];
|
||||
if (v.mtime === mtime && v.file) continue; // unchanged
|
||||
const dest = `lib-${id}.${extOf(f)}`;
|
||||
fs.copyFileSync(path.join(photoFolder, f), path.join(photoDir, dest));
|
||||
if (v.file && v.file !== dest) { try { fs.unlinkSync(path.join(photoDir, v.file)); } catch { /* ignore */ } }
|
||||
v.file = dest; v.mtime = mtime; changed = true; // keep any in-app rename/birthday
|
||||
} else {
|
||||
const nid = newId();
|
||||
const dest = `lib-${nid}.${extOf(f)}`;
|
||||
fs.copyFileSync(path.join(photoFolder, f), path.join(photoDir, dest));
|
||||
library[nid] = { name: cleanNameFromFile(f), file: dest, birthday: '', folderKey: f, mtime };
|
||||
changed = true;
|
||||
}
|
||||
} catch (err) { log(`folder import of ${f} failed: ${err?.message || err}`); }
|
||||
}
|
||||
for (const [id, v] of Object.entries(library)) {
|
||||
if (v.folderKey && !present.has(v.folderKey)) {
|
||||
if (v.file) { try { fs.unlinkSync(path.join(photoDir, v.file)); } catch { /* ignore */ } }
|
||||
delete library[id];
|
||||
for (const [slot, b] of Object.entries(board)) if (b && b.personId === id) delete board[slot];
|
||||
changed = true;
|
||||
}
|
||||
}
|
||||
// De-duplicate: a hand-uploaded photo that shares a name with a folder photo is dropped
|
||||
// (the folder wins), and any slot it filled repoints to the folder photo. Fixes the case
|
||||
// where someone uploaded people by hand and then pointed at a folder of the same people.
|
||||
const folderByName = new Map();
|
||||
for (const [id, v] of Object.entries(library)) if (v.folderKey && v.name) folderByName.set(normName(v.name), id);
|
||||
for (const [id, v] of Object.entries(library)) {
|
||||
if (v.folderKey || !v.name) continue;
|
||||
const keepId = folderByName.get(normName(v.name));
|
||||
if (!keepId) continue;
|
||||
if (v.file) { try { fs.unlinkSync(path.join(photoDir, v.file)); } catch { /* ignore */ } }
|
||||
for (const [slot, b] of Object.entries(board)) if (b && b.personId === id) b.personId = keepId;
|
||||
delete library[id];
|
||||
changed = true;
|
||||
}
|
||||
if (changed) { saveLibrary(); saveBoard(); }
|
||||
return changed;
|
||||
}
|
||||
|
||||
// Import a public Google Drive folder into the library (file name → name), keeping it in sync.
|
||||
// Keyed by Drive file id (folderKey "drive:<id>"). On a list failure we keep the last-good library.
|
||||
async function scanDrive(folderId) {
|
||||
let files;
|
||||
try { files = await driveList(folderId); } catch (err) { log(`Drive list failed: ${err?.message || err}`); return false; }
|
||||
files = files.filter((f) => IMG_RE.test(f.name));
|
||||
const present = new Set(files.map((f) => `drive:${f.id}`));
|
||||
const have = new Set();
|
||||
for (const v of Object.values(library)) if (v.folderKey && v.folderKey.startsWith('drive:')) have.add(v.folderKey);
|
||||
let changed = false;
|
||||
for (const f of files) {
|
||||
const key = `drive:${f.id}`;
|
||||
if (have.has(key)) continue; // already imported (by Drive file id)
|
||||
let img;
|
||||
try { img = await driveFetchImage(f.id); } catch (err) { log(`Drive image ${f.name} failed: ${err?.message || err}`); continue; }
|
||||
const nid = newId();
|
||||
const dest = `lib-${nid}.${img.ext}`;
|
||||
try { fs.writeFileSync(path.join(photoDir, dest), img.buf); library[nid] = { name: cleanNameFromFile(f.name), file: dest, birthday: '', folderKey: key }; changed = true; }
|
||||
catch (err) { log(`write ${dest} failed: ${err?.message || err}`); }
|
||||
}
|
||||
for (const [id, v] of Object.entries(library)) {
|
||||
if (v.folderKey && v.folderKey.startsWith('drive:') && !present.has(v.folderKey)) {
|
||||
if (v.file) { try { fs.unlinkSync(path.join(photoDir, v.file)); } catch { /* ignore */ } }
|
||||
delete library[id];
|
||||
for (const [slot, b] of Object.entries(board)) if (b && b.personId === id) delete board[slot];
|
||||
changed = true;
|
||||
}
|
||||
}
|
||||
// Drive photo wins over a same-named hand-upload (repoint any slot to it).
|
||||
const driveByName = new Map();
|
||||
for (const [id, v] of Object.entries(library)) if (v.folderKey && v.folderKey.startsWith('drive:') && v.name) driveByName.set(normName(v.name), id);
|
||||
for (const [id, v] of Object.entries(library)) {
|
||||
if ((v.folderKey && v.folderKey.startsWith('drive:')) || !v.name) continue;
|
||||
const keepId = driveByName.get(normName(v.name));
|
||||
if (!keepId) continue;
|
||||
if (v.file) { try { fs.unlinkSync(path.join(photoDir, v.file)); } catch { /* ignore */ } }
|
||||
for (const [slot, b] of Object.entries(board)) if (b && b.personId === id) b.personId = keepId;
|
||||
delete library[id]; changed = true;
|
||||
}
|
||||
if (changed) { saveLibrary(); saveBoard(); }
|
||||
return changed;
|
||||
}
|
||||
|
||||
// Import the configured photo source — a Drive folder link, or a local folder path.
|
||||
async function syncPhotos() {
|
||||
const fid = parseDriveFolderId(photoFolder);
|
||||
if (fid) return scanDrive(fid);
|
||||
if (photoFolder) return scanFolder();
|
||||
return false;
|
||||
}
|
||||
|
||||
function startWatch() {
|
||||
if (parseDriveFolderId(photoFolder)) return; // Drive folders are polled, not fs.watched
|
||||
if (!photoFolder) return;
|
||||
try {
|
||||
watcher = fs.watch(photoFolder, { persistent: false }, () => {
|
||||
clearTimeout(watchDebounce);
|
||||
watchDebounce = setTimeout(() => { if (!stopped && scanFolder()) rebuildLocal(); }, 800);
|
||||
});
|
||||
log(`watching photo folder ${photoFolder}`);
|
||||
} catch (err) { log(`cannot watch photo folder: ${err?.message || err}`); }
|
||||
}
|
||||
function setChoir(on) { choirOn = Boolean(on); settings.choir = choirOn; saveSettings(); rebuildLocal(); }
|
||||
|
||||
// Remove cached PCO photos no longer referenced. Library files (lib-*) are never pruned here.
|
||||
function prunePcoPhotos(keep) {
|
||||
let files; try { files = fs.readdirSync(photoDir); } catch { return; }
|
||||
for (const f of files) { if (f.startsWith('pco-') && !keep.has(f)) { try { fs.unlinkSync(path.join(photoDir, f)); } catch { /* ignore */ } } }
|
||||
}
|
||||
|
||||
const normName = (s) => String(s || '').trim().toLowerCase().replace(/\s+/g, ' ');
|
||||
|
||||
// Resolve one board slot to a display person (or null). The board is the source of truth —
|
||||
// there is no live PCO overlay, so clearing a slot stays cleared until the next Sync. A PCO
|
||||
// entry prefers a same-named library photo, so uploading a photo updates the board without a re-sync.
|
||||
function resolveSlot(i, weekSet, keep) {
|
||||
const e = board[String(i)];
|
||||
if (!e) return null;
|
||||
let name = '', file = '', birthday = '', manual = true, personId = '';
|
||||
if (e.pco) {
|
||||
// The photo (folder photo, or PCO headshot) was chosen at Sync time — use it as-is.
|
||||
manual = false; personId = e.pco.personId || '';
|
||||
name = String(e.pco.name || '').trim();
|
||||
file = e.pco.file || '';
|
||||
birthday = e.pco.birthday || '';
|
||||
} else if (e.personId) {
|
||||
const lib = library[e.personId];
|
||||
if (!lib) return null; // its library photo was deleted → slot is empty
|
||||
personId = e.personId;
|
||||
name = String(e.name || lib.name || '').trim();
|
||||
file = lib.file || ''; birthday = lib.birthday || '';
|
||||
} else if (e.name) {
|
||||
name = String(e.name).trim();
|
||||
} else return null;
|
||||
if (file) keep.add(file);
|
||||
return { name, photo: photoUrlFor(file), birthday, celebrating: Boolean(birthday) && weekSet.has(birthday), manual, personId };
|
||||
}
|
||||
|
||||
// Repaint the display from the board (no Planning Center calls). Cheap — used after every edit
|
||||
// and on a slow timer so a birthday week rolling over lights up on its own.
|
||||
function renderBoard() {
|
||||
const weekSet = birthdayWeekSet();
|
||||
const keep = new Set();
|
||||
const outSlots = effectiveSlots().map((label, i) => ({ index: i, label, person: resolveSlot(i, weekSet, keep) }));
|
||||
for (const v of Object.values(library)) if (v.file) keep.add(v.file);
|
||||
prunePcoPhotos(keep);
|
||||
latest = {
|
||||
configured: pco.configured, serviceTypeSet: Boolean(serviceTypeId),
|
||||
reachable: latest.reachable, lastError: latest.lastError || '', lastFetched: latest.lastFetched || 0,
|
||||
columns, plan: latest.plan || null, slots: outSlots, library: libraryList(), choir: choirOn,
|
||||
};
|
||||
}
|
||||
|
||||
function rebuildLocal() { renderBoard(); broadcast(); }
|
||||
|
||||
// Pull the current plan from Planning Center and write matched people INTO the board. Fills only
|
||||
// slots nobody placed by hand; drops PCO entries no longer scheduled; leaves manual placements be.
|
||||
async function syncNow() {
|
||||
if (syncing) return;
|
||||
syncing = true;
|
||||
try {
|
||||
await syncPhotos(); // import the photo source (Drive folder or local path) on every sync
|
||||
if (pco.configured && serviceTypeId) {
|
||||
const plan = pickPlan(await listPlans(serviceTypeId));
|
||||
latest.plan = plan ? { title: plan.title, dates: plan.dates } : null;
|
||||
if (!plan) { latest.reachable = true; latest.lastError = 'No plan found for that service type.'; }
|
||||
else {
|
||||
|
||||
const tm = await pco.getAll(`${SERVICES}/service_types/${encodeURIComponent(serviceTypeId)}/plans/${encodeURIComponent(plan.id)}/team_members`, { include: 'person,team' });
|
||||
const byKey = new Map((tm.included || []).map((e) => [`${e.type}:${e.id}`, e]));
|
||||
const members = []; const seen = new Set();
|
||||
for (const m of tm.data || []) {
|
||||
const status = String(m.attributes?.status || '').trim();
|
||||
if (status === 'D' || /^declined$/i.test(status)) continue;
|
||||
const personId = String(m.relationships?.person?.data?.id || '');
|
||||
const team = byKey.get(`Team:${String(m.relationships?.team?.data?.id || '')}`);
|
||||
if (!isAllowedTeamName(String(team?.attributes?.name || ''), teamKeywords)) continue;
|
||||
const person = byKey.get(`Person:${personId}`);
|
||||
members.push({
|
||||
personId,
|
||||
name: String(person?.attributes?.full_name || person?.attributes?.name || m.attributes?.name || 'Unknown').trim() || 'Unknown',
|
||||
label: String(m.attributes?.team_position_name || '').trim(),
|
||||
photoUrl: String(person?.attributes?.photo_url || person?.attributes?.photo_thumbnail_url || '').trim(),
|
||||
});
|
||||
if (personId) seen.add(personId);
|
||||
}
|
||||
const bdays = new Map();
|
||||
for (const id of seen) { try { const b = await pco.get(`${PEOPLE}/people/${encodeURIComponent(id)}`, { 'fields[Person]': 'birthdate' }); bdays.set(id, birthdayMmdd(b?.data?.attributes?.birthdate)); } catch { bdays.set(id, ''); } }
|
||||
for (const m of members) m.birthday = bdays.get(m.personId) || '';
|
||||
|
||||
const libEntries = Object.entries(library).map(([id, v]) => ({ id, name: v.name, file: v.file }));
|
||||
|
||||
// Slots a person is sitting in by hand — don't fill them, and don't place that same person twice.
|
||||
const eff = effectiveSlots();
|
||||
const openIdx = []; const manualNames = new Set();
|
||||
for (let i = 0; i < eff.length; i += 1) {
|
||||
const e = board[String(i)];
|
||||
if (e && (e.personId || e.name)) {
|
||||
const nm = e.personId ? (library[e.personId] && library[e.personId].name) : e.name;
|
||||
if (nm) manualNames.add(normName(nm));
|
||||
} else openIdx.push(i);
|
||||
}
|
||||
const pool = members.filter((m) => !manualNames.has(normName(m.name)));
|
||||
const assigned = assignMembersToSlots(openIdx.map((i) => eff[i]), pool);
|
||||
|
||||
for (let k = 0; k < openIdx.length; k += 1) {
|
||||
const i = openIdx[k]; const m = assigned[k];
|
||||
if (m) {
|
||||
const lib = bestLibraryMatch(m.name, libEntries); // folder photo wins over the PCO headshot
|
||||
const file = lib && lib.file ? lib.file : await cachePcoPhoto(m.personId, m.photoUrl);
|
||||
board[String(i)] = { pco: { name: m.name, file, birthday: m.birthday || '', personId: m.personId } };
|
||||
} else if (board[String(i)] && board[String(i)].pco) {
|
||||
delete board[String(i)]; // was synced, no longer on the plan
|
||||
}
|
||||
}
|
||||
saveBoard();
|
||||
latest.reachable = true; latest.lastError = ''; latest.lastFetched = Date.now();
|
||||
log(`synced ${members.length} scheduled from ${plan.dates || plan.id}`);
|
||||
} // end else (plan found)
|
||||
} // end if (Planning Center configured)
|
||||
} catch (err) {
|
||||
latest.reachable = false; latest.lastError = err?.message || String(err);
|
||||
log(`sync failed: ${err?.message || err}`);
|
||||
} finally {
|
||||
syncing = false;
|
||||
renderBoard(); broadcast();
|
||||
}
|
||||
}
|
||||
|
||||
const heartbeat = setInterval(() => { for (const res of streams) { try { res.write(': ping\n\n'); } catch { streams.delete(res); } } }, HEARTBEAT_MS);
|
||||
heartbeat.unref?.();
|
||||
// Repaint on a slow timer so a birthday week (Wed→Tue) rolling over lights up unattended.
|
||||
celebrateTimer = setInterval(() => { if (!stopped) rebuildLocal(); }, 15 * 60 * 1000);
|
||||
celebrateTimer.unref?.();
|
||||
// A Drive folder can't be fs.watched — re-import it on a slow timer so photos added/removed
|
||||
// in Drive show up without a manual Sync.
|
||||
drivePollTimer = setInterval(() => {
|
||||
if (stopped || !parseDriveFolderId(photoFolder)) return;
|
||||
syncPhotos().then((ch) => { if (ch) rebuildLocal(); }).catch(() => {});
|
||||
}, 5 * 60 * 1000);
|
||||
drivePollTimer.unref?.();
|
||||
|
||||
if (pco.configured && serviceTypeId) log('ready — press Sync to load the plan from Planning Center');
|
||||
else log('manual board (add Planning Center credentials + a service type in /admin to enable Sync)');
|
||||
rebuildLocal(); // paint the saved board immediately
|
||||
startWatch(); // local folders keep in sync via fs.watch (Drive folders are polled)
|
||||
syncPhotos().then((ch) => { if (ch) rebuildLocal(); }).catch((err) => log(`initial photo import failed: ${err?.message || err}`));
|
||||
|
||||
current = {
|
||||
streams, getLatest: () => latest, pco, listPlans, photoDir,
|
||||
library, board, saveLibrary, saveBoard, rebuildLocal, refresh: () => syncNow(), slots,
|
||||
photoUrlFor, libraryList,
|
||||
setChoir, choirOn: () => choirOn,
|
||||
};
|
||||
|
||||
return {
|
||||
stop() {
|
||||
stopped = true; if (celebrateTimer) clearInterval(celebrateTimer); if (drivePollTimer) clearInterval(drivePollTimer); clearInterval(heartbeat);
|
||||
if (watcher) { try { watcher.close(); } catch { /* gone */ } watcher = null; }
|
||||
if (watchDebounce) clearTimeout(watchDebounce);
|
||||
for (const res of streams) { try { res.end(); } catch { /* gone */ } }
|
||||
streams.clear(); if (current && current.streams === streams) current = null;
|
||||
},
|
||||
health() {
|
||||
if (!pco.configured || !serviceTypeId) return { status: 'ok', message: 'Manual board (add Planning Center to enable Sync)' };
|
||||
if (latest.lastError) return { status: 'error', message: latest.lastError };
|
||||
if (latest.reachable) return { status: 'ok', message: latest.plan?.dates ? `Synced: ${latest.plan.dates}` : 'Synced' };
|
||||
return { status: 'ok', message: 'Ready — press Sync to load the plan' };
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
routes({ log }) {
|
||||
// Read an image request body (raw bytes) with a size cap.
|
||||
function readBody(req, cb) {
|
||||
const chunks = []; let size = 0; let bad = false;
|
||||
req.on('data', (c) => { size += c.length; if (size > MAX_UPLOAD) { bad = true; req.destroy(); } else chunks.push(c); });
|
||||
req.on('end', () => cb(bad ? null : Buffer.concat(chunks)));
|
||||
req.on('error', () => cb(null));
|
||||
}
|
||||
|
||||
return {
|
||||
'GET /state': (req, res) => json(res, 200, { state: current ? current.getLatest() : null }),
|
||||
|
||||
'GET /stream': (req, res) => {
|
||||
res.writeHead(200, { 'Content-Type': 'text/event-stream; charset=utf-8', 'Cache-Control': 'no-cache, no-transform', Connection: 'keep-alive', 'X-Accel-Buffering': 'no' });
|
||||
res.write('retry: 3000\n\n');
|
||||
res.write(`event: state\ndata: ${JSON.stringify(current ? current.getLatest() : null)}\n\n`);
|
||||
if (!current) return void res.end();
|
||||
try { req.socket.setKeepAlive(true, 15000); } catch { /* gone */ }
|
||||
current.streams.add(res);
|
||||
req.on('close', () => current && current.streams.delete(res));
|
||||
},
|
||||
|
||||
'GET /library': (req, res) => json(res, 200, { people: current ? current.libraryList() : [] }),
|
||||
|
||||
// Update a library entry: ?name=&birthday= and/or a replacement image body. /library/<id>/delete removes it.
|
||||
'POST /library/*': (req, res) => {
|
||||
if (!current) return json(res, 503, { error: 'Module not running.' });
|
||||
const rest = decodeURIComponent(req.wildcard || '').replace(/^\/+/, '');
|
||||
const del = /\/delete$/.test(rest);
|
||||
const id = rest.replace(/\/delete$/, '').trim();
|
||||
const entry = current.library[id];
|
||||
if (!entry) return json(res, 404, { error: 'No such library photo.' });
|
||||
if (del) {
|
||||
if (entry.file) { try { fs.unlinkSync(path.join(current.photoDir, entry.file)); } catch { /* ignore */ } }
|
||||
delete current.library[id];
|
||||
for (const [slot, v] of Object.entries(current.board)) if (v && v.personId === id) delete current.board[slot];
|
||||
current.saveLibrary(); current.saveBoard(); current.rebuildLocal();
|
||||
return json(res, 200, { ok: true });
|
||||
}
|
||||
const q = new URLSearchParams(req.search || '');
|
||||
readBody(req, (buf) => {
|
||||
if (q.has('name')) entry.name = String(q.get('name') || '').trim();
|
||||
if (q.has('birthday')) entry.birthday = birthdayMmdd(q.get('birthday'));
|
||||
if (buf && buf.length) {
|
||||
if (entry.file) { try { fs.unlinkSync(path.join(current.photoDir, entry.file)); } catch { /* ignore */ } }
|
||||
const file = `lib-${id}.${extFromContentType(req.headers['content-type'])}`;
|
||||
try { fs.writeFileSync(path.join(current.photoDir, file), buf); entry.file = file; } catch (err) { return json(res, 500, { error: `write failed: ${err?.message || err}` }); }
|
||||
}
|
||||
current.saveLibrary(); current.rebuildLocal();
|
||||
json(res, 200, { ok: true });
|
||||
});
|
||||
},
|
||||
|
||||
// Toggle the extra CHOIR slot on/off (?on=1|0, or omit to flip). Shared across all screens.
|
||||
'POST /choir': (req, res) => {
|
||||
if (!current) return json(res, 503, { error: 'Module not running.' });
|
||||
const p = new URLSearchParams(req.search || '');
|
||||
const on = p.has('on') ? (p.get('on') === '1' || p.get('on') === 'true') : !current.choirOn();
|
||||
current.setChoir(on);
|
||||
json(res, 200, { ok: true, choir: on });
|
||||
},
|
||||
|
||||
// Move (or swap) one slot's occupant to another slot: ?from=<i>&to=<j>.
|
||||
'POST /move': (req, res) => {
|
||||
if (!current) return json(res, 503, { error: 'Module not running.' });
|
||||
const p = new URLSearchParams(req.search || '');
|
||||
const from = String(p.get('from') || ''); const to = String(p.get('to') || '');
|
||||
if (!/^\d+$/.test(from) || !/^\d+$/.test(to) || from === to) return json(res, 400, { error: 'Bad move.' });
|
||||
const a = current.board[from]; const b = current.board[to];
|
||||
if (a === undefined) delete current.board[to]; else current.board[to] = a;
|
||||
if (b === undefined) delete current.board[from]; else current.board[from] = b;
|
||||
current.saveBoard(); current.rebuildLocal();
|
||||
json(res, 200, { ok: true });
|
||||
},
|
||||
|
||||
// Place a library person in a slot: ?slot=<index>&personId=<id> (empty personId clears the slot).
|
||||
'POST /assign': (req, res) => {
|
||||
if (!current) return json(res, 503, { error: 'Module not running.' });
|
||||
const q = new URLSearchParams(req.search || '');
|
||||
const slot = String(q.get('slot') || '').trim();
|
||||
const personId = String(q.get('personId') || '').trim();
|
||||
if (!/^\d+$/.test(slot)) return json(res, 400, { error: 'Bad slot.' });
|
||||
if (personId && !current.library[personId]) return json(res, 404, { error: 'No such library photo.' });
|
||||
if (personId) current.board[slot] = { personId, name: '' };
|
||||
else delete current.board[slot];
|
||||
current.saveBoard(); current.rebuildLocal();
|
||||
json(res, 200, { ok: true });
|
||||
},
|
||||
|
||||
// Rename a slot's occupant, or make a name-only spot (no photo). /slot/<index>/clear empties it.
|
||||
'POST /slot/*': (req, res) => {
|
||||
if (!current) return json(res, 503, { error: 'Module not running.' });
|
||||
const rest = decodeURIComponent(req.wildcard || '').replace(/^\/+/, '');
|
||||
const clearing = /\/clear$/.test(rest);
|
||||
const index = rest.replace(/\/(clear|name)$/, '').trim();
|
||||
if (!/^\d+$/.test(index)) return json(res, 400, { error: 'Bad slot.' });
|
||||
if (clearing) { delete current.board[index]; current.saveBoard(); current.rebuildLocal(); return json(res, 200, { ok: true }); }
|
||||
const q = new URLSearchParams(req.search || '');
|
||||
const name = String(q.get('name') || '').trim();
|
||||
const existing = current.board[index] || { personId: '', name: '' };
|
||||
existing.name = name;
|
||||
if (!existing.personId && !name) delete current.board[index];
|
||||
else current.board[index] = existing;
|
||||
current.saveBoard(); current.rebuildLocal();
|
||||
json(res, 200, { ok: true });
|
||||
},
|
||||
|
||||
// Force an immediate Planning Center refresh (the "Sync" button). Auto-fill also
|
||||
// runs on its own timer; this just does it now.
|
||||
'POST /sync': (req, res) => {
|
||||
if (!current) return json(res, 503, { error: 'Module not running.' });
|
||||
current.refresh(); // scans the photos folder + pulls the plan if Planning Center is configured
|
||||
json(res, 200, { ok: true });
|
||||
},
|
||||
|
||||
'GET /people': (req, res) => {
|
||||
const state = current ? current.getLatest() : null;
|
||||
const options = [{ value: '', label: 'Off' }];
|
||||
for (const slot of state?.slots || []) if (slot.person && slot.person.name) options.push({ value: String(slot.index), label: slot.person.name });
|
||||
json(res, 200, { options });
|
||||
},
|
||||
|
||||
'GET /photo/*': (req, res) => {
|
||||
if (!current) return void res.writeHead(404).end();
|
||||
const name = path.basename(decodeURIComponent(req.wildcard || '').replace(/^\/+/, ''));
|
||||
if (!name || name.includes('..')) return void res.writeHead(400).end();
|
||||
fs.readFile(path.join(current.photoDir, name), (err, buf) => {
|
||||
if (err) return void res.writeHead(404).end();
|
||||
res.writeHead(200, { 'Content-Type': contentTypeForFile(name), 'Cache-Control': 'public, max-age=60' });
|
||||
res.end(buf);
|
||||
});
|
||||
},
|
||||
|
||||
'GET /service-types': async (req, res) => {
|
||||
if (!current) return json(res, 503, { options: [], error: 'Module not running.' });
|
||||
if (!current.pco.configured) return json(res, 200, { options: [], error: 'No Planning Center credentials yet.' });
|
||||
try {
|
||||
const [folderBody, stBody] = await Promise.all([current.pco.getAll(`${SERVICES}/folders`), current.pco.getAll(`${SERVICES}/service_types`)]);
|
||||
const folders = new Map();
|
||||
for (const f of folderBody.data || []) folders.set(String(f.id), { name: String(f.attributes?.name || 'Folder'), parentId: f.relationships?.parent?.data?.id ? String(f.relationships.parent.data.id) : '' });
|
||||
const pathOf = (parentId) => { const names = []; let id = parentId; const seen = new Set(); while (id && folders.has(id) && !seen.has(id)) { seen.add(id); names.unshift(folders.get(id).name); id = folders.get(id).parentId; } return names.join(' › '); };
|
||||
const options = (stBody.data || []).map((st) => ({ value: String(st.id), label: String(st.attributes?.name || 'Service type'), group: pathOf(st.relationships?.parent?.data?.id ? String(st.relationships.parent.data.id) : '') })).sort((a, b) => a.group.localeCompare(b.group) || a.label.localeCompare(b.label));
|
||||
json(res, 200, { options });
|
||||
} catch (err) { log(`service type list failed: ${err?.message || err}`); json(res, err?.status === 401 ? 401 : 502, { options: [], error: err?.message || String(err) }); }
|
||||
},
|
||||
|
||||
'GET /plans': async (req, res) => {
|
||||
if (!current) return json(res, 503, { options: [] });
|
||||
const params = new URLSearchParams(req.search || '');
|
||||
const stId = String(params.get('serviceTypeId') || '').trim();
|
||||
const auto = { value: '', label: 'Automatic — today\'s plan, else the next upcoming' };
|
||||
if (!current.pco.configured || !stId) return json(res, 200, { options: [auto] });
|
||||
try {
|
||||
const plans = await current.listPlans(stId); const now = Date.now();
|
||||
const ordered = [...plans.filter((p) => p.sortDate >= now - 12 * 3600000).sort((a, b) => a.sortDate - b.sortDate), ...plans.filter((p) => p.sortDate < now - 12 * 3600000).sort((a, b) => b.sortDate - a.sortDate)];
|
||||
json(res, 200, { options: [auto, ...ordered.map((p) => ({ value: p.id, label: [p.dates, p.title].filter(Boolean).join(' — ') || p.id }))] });
|
||||
} catch (err) { json(res, 502, { options: [auto], error: err?.message || String(err) }); }
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,232 @@
|
||||
/* Band Lineup — scoped to the tile, themed only through the shell's variables. */
|
||||
|
||||
[data-module="band-lineup"] .bl-board {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--bl-cols, 7), minmax(0, 1fr));
|
||||
grid-template-rows: repeat(var(--bl-rows, 2), minmax(0, 1fr));
|
||||
gap: 6px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
[data-module="band-lineup"] .bl-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
padding: 16px;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
[data-module="band-lineup"] .bl-slot {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
[data-module="band-lineup"] .bl-tile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
[data-module="band-lineup"] .bl-photo {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
background: color-mix(in srgb, var(--bg) 70%, black);
|
||||
}
|
||||
|
||||
[data-module="band-lineup"] .bl-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center top;
|
||||
display: block;
|
||||
transition: transform 0.12s ease-out;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
[data-module="band-lineup"] .bl-initials {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2.4em;
|
||||
font-weight: 800;
|
||||
color: color-mix(in srgb, var(--muted) 70%, transparent);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
[data-module="band-lineup"] .bl-name {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
right: 6px;
|
||||
max-width: calc(100% - 12px);
|
||||
padding: 3px 7px;
|
||||
border-radius: 6px;
|
||||
background: color-mix(in srgb, var(--bg) 82%, transparent);
|
||||
color: var(--text);
|
||||
font-size: 0.74em;
|
||||
font-weight: 700;
|
||||
line-height: 1.12;
|
||||
z-index: 5;
|
||||
/* Show the whole name — wrap onto more lines rather than clipping with an ellipsis. */
|
||||
white-space: normal;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
[data-module="band-lineup"] .bl-label {
|
||||
padding: 5px 6px;
|
||||
font-size: 0.72em;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
color: var(--text);
|
||||
background: color-mix(in srgb, var(--bg) 60%, transparent);
|
||||
border-top: 1px solid var(--border);
|
||||
min-height: 1.6em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
[data-module="band-lineup"] .bl-empty {
|
||||
border-style: dashed;
|
||||
opacity: 0.55;
|
||||
}
|
||||
[data-module="band-lineup"] .bl-empty .bl-label {
|
||||
background: transparent;
|
||||
border-top: none;
|
||||
margin: auto;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* ---- Birthday effects (confetti canvas + gold glow ring) ---- */
|
||||
[data-module="band-lineup"] .bl-confetti {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 3;
|
||||
pointer-events: none;
|
||||
}
|
||||
[data-module="band-lineup"] .bl-birthday-subtle {
|
||||
animation: bl-glow-subtle 3.4s ease-in-out infinite;
|
||||
}
|
||||
[data-module="band-lineup"] .bl-birthday-full {
|
||||
animation: bl-glow-full 2.2s ease-in-out infinite;
|
||||
}
|
||||
@keyframes bl-glow-subtle {
|
||||
0%, 100% { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 20%, transparent); }
|
||||
50% { box-shadow: inset 0 0 0 2px var(--accent), 0 0 20px color-mix(in srgb, var(--accent) 34%, transparent); }
|
||||
}
|
||||
@keyframes bl-glow-full {
|
||||
0%, 100% { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--accent) 80%, transparent), 0 0 20px color-mix(in srgb, var(--accent) 42%, transparent); }
|
||||
50% { box-shadow: inset 0 0 0 3px var(--accent), 0 0 34px color-mix(in srgb, var(--accent) 66%, transparent); }
|
||||
}
|
||||
|
||||
/* ---- Editor (Edit button): board drop-targets + uploaded-photo library ---- */
|
||||
[data-module="band-lineup"] .bl-btn {
|
||||
border: 1px solid var(--border);
|
||||
background: var(--panel);
|
||||
color: var(--text);
|
||||
border-radius: 6px;
|
||||
padding: 5px 11px;
|
||||
font: inherit;
|
||||
font-size: 0.82em;
|
||||
cursor: pointer;
|
||||
}
|
||||
[data-module="band-lineup"] .bl-btn.primary { background: var(--accent); color: var(--accent-text); border-color: transparent; }
|
||||
[data-module="band-lineup"] .bl-btn:hover { border-color: var(--accent); }
|
||||
|
||||
[data-module="band-lineup"] .bl-editor {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg);
|
||||
}
|
||||
[data-module="band-lineup"] .bl-editor-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 10px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
[data-module="band-lineup"] .bl-editor-bar b { color: var(--text); }
|
||||
[data-module="band-lineup"] .bl-editor-spacer { flex: 1; }
|
||||
[data-module="band-lineup"] .bl-folder { display: flex; align-items: center; gap: 6px; min-width: 0; }
|
||||
[data-module="band-lineup"] .bl-folder-path { font-size: 0.72em; color: var(--muted); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
[data-module="band-lineup"] .bl-editor-body { flex: 1; min-height: 0; overflow: auto; padding: 10px; }
|
||||
|
||||
[data-module="band-lineup"] .bl-edit-board {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--bl-cols, 7), minmax(0, 1fr));
|
||||
gap: 6px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
[data-module="band-lineup"] .bl-edit-slot {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: var(--panel);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
[data-module="band-lineup"] .bl-edit-slot.bl-drop-over { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
|
||||
[data-module="band-lineup"] .bl-edit-photo { position: relative; aspect-ratio: 3 / 4; background: color-mix(in srgb, var(--bg) 70%, black); overflow: hidden; }
|
||||
[data-module="band-lineup"] .bl-edit-photo .bl-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
|
||||
[data-module="band-lineup"] .bl-edit-drop {
|
||||
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
|
||||
color: var(--muted); font-size: 1.6em; border: 1px dashed var(--border);
|
||||
}
|
||||
[data-module="band-lineup"] .bl-edit-namerow { display: flex; align-items: center; gap: 2px; padding: 2px; }
|
||||
[data-module="band-lineup"] .bl-edit-name {
|
||||
flex: 1; min-width: 0; text-align: left; background: transparent; border: 0;
|
||||
color: var(--text); font: inherit; font-size: 0.72em; font-weight: 600; padding: 3px 4px;
|
||||
cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 4px;
|
||||
}
|
||||
[data-module="band-lineup"] .bl-edit-name:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
|
||||
[data-module="band-lineup"] .bl-edit-clear {
|
||||
flex: 0 0 auto; width: 20px; height: 20px; border: 0; border-radius: 4px;
|
||||
background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); cursor: pointer; font-size: 0.9em; line-height: 1;
|
||||
}
|
||||
[data-module="band-lineup"] .bl-edit-label { padding: 3px 5px 5px; font-size: 0.64em; color: var(--muted); text-align: center; border-top: 1px solid var(--border); word-break: break-word; }
|
||||
|
||||
[data-module="band-lineup"] .bl-library {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
|
||||
gap: 6px;
|
||||
border-top: 1px solid var(--border);
|
||||
padding-top: 10px;
|
||||
}
|
||||
[data-module="band-lineup"] .bl-lib-empty { grid-column: 1 / -1; color: var(--muted); font-size: 0.85em; padding: 10px 2px; }
|
||||
[data-module="band-lineup"] .bl-lib-item {
|
||||
position: relative; border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
|
||||
background: var(--panel); cursor: grab; display: flex; flex-direction: column;
|
||||
}
|
||||
[data-module="band-lineup"] .bl-lib-item:active { cursor: grabbing; }
|
||||
[data-module="band-lineup"] .bl-lib-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
|
||||
[data-module="band-lineup"] .bl-lib-photo { position: relative; aspect-ratio: 3 / 4; background: color-mix(in srgb, var(--bg) 70%, black); overflow: hidden; }
|
||||
[data-module="band-lineup"] .bl-lib-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; pointer-events: none; }
|
||||
[data-module="band-lineup"] .bl-lib-name {
|
||||
border: 0; background: transparent; color: var(--text); font: inherit; font-size: 0.68em; font-weight: 600;
|
||||
padding: 3px 4px; text-align: center; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
[data-module="band-lineup"] .bl-lib-del {
|
||||
position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border: 0; border-radius: 4px;
|
||||
background: color-mix(in srgb, var(--bg) 60%, transparent); color: var(--text); cursor: pointer; font-size: 0.85em; line-height: 1;
|
||||
}
|
||||
[data-module="band-lineup"] .bl-lib-del:hover { background: var(--danger); color: #fff; }
|
||||
@@ -0,0 +1,49 @@
|
||||
// Minimal Planning Center mock for the Band Lineup module: service types, one
|
||||
// plan today, its team_members (with person+team includes), People birthdates,
|
||||
// and avatar bytes. Enough to exercise the whole board build.
|
||||
const http = require('http');
|
||||
const PORT = Number(process.argv[2] || 24710);
|
||||
const JPEG = Buffer.from('/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAP//////////////////////////////////////////////////////////////////////////////////////wAALCAABAAEBAREA/8QAFAABAAAAAAAAAAAAAAAAAAAAAP/EABQQAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQEAAD8AfwD/2Q==', 'base64');
|
||||
const TODAY = new Date();
|
||||
const iso = (d) => d.toISOString();
|
||||
// One person's birthday lands in this Wed–Tue week (today is a Wed in the test).
|
||||
const inWeek = new Date(TODAY.getFullYear(), TODAY.getMonth(), TODAY.getDate() + 2);
|
||||
const bdayInWeek = `1994-${String(inWeek.getMonth()+1).padStart(2,'0')}-${String(inWeek.getDate()).padStart(2,'0')}`;
|
||||
|
||||
const PEOPLE = {
|
||||
p1: { name: 'Lemuel Maldonado', pos: 'Vox 1', team: 'Vocals', bd: '1990-03-04' },
|
||||
p2: { name: 'Wes Carter', pos: 'Vox 2', team: 'Vocals', bd: null },
|
||||
p3: { name: 'Jessica Proulx', pos: 'Vox 3', team: 'Vocals', bd: '1992-11-01' },
|
||||
p4: { name: 'Jeremy Cruz', pos: 'Guitar / Lead', team: 'Band', bd: null },
|
||||
p5: { name: 'Alex Gaitan', pos: 'Drums', team: 'Band', bd: bdayInWeek }, // celebrating
|
||||
p6: { name: 'Rosaliz Gomez', pos: 'Piano', team: 'Band', bd: null },
|
||||
p7: { name: 'George Acosta', pos: 'MC', team: 'Production', bd: null },
|
||||
p8: { name: 'Not Shown', pos: 'Camera 2', team: 'Video', bd: null }, // team not allowed → filtered out
|
||||
};
|
||||
const TEAMS = { Vocals: 't1', Band: 't2', Production: 't3', Video: 't4' };
|
||||
|
||||
function send(res, obj) { res.writeHead(200, { 'Content-Type': 'application/json' }); res.end(JSON.stringify(obj)); }
|
||||
|
||||
const server = http.createServer((req, res) => {
|
||||
const u = new URL(req.url, 'http://x'); const p = u.pathname;
|
||||
if (p.startsWith('/avatar/')) { res.writeHead(200, { 'Content-Type': 'image/jpeg' }); return res.end(JPEG); }
|
||||
if (p === '/services/v2/folders') return send(res, { data: [] });
|
||||
if (p === '/services/v2/service_types') return send(res, { data: [{ id: '1', type: 'ServiceType', attributes: { name: 'Sunday Service' }, relationships: { parent: { data: null } } }] });
|
||||
if (/^\/services\/v2\/service_types\/1\/plans$/.test(p)) {
|
||||
if (u.searchParams.get('filter') === 'past') return send(res, { data: [] });
|
||||
return send(res, { data: [{ id: '100', type: 'Plan', attributes: { sort_date: iso(TODAY), title: 'Taking Thoughts Captive - Part 4', dates: 'September 20, 2026' } }] });
|
||||
}
|
||||
if (/^\/services\/v2\/service_types\/1\/plans\/100\/team_members$/.test(p)) {
|
||||
const data = []; const included = [];
|
||||
for (const [id, v] of Object.entries(PEOPLE)) {
|
||||
data.push({ id: `tm-${id}`, type: 'PlanPerson', attributes: { status: 'C', team_position_name: v.pos }, relationships: { person: { data: { type: 'Person', id } }, team: { data: { type: 'Team', id: TEAMS[v.team] } } } });
|
||||
included.push({ id, type: 'Person', attributes: { full_name: v.name, photo_url: `http://127.0.0.1:${PORT}/avatar/${id}` } });
|
||||
}
|
||||
for (const [name, id] of Object.entries(TEAMS)) included.push({ id, type: 'Team', attributes: { name } });
|
||||
return send(res, { data, included, links: {} });
|
||||
}
|
||||
const person = p.match(/^\/people\/v2\/people\/([^/]+)$/);
|
||||
if (person) { const v = PEOPLE[person[1]]; return send(res, { data: { id: person[1], type: 'Person', attributes: { birthdate: v ? v.bd : null } } }); }
|
||||
res.writeHead(404); res.end('{}');
|
||||
});
|
||||
server.listen(PORT, '127.0.0.1', () => console.log(`[pco-band-mock] on http://127.0.0.1:${PORT}`));
|
||||
Reference in New Issue
Block a user