diff options
Diffstat (limited to 'haunt/static/js/rsvp.js')
| -rw-r--r-- | haunt/static/js/rsvp.js | 183 |
1 files changed, 109 insertions, 74 deletions
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); |