dog_training/static/js/pages/base.js

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

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('Initializing ' + this.title + ' page');
    }
    
    hookupCommonElements() {
        // hookupVideos();
        this.hookupLogos();
        this.hookupNavigation();
        this.hookupOverlays();
    }
    
    hookupEventHandler(eventType, selector, callback) {
        Events.initialiseEventHandler(selector, flagInitialised, (element) => {
            element.addEventListener(eventType, (event) => {
                event.stopPropagation();
                callback(event, element);
            });
        });
    }
    
    hookupNavigation() {
        this.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.hookupButtonsNavHome();
        // this.hookupButtonsNavAdminHome();
        this.hookupButtonsNavUserAccount();
        this.hookupButtonsNavUserLogout();
        this.hookupButtonsNavUserLogin();

        // this.hookupButtonsNavStoreHome();
        // this.hookupButtonsNavStoreManufacturingPurchaseOrders();
        this.hookupButtonsNavDogHome();
        this.hookupButtonsNavDogCommandCategories();
        this.hookupButtonsNavDogCommands();
        this.hookupButtonsNavDogDogCommandLinks();
        this.hookupButtonsNavDogDogs();
        this.hookupButtonsNavDogLocations();
        this.hookupButtonsNavDogButtonIcons();
        this.hookupButtonsNavDogCommandButtonLinks();
    }
    hookupEventHandler(eventType, selector, callback) {
        Events.initialiseEventHandler(selector, flagInitialised, (element) => {
            element.addEventListener(eventType, (event) => {
                event.stopPropagation();
                callback(event, element);
            });
        });
    }
    hookupButtonsNavHome() {
        this.hookupButtonsNav('.' + flagNavHome, hashPageHome);
    }
    hookupButtonsNav(buttonSelector, hashPageNav) {
        this.hookupEventHandler("click", buttonSelector, (event, button) => { 
            this.router.navigateToHash(hashPageNav); 
        });
    }
    /*
    hookupButtonsNavAdminHome() {
        this.hookupButtonsNav('.' + flagNavAdminHome, hashPageAdminHome);
    }
    hookupButtonsNavServices() {
        this.hookupButtonsNav('.' + flagNavServices, hashPageServices);
    }
    */
    hookupButtonsNavUserAccount() {
        this.hookupButtonsNav('.' + flagNavUserAccount, hashPageUserAccount);
    }
    hookupButtonsNavUserLogout() {
        this.hookupButtonsNav('.' + flagNavUserLogout, hashPageUserLogout);
    }
    hookupButtonsNavUserLogin() {
        this.hookupEventHandler("click", '.' + flagNavUserLogin, (event, navigator) => { 
            event.stopPropagation();
            this.leave();
            API.loginUser()
                .then((response) => {
                if (response.Success) {
                    window.location.href = response[flagCallback];
                } else {
                    DOM.alertError("Error", response.Message);
                }
            });
        });
    }
    hookupButtonsNavDogHome() {
        this.hookupButtonsNav('.' + flagNavDogHome, hashPageDogHome);
    }
    hookupButtonsNavDogCommandCategories() {
        this.hookupButtonsNav('.' + flagNavDogCommandCategories, hashPageDogCommandCategories);
    }
    hookupButtonsNavDogCommands() {
        this.hookupButtonsNav('.' + flagNavDogCommands, hashPageDogCommands);
    }
    hookupButtonsNavDogDogCommandLinks() {
        this.hookupButtonsNav('.' + flagNavDogDogCommandLinks, hashPageDogDogCommandLinks);
    }
    hookupButtonsNavDogDogs() {
        this.hookupButtonsNav('.' + flagNavDogDogs, hashPageDogDogs);
    }
    hookupButtonsNavDogLocations() {
        this.hookupButtonsNav('.' + flagNavDogLocations, hashPageDogLocations);
    }
    hookupButtonsNavDogButtonIcons() {
        this.hookupButtonsNav('.' + flagNavDogButtonIcons, hashPageDogButtonIcons);
    }
    hookupButtonsNavDogCommandButtonLinks() {
        this.hookupButtonsNav('.' + flagNavDogCommandButtonLinks, hashPageDogCommandButtonLinks);
    }

    hookupLogos() {
        this.hookupEventHandler("click", "." + flagImageLogo + "," + "." + flagLogo, (event, element) => {
            Utils.consoleLogIfNotProductionEnvironment('clicking logo');
            this.router.navigateToHash(hashPageHome);
        });
    }

    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('form.' + flagFilter + ' 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) { // , buttonSave = null, buttonCancel = null
        let buttonSave = document.querySelector('form.' + flagFilter + ' button.' + flagSave);
        let buttonCancel = document.querySelector('form.' + flagFilter + ' button.' + flagCancel);
        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;
    }

}