diff options
Diffstat (limited to 'WebInterface/NodeJSServer/src/modules/ui')
5 files changed, 102 insertions, 21 deletions
diff --git a/WebInterface/NodeJSServer/src/modules/ui/backdrop.js b/WebInterface/NodeJSServer/src/modules/ui/backdrop.js index 243bbb3..1a24bd2 100644 --- a/WebInterface/NodeJSServer/src/modules/ui/backdrop.js +++ b/WebInterface/NodeJSServer/src/modules/ui/backdrop.js @@ -1,18 +1,32 @@ // Showing / Hiding the backdrop menu +/** + * Class for adding functionality to backdrop elements + */ export default class Backdrop { + /** + * Registers all important elements in the backdrop + * @param {string} backdropMenu ID of Backdrop Menu + * @param {string} frontLayer ID of Front Layer + * @param {string} menuButton ID of Show / Hide Menu Button + */ constructor(backdropMenu, frontLayer, menuButton) { this.backdrop = document.getElementById(backdropMenu); this.frontLayer = document.getElementById(frontLayer); this.menuButton = document.getElementById(menuButton); } - + /** + * Registers all neccessary events + */ register() { this.registerButtonEvent(); this.registerFrontLayerEvent(); } + /** + * Registers showing / hiding through menu button + */ registerButtonEvent() { this.menuButton.addEventListener('click', () => { // Hide / Unhide Backdrop Menu @@ -31,6 +45,9 @@ export default class Backdrop { }); } + /** + * Registers hiding, when clicking on the front layer + */ registerFrontLayerEvent() { // Hide menu when interacting with front layer this.frontLayer.addEventListener('click', () => { diff --git a/WebInterface/NodeJSServer/src/modules/ui/login-modal.js b/WebInterface/NodeJSServer/src/modules/ui/login-modal.js index cb1f2ac..4c7b872 100644 --- a/WebInterface/NodeJSServer/src/modules/ui/login-modal.js +++ b/WebInterface/NodeJSServer/src/modules/ui/login-modal.js @@ -1,7 +1,17 @@ import Modal from './modal.js'; import '../hash.js'; +/** + * Class to implement a login modal from the parent modal class + */ export default class LoginModal extends Modal { + /** + * Creates necessary elements for login modal + * @param {string} serverName Name of the server, used for login and displayed + * in title + * @param {ServerClient} serverClient Server client object used to send the + * login + */ constructor(serverName, serverClient) { super(serverName); this.serverName = serverName; @@ -15,7 +25,7 @@ export default class LoginModal extends Modal { let passwordInput = document.createElement('input'); passwordLabel.setAttribute('for', 'password-input'); passwordLabel.textContent = 'Passwort:'; - passwordLabel.title = 'Das Passwort des Spiels' + passwordLabel.title = 'Das Passwort des Spiels'; passwordInput.id = 'password-input'; passwordInput.type = 'password'; passwordInput.placeholder = 'Passwort'; @@ -24,7 +34,7 @@ export default class LoginModal extends Modal { let nameInput = document.createElement('input'); nameLabel.setAttribute('for', 'name-input'); nameLabel.textContent = 'Benutzername:'; - nameLabel.title = 'Dein Anzeigename' + nameLabel.title = 'Dein Anzeigename'; nameInput.id = 'name-input'; nameInput.type = 'text'; nameInput.autocomplete = 'on'; @@ -53,15 +63,22 @@ export default class LoginModal extends Modal { this.registerLoginBtn(); } + /** + * Registers event to send login, on button press + */ registerLoginBtn() { - this.loginButton.addEventListener('click', () => { - console.log('button pressed') + let eventListener = () => { + this.loginButton.removeEventListener('click', eventListener); let userName = this.nameInput.value; this.passwordInput.value.getHash() .then((result) => { this.serverClient.sendLogin(this.serverName, result, userName); + + // TODO: Wait for response, if error keep window intact, + // and reenable event listener this.close(); }); - }); + }; + this.loginButton.addEventListener('click', eventListener); } } diff --git a/WebInterface/NodeJSServer/src/modules/ui/modal.js b/WebInterface/NodeJSServer/src/modules/ui/modal.js index 55e38bd..10a1be5 100644 --- a/WebInterface/NodeJSServer/src/modules/ui/modal.js +++ b/WebInterface/NodeJSServer/src/modules/ui/modal.js @@ -1,4 +1,12 @@ +/** + * Parent class to create Modals on the screen + * Contains no content, as that is implemented by child classes + */ export default class Modal { + /** + * Creates a new modal with a title and empty content + * @param {string} titleString Title to show at the top of the modal + */ constructor(titleString) { let modalBackground = document.createElement('div'); let modal = document.createElement('div'); @@ -8,7 +16,7 @@ export default class Modal { modalBackground.className = 'modal-container'; modal.className = 'modal'; title.className = 'modal-title'; - body.className = 'modal-body' + body.className = 'modal-body'; title.textContent = titleString; @@ -25,6 +33,10 @@ export default class Modal { this.registerEvents(); } + /** + * Register event to close if clicked outside of modal + * Clicking on the modal itself should not close it though + */ registerEvents() { this.modal.addEventListener('click', (e) => { e.stopPropagation(); @@ -35,6 +47,9 @@ export default class Modal { }); } + /** + * Fades modal out and removes it from the flow of the document + */ close() { this.bg.classList.add('hidden'); this.bg.addEventListener('transitionend', () => { @@ -42,6 +57,10 @@ export default class Modal { }); } + /** + * Puts text in the body + * @param {string} text Text to put into the body + */ setBodyText(text) { this.body.textContent = text; } diff --git a/WebInterface/NodeJSServer/src/modules/ui/notification-banner.js b/WebInterface/NodeJSServer/src/modules/ui/notification-banner.js index d14845e..395db94 100644 --- a/WebInterface/NodeJSServer/src/modules/ui/notification-banner.js +++ b/WebInterface/NodeJSServer/src/modules/ui/notification-banner.js @@ -1,4 +1,13 @@ +/** + * Class for controlling the Notification banner + */ export default class BannerController { + /** + * Creates references to objects and hides notification banner + * @param {string} bannerId ID of Notification Banner + * @param {string} textP ID of Notification Banner text field + * @param {string} dismissBtn ID of dismiss button + */ constructor(bannerId, textP, dismissBtn) { this.banner = document.getElementById(bannerId); this.bannerText = document.getElementById(textP); @@ -9,12 +18,20 @@ export default class BannerController { this.banner.classList.add('hidden'); } + /** + * Registers dismissing via the dismiss button + */ register() { this.dismissBtn.addEventListener('click', () => { this.dismissCurrent(); }); } + /** + * Pushes a new message to the notification banner and shows it + * @param {string} name Name to register notification (referenced in hide) + * @param {string} text Notification text + */ show(name, text) { let bannerItem = {name, text, 'html': false}; this.bannerMsgs.push(bannerItem); @@ -22,6 +39,10 @@ export default class BannerController { this.update(); } + /** + * Removes notification from banner + * @param {string} name Name, that the notification was registered under + */ hide(name) { if (!name) { this.bannerMsgs = []; @@ -37,11 +58,18 @@ export default class BannerController { } } + /** + * Dismisses the currently shown message + */ dismissCurrent() { this.hide(this.current); } + /** + * Updates the notification banner with the most recent message + */ update() { + // TODO: Show if multiple messages are there if (this.bannerMsgs.length === 0) { this.banner.classList.add('hidden'); return; @@ -58,18 +86,4 @@ export default class BannerController { this.current = name; } - - showPersistence() { - let text = `Storage persistence is disabled, so in-browser storage of created Wikis might not work.\n` + - `Click <a href="#" onclick=" - event.preventDefault(); - navigator.storage.persist().then((persistent) => { - if (persistent) notificationManager.show('storageSuccess', 'Storage persistence successfully turned on.'); - else notificationManager.show('storageFail', 'Storage persistence has been rejected.'); - }); - ">here</a> to enable storage persistence.`; - let bannerItem = {'name': 'persistence', text, 'html': true}; - this.bannerMsgs.push(bannerItem); - this.update(); - } } diff --git a/WebInterface/NodeJSServer/src/modules/ui/server-listing.js b/WebInterface/NodeJSServer/src/modules/ui/server-listing.js index 2c501fd..0069ac6 100644 --- a/WebInterface/NodeJSServer/src/modules/ui/server-listing.js +++ b/WebInterface/NodeJSServer/src/modules/ui/server-listing.js @@ -1,12 +1,26 @@ +/** + * Class for handling the server list + */ export default class ServerListing { + /** + * Creates reference to container + * @param {string} serverListId ID of the server list div + */ constructor(serverListId) { this.serverListing = document.getElementById(serverListId); } + /** + * Removes all elements currently in the server listing + */ flushElements() { this.serverListing.innerHTML = ''; } + /** + * Populates servers from a given array of games + * @param {array} array Array of available games + */ addElements(array) { for (let server of array) { const name = server['name']; |