drinks-manager/static/js/order.js

document.addEventListener("DOMContentLoaded", () => {
    // elements
    let orderNumberofdrinksInput = document.getElementById("numberofdrinks");
    let orderNumberofdrinksBtnA = document.getElementById("numberofdrinks-btn-minus");
    let orderNumberofdrinksBtnB = document.getElementById("numberofdrinks-btn-plus");
    let orderSumElement = document.getElementById("ordercalculatedsum");
    let orderFormElement = document.getElementById("orderform");
    let statusInfoElement = document.getElementById("statusinfo");
    let orderSubmitButton = document.getElementById("ordersubmitbtn");
    // calculate & display sum
    let orderPricePerDrink = parseFloat(document.getElementById("priceperdrink").dataset.drinkPrice);
    function calculateAndDisplaySum() {
        setTimeout(() => {
            let numberOfDrinks = parseFloat(orderNumberofdrinksInput.value);
            if (isNaN(numberOfDrinks)) {
                numberOfDrinks = 1;
            }
            let calculated_sum = orderPricePerDrink * numberOfDrinks;
            orderSumElement.innerText = new Intl.NumberFormat(undefined, {minimumFractionDigits: 2}).format(calculated_sum);
        }, 25);
    }
    orderNumberofdrinksInput.addEventListener("input", calculateAndDisplaySum);
    orderNumberofdrinksBtnA.addEventListener("click", calculateAndDisplaySum);
    orderNumberofdrinksBtnB.addEventListener("click", calculateAndDisplaySum);
    // custom submit method
    orderFormElement.addEventListener("submit", (event) => {
        orderSubmitButton.disabled = true;
        event.preventDefault(); // Don't do the default submit action!
        if (isNaN(parseFloat(orderNumberofdrinksInput.value))) {
            orderNumberofdrinksInput.value = 1;
        }
        let xhr = new XMLHttpRequest();
        let formData = new FormData(orderFormElement);
        xhr.addEventListener("load", (event) => {
            status_ = event.target.status;
            response_ = event.target.responseText;
            if (status_ == 200 && response_ == "success") {
                statusInfoElement.innerText = "Success.";
                window.location.replace("/");
            }
            else {
                statusInfoElement.classList.add("errortext");
                statusInfoElement.innerText = "An error occured.";
                window.setTimeout(() => { window.location.reload() }, 5000);
            }
        })
        xhr.addEventListener("error", (event) => {
            statusInfoElement.classList.add("errortext");
            statusInfoElement.innerText = "An error occured.";
            window.setTimeout(() => { window.location.reload() }, 5000);
        })
        xhr.open("POST", "/api/order-drink");
        xhr.send(formData);
    });
});