Select a show to edit its polls.
+Select a show to edit its polls.
'; + loadShowList(); + }); + + // Per-poll save, delete, reorder + document.querySelectorAll('.poll-card').forEach((card, idx) => { + const pollId = Number((card as HTMLElement).dataset.pollId); + bindPollTypeSwitch(card); + + card.querySelector('.btn-save-poll')?.addEventListener('click', async () => { + const question = (card.querySelector('.poll-question-input') as HTMLInputElement).value.trim(); + const parsed = readPollEditor(card); + if (!question || !parsed) return; + await api('PUT', `/api/shows/${showId}/polls/${pollId}`, { + question, type: parsed.type, options: parsed.options, + }); + await renderPollEditor(showId); + }); + + card.querySelector('.btn-delete-poll')?.addEventListener('click', async () => { + await api('DELETE', `/api/shows/${showId}/polls/${pollId}`); + await renderPollEditor(showId); + }); + + card.querySelector('.btn-move-up')?.addEventListener('click', async () => { + if (idx === 0) return; + const order = polls.map((p: any) => p.id); + [order[idx - 1], order[idx]] = [order[idx], order[idx - 1]]; + await api('PUT', `/api/shows/${showId}/polls/reorder`, { order }); + await renderPollEditor(showId); + }); + + card.querySelector('.btn-move-down')?.addEventListener('click', async () => { + if (idx === polls.length - 1) return; + const order = polls.map((p: any) => p.id); + [order[idx], order[idx + 1]] = [order[idx + 1], order[idx]]; + await api('PUT', `/api/shows/${showId}/polls/reorder`, { order }); + await renderPollEditor(showId); + }); + }); + + // Add poll + const addCard = document.querySelector('.add-poll-card'); + if (addCard) bindPollTypeSwitch(addCard); + $('#btn-add-poll')?.addEventListener('click', async () => { + const question = ($('#new-poll-question') as HTMLInputElement).value.trim(); + if (!addCard) return; + const parsed = readPollEditor(addCard); + if (!question || !parsed) return; + await api('POST', `/api/shows/${showId}/polls`, { + question, type: parsed.type, options: parsed.options, + }); + await renderPollEditor(showId); + loadShowList(); + }); +} + +function esc(s: string): string { + const d = document.createElement('div'); + d.textContent = s; + return d.innerHTML; +} + +async function initManage() { + await loadShowList(); + + $('#btn-add-show').addEventListener('click', async () => { + const input = $('#new-show-name') as HTMLInputElement; + const name = input.value.trim(); + if (!name) return; + await api('POST', '/api/shows', { name }); + input.value = ''; + await loadShowList(); + }); + + // Allow Enter to submit + $('#new-show-name').addEventListener('keydown', (e) => { + if ((e as KeyboardEvent).key === 'Enter') { + e.preventDefault(); + ($('#btn-add-show') as HTMLButtonElement).click(); + } + }); +} + +// ── Show Runner ── + +async function populateShowSelect() { + const shows = await api('GET', '/api/shows'); + const select = $('#show-select') as HTMLSelectElement; + select.innerHTML = ''; + for (const show of shows) { + const opt = document.createElement('option'); + opt.value = String(show.id); + opt.textContent = `${show.name} (${show.poll_count} polls)`; + select.appendChild(opt); + } +} + +function updateShowControls() { + const totalPolls = showPolls.length; + + $('#poll-progress').textContent = (state === 'setup' || state === 'manage') + ? '' + : `Poll ${currentPollIndex + 1} of ${totalPolls}`; + + $('#btn-start').classList.toggle('hidden', state !== 'ready'); + $('#btn-close').classList.toggle('hidden', state !== 'poll-open'); + $('#btn-clear-poll').classList.toggle('hidden', state !== 'poll-closed'); + $('#btn-next').classList.toggle('hidden', state !== 'show-qr'); + $('#btn-clear-suggestions').classList.toggle( + 'hidden', + !(currentPollType === 'suggest' && (state === 'poll-open' || state === 'poll-closed')), + ); + + if (state === 'show-qr' && currentPollIndex >= totalPolls - 1) { + $('#btn-next').textContent = 'Finish'; + } else { + $('#btn-next').textContent = 'Next Poll'; + } +} + +function populateJumpSelect() { + const select = $('#jump-select') as HTMLSelectElement; + select.innerHTML = ''; + + const startOpt = document.createElement('option'); + startOpt.value = 'start'; + startOpt.textContent = 'Start (QR / waiting)'; + select.appendChild(startOpt); + + for (let i = 0; i < showPolls.length; i++) { + const opt = document.createElement('option'); + opt.value = String(i); + opt.textContent = `${i + 1}. ${showPolls[i].question}`; + select.appendChild(opt); + } +} + +function handleMessage(msg: Ably.Message) { + if (msg.name === 'poll') { + const data = msg.data as PollMessage; + const summary = msg.annotations?.summary?.[VOTE_ANNOTATION_TYPE] as Ably.SummaryUniqueValues | undefined; + + if (msg.serial !== currentPollSerial) { + currentPollSerial = msg.serial!; + currentPollId = data.pollId; + currentPollOptions = data.options; + currentPollType = data.type ?? 'list'; + + const idx = showPolls.findIndex((p) => p.id === data.pollId); + if (idx !== -1) currentPollIndex = idx; + + currentSummary = summary ?? null; + + $('#admin-question').textContent = data.question; + + unsubscribeAdminSuggestions(); + if (currentPollType === 'suggest') { + renderAdminSuggestList([]); + subscribeAdminSuggestions(); + } else { + renderChart($('#chart'), currentPollOptions, currentSummary, 'both'); + } + updateTotalVotes(); + updateShowControls(); + } else if (summary && currentPollType !== 'suggest') { + currentSummary = summary; + renderChart($('#chart'), currentPollOptions, currentSummary, 'both'); + updateTotalVotes(); + } + } else if (msg.name === 'control') { + const data = msg.data as ControlMessage; + if (data.action === 'clear-suggestions') { + renderAdminSuggestList([]); + return; + } + if (data.pollId === currentPollId) { + if (data.action === 'close') setState('poll-closed'); + else if (data.action === 'show-qr') setState('show-qr'); + } + } +} + +let adminSuggestList: { text: string; from: string }[] = []; + +function renderAdminSuggestList(items: { text: string; from: string }[]) { + adminSuggestList = items; + const chart = $('#chart'); + chart.innerHTML = ''; + const ul = document.createElement('ul'); + ul.className = 'admin-suggest-list'; + for (const item of items) { + const li = document.createElement('li'); + const t = document.createElement('span'); + t.className = 'admin-suggest-text'; + t.textContent = item.text; + const f = document.createElement('span'); + f.className = 'admin-suggest-from'; + f.textContent = item.from; + li.appendChild(t); + li.appendChild(f); + ul.appendChild(li); + } + chart.appendChild(ul); +} + +function subscribeAdminSuggestions() { + if (!channel || suggestListener) return; + const handler = (annotation: Ably.Annotation) => { + if (annotation.action === 'annotation.delete') return; + const text = annotation.name; + const cid = annotation.clientId; + if (!text || !cid) return; + renderAdminSuggestList([{ text, from: displayName(cid) }, ...adminSuggestList]); + }; + suggestListener = handler; + channel.annotations.subscribe(SUGGESTION_ANNOTATION_TYPE, handler); +} + +function unsubscribeAdminSuggestions() { + if (channel && suggestListener) { + channel.annotations.unsubscribe(SUGGESTION_ANNOTATION_TYPE, suggestListener); + } + suggestListener = null; + adminSuggestList = []; +} + +async function startPoll() { + if (!channel) return; + const poll = showPolls[currentPollIndex]; + currentPollOptions = poll.options; + currentPollId = poll.id; + currentSummary = null; + + try { + // Starting a poll is just publishing a message. Voters and the presenter + // attach their annotations to *this* message's serial. + await channel.publish('poll', { + pollId: poll.id, + question: poll.question, + type: poll.type, + options: poll.options, + } satisfies PollMessage); + } catch (err: any) { + showError(`Failed to start poll: ${err.message || err}`); + return; + } + + $('#admin-question').textContent = poll.question; + if (poll.type === 'suggest') { + renderAdminSuggestList([]); + } else { + renderChart($('#chart'), currentPollOptions, null, 'both'); + } + updateTotalVotes(); + setState('poll-open'); +} + +async function closeVoting() { + const pollId = currentPollId; + if (!channel || pollId == null) return; + try { + await channel.publish('control', { + action: 'close', + pollId, + } satisfies ControlMessage); + setState('poll-closed'); + } catch (err: any) { + showError(`Failed to close voting: ${err.message || err}`); + } +} + +async function clearPoll() { + const pollId = currentPollId; + if (!channel || pollId == null) return; + const voterUrl = buildSessionUrl(`${window.location.origin}/`); + try { + await channel.publish('control', { + action: 'show-qr', + pollId, + voterUrl, + } satisfies ControlMessage); + setState('show-qr'); + } catch (err: any) { + showError(`Failed to clear poll: ${err.message || err}`); + } +} + +function nextPoll() { + currentPollIndex++; + if (currentPollIndex < showPolls.length) { + startPoll(); + } else { + currentPollIndex = 0; + setState('ready'); + $('#admin-question').textContent = 'All polls complete!'; + $('#chart').innerHTML = ''; + $('#vote-count').textContent = ''; + } +} + +async function jumpToSection() { + const value = ($('#jump-select') as HTMLSelectElement).value; + if (value === 'start') { + if (!channel) return; + const voterUrl = buildSessionUrl(`${window.location.origin}/`); + try { + await channel.publish('control', { + action: 'reset', + voterUrl, + } satisfies ControlMessage); + } catch (err: any) { + showError(`Failed to jump to start: ${err.message || err}`); + return; + } + currentPollIndex = 0; + currentPollId = null; + currentPollSerial = null; + currentPollOptions = []; + currentSummary = null; + $('#admin-question').textContent = 'Ready to start'; + $('#chart').innerHTML = ''; + $('#vote-count').textContent = ''; + setState('ready'); + return; + } + currentPollIndex = parseInt(value, 10); + startPoll(); +} + +function updateTotalVotes() { + const total = currentPollOptions.reduce( + (sum, opt) => sum + (currentSummary?.[opt.id]?.total ?? 0), + 0, + ); + $('#vote-count').textContent = `${total} vote${total !== 1 ? 's' : ''}`; +} + +async function connectToShow( + showId: number, + opts?: { sessionId?: string; initialState?: AdminState; pollIndex?: number }, +) { + const data = await api('GET', `/api/shows/${showId}/polls`); + showPolls = data.polls; + showName = data.show.name; + runningShowId = showId; + + if (showPolls.length === 0) { + showError('This show has no polls. Add some in the Manage Polls tab.'); + return; + } + + sessionId = opts?.sessionId ?? generateSessionId(); + + if (opts?.pollIndex !== undefined) { + currentPollIndex = opts.pollIndex; + } + + $('#session-display').textContent = sessionId; + $('#show-display').textContent = showName; + const presenterUrl = `${window.location.origin}/?role=presenter&${SESSION_KEY}=${sessionId}`; + const presenterLink = $('#presenter-link') as HTMLAnchorElement; + presenterLink.href = presenterUrl; + // Open in a dedicated popup window (not just a tab) so the presenter view + // is visually separable for screen-sharing. Modifier-clicks fall through to + // the browser's normal new-tab behavior. The named target reuses the same + // window across repeat clicks rather than spawning more. + presenterLink.onclick = (e) => { + if (e.ctrlKey || e.metaKey || e.shiftKey || e.button !== 0) return; + e.preventDefault(); + window.open(presenterUrl, 'ably-voting-presenter', 'popup,width=1280,height=800'); + }; + + populateJumpSelect(); + + const password = getAdminPassword(); + + const clientId = `admin-${sessionId}`; + ablyClient = createAblyClient(clientId, sessionId, 'admin', { password }); + channel = getChannel(ablyClient, sessionId, 'admin'); + channel.subscribe(handleMessage); + + setState(opts?.initialState ?? 'ready'); +} + +function initShowRunner() { + const form = $('#setup-form') as HTMLFormElement; + form.addEventListener('submit', async (e) => { + e.preventDefault(); + const showId = parseInt(($('#show-select') as HTMLSelectElement).value, 10); + await connectToShow(showId); + }); + + $('#btn-start').addEventListener('click', startPoll); + $('#btn-close').addEventListener('click', closeVoting); + $('#btn-clear-poll').addEventListener('click', clearPoll); + $('#btn-next').addEventListener('click', nextPoll); + $('#btn-jump').addEventListener('click', jumpToSection); + $('#btn-end-show').addEventListener('click', endShow); + $('#btn-clear-suggestions').addEventListener('click', clearSuggestions); +} + +async function clearSuggestions() { + if (!channel) return; + try { + await channel.publish('control', { + action: 'clear-suggestions', + pollId: currentPollId!, + } satisfies ControlMessage); + renderAdminSuggestList([]); + } catch (err: any) { + showError(`Failed to clear: ${err.message || err}`); + } +} + +async function endShow() { + if (!confirm('End the show? Voters and the presenter will see a closing screen.')) return; + + if (channel) { + try { + await channel.publish('control', { action: 'end' } satisfies ControlMessage); + } catch (err: any) { + showError(`Failed to end show: ${err.message || err}`); + return; + } + } + + unsubscribeAdminSuggestions(); + if (ablyClient) { + try { ablyClient.close(); } catch {} + } + ablyClient = null; + channel = null; + + runningShowId = null; + showPolls = []; + showName = ''; + currentPollIndex = 0; + currentPollSerial = null; + currentPollId = null; + currentPollType = 'list'; + currentPollOptions = []; + currentSummary = null; + + await populateShowSelect(); + setState('setup'); +} + +// ── Init ── + +function readonlyBanner(): string { + return readOnly + ? 'Read-only demo — these polls come from a static data file and can’t be edited here. Switch to “Run Show” to run them.
' + : ''; +} + +async function init() { + try { + const cfg = await api('GET', '/api/config'); + readOnly = cfg.readOnly === true; + } catch { + // Non-fatal: assume writable and let individual writes surface errors. + } + + if (readOnly) { + document.body.dataset.readonly = 'true'; + $('#manage-main').innerHTML = `${readonlyBanner()}Select a show to view its polls.
`; + } + initTabs(); + initManage(); + initShowRunner(); + + const saved = loadSavedShowState(); + if (saved) { + activateShowTab(); + try { + await connectToShow(saved.showId, { + sessionId: saved.sessionId, + initialState: saved.state, + pollIndex: saved.currentPollIndex, + }); + } catch (err: any) { + showError(`Failed to resume show: ${err.message || err}`); + clearSavedShowState(); + } + } +} + +function activateShowTab() { + const tabManage = $('#tab-manage'); + const tabShow = $('#tab-show'); + tabShow.classList.add('active'); + tabShow.setAttribute('aria-selected', 'true'); + tabManage.classList.remove('active'); + tabManage.setAttribute('aria-selected', 'false'); +} + +export function mount() { + document.body.dataset.view = 'admin'; + document.body.dataset.state = 'manage'; + + // The admin console needs the backend (shows API + token auth), which the + // in-browser sandbox doesn't have. Clone the repo and run the server to use + // it; the live docs demo only exercises the voter and presenter. + if (IS_SANDBOX) { + document.body.innerHTML = ` +The operator console drives the show and talks to the shows API and token-auth + endpoint, so it isn't part of the in-browser demo. Clone the repo and run the server + (see the README) to use it.
+Please double-check the URL.
+Thanks for taking part.
+Scan the QR code, or enter the full URL, to join in.
+That session ID doesn't look right — please double-check the URL or rescan the QR code.
+Session:
+ +Waiting for the next poll...
+Thanks for taking part.
+