Split up static files into static and django_static

static/js/autoreload.js

@@ -0,0 +1,3 @@
+setInterval(() => {
+    location.reload();
+}, 1000*60*2); // reload after 2 minutes

static/js/custom_form.js

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

static/js/custom_number_input.js

@@ -0,0 +1,23 @@
+(() => {
+    document.addEventListener("DOMContentLoaded", () => {
+        // get all customnumberinput Elements
+        let customNumberInputElements = document.getElementsByClassName("customnumberinput");
+        // Add Event Handler to the elements of the customnumberinputs
+        [...customNumberInputElements].forEach(element => {
+            // number input
+            let numberFieldElement = element.getElementsByClassName("customnumberinput-field")[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/logged_out.js

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

static/js/login.js

@@ -0,0 +1,47 @@
+(() => {
+    // Define variables
+    let usernameInputElement;
+    let passwordInputElement;
+    let submitButton;
+    let passwordOverlayElement;
+    let pwOverlayCancelButton;
+    let userlistButtons;
+    let userlistContainerElement;
+    // Add event listeners after DOM Content loaded
+    document.addEventListener("DOMContentLoaded", () => {
+        // elements
+        usernameInputElement = document.getElementById("id_username");
+        passwordInputElement = document.getElementById("id_password");
+        submitButton = document.getElementById("submit_login");
+        passwordOverlayElement = document.getElementById("passwordoverlay-container");
+        pwOverlayCancelButton = document.getElementById("pwocancel");
+        userlistContainerElement = document.getElementById("userlistcontainer");
+        userlistButtons = document.getElementsByClassName("userlistbutton");
+        // event listeners
+        // [...<html-collection>] converts an html collection to an array
+        [...userlistButtons].forEach(element => {
+            element.addEventListener("click", () => {
+                set_username(element.dataset.username);
+                show_password_overlay();
+            })
+        });
+        pwOverlayCancelButton.addEventListener("click", () => {
+            hide_password_overlay();
+        });
+    })
+    function set_username(username) {
+        usernameInputElement.value = username;
+    }
+    function show_password_overlay() {
+        window.scrollTo(0, 0);
+        passwordOverlayElement.classList.remove("nodisplay");
+    }
+    function hide_password_overlay() {
+        passwordOverlayElement.classList.add("nodisplay");
+        passwordInputElement.value = "";
+        // Dispatch an Input Event to the input element to trigger the on-
+        // screen keyboard to update its buffer. This fixes a security
+        // issue on the login page.
+        passwordInputElement.dispatchEvent(new Event("input", {bubbles: true}));
+    }
+})();

static/js/main.js

@@ -0,0 +1,14 @@
+document.addEventListener("DOMContentLoaded", () => {
+    let dropdownmenuElement = document.getElementById("dropdownmenu");
+    let dropdownmenuButtonElement = document.getElementById("dropdownmenu-button");
+    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,55 @@
+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);
+    });
+});

static/js/simple-keyboard_configure.js

@@ -0,0 +1,100 @@
+(() => {
+    // layouts derived from
+    // https://github.com/simple-keyboard/simple-keyboard-layouts/blob/master/src/lib/layouts/
+    const layout_de = {
+        default: [
+            "^ 1 2 3 4 5 6 7 8 9 0 \u00DF \u00B4 {bksp}",
+            "{tab} q w e r t z u i o p \u00FC +",
+            "{lock} a s d f g h j k l \u00F6 \u00E4 #",
+            "{shift} < y x c v b n m , . - {shift}",
+            "@ {space}",
+        ],
+        shift: [
+            '\u00B0 ! " \u00A7 $ % & / ( ) = ? ` {bksp}',
+            "{tab} Q W E R T Z U I O P \u00DC *",
+            "{lock} A S D F G H J K L \u00D6 \u00C4 '",
+            "{shift} > Y X C V B N M ; : _ {shift}",
+            "@ {space}",
+        ],
+    }
+    const layout_en = {
+        default: [
+            "` 1 2 3 4 5 6 7 8 9 0 - = {bksp}",
+            "{tab} q w e r t y u i o p [ ] \\",
+            "{lock} a s d f g h j k l ; '",
+            "{shift} z x c v b n m , . / {shift}",
+            "@ {space}",
+        ],
+        shift: [
+            "~ ! @ # $ % ^ & * ( ) _ + {bksp}",
+            "{tab} Q W E R T Y U I O P { } |",
+            '{lock} A S D F G H J K L : "',
+            "{shift} Z X C V B N M < > ? {shift}",
+            "@ {space}",
+        ],
+    }
+    const layout_numeric = {
+        default: [
+            "1 2 3",
+            "4 5 6",
+            "7 8 9",
+            "0 . ,",
+            "{bksp}"
+        ]
+    }
+    // Check if on smartphone
+    let onSmartphone = navigator.userAgent.toLowerCase().match(/android|webos|iphone|ipod|blackberry/i) != null;
+    // Configure keyboard when all DOM content has loaded
+    document.addEventListener("DOMContentLoaded", () => {
+        if (!onSmartphone) {
+            // Get element to send input to
+            let keyboardInputElement = document.querySelector(".keyboard-input");
+            // Get language code
+            let layoutCode = document.getElementById("keyboard").dataset.layout;
+            // Determine keyboard layout (default: en)
+            let layout;
+            switch (layoutCode) {
+                case "de":
+                    layout = layout_de;
+                    break;
+                case "numeric":
+                    layout = layout_numeric;
+                    break;
+                default:
+                    layout = layout_en;
+            }
+            // determine if the numeric class has to be added
+            if (layoutCode == "numeric") {
+                theme = "hg-theme-default darkTheme numeric";
+            }
+            else {
+                theme = "hg-theme-default darkTheme";
+            }
+            // virtual keyboard
+            const Keyboard = window.SimpleKeyboard.default;
+            const keyboard = new Keyboard({
+                theme: theme,
+                // choose german layout if language is de,
+                // else choose english layout
+                layout: layout,
+                onChange: (input) => {
+                    keyboardInputElement.value = input;
+                },
+                onKeyPress: (button) => {
+                    if (button === "{shift}" || button === "{lock}") handleShift();
+                }
+            });
+            // additional handlers
+            keyboardInputElement.addEventListener("input", event => {
+                keyboard.setInput(event.target.value);
+            });
+            function handleShift(input) {
+                let currentLayout = keyboard.options.layoutName;
+                let shiftToggle = currentLayout === "default" ? "shift" : "default";
+                keyboard.setOptions({
+                    layoutName: shiftToggle
+                });
+            }
+        }
+    });
+})();