[scheme] Refactor RSVP system

2 files changed, 109 insertions, 74 deletions

diff --git a/haunt/static/image/hourglass.gif b/haunt/static/image/hourglass.gif
new file mode 100644
index 0000000..e1bf222
--- /dev/null
+++ b/haunt/static/image/hourglass.gif
diff --git a/haunt/static/js/rsvp.js b/haunt/static/js/rsvp.js
index c7b4cd8..f0a4353 100644
--- a/haunt/static/js/rsvp.js
+++ b/haunt/static/js/rsvp.js
@@ -17,15 +17,89 @@
  * <http://www.gnu.org/licenses/>.
  */
 
+// Common nodes.
+const guestView = document.getElementById("guest-view");
+const addEntry = document.getElementById("add-entry");
+const removeEntry = document.getElementById("remove-entry");
+const submitButton = document.getElementById("submit-form");
+const form = document.getElementById("rsvp-input");
+
+// Parse out the HTML form into something we can send to the backend.
+function submitForm() {
+  let data = new FormData(form);
+  if (data.get("name").trim().length == 0) {
+    alert("You have to provide something for \"Name\".");
+    return;
+  } else if (data.get("rsvp") === null) {
+    alert("You have to choose an option for \"RSVP Status\".");
+    return;
+  }
+
+  let res = { guests: [] };
+  if (urlParams.get("i")) {
+    res["id"] = urlParams.get("i");
+  } else if (urlParams.get("r")) {
+    res["update"] = urlParams.get("r");
+  }
+  for (let pair of data.entries()) {
+    if (pair[0].startsWith("guest-")) {
+      res.guests.push(pair[1]);
+    } else if (pair[0] === "rsvp") {
+      const radioButtons = document.querySelectorAll('input[name="rsvp"]');
+      for (const radioButton of radioButtons) {
+        if (radioButton.checked) {
+          res.rsvp = radioButton.id;
+          break;
+        }
+      }
+    } else {
+      res[pair[0]] = pair[1];
+    }
+  }
+  res.guests = res.guests.join(",");
+
+  let xhr = new XMLHttpRequest();
+  xhr.open("POST", `${location.protocol}//${location.host}/api/rsvp`);
+  xhr.send(JSON.stringify(res));
+  xhr.onload = function(data) {
+    if (xhr.status != 200) {
+      alert("Failed to submit form.");
+    } else {
+      document.getElementById("rsvp").innerHTML = "";
+      let resp = JSON.parse(xhr.response);
+      let elem = document.createElement("p");
+      elem.innerHTML = "Thanks for registering! Please bookmark or save the following link:";
+      document.getElementById("rsvp").appendChild(elem);
+
+      elem = document.createElement("a");
+      elem.href = [location.protocol, '//', location.host, location.pathname].join('') + `?r=${resp.receipt}`;
+      elem.textContent = elem.href;
+      document.getElementById("rsvp").appendChild(elem);
+
+      elem = document.createElement("p");
+      elem.innerHTML = "This will enable you to edit your RSVP later.";
+      document.getElementById("rsvp").appendChild(elem);
+    }
+  }
+  xhr.onerror = function(error) {
+    throw new Error(`Request failed: ${error}`);
+  }  
+}
+
+// Immediately send off an XHR to load info from the backend.
 const urlParams = new URLSearchParams(window.location.search);
-if (!urlParams.get("i")) {
+if (!urlParams.get("i") && !urlParams.get("r")) {
   document.getElementById("loading").remove();
   let elem = document.createElement("p");
   elem.innerHTML = "No invitation code provided.";
   document.getElementById("rsvp").appendChild(elem);
 } else {
   let xhr = new XMLHttpRequest();
-  xhr.open("GET", `http://localhost:8081/api/rsvp/event-info?i=${urlParams.get("i")}`);
+  if (urlParams.get("i")) {
+    xhr.open("GET", `${location.protocol}//${location.host}/api/rsvp/event-info?i=${urlParams.get("i")}`);
+  } else {
+    xhr.open("GET", `${location.protocol}//${location.host}/api/rsvp/event-info?r=${urlParams.get("r")}`);
+  }
   xhr.send();
   xhr.onload = function(data) {
     document.getElementById("loading").remove();
@@ -42,6 +116,13 @@ if (!urlParams.get("i")) {
       elem.innerHTML = response.title;
       document.getElementById("event-info").appendChild(elem);
 
+      if (response.image !== "#f") {
+        elem = document.createElement("img");
+        elem.src = `data:image/png;base64,${response.image}`;
+        elem.style = "float: right; max-size: 200px; margin: 16px;";
+        document.getElementById("event-info").appendChild(elem);
+      }
+
       elem = document.createElement("p");
       elem.innerHTML = `Where: ${response.location}`;
       document.getElementById("event-info").appendChild(elem);
@@ -63,7 +144,6 @@ if (!urlParams.get("i")) {
         document.getElementById("rsvp-global").appendChild(elem);
 
         for (let rsvp of response.rsvps) {
-          console.log(rsvp.name);
           let container = document.createElement("tr");
           let field = document.createElement("td");
           field.textContent = rsvp.name;
@@ -72,7 +152,7 @@ if (!urlParams.get("i")) {
           field.textContent = rsvp.email;
           container.append(field);
           field = document.createElement("td");
-          field.textContent = rsvp.guests.replace(',', ', ');
+          field.textContent = rsvp.guests.replaceAll(',', ', ');
           container.append(field);
           field = document.createElement("td");
           field.textContent = rsvp.attending;
@@ -80,8 +160,28 @@ if (!urlParams.get("i")) {
           elem.appendChild(container);
         }
       }
-      
-      console.log(response);
+
+      // Pre-filled info if this is an edit.
+      if (response.hasOwnProperty("name")) {
+        document.getElementById("name").value = response.name;
+      }
+      if (response.hasOwnProperty("email")) {
+        document.getElementById("email").value = response.email;
+      }
+      if (response.hasOwnProperty("attending")) {
+        document.getElementById(response.attending).checked = true;
+      }
+      if (response.hasOwnProperty("guests") && response.guests.trim() != "") {
+        let i = 0;
+        for (let guest of response.guests.split(",")) {
+          let elem = document.createElement("input");
+          elem.type = "text";
+          elem.name = `guest-${i}`;
+          elem.value = guest;
+          guestView.appendChild(elem);
+          i++;
+        }
+      }
     }
   }
   xhr.onerror = function(error) {
@@ -89,12 +189,9 @@ if (!urlParams.get("i")) {
   }
 }
 
-const guestView = document.getElementById("guest-view");
-const addEntry = document.getElementById("add-entry");
-const removeEntry = document.getElementById("remove-entry");
-const submitButton = document.getElementById("submit-form");
-const form = document.getElementById("rsvp-input");
-
+// Attach event listeners to the UI.
+submitButton.addEventListener("click", submitForm);
+submitButton.addEventListener("submit", submitForm);
 addEntry.addEventListener("click", () => {
   let i = guestView.childNodes.length;
   let elem = document.createElement("input");
@@ -102,70 +199,8 @@ addEntry.addEventListener("click", () => {
   elem.name = `guest-${i}`;
   guestView.appendChild(elem);
 });
-
 removeEntry.addEventListener("click", () => {
   if (guestView.lastChild) {
     guestView.lastChild.remove();
   }
 });
-
-function submitForm() {
-  let data = new FormData(form);
-  if (data.get("name").trim().length == 0) {
-    alert("You have to provide something for \"Name\".");
-    return;
-  } else if (data.get("rsvp") === null) {
-    alert("You have to choose an option for \"RSVP Status\".");
-    return;
-  }
-
-  let res = { id: urlParams.get("i"), guests: [] };
-  for (let pair of data.entries()) {
-    console.log(pair[0]);
-    if (pair[0].startsWith("guest-")) {
-      res.guests.push(pair[1]);
-    } else if (pair[0] === "rsvp") {
-      const radioButtons = document.querySelectorAll('input[name="rsvp"]');
-      for (const radioButton of radioButtons) {
-        if (radioButton.checked) {
-          res.rsvp = radioButton.id;
-          break;
-        }
-      }
-    } else {
-      res[pair[0]] = pair[1];
-    }
-  }
-  res.guests = res.guests.join(",");
-  console.log(res);
-
-  let xhr = new XMLHttpRequest();
-  xhr.open("POST", "http://localhost:8081/api/rsvp");
-  xhr.send(JSON.stringify(res));
-  xhr.onload = function(data) {
-    if (xhr.status != 200) {
-      alert("Failed to submit form.");
-    } else {
-      document.getElementById("rsvp").innerHTML = "";
-      let resp = JSON.parse(xhr.response);
-      let elem = document.createElement("p");
-      elem.innerHTML = "Thanks for registering! Please bookmark or save the following link:";
-      document.getElementById("rsvp").appendChild(elem);
-
-      elem = document.createElement("a");
-      elem.href = [location.protocol, '//', location.host, location.pathname].join('') + `?r=${resp.receipt}`;
-      elem.textContent = elem.href;
-      document.getElementById("rsvp").appendChild(elem);
-
-      elem = document.createElement("p");
-      elem.innerHTML = "This will enable you to edit your RSVP later.";
-      document.getElementById("rsvp").appendChild(elem);
-    }
-  }
-  xhr.onerror = function(error) {
-    throw new Error(`Request failed: ${error}`);
-  }  
-}
-
-submitButton.addEventListener("click", submitForm);
-submitButton.addEventListener("submit", submitForm);