From b12dbaa3b6973bdc752e7ce6fa6f1d359a938a96 Mon Sep 17 00:00:00 2001
From: Griffin Smith <grfn@gws.fyi>
Date: Sat, 25 Dec 2021 17:36:04 -0500
Subject: refactor(grfn/bbbg): Live-filter for signup form

Rather than loading as the user types for the signup form, start the
page with the full list of attendees already loaded and filter that list
as the user types. There are never going to be more than 50 attendees,
so there's no perf cost here, and it's nice to have the list to scroll
through in the frontend.

Change-Id: Iba69b101856756801183979b9384503520b6701f
Reviewed-on: https://cl.tvl.fyi/c/depot/+/4624
Tested-by: BuildkiteCI
Reviewed-by: grfn <grfn@gws.fyi>
Autosubmit: grfn <grfn@gws.fyi>
---
 users/grfn/bbbg/resources/public/main.js | 86 +++++++++++++++++++-------------
 1 file changed, 52 insertions(+), 34 deletions(-)

(limited to 'users/grfn/bbbg/resources')

diff --git a/users/grfn/bbbg/resources/public/main.js b/users/grfn/bbbg/resources/public/main.js
index d4752f114167..2308ca595724 100644
--- a/users/grfn/bbbg/resources/public/main.js
+++ b/users/grfn/bbbg/resources/public/main.js
@@ -1,41 +1,59 @@
 window.onload = () => {
-  console.log("loaded");
   const input = document.getElementById("name-autocomplete");
   if (input != null) {
-    const eventID = document.getElementById("event-id").value;
-
-    const autocomplete = new autoComplete({
-      selector: "#name-autocomplete",
-      placeHolder: "Enter your name",
-      data: {
-        src: async (query) => {
-          const resp = await fetch(
-            `/attendees.json?q=${query}&event_id=${eventID}&attended=false`
-          );
-          console.log("got resp");
-          const { results } = await resp.json();
-          return results;
-        },
-        keys: ["bbbg.attendee/meetup-name"],
-      },
-      resultItem: {
-        highlight: {
-          render: true,
-        },
-      },
-    });
+    const attendeeList = document.getElementById("attendees-list");
+    const filterAttendees = (filter) => {
+      if (filter == "") {
+        for (let elt of attendeeList.querySelectorAll("li")) {
+          elt.classList.remove("hidden");
+        }
+
+        return;
+      }
+
+      let re = "";
+      for (let c of filter) {
+        re += `${c}.*`;
+      }
+      let filterRe = new RegExp(re, "i");
+
+      for (let elt of attendeeList.querySelectorAll("li")) {
+        const attendee = JSON.parse(elt.dataset.attendee);
+        if (attendee["bbbg.attendee/meetup-name"].match(filterRe) == null) {
+          elt.classList.add("hidden");
+        } else {
+          elt.classList.remove("hidden");
+        }
+      }
+    };
+
+    const attendeeIDInput = document.getElementById("attendee-id");
+    const submit = document.querySelector("#submit-button");
+    const signupForm = document.getElementById("signup-form");
+
+    input.oninput = (e) => {
+      filterAttendees(e.target.value);
+      attendeeIDInput.value = null;
+      submit.classList.add("hidden");
+      submit.setAttribute("disabled", "disabled");
+      signupForm.setAttribute("disabled", "disabled");
+    };
+
+    attendeeList.addEventListener("click", (e) => {
+      if (!(e.target instanceof HTMLLIElement)) {
+        return;
+      }
+      if (e.target.dataset.attendee == null) {
+        return;
+      }
+
+      const attendee = JSON.parse(e.target.dataset.attendee);
+      input.value = attendee["bbbg.attendee/meetup-name"];
+      attendeeIDInput.value = attendee["bbbg.attendee/id"];
 
-    input.addEventListener("selection", function (event) {
-      const attendee = event.detail.selection.value;
-      event.target.value = attendee["bbbg.attendee/meetup-name"];
-
-      const attendeeID = attendee["bbbg.attendee/id"];
-      document.getElementById("attendee-id").value = attendeeID;
-      document.getElementById("signup-form").removeAttribute("disabled");
-      document
-        .getElementById("signup-form")
-        .querySelector('input[type="submit"]')
-        .removeAttribute("disabled");
+      submit.classList.remove("hidden");
+      submit.removeAttribute("disabled");
+      signupForm.removeAttribute("disabled");
     });
   }
 
-- 
cgit 1.4.1