most of UI

priv/static/picker.mjs

@@ -0,0 +1,64 @@
+const switchListEl = document.querySelector("#switch-list");
+const submitEl = document.querySelector("#submit");
+
+let fronters = (window.fronters = []);
+
+const memberFromButton = (button) => ({
+  name: button.dataset.name,
+  uuid: button.dataset.uuid,
+});
+
+const updateForm = (member) => {
+  const elementPrefix = fronters.length == 1 ? "pf-fronter__" : "pf-backups__";
+  const inputEl = document.querySelector(`#${elementPrefix}${member.uuid}`);
+  inputEl.checked = true;
+
+  if (fronters.length > 0) {
+    submitEl.disabled = false;
+  }
+};
+
+const updateList = () => {
+  switchListEl.innerHTML = fronters
+    .map((member) => `<span>${member.name}</span>`)
+    .join(", ");
+};
+
+const handleButtonClick = (event) => {
+  const button = event.target;
+  const member = memberFromButton(button);
+
+  if (fronters.find((mem) => mem.uuid == member.uuid)) {
+    console.info("already picked, skipping");
+    return;
+  }
+
+  fronters = [...fronters, member];
+
+  // update form
+  updateForm(member);
+
+  // update list
+  updateList();
+
+  if (fronters.length == 1) {
+    button.classList.add("first");
+  } else {
+    button.classList.add("other");
+  }
+};
+
+const reset = () => {
+  submitEl.disabled = true;
+  document.querySelectorAll("input").forEach((el) => {
+    el.checked = false;
+  });
+};
+
+(() => {
+  document.querySelectorAll(".buttons").forEach((el) => {
+    el.addEventListener("click", handleButtonClick);
+  });
+
+  reset();
+})();