Initial commit - existing project files

static/js/customNumberInput.js

@@ -0,0 +1,30 @@
+{
+
+    document.addEventListener("DOMContentLoaded", () => {
+        // get all customNumberInput Elements
+        let custom_number_inputs = document.getElementsByClassName("customNumberInput");
+        // Add Event Handler to the elements of the customNumberInputs
+        [...custom_number_inputs].forEach(element => {
+            // number input
+            let numberFieldElement = element.getElementsByClassName("customNumberInputField")[0];
+            // minus button
+            element.getElementsByClassName("customNumberInput-minus")[0].addEventListener("click", () => {
+                alterCustomNumberField(numberFieldElement, -1)
+            });
+            // plus button
+            element.getElementsByClassName("customNumberInput-plus")[0].addEventListener("click", () => {
+                alterCustomNumberField(numberFieldElement, +1)
+            });
+        })
+    })
+
+    function alterCustomNumberField(numberFieldElement, n) {
+        numberFieldElement.value = Math.min(
+            Math.max(
+                (parseInt(numberFieldElement.value) + n), numberFieldElement.min || Number.MIN_VALUE
+            ),
+            numberFieldElement.max || Number.MAX_VALUE
+        );
+    }
+
+}

static/js/deposit.js

@@ -0,0 +1,49 @@
+document.addEventListener("DOMContentLoaded", () => {
+
+    // elements
+
+    let deposit_form = document.getElementById("depositForm");
+    let status_info = document.getElementById("statusInfo");
+    let deposit_submit_button = document.getElementById("depositSubmitBtn");
+
+    // event listener for deposit form
+    // this implements a custom submit method
+
+    deposit_form.addEventListener("submit", (event) => {
+
+        deposit_submit_button.disabled = true;
+
+        event.preventDefault(); // Don't do the default submit action!
+
+        let xhr = new XMLHttpRequest();
+        let formData = new FormData(deposit_form);
+
+        xhr.addEventListener("load", (event) => {
+
+            status_ = event.target.status;
+            response_ = event.target.responseText;
+
+            if (status_ == 200 && response_ == "success") {
+                status_info.innerText = "Success. Redirecting soon.";
+                window.location.replace("/");
+            }
+            else {
+                status_info.classList.add("errorText");
+                status_info.innerText = "An error occured. Redirecting in 5 seconds...";
+                window.setTimeout(() => { window.location.replace("/") }, 5000);
+            }
+
+        })
+
+        xhr.addEventListener("error", (event) => {
+            status_info.classList.add("errorText");
+            status_info.innerText = "An error occured. Redirecting in 5 seconds...";
+            window.setTimeout(() => { window.location.replace("/") }, 5000);
+        })
+
+        xhr.open("POST", "/api/deposit");
+        xhr.send(formData);
+
+    });
+    
+})

static/js/logged_out.js

@@ -0,0 +1 @@
+window.location.replace("/");

static/js/login.js

@@ -0,0 +1,87 @@
+{
+
+    // Define variables
+
+    let username_input;
+    let password_input;
+    let submit_button;
+    let username_display;
+    let password_overlay;
+    let pw_overlay_cancel;
+    let userlist_buttons;
+    let pinpad_buttons;
+
+
+    // Add event listeners after DOM Content loaded
+
+    document.addEventListener("DOMContentLoaded", () => {
+        
+        // elements
+
+        username_input = document.getElementById("id_username");
+        password_input = document.getElementById("id_password");
+        submit_button = document.getElementById("submit_login");
+        password_overlay = document.getElementById("passwordOverlayContainer");
+        pw_overlay_cancel = document.getElementById("pwoCancel");
+
+        userlist_buttons = document.getElementsByClassName("userlistButton");
+        pinpad_buttons = document.getElementsByClassName("pinpadBtn");
+
+        // event listeners
+
+        // [...<html-collection>] converts an html collection to an array
+
+        [...userlist_buttons].forEach(element => {
+            element.addEventListener("click", () => {
+                set_username(element.dataset.username);
+                show_password_overlay();
+            })
+        });
+
+        [...pinpad_buttons].forEach(element => {
+            element.addEventListener("click", () => {
+                pinpad_press(element.dataset.btn);
+            })
+        })
+
+        pw_overlay_cancel.addEventListener("click", () => {
+            hide_password_overlay();
+        });
+
+    })
+
+
+    function set_username(username) {
+        username_input.value = username;
+    }
+
+    function show_password_overlay() {
+
+        window.scrollTo(0, 0);
+        password_overlay.classList.remove("nodisplay");
+        document.body.classList.add("overflowHidden");
+        //password_input.focus();
+
+    }
+
+    function hide_password_overlay() {
+
+        password_overlay.classList.add("nodisplay");
+        document.body.classList.remove("overflowHidden");
+        password_input.value = "";
+
+    }
+
+    function pinpad_press(key) {
+        if (key == "enter") {
+            submit_button.click();
+        }
+        else if (key == "x") {
+            password_input.value = "";
+        }
+        else {
+            password_input.value += key;
+        }
+    }
+
+}

static/js/main.js

@@ -0,0 +1,21 @@
+document.addEventListener("DOMContentLoaded", () => {
+
+    let dropDownMenuElement = document.getElementById("dropDownMenu");
+    let dropDownMenuButtonElement = document.getElementById("dropDownMenuButton");
+
+    if (dropDownMenuButtonElement != null) {
+
+        dropDownMenuButtonElement.addEventListener("click", () => {
+
+            if (dropDownMenuElement.classList.contains("dropDownVisible")) {
+                dropDownMenuElement.classList.remove("dropDownVisible");
+            }
+            else {
+                dropDownMenuElement.classList.add("dropDownVisible");
+            }
+
+        })
+
+    }
+
+})

static/js/order.js

@@ -0,0 +1,75 @@
+document.addEventListener("DOMContentLoaded", () => {
+
+    // elements
+
+    let order_number_of_drinks_input = document.getElementById("numberOfDrinks");
+    let order_number_of_drinks_btn_a = document.getElementById("numberOfDrinksBtnA");
+    let order_number_of_drinks_btn_b = document.getElementById("numberOfDrinksBtnB");
+    let order_sum_element = document.getElementById("orderCalculatedSum");
+
+    let order_form = document.getElementById("orderForm");
+    let status_info = document.getElementById("statusInfo");
+    let order_submit_button = document.getElementById("orderSubmitBtn");
+
+
+    // calculate & display sum
+
+    let order_price_per_drink = parseFloat(document.getElementById("pricePerDrink").dataset.drinkPrice);
+
+    function calculate_and_display_sum() {
+
+        setTimeout(() => {
+
+            let number_of_drinks = parseFloat(order_number_of_drinks_input.value);
+            let calculated_sum = order_price_per_drink * number_of_drinks;
+            order_sum_element.innerText = new Intl.NumberFormat(undefined, {minimumFractionDigits: 2}).format(calculated_sum);
+
+        }, 25);
+
+    }
+
+    order_number_of_drinks_input.addEventListener("input", calculate_and_display_sum);
+    order_number_of_drinks_btn_a.addEventListener("click", calculate_and_display_sum);
+    order_number_of_drinks_btn_b.addEventListener("click", calculate_and_display_sum);
+
+
+    // custom submit method
+
+    order_form.addEventListener("submit", (event) => {
+
+        order_submit_button.disabled = true;
+
+        event.preventDefault(); // Don't do the default submit action!
+
+        let xhr = new XMLHttpRequest();
+        let formData = new FormData(order_form);
+
+        xhr.addEventListener("load", (event) => {
+
+            status_ = event.target.status;
+            response_ = event.target.responseText;
+
+            if (status_ == 200 && response_ == "success") {
+                status_info.innerText = "Success.";
+                window.location.replace("/");
+            }
+            else {
+                status_info.classList.add("errorText");
+                status_info.innerText = "An error occured.";
+                window.setTimeout(() => { window.location.reload() }, 5000);
+            }
+
+        })
+
+        xhr.addEventListener("error", (event) => {
+            status_info.classList.add("errorText");
+            status_info.innerText = "An error occured.";
+            window.setTimeout(() => { window.location.reload() }, 5000);
+        })
+
+        xhr.open("POST", "/api/order-drink");
+        xhr.send(formData);
+
+    });
+
+})

static/js/statistics.js

@@ -0,0 +1,42 @@
+{
+
+    let statistics_dropdown_choices;
+    let statistics_tables;
+
+    let dropDownMenuActive = false;
+
+    document.addEventListener("DOMContentLoaded", () => {
+
+        // elements
+        let statistics_dropdown_menu = document.getElementById("statisticsDropDownMenu");
+        let statistics_dropdown_menu_button = document.getElementById("statisticsDropDownMenuButton");
+        statistics_dropdown_choices = [...statistics_dropdown_menu.getElementsByClassName("sChoice")];
+        statistics_tables = [...document.getElementsByClassName("statisticsTable")];
+
+        statistics_dropdown_menu_button.addEventListener("click", () => {
+            if (statistics_dropdown_menu.classList.contains("dropDownVisible")) {
+                statistics_dropdown_menu.classList.remove("dropDownVisible");
+            }
+            else {
+                statistics_dropdown_menu.classList.add("dropDownVisible");
+            }
+        })
+        
+        statistics_dropdown_choices.forEach(element => {
+
+            element.addEventListener("click", () => {
+                changeStatisticsChoice(element.innerText, element.dataset.statistics_div);
+            })
+
+        })
+
+    })
+
+    function changeStatisticsChoice(choice_name, div_id) {
+        statistics_tables.forEach(element => {
+            element.classList.add("nodisplay");
+        })
+        document.getElementById(div_id).classList.remove("nodisplay");
+    }
+
+}