ChaoticByte/drinks-manager
1
1
Fork 0
Code Issues Pull requests Projects Releases 20 Packages Wiki Activity Actions

Refactored CSS and HTML templates and polished UI (#10), changed JavaScript variable names to camelCase, adjusted filenames and some url parameter names in urlpatterns, and more.

Browse source
This commit is contained in:
W13R 2022-11-04 20:35:28 +01:00
parent 1e32e2b5dd
commit 8599f49857
30 changed files with 401 additions and 403 deletions
Download patch file Download diff file Expand all files Collapse all files

14
static/js/customNumberInput.js → static/js/custom_number_input.js
View file

@ -1,18 +1,18 @@
{
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 => {
// 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("customNumberInputField")[0];
let numberFieldElement = element.getElementsByClassName("customnumberinput-field")[0];
// minus button
element.getElementsByClassName("customNumberInput-minus")[0].addEventListener("click", () => {
element.getElementsByClassName("customnumberinput-minus")[0].addEventListener("click", () => {
alterCustomNumberField(numberFieldElement, -1)
});
// plus button
element.getElementsByClassName("customNumberInput-plus")[0].addEventListener("click", () => {
element.getElementsByClassName("customnumberinput-plus")[0].addEventListener("click", () => {
alterCustomNumberField(numberFieldElement, +1)
});
})

22
static/js/deposit.js
View file

@ -2,21 +2,21 @@ document.addEventListener("DOMContentLoaded", () => {
// elements
let deposit_form = document.getElementById("depositForm");
let status_info = document.getElementById("statusInfo");
let deposit_submit_button = document.getElementById("depositSubmitBtn");
let depositForm = document.getElementById("depositform");
let statusInfo = document.getElementById("statusinfo");
let depositSubmitButton = document.getElementById("depositsubmitbtn");
// event listener for deposit form
// this implements a custom submit method
deposit_form.addEventListener("submit", (event) => {
depositForm.addEventListener("submit", (event) => {
deposit_submit_button.disabled = true;
depositSubmitButton.disabled = true;
event.preventDefault(); // Don't do the default submit action!
let xhr = new XMLHttpRequest();
let formData = new FormData(deposit_form);
let formData = new FormData(depositForm);
xhr.addEventListener("load", (event) => {
@ -24,20 +24,20 @@ document.addEventListener("DOMContentLoaded", () => {
response_ = event.target.responseText;
if (status_ == 200 && response_ == "success") {
status_info.innerText = "Success. Redirecting soon.";
statusInfo.innerText = "Success. Redirecting soon.";
window.location.replace("/");
}
else {
status_info.classList.add("errorText");
status_info.innerText = "An error occured. Redirecting in 5 seconds...";
statusInfo.classList.add("errortext");
statusInfo.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...";
statusInfo.classList.add("errortext");
statusInfo.innerText = "An error occured. Redirecting in 5 seconds...";
window.setTimeout(() => { window.location.replace("/") }, 5000);
})

56
static/js/login.js
View file

@ -2,14 +2,14 @@
// Define variables
let username_input;
let password_input;
let submit_button;
let password_overlay;
let pw_overlay_cancel;
let userlist_buttons;
let pinpad_buttons;
let userlist_container;
let usernameInputElement;
let passwordInputElement;
let submitButton;
let passwordOverlayElement;
let pwOverlayCancelButton;
let userlistButtons;
let pinpadButtons;
let userlistContainerElement;
// Add event listeners after DOM Content loaded
@ -18,34 +18,34 @@
// 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_container = document.getElementById("userlistContainer");
usernameInputElement = document.getElementById("id_username");
passwordInputElement = document.getElementById("id_password");
submitButton = document.getElementById("submit_login");
passwordOverlayElement = document.getElementById("passwordoverlaycontainer");
pwOverlayCancelButton = document.getElementById("pwocancel");
userlistContainerElement = document.getElementById("userlistcontainer");
userlist_buttons = document.getElementsByClassName("userlistButton");
pinpad_buttons = document.getElementsByClassName("pinpadBtn");
userlistButtons = document.getElementsByClassName("userlistbutton");
pinpadButtons = document.getElementsByClassName("pinpadbtn");
// event listeners
// [...<html-collection>] converts an html collection to an array
[...userlist_buttons].forEach(element => {
[...userlistButtons].forEach(element => {
element.addEventListener("click", () => {
set_username(element.dataset.username);
show_password_overlay();
})
});
[...pinpad_buttons].forEach(element => {
[...pinpadButtons].forEach(element => {
element.addEventListener("click", () => {
pinpad_press(element.dataset.btn);
})
})
pw_overlay_cancel.addEventListener("click", () => {
pwOverlayCancelButton.addEventListener("click", () => {
hide_password_overlay();
});
@ -53,34 +53,34 @@
function set_username(username) {
username_input.value = username;
usernameInputElement.value = username;
}
function show_password_overlay() {
window.scrollTo(0, 0);
password_overlay.classList.remove("nodisplay");
userlist_container.classList.add("nodisplay");
passwordOverlayElement.classList.remove("nodisplay");
userlistContainerElement.classList.add("nodisplay");
}
function hide_password_overlay() {
password_overlay.classList.add("nodisplay");
userlist_container.classList.remove("nodisplay");
password_input.value = "";
passwordOverlayElement.classList.add("nodisplay");
userlistContainerElement.classList.remove("nodisplay");
passwordInputElement.value = "";
}
function pinpad_press(key) {
if (key == "enter") {
submit_button.click();
submitButton.click();
}
else if (key == "x") {
password_input.value = "";
passwordInputElement.value = "";
}
else {
password_input.value += key;
passwordInputElement.value += key;
}
}

14
static/js/main.js
View file

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

54
static/js/order.js
View file

@ -2,54 +2,54 @@ 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 orderNumberofdrinksInput = document.getElementById("numberofdrinks");
let orderNumberofdrinksBtnA = document.getElementById("numberofdrinks-btn-minus");
let orderNumberofdrinksBtnB = document.getElementById("numberofdrinks-btn-plus");
let orderSumElement = document.getElementById("ordercalculatedsum");
let order_form = document.getElementById("orderForm");
let status_info = document.getElementById("statusInfo");
let order_submit_button = document.getElementById("orderSubmitBtn");
let orderFormElement = document.getElementById("orderform");
let statusInfoElement = document.getElementById("statusinfo");
let orderSubmitButton = document.getElementById("ordersubmitbtn");
// calculate & display sum
let order_price_per_drink = parseFloat(document.getElementById("pricePerDrink").dataset.drinkPrice);
let orderPricePerDrink = parseFloat(document.getElementById("priceperdrink").dataset.drinkPrice);
function calculate_and_display_sum() {
function calculateAndDisplaySum() {
setTimeout(() => {
let number_of_drinks = parseFloat(order_number_of_drinks_input.value);
if (isNaN(number_of_drinks)) {
number_of_drinks = 1;
let numberOfDrinks = parseFloat(orderNumberofdrinksInput.value);
if (isNaN(numberOfDrinks)) {
numberOfDrinks = 1;
}
let calculated_sum = order_price_per_drink * number_of_drinks;
order_sum_element.innerText = new Intl.NumberFormat(undefined, {minimumFractionDigits: 2}).format(calculated_sum);
let calculated_sum = orderPricePerDrink * numberOfDrinks;
orderSumElement.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);
orderNumberofdrinksInput.addEventListener("input", calculateAndDisplaySum);
orderNumberofdrinksBtnA.addEventListener("click", calculateAndDisplaySum);
orderNumberofdrinksBtnB.addEventListener("click", calculateAndDisplaySum);
// custom submit method
order_form.addEventListener("submit", (event) => {
orderFormElement.addEventListener("submit", (event) => {
order_submit_button.disabled = true;
orderSubmitButton.disabled = true;
event.preventDefault(); // Don't do the default submit action!
if (isNaN(parseFloat(order_number_of_drinks_input.value))) {
order_number_of_drinks_input.value = 1;
if (isNaN(parseFloat(orderNumberofdrinksInput.value))) {
orderNumberofdrinksInput.value = 1;
}
let xhr = new XMLHttpRequest();
let formData = new FormData(order_form);
let formData = new FormData(orderFormElement);
xhr.addEventListener("load", (event) => {
@ -57,20 +57,20 @@ document.addEventListener("DOMContentLoaded", () => {
response_ = event.target.responseText;
if (status_ == 200 && response_ == "success") {
status_info.innerText = "Success.";
statusInfoElement.innerText = "Success.";
window.location.replace("/");
}
else {
status_info.classList.add("errorText");
status_info.innerText = "An error occured.";
statusInfoElement.classList.add("errortext");
statusInfoElement.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.";
statusInfoElement.classList.add("errortext");
statusInfoElement.innerText = "An error occured.";
window.setTimeout(() => { window.location.reload() }, 5000);
})

32
static/js/supply.js
View file

@ -2,28 +2,28 @@ document.addEventListener("DOMContentLoaded", () => {
// elements
let supply_description = document.getElementById("supplyDescription");
let supply_price = document.getElementById("supplyPrice");
let supplyDescriptionElement = document.getElementById("supplydescription");
let supplyPriceElement = document.getElementById("supplyprice");
let supply_form = document.getElementById("supplyForm");
let status_info = document.getElementById("statusInfo");
let supply_submit_button = document.getElementById("supplySubmitBtn");
let supplyFormElement = document.getElementById("supplyform");
let statusInfoElement = document.getElementById("statusinfo");
let supplySubmitButton = document.getElementById("supplysubmitbtn");
// custom submit method
supply_form.addEventListener("submit", (event) => {
supplyFormElement.addEventListener("submit", (event) => {
supply_submit_button.disabled = true;
supplySubmitButton.disabled = true;
event.preventDefault(); // Don't do the default submit action!
if (isNaN(parseFloat(supply_price.value)) || supply_description.value == "") {
status_info.innerText = "Please enter a description and price."
supply_submit_button.disabled = false;
if (isNaN(parseFloat(supplyPriceElement.value)) || supplyDescriptionElement.value == "") {
statusInfoElement.innerText = "Please enter a description and price."
supplySubmitButton.disabled = false;
}
let xhr = new XMLHttpRequest();
let formData = new FormData(supply_form);
let formData = new FormData(supplyFormElement);
xhr.addEventListener("load", (event) => {
@ -31,20 +31,20 @@ document.addEventListener("DOMContentLoaded", () => {
response_ = event.target.responseText;
if (status_ == 200 && response_ == "success") {
status_info.innerText = "Success.";
statusInfoElement.innerText = "Success.";
window.location.replace("/");
}
else {
status_info.classList.add("errorText");
status_info.innerText = "An error occured.";
statusInfoElement.classList.add("errortext");
statusInfoElement.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.";
statusInfoElement.classList.add("errortext");
statusInfoElement.innerText = "An error occured.";
window.setTimeout(() => { window.location.reload() }, 5000);
})