75 lines
2.4 KiB
JavaScript
75 lines
2.4 KiB
JavaScript
const form = document.querySelector("#registration-form");
|
|
const message = document.querySelector("#message");
|
|
const postalCodeInput = form.elements.postalCode;
|
|
const cityInput = form.elements.city;
|
|
const citySuggestions = document.querySelector("#city-suggestions");
|
|
const postalCodes = fetch("/postnumre.json")
|
|
.then((response) => {
|
|
if (!response.ok) throw new Error("Postnummerlisten kunne ikke hentes.");
|
|
return response.json();
|
|
})
|
|
.catch(() => null);
|
|
|
|
function showMessage(text, type) {
|
|
message.textContent = text;
|
|
message.className = `notice ${type}`;
|
|
message.hidden = false;
|
|
}
|
|
|
|
form.addEventListener("submit", async (event) => {
|
|
event.preventDefault();
|
|
|
|
const payload = Object.fromEntries(new FormData(form).entries());
|
|
const button = form.querySelector("button");
|
|
button.disabled = true;
|
|
|
|
try {
|
|
const response = await fetch("/api/visitors", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
if (!response.ok) {
|
|
showMessage("Registreringen kunne ikke gemmes. Tjek felterne og prøv igen.", "error");
|
|
return;
|
|
}
|
|
|
|
const registration = await response.json();
|
|
form.reset();
|
|
citySuggestions.replaceChildren();
|
|
showMessage(`Tak, du er registreret. Dit skivenummer er ${registration.number}. Skriv nummeret på dine skiver.`, "success");
|
|
const numberText = document.createElement("strong");
|
|
numberText.textContent = `Dit skivenummer er ${registration.number}`;
|
|
message.replaceChildren("Tak, du er registreret. ", numberText, ". Skriv nummeret på dine skiver.");
|
|
} catch {
|
|
showMessage("Der er ikke forbindelse til registreringen lige nu.", "error");
|
|
} finally {
|
|
button.disabled = false;
|
|
}
|
|
});
|
|
|
|
async function updateCity() {
|
|
postalCodeInput.value = postalCodeInput.value.replace(/\D/g, "").slice(0, 4);
|
|
const postalCode = postalCodeInput.value;
|
|
citySuggestions.replaceChildren();
|
|
cityInput.value = "";
|
|
|
|
if (postalCode.length !== 4) return;
|
|
|
|
const cities = await postalCodes;
|
|
if (postalCodeInput.value !== postalCode || !cities) return;
|
|
|
|
const city = cities[postalCode];
|
|
if (!city) return;
|
|
|
|
const option = document.createElement("option");
|
|
option.value = city;
|
|
citySuggestions.append(option);
|
|
cityInput.value = city;
|
|
}
|
|
|
|
postalCodeInput.addEventListener("input", updateCity);
|
|
postalCodeInput.addEventListener("change", updateCity);
|
|
if (postalCodeInput.value) updateCity();
|