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

Redesigned the user interface #23

Browse source
This commit is contained in:
ChaoticByte 2023-02-17 22:01:09 +01:00
parent f7048d1e9f
commit d93591bcb2
32 changed files with 846 additions and 1297 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/static/js/autoreload.js
View file

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

15
app/static/js/custom_number_input.js
View file

@ -1,5 +1,4 @@
{
(() => {
document.addEventListener("DOMContentLoaded", () => {
// get all customnumberinput Elements
let customNumberInputElements = document.getElementsByClassName("customnumberinput");
@ -8,16 +7,11 @@
// number input
let numberFieldElement = element.getElementsByClassName("customnumberinput-field")[0];
// minus button
element.getElementsByClassName("customnumberinput-minus")[0].addEventListener("click", () => {
alterCustomNumberField(numberFieldElement, -1)
});
element.getElementsByClassName("customnumberinput-minus")[0].addEventListener("click", () => alterCustomNumberField(numberFieldElement, -1));
// plus button
element.getElementsByClassName("customnumberinput-plus")[0].addEventListener("click", () => {
alterCustomNumberField(numberFieldElement, +1)
});
element.getElementsByClassName("customnumberinput-plus")[0].addEventListener("click", () => alterCustomNumberField(numberFieldElement, +1));
})
})
function alterCustomNumberField(numberFieldElement, n) {
numberFieldElement.value = Math.min(
Math.max(
@ -26,5 +20,4 @@
numberFieldElement.max || Number.MAX_VALUE
);
}
}
})();

17
app/static/js/deposit.js
View file

@ -1,28 +1,18 @@
document.addEventListener("DOMContentLoaded", () => {
// elements
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
depositForm.addEventListener("submit", (event) => {
depositSubmitButton.disabled = true;
event.preventDefault(); // Don't do the default submit action!
let xhr = new XMLHttpRequest();
let formData = new FormData(depositForm);
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("/");
@ -32,18 +22,13 @@ document.addEventListener("DOMContentLoaded", () => {
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", "/api/deposit");
xhr.send(formData);
});
})
});

12
app/static/js/login.js
View file

@ -1,5 +1,4 @@
(() => {
// Define variables
let usernameInputElement;
let passwordInputElement;
@ -9,14 +8,13 @@
let userlistButtons;
let pinpadButtons;
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("passwordoverlaycontainer");
passwordOverlayElement = document.getElementById("passwordoverlay-container");
pwOverlayCancelButton = document.getElementById("pwocancel");
userlistContainerElement = document.getElementById("userlistcontainer");
userlistButtons = document.getElementsByClassName("userlistbutton");
@ -32,21 +30,15 @@
hide_password_overlay();
});
})
function set_username(username) {
usernameInputElement.value = username;
}
function show_password_overlay() {
window.scrollTo(0, 0);
passwordOverlayElement.classList.remove("nodisplay");
userlistContainerElement.classList.add("nodisplay");
}
function hide_password_overlay() {
passwordOverlayElement.classList.add("nodisplay");
userlistContainerElement.classList.remove("nodisplay");
passwordInputElement.value = "";
}
})()
})();

9
app/static/js/main.js
View file

@ -1,21 +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");
}
})
}
})
});

29
app/static/js/order.js
View file

@ -1,61 +1,39 @@
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("/");
@ -65,18 +43,13 @@ document.addEventListener("DOMContentLoaded", () => {
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);
});
})
});

3
app/static/js/simple-keyboard_configure.js
View file

@ -43,7 +43,6 @@
}
// Check if on smartphone
let onSmartphone = navigator.userAgent.toLowerCase().match(/android|webos|iphone|ipod|blackberry/i) != null;
console.log(onSmartphone)
// Configure keyboard when all DOM content has loaded
document.addEventListener("DOMContentLoaded", () => {
if (!onSmartphone) {
@ -97,4 +96,4 @@
}
}
});
})()
})();

19
app/static/js/supply.js
View file

@ -1,35 +1,23 @@
document.addEventListener("DOMContentLoaded", () => {
// elements
let supplyDescriptionElement = document.getElementById("supplydescription");
let supplyPriceElement = document.getElementById("supplyprice");
let supplyFormElement = document.getElementById("supplyform");
let statusInfoElement = document.getElementById("statusinfo");
let supplySubmitButton = document.getElementById("supplysubmitbtn");
// custom submit method
supplyFormElement.addEventListener("submit", (event) => {
supplySubmitButton.disabled = true;
event.preventDefault(); // Don't do the default submit action!
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(supplyFormElement);
xhr.addEventListener("load", (event) => {
status_ = event.target.status;
response_ = event.target.responseText;
if (status_ == 200 && response_ == "success") {
statusInfoElement.innerText = "Success.";
window.location.replace("/");
@ -39,18 +27,13 @@ document.addEventListener("DOMContentLoaded", () => {
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/supply");
xhr.send(formData);
});
})
});