`).join('') + photoRow;
}
/* ------------------------------------------------------------ submits */
async function submitSignIn() {
// Called from the review screen, the camera screen, or straight from the host
// list when a recurring visitor already has a photo on file.
const button =
(current === 'photo' && $('#cam-use')) ||
(current === 'review' && $('#do-signin')) ||
null;
if (button) button.disabled = true;
try {
const result = await api('/api/signin', {
mode: state.mode,
frequentVisitorId: state.frequentVisitorId,
firstName: state.firstName,
lastName: state.lastName,
hostId: state.hostId,
phone: state.phone,
email: state.email,
checkType: state.checkType,
checkNumber: state.checkNumber,
photo: state.photo,
});
stopCamera();
$('#done-in-message').textContent = `You're all set, ${result.firstName}.`;
$('#done-in-detail').textContent = result.badgeUrl
? `${result.hostName} has been recorded as your host. Your badge is printing — please wear it, and sign out when you leave.`
: `${result.hostName} has been recorded as your host. Please sign out when you leave.`;
lastBadgeUrl = result.badgeUrl;
$('#reprint-badge').hidden = !result.badgeUrl;
if (result.badgeUrl) printBadge(result.badgeUrl);
show('done-in', { push: false });
setTimeout(() => {
if (current === 'done-in') show('home', { push: false });
}, 12000);
} catch (err) {
say(err.message);
} finally {
if (button) button.disabled = false;
}
}
/* --------------------------------------------------------------- badge */
/**
* The badge page prints itself once loaded, so dropping it into a hidden iframe
* gives one label without the visitor seeing a print dialog on most kiosks.
*/
function printBadge(url) {
const frame = $('#badge-frame');
frame.src = `${url}?t=${Date.now()}`;
}
$('#reprint-badge').addEventListener('click', () => {
if (lastBadgeUrl) printBadge(lastBadgeUrl);
});
/* ---------------------------------------------------------- site picker */
async function chooseSite() {
const sites = await api('/api/sites');
const list = $('#site-list');
if (!sites.length) {
list.innerHTML = `
No sites are set up yet. An admin needs to add one first.
`;
} else {
list.innerHTML = sites
.map(
(s) =>
``
)
.join('');
list.querySelectorAll('[data-site]').forEach((btn) => {
btn.addEventListener('click', async () => {
rememberSite(btn.dataset.site);
await loadSiteContext();
show('home', { push: false });
});
});
}
show('site', { push: false });
}
/**
* Applies the site's colours as CSS variables. Only three are chosen by an admin;
* the shades and the text colours that sit on them are derived server-side so a
* dark logo colour cannot end up with dark text on it.
*/
function applyTheme(theme, banner) {
if (theme) {
const root = document.documentElement.style;
root.setProperty('--deep', theme.brand);
root.setProperty('--deep-dark', theme.brandDark);
root.setProperty('--on-brand', theme.onBrand);
root.setProperty('--exit', theme.signout);
root.setProperty('--exit-dark', theme.signoutDark);
root.setProperty('--on-exit', theme.onSignout);
root.setProperty('--paper', theme.page);
root.setProperty('--card', theme.card);
root.setProperty('--ink', theme.ink);
root.setProperty('--rule', theme.rule);
root.setProperty('--focus', theme.brand);
document.querySelector('meta[name="theme-color"]')?.setAttribute('content', theme.brand);
}
const img = $('#banner');
if (banner?.url) {
img.src = banner.url;
img.style.maxHeight = `${banner.height}px`;
img.hidden = false;
// The banner carries the branding, so the name beside it would just repeat it.
$('#siteName').hidden = true;
} else {
img.hidden = true;
img.removeAttribute('src');
$('#siteName').hidden = false;
}
}
async function loadSiteContext() {
siteConfig = await api('/api/config');
const name = siteConfig.site ? siteConfig.site.name : siteConfig.siteName;
document.title = name;
$('#siteName').textContent = name;
$('#banner').alt = name;
applyTheme(siteConfig.theme, siteConfig.banner);
const change = $('#change-site');
change.hidden = !siteConfig.multiSite;
change.textContent = siteConfig.site ? `Site: ${siteConfig.site.name} — change` : 'Choose site';
hosts = await api('/api/hosts');
renderHosts($('#host-select'), '', () => show('guest-contact'), $('#host-empty'));
}
$('#change-site').addEventListener('click', chooseSite);
/* --------------------------------------------------------------- wiring */
document.addEventListener('click', (event) => {
const go = event.target.closest('[data-go]');
if (go) {
const target = go.dataset.go;
if (target === 'home') {
show('home', { push: false });
} else if (target === 'guest-name') {
state.mode = 'guest';
show('guest-name');
} else {
show(target);
}
return;
}
if (event.target.closest('[data-back]')) goBack();
});
$('[data-next="guest-name"]').addEventListener('click', () => {
const first = $('#in-first').value.trim();
const last = $('#in-last').value.trim();
if (!first) return say('Enter your first name.');
if (!last) return say('Enter your last name.');
state.firstName = first;
state.lastName = last;
show('guest-host');
});
$('#in-host-search').addEventListener('input', (e) =>
renderHosts($('#host-select'), e.target.value, () => show('guest-contact'), $('#host-empty'))
);
$('#in-host-search').addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
event.preventDefault();
pickOnlyMatch($('#host-select'));
}
});
$('[data-next="guest-contact"]').addEventListener('click', () => {
const phone = $('#in-phone').value.trim();
const email = $('#in-email').value.trim();
if (!phone && !email) return say('Add a mobile number or an email address.');
if (phone && !phoneOk(phone)) return say('That mobile number looks too short.');
if (email && !emailOk(email)) return say('That email address does not look right.');
state.phone = phone;
state.email = email;
show('guest-check');
});
$$('.choice').forEach((btn) => {
btn.addEventListener('click', () => {
$$('.choice').forEach((b) => b.setAttribute('aria-pressed', 'false'));
btn.setAttribute('aria-pressed', 'true');
state.checkType = btn.dataset.check;
const needsNumber = state.checkType !== 'NONE';
$('#check-number-field').hidden = !needsNumber;
$('#check-number-label').textContent =
state.checkType === 'WWCC' ? 'WWCC card number' : 'VIT registration number';
$('#check-continue').hidden = false;
if (needsNumber) $('#in-check-number').focus();
});
});
$('#check-continue').addEventListener('click', () => {
if (state.checkType !== 'NONE') {
const number = $('#in-check-number').value.trim();
if (!number) return say('Enter the number on your card.');
state.checkNumber = number;
} else {
state.checkNumber = '';
}
show('photo');
});
$('#cam-take').addEventListener('click', capture);
$('#cam-retake').addEventListener('click', () => startCamera());
$('#cam-use').addEventListener('click', afterPhoto);
$('#cam-skip').addEventListener('click', () => {
state.photo = null;
afterPhoto();
});
$('#do-signin').addEventListener('click', submitSignIn);
/* recurring visitors */
$('#do-freq-auth').addEventListener('click', async () => {
const phone = $('#in-freq-phone').value.trim();
const pin = $('#in-freq-pin').value.trim();
if (!phoneOk(phone)) return say('Enter the mobile number on your card.');
if (!/^\d{4}$/.test(pin)) return say('Your PIN is 4 digits.');
const button = $('#do-freq-auth');
button.disabled = true;
try {
const person = await api('/api/frequent/auth', { phone, pin });
if (person.openVisit) {
say(`${person.firstName}, you are already signed in. Use Sign out instead.`);
return;
}
state.mode = 'frequent';
state.frequentVisitorId = person.id;
state.firstName = person.firstName;
state.lastName = person.lastName;
// With a photo already on file there is nothing to pose for: picking a host
// completes the sign in and the pass prints straight away.
state.hasStoredPhoto = Boolean(person.hasPhoto);
$('#freq-greeting').textContent = `Hi ${person.firstName}. Who are you here to see?`;
$('#in-freq-host-search').value = '';
renderHosts(
$('#freq-host-select'),
'',
() => (state.hasStoredPhoto ? submitSignIn() : show('photo')),
$('#freq-host-empty')
);
show('freq-host');
} catch (err) {
say(err.message);
$('#in-freq-pin').value = '';
} finally {
button.disabled = false;
}
});
$('#in-freq-host-search').addEventListener('input', (e) =>
renderHosts(
$('#freq-host-select'),
e.target.value,
() => (state.hasStoredPhoto ? submitSignIn() : show('photo')),
$('#freq-host-empty')
)
);
$('#in-freq-host-search').addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
event.preventDefault();
pickOnlyMatch($('#freq-host-select'));
}
});
/* sign out */
$('#do-signout-find').addEventListener('click', async () => {
const lastName = $('#out-last').value.trim();
const contact = $('#out-contact').value.trim();
if (!lastName) return say('Enter your last name.');
if (!contact) return say('Enter your mobile number or email.');
const button = $('#do-signout-find');
button.disabled = true;
try {
const matches = await api('/api/signout/lookup', { lastName, contact });
const list = $('#signout-list');
list.innerHTML = matches
.map(
(m) =>
``
)
.join('');
list.querySelectorAll('[data-visit]').forEach((btn) => {
btn.addEventListener('click', async () => {
btn.disabled = true;
try {
const done = await api('/api/signout', { visitId: Number(btn.dataset.visit) });
$('#done-out-message').textContent = `Goodbye, ${done.firstName}.`;
show('done-out', { push: false });
setTimeout(() => {
if (current === 'done-out') show('home', { push: false });
}, 10000);
} catch (err) {
say(err.message);
btn.disabled = false;
}
});
});
show('signout-pick');
} catch (err) {
say(err.message);
} finally {
button.disabled = false;
}
});
/* Enter key moves the flow along on every screen. */
document.addEventListener('keydown', (event) => {
if (event.key !== 'Enter') return;
const screen = document.querySelector('.screen.on');
const primary = screen?.querySelector('.primary:not([hidden])');
if (primary) {
event.preventDefault();
primary.click();
}
});
/* -------------------------------------------------------------- start */
(async function init() {
try {
await loadSiteContext();
} catch {
/* fall through to the picker below */
}
// With one site the server resolves it for us; with several, ask once.
if (!siteConfig.siteChosen) {
await chooseSite();
return;
}
show('home', { push: false });
})();