feat(grfn/bbbg): Begin styles r/3361

Start working on styles for the app, beginning with a global
stylesheet/reset and styles for the nav.

Change-Id: Ie15e549d7bb4e0116582f4099752aa2503eb9ce7
Reviewed-on: https://cl.tvl.fyi/c/depot/+/4583
Reviewed-by: grfn <grfn@gws.fyi>
Autosubmit: grfn <grfn@gws.fyi>
Tested-by: BuildkiteCI

1 files changed, 49 insertions, 0 deletions

diff --git a/users/grfn/bbbg/resources/public/main.js b/users/grfn/bbbg/resources/public/main.js
new file mode 100644
index 000000000000..d4752f114167
--- /dev/null
+++ b/users/grfn/bbbg/resources/public/main.js
@@ -0,0 +1,49 @@
+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,
+        },
+      },
+    });
+
+    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");
+    });
+  }
+
+  document.querySelectorAll("form").forEach((form) => {
+    form.onsubmit = (e) => {
+      if (e.target.attributes.disabled) {
+        e.preventDefault();
+      }
+    };
+  });
+};