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

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