mtg_commander_life_tracker/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";
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);
        if (buttonSave == null) return;
        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;
    }

}