Feat: Multiplayer sessions added using CRUD database.

static/js/pages/base.js

@@ -0,0 +1,172 @@
+
+import BusinessObjects from "../lib/business_objects/business_objects.js";
+import Events from "../lib/events.js";
+import LocalStorage from "../lib/local_storage.js";
+import API from "../api.js";
+import DOM from "../dom.js";
+import Utils from "../lib/utils.js";
+
+import OverlayConfirm from "../components/common/temporary/overlay_confirm.js";
+import OverlayError from "../components/common/temporary/overlay_error.js";
+import Validation from "../lib/validation.js";
+
+export default class BasePage {
+    constructor(router) {
+        if (!router) {
+            throw new Error("Router is required");
+        }
+        else {
+            Utils.consoleLogIfNotProductionEnvironment("initialising with router: ", router);
+        }
+        this.router = router;
+        this.title = titlePageCurrent;
+        if (this.constructor === BasePage) {
+            throw new Error("Cannot instantiate abstract class");
+        }
+        
+        if (!this.constructor.hash) {
+            throw new Error(`Class ${this.constructor.name} must have a static hash attribute.`);
+        }
+    }
+
+    initialize() {
+        throw new Error("Method 'initialize()' must be implemented.");
+    }
+
+    sharedInitialize() {
+        this.logInitialisation();
+        this.hookupCommonElements();
+    }
+
+    logInitialisation() {
+        Utils.consoleLogIfNotProductionEnvironment('Initialising ' + this.title + ' page');
+    }
+    
+    hookupCommonElements() {
+        // hookupVideos();
+        this.hookupLogos();
+        this.hookupNavigation();
+        this.hookupOverlays();
+    }
+    hookupLogos() {
+        Events.hookupEventHandler("click", "." + flagImageLogo + "," + "." + flagLogo, (event, element) => {
+            Utils.consoleLogIfNotProductionEnvironment('clicking logo');
+            this.router.navigateToHash(hashPageHome);
+        });
+    }
+    /*
+    hookupEventHandler(eventType, selector, callback) {
+        Events.initialiseEventHandler(selector, flagInitialised, (element) => {
+            element.addEventListener(eventType, (event) => {
+                event.stopPropagation();
+                callback(event, element);
+            });
+        });
+    }
+    */
+    hookupNavigation() {
+        Events.hookupEventHandler("click", idButtonHamburger, (event, element) => {
+            let overlayHamburger = document.querySelector(idOverlayHamburger);
+            if (overlayHamburger.classList.contains(flagIsCollapsed)) {
+                overlayHamburger.classList.remove(flagIsCollapsed);
+                overlayHamburger.classList.add(flagExpanded);
+            } else {
+                overlayHamburger.classList.remove(flagExpanded);
+                overlayHamburger.classList.add(flagIsCollapsed);
+            }
+        });
+
+        this.hookupButtonsNavUserAccount();
+        this.hookupButtonsNavUserLogout();
+        this.hookupButtonsNavUserLogin();
+    }
+    hookupButtonsNav(buttonSelector) {
+        Events.hookupEventHandler("click", buttonSelector, (event, button) => {
+            let pageHash = buttonSelector.getAttribute('href');
+            this.router.navigateToHash(pageHash); 
+        });
+    }
+    hookupButtonsNavUserAccount() {
+        // this.hookupButtonsNav('.' + flagNavUserAccount);
+    }
+    hookupButtonsNavUserLogout() {
+        // this.hookupButtonsNav('.' + flagNavUserLogout);
+    }
+    hookupButtonsNavUserLogin() {
+        Events.hookupEventHandler("click", '.' + flagNavUserLogin, (event, navigator) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.leave();
+            API.loginUser()
+                .then((response) => {
+                if (response.Success) {
+                    window.location.href = response[flagCallback];
+                } else {
+                    DOM.alertError("Error", response.Message);
+                }
+            });
+        });
+    }
+
+    hookupOverlays() {
+        this.hookupOverlayFromId(idOverlayConfirm);
+        this.hookupOverlayFromId(idOverlayError);
+    }
+
+    hookupOverlayFromId(idOverlay) {
+        Events.initialiseEventHandler(idOverlay, flagInitialised, (overlay) => {
+            overlay.querySelector('button.' + flagCancel).addEventListener("click", (event) => {
+                event.stopPropagation();
+                overlay.style.display = 'none';
+            });
+        });
+    }
+
+    hookupButtonSave() {
+        Events.initialiseEventHandler('.' + flagContainer + '.' + flagSave + '.' + flagCancel + ' button.' + flagSave, flagInitialised, (button) => {
+            button.addEventListener("click", (event) => {
+                event.stopPropagation();
+                button = event.target;
+                if (button.classList.contains(flagIsCollapsed)) return;
+                Utils.consoleLogIfNotProductionEnvironment('saving page: ', this.title);
+                OverlayConfirm.show();
+            });
+        });
+    }
+
+    leave() {
+        Utils.consoleLogIfNotProductionEnvironment('Leaving ' + this.title + ' page');
+        if (this.constructor === BasePage) {
+            throw new Error("Must implement leave() method.");
+        }
+    }
+    setLocalStoragePage(dataPage) {
+        LocalStorage.setLocalStorage(this.hash, dataPage);
+    }
+    getLocalStoragePage() {
+        return LocalStorage.getLocalStorage(this.hash);
+    }
+
+    toggleShowButtonsSaveCancel(show, buttonContainerSelector = null) { // , buttonSave = null, buttonCancel = null
+        if (Validation.isEmpty(buttonContainerSelector)) buttonContainerSelector = '.' + flagContainer + '.' + flagSave + '.' + flagCancel;
+        let buttonSave = document.querySelector(buttonContainerSelector + ' ' + idButtonSave);
+        let buttonCancel = document.querySelector(buttonContainerSelector + ' ' + idButtonCancel);
+        Utils.consoleLogIfNotProductionEnvironment({ show, buttonContainerSelector, buttonCancel, buttonSave });
+        if (show) {
+            buttonCancel.classList.remove(flagIsCollapsed);
+            buttonSave.classList.remove(flagIsCollapsed);
+            Utils.consoleLogIfNotProductionEnvironment('showing buttons');
+        } else {
+            buttonCancel.classList.add(flagIsCollapsed);
+            buttonSave.classList.add(flagIsCollapsed);
+            Utils.consoleLogIfNotProductionEnvironment('hiding buttons');
+        }
+    }
+
+    static isDirtyFilter(filter) {
+        let isDirty = DOM.updateAndCheckIsElementDirty(filter);
+        if (isDirty) document.querySelectorAll(idTableMain + ' tbody tr').remove();
+        return isDirty;
+    }
+
+}