Name Picker

public/js/kiosk.js

@@ -188,12 +188,16 @@ tickClock();
 /* --------------------------------------------------------------- hosts */
 
 /**
- * Who you are here to see: type to narrow, then choose from the dropdown. The
- * dropdown is a native select, so a tablet gives it a proper full-screen picker
- * with its own scrolling, which handles a long staff list better than a page of
- * buttons ever did.
+ * Who you are here to see.
+ *
+ * Narrow it down by typing, then tap. Once the list is short enough to show
+ * without scrolling, the names appear as buttons — one tap beats opening a
+ * picker, choosing, and dismissing it. Above that count the dropdown carries the
+ * full list, because a page of eighty buttons is worse than a scroll wheel.
  */
-function renderHosts(selectEl, searchValue, onPick, emptyEl = null) {
+const TAP_LIST_LIMIT = 5;
+
+function renderHosts(selectEl, searchValue, onPick, emptyEl = null, listEl = null) {
   const term = String(searchValue || '').trim().toLowerCase();
   const matches = term
     ? hosts.filter(
@@ -201,14 +205,47 @@ function renderHosts(selectEl, searchValue, onPick, emptyEl = null) {
       )
     : hosts;
 
+  const choose = (host) => {
+    state.hostId = host.id;
+    state.hostName = host.name;
+    onPick();
+  };
+
+  const showAsButtons = matches.length > 0 && matches.length <= TAP_LIST_LIMIT;
+
+  // The tappable shortlist.
+  if (listEl) {
+    listEl.hidden = !showAsButtons;
+    listEl.innerHTML = showAsButtons
+      ? matches
+          .map(
+            (h) =>
+              `<button class="host-option" data-host-id="${h.id}">
+                 ${escapeHtml(h.name)}${h.area ? `<small>${escapeHtml(h.area)}</small>` : ''}
+               </button>`
+          )
+          .join('')
+      : '';
+    listEl.querySelectorAll('[data-host-id]').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        const picked = hosts.find((h) => h.id === Number(btn.dataset.hostId));
+        if (picked) choose(picked);
+      });
+    });
+  }
+
+  // The full list, kept out of the way once the shortlist is showing.
+  const field = selectEl.closest('.field');
+  if (field) field.hidden = showAsButtons;
+
   const label = !hosts.length
     ? 'Nobody has been added yet'
-    : matches.length === hosts.length
-      ? `Choose one of ${hosts.length}`
-      : `${matches.length} ${matches.length === 1 ? 'match' : 'matches'} — choose one`;
+    : `Or pick from the full list of ${hosts.length}`;
+  const labelEl = field?.querySelector('span');
+  if (labelEl) labelEl.textContent = label;
 
   selectEl.innerHTML =
-    `<option value="">${escapeHtml(label)}</option>` +
+    `<option value="">${escapeHtml(matches.length === hosts.length ? 'Choose a name' : `${matches.length} match${matches.length === 1 ? '' : 'es'}`)}</option>` +
     matches
       .map(
         (h) =>
@@ -219,20 +256,16 @@ function renderHosts(selectEl, searchValue, onPick, emptyEl = null) {
 
   selectEl.onchange = () => {
     const picked = hosts.find((h) => h.id === Number(selectEl.value));
-    if (!picked) return;
-    state.hostId = picked.id;
-    state.hostName = picked.name;
-    onPick();
+    if (picked) choose(picked);
   };
 
   if (emptyEl) {
     emptyEl.hidden = matches.length > 0;
     emptyEl.textContent = hosts.length
-      ? 'No one matches that. Check the spelling, or ask the front desk.'
+      ? 'No one matches that. Check the spelling, or ask at the front desk.'
       : 'No one has been added for this site yet. Please see the front desk.';
   }
 
-  // Typing a name and pressing enter should just work when only one person is left.
   selectEl.dataset.only = matches.length === 1 ? String(matches[0].id) : '';
 }
 
@@ -496,7 +529,7 @@ async function loadSiteContext() {
   change.textContent = siteConfig.site ? `Site: ${siteConfig.site.name} — change` : 'Choose site';
 
   hosts = await api('/api/hosts');
-  renderHosts($('#host-select'), '', () => show('guest-contact'), $('#host-empty'));
+  renderHosts($('#host-select'), '', () => show('guest-contact'), $('#host-empty'), $('#host-list'));
 }
 
 $('#change-site').addEventListener('click', chooseSite);
@@ -532,7 +565,13 @@ $('[data-next="guest-name"]').addEventListener('click', () => {
 });
 
 $('#in-host-search').addEventListener('input', (e) =>
-  renderHosts($('#host-select'), e.target.value, () => show('guest-contact'), $('#host-empty'))
+  renderHosts(
+    $('#host-select'),
+    e.target.value,
+    () => show('guest-contact'),
+    $('#host-empty'),
+    $('#host-list')
+  )
 );
 $('#in-host-search').addEventListener('keydown', (event) => {
   if (event.key === 'Enter') {
@@ -616,7 +655,8 @@ $('#do-freq-auth').addEventListener('click', async () => {
       $('#freq-host-select'),
       '',
       () => (state.hasStoredPhoto ? submitSignIn() : show('photo')),
-      $('#freq-host-empty')
+      $('#freq-host-empty'),
+      $('#freq-host-list')
     );
     show('freq-host');
   } catch (err) {
@@ -632,7 +672,8 @@ $('#in-freq-host-search').addEventListener('input', (e) =>
     $('#freq-host-select'),
     e.target.value,
     () => (state.hasStoredPhoto ? submitSignIn() : show('photo')),
-    $('#freq-host-empty')
+    $('#freq-host-empty'),
+    $('#freq-host-list')
   )
 );
 $('#in-freq-host-search').addEventListener('keydown', (event) => {