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

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);
})