Feat: Multiplayer sessions added using CRUD database.

static/js/accessibility_statement.js

@@ -0,0 +1,5 @@
+var _loading = true; 
+
+function hookupPageAccessibilityStatement() {
+    _loading = false;
+}

static/js/api.js

@@ -0,0 +1,123 @@
+import DOM from './dom.js';
+
+export default class API {
+    
+    static getCsrfToken() {
+        return document.querySelector(idCSRFToken).getAttribute('content');
+    }
+    
+    static async request(hashEndpoint, method = 'GET', data = null, params = null) {
+        const url = API.getUrlFromHash(hashEndpoint, params);
+        const csrfToken = API.getCsrfToken();
+        const options = {
+            method,
+            headers: {
+                'Content-Type': 'application/json',
+                [flagCsrfToken]: csrfToken,
+            }
+        };
+
+        if (data && (method === 'POST' || method === 'PUT' || method === 'PATCH')) {
+            data = { 
+                ...data, 
+                [flagCsrfToken]: csrfToken,
+            };
+            options.body = JSON.stringify(data);
+        }
+
+        try {
+            const response = await fetch(url, options);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            return await response.json();
+        } catch (error) {
+            console.error('API request failed:', error);
+            throw error;
+        }
+    }
+    
+    static getUrlFromHash(hash, params = null) {
+        if (hash == null) hash = hashPageHome;
+        let url = API.parameteriseUrl(_pathHost + hash, params);
+        return url;
+    }
+    static parameteriseUrl(url, params) {
+        if (params) {
+            url += '?' + new URLSearchParams(params).toString();
+        }
+        return url;
+    }
+    static goToUrl(url) {
+        window.location.href = url;
+    }
+    static goToHash(hash, params = null) {
+        const url = API.getUrlFromHash(hash, params);
+        API.goToUrl(url);
+    }
+
+    // specific api calls
+    /* Example:
+    getUsers: () => request('/users'),
+    getUserById: (id) => request(`/users/${id}`),
+    createUser: (userData) => request('/users', 'POST', userData),
+    updateUser: (id, userData) => request(`/users/${id}`, 'PUT', userData),
+    deleteUser: (id) => request(`/users/${id}`, 'DELETE'),
+    */
+
+    // User
+    // user
+    static async loginUser() {
+        let callback = {};
+        callback[flagCallback] = DOM.getHashPageCurrent();
+        return await API.request(hashPageUserLogin, 'POST', callback);
+    }
+    static async saveUsers(users, formFilters, comment) {
+        let dataRequest = {};
+        dataRequest[flagFormFilters] = DOM.convertForm2JSON(formFilters);
+        dataRequest[flagUser] = users;
+        dataRequest[flagComment] = comment;
+        return await API.request(hashSaveUserUser, 'POST', dataRequest);
+    }
+
+    // MTG Game API methods
+    static async saveGame(game, formFilters, comment) {
+        let dataRequest = {};
+        dataRequest[flagFormFilters] = DOM.convertForm2JSON(formFilters);
+        dataRequest[flagGame] = game;
+        dataRequest[flagComment] = comment;
+        return await API.request(hashSaveGame, 'POST', dataRequest);
+    }
+
+    static async getGamePlayers(gameId) {
+        const url = `/mtg/api/game/${gameId}/players`;
+        return await API.request(url, 'GET');
+    }
+    static async saveGamePlayers(players, formFilters, comment) {
+        let dataRequest = {};
+        dataRequest[flagFormFilters] = DOM.convertForm2JSON(formFilters);
+        dataRequest[flagPlayer] = players;
+        dataRequest[flagComment] = comment;
+        return await API.request(hashSaveGamePlayer, 'POST', dataRequest);
+    }
+
+    static async getGameRounds(gameId) {
+        const url = `/mtg/api/game/${gameId}/rounds`;
+        return await API.request(url, 'GET');
+    }
+
+    static async getGameDamageRecords(gameId) {
+        const url = `/mtg/api/game/${gameId}/damage-records`;
+        return await API.request(url, 'GET');
+    }
+    static async saveGameRoundPlayerDamages(rounds, damages, formFilters, comment) {
+        let dataRequest = {};
+        dataRequest[flagFormFilters] = DOM.convertForm2JSON(formFilters);
+        dataRequest[flagDamage] = damages;
+        dataRequest[flagRound] = rounds;
+        dataRequest[flagComment] = comment;
+        return await API.request(hashSaveGameRoundPlayerDamage, 'POST', dataRequest);
+    }
+
+
+}

static/js/app.js

@@ -0,0 +1,52 @@
+
+'use strict';
+
+import DOM from './dom.js';
+import Router from './router.js';
+
+
+class App {
+    constructor() {
+        this.dom = new DOM();
+        this.router = new Router();
+    }
+
+    initialize() {
+        this.setupEventListeners();
+        this.start();
+    }
+
+    setupEventListeners() {
+        // document.addEventListener('click', this.handleGlobalClick.bind(this));
+    }
+
+    handleGlobalClick(event) {
+    }
+
+    start() {
+        this.initPageCurrent();
+    }
+
+    initPageCurrent() {
+        this.router.loadPageCurrent();
+    }
+    
+}
+
+const app = new App();
+
+function domReady(fn) {
+    if (document.readyState !== 'loading') {
+        fn();
+    } else {
+        document.addEventListener('DOMContentLoaded', fn);
+    }
+}
+
+domReady(() => {
+    app.initialize();
+});
+
+window.app = app;
+
+export default app;

static/js/components/common/inputs/input_date.js

@@ -0,0 +1,183 @@
+
+import Validation from "../../../lib/validation.js";
+
+
+// Date picker inputs
+/*
+function hookupInputDatePickers(dateInputs, notFuture, notPast, parent, addClearOption) {
+
+    if (!Validation.isEmpty(dateInputs)) {
+
+        let currentInput, currentDateString, currentDate, exceptionsArray;
+
+        for (let i = 0; i < dateInputs.length; i++) {
+
+            currentInput = document.querySelectorAll(dateInputs[i]);
+            currentDateString = currentInput.val();
+            currentDate = (!Validation.isEmpty(currentDateString)) ? convertDDMMYYYYString2Date(currentDateString, false) : null;
+            exceptionsArray = (currentDate != null) ? [currentDate] : null;
+
+            turnInputIntoDatePicker(currentInput, notFuture, notPast, exceptionsArray);
+        }
+
+        if (!Validation.isEmpty(parent)) {
+            // stop user from manually typing date except backspace and delete
+            // which will clear the whole value to ensure we either have a whole
+            // date string or none
+
+            parent.addEventListener("keydown", isDatePickerSelector, function(event) {
+                if (event.keyCode == 46 | event.keyCode == 8) { // delete or backspace
+                    this.val('');
+                }
+                else {
+                    event.preventDefault();
+                    event.stopPropagation();
+                }
+
+                return false
+            });
+            
+            if (addClearOption) {
+
+                // if user right-clicks in date input, give option to clear the date
+                parent.contextMenu({
+                    selector: isDatePickerSelector,
+                    delay: 100,
+                    autoHide: true,
+                    position: function(opt, x, y) { 
+                        var event = opt.$trigger[0]?.ownerDocument?.defaultView?.event || event;
+                        opt.$menu.position({ my: 'center top', at: 'center top', of: event }); 
+                    },
+                    items: {
+                        "clears": {
+                            name: "Clear Date",
+                            icon: "delete",
+                            disabled: function(key, opt) { return Validation.isEmpty(document.querySelectorAll(opt.$trigger)); }, // if it's already empty, don't do anything
+                            callback: function(itemKey, opt, rootMenu, originalEvent) { var input = document.querySelectorAll(opt.$trigger); input.val(''); input.trigger('change'); }
+                        }
+                    }
+                });
+            }
+        }
+    }
+}
+
+function turnInputIntoDatePicker(input, notFuture, notPast, exceptionValueArray) {
+    
+    var beforeShowDayCallBack = null;
+
+    if (notFuture || notPast) {
+
+        var today = new Date();
+        today.setHours(0, 0, 0, 0);
+
+        var tomorrow = new Date();
+        tomorrow.setDate(today.getDate() + 1);
+        tomorrow.setHours(0, 0, 0, 0);
+
+        var hasExceptions = !Validation.isEmpty(exceptionValueArray);
+
+        beforeShowDayCallBack = function(date) {
+
+            var selectedDate = date.getTime();
+            var fieldHasException = hasExceptions && Validation.arrayContainsItem(exceptionValueArray, date);
+
+            if (notFuture && (tomorrow < selectedDate) && fieldHasException) return [false, 'redday', 'You cannot choose a future date'];
+            if (notPast && (selectedDate < today) && fieldHasException) return [false, 'redday', 'You cannot choose a past date'];
+
+            return [true, '', ''];
+        };
+    }
+
+    input.datepicker({
+        dateFormat: 'dd-mm-yy',
+        navigationAsDateFormat: true,
+        beforeShowDay: beforeShowDayCallBack
+    });
+
+    // prevent datepicker from appearing on right click
+    input.addEventListener('contextmenu', function() { this.datepicker('hide'); });
+
+    // Disable autocomplete suggestions appearing when clicking on input
+    input.getAttribute('autocomplete', 'off');
+}
+
+function setDatePickerDate(input, objDate) {
+    if (!Validation.isEmpty(objDate)) {
+        input.val('');
+    }
+    else {
+        input.datepicker('setDate', objDate);
+    }
+}
+
+function getDatePickerDate(input, adjust4DayLightSavings) {
+
+    var date = null;
+
+    if (!Validation.isEmpty(input)) {
+        date = input.datepicker('getDate');
+
+        if (adjust4DayLightSavings) {
+            formatDateDayLightSavingsTime(date);
+        }
+    }
+
+    return date;
+}
+
+function formatDateDayLightSavingsTime(date) {
+    // JSON.stringify removes hour delta for daylight savings 
+    // e.g. 13/11/2023 01:00:00 goes to 13/11/2023 00:00:00
+    // this adds an hour so it becomes the correct time when stringified
+    if (!Validation.isEmpty(date)) {
+        date.setTime(date.getTime() - date.getTimezoneOffset() * 60 * 1000)
+    }
+}
+*/
+function convertJSONDateString2Date(dateStr) {
+    if (Validation.isEmpty(dateStr)) return null;
+    if (dateStr instanceof Date) return dateStr;
+    return new Date(parseInt(dateStr.substr(6)));
+}
+
+function convertDDMMYYYYString2Date(dateStr, adjust4DayLightSavings) {
+    var date = null;
+
+    if (!Validation.isEmpty(dateStr)) {
+        if (dateStr instanceof Date) {
+            date = dateStr;
+        }
+        else {
+            var dateParts = dateStr.split('-');
+
+            if (dateParts.length == 3) {
+                date = new Date(dateParts[2], dateParts[1] - 1, dateParts[0]);
+            }
+        }
+
+        if (adjust4DayLightSavings && !Validation.isEmpty(date)) {
+            formatDateDayLightSavingsTime(date);
+        }
+    }
+
+    return date;
+}
+
+function convertDate2DDMMYYYYString(date) {
+    if (Validation.isEmpty(date)) return '';
+
+    try {
+        var dd = date.getDate();
+        var mm = date.getMonth() + 1;
+        var yyyy = date.getFullYear();
+
+        if (dd < 10) dd = '0' + dd;
+        if (dd < 10) mm = '0' + mm;
+        
+        return dd + '-' + mm + '-' + yyyy;
+    }
+    catch (err) {
+        return 'Formatting error';
+    }
+}

static/js/components/common/inputs/select.js

@@ -0,0 +1,14 @@
+
+
+function handleSelectCollapse(elementSelect) {
+    let optionSelected = document.querySelectorAll(elementSelect).querySelector('option:selected');
+    optionSelected.text(optionSelected.getAttribute(attrTextCollapsed));
+    optionSelected.classList.remove(flagExpanded);
+    optionSelected.classList.add(flagIsCollapsed);
+}
+function handleSelectExpand(elementSelect) {
+    let optionSelected = document.querySelectorAll(elementSelect).querySelector('option:selected');
+    optionSelected.text(optionSelected.getAttribute(attrTextExpanded));
+    optionSelected.classList.remove(flagIsCollapsed);
+    optionSelected.classList.add(flagExpanded);
+}

static/js/components/common/inputs/textarea.js

@@ -0,0 +1,45 @@
+
+import Common from "../../../lib/common.js";
+import Validation from "../../../lib/validation.js";
+
+export default class TextArea {
+    removeBlankTextAreaLines(textarea) {
+        textarea.val(textarea.val.replace(/(?:(?:\r\n|\r|\n)\s*){2}/gm, ''));
+    }
+
+    fitTextAreasToContent(parent) {
+        var textareas = parent.querySelector('textarea');
+
+        if (!Validation.isEmpty(textareas)) {
+            for (var t = 0; t < textareas.length; t++) {
+                fitTextAreaToContent(document.querySelectorAll(textareas[t]));
+            }
+        }
+    }
+
+    fitTextAreaToContent(textarea) {
+        // Trim new text
+        var txtNew = textarea.val().trim();
+        textarea.val(txtNew);
+
+        var elTextarea = textarea[0];
+
+        // Clear style height and set rows = 1
+        elTextarea.style.removeProperty('height');
+        textarea.getAttribute('rows', 1);
+
+        const paddingTop = Common.parseFloatWithDefault(textarea.style.paddingTop);
+        const paddingBottom = Common.parseFloatWithDefault(textarea.style.paddingBottom);
+        const borderTop = Common.parseFloatWithDefault(textarea.style.borderTop);
+        const borderBottom = Common.parseFloatWithDefault(textarea.style.borderBottom);
+        let heightDelta = paddingTop + paddingBottom + borderTop + borderBottom;
+        let heightNew = elTextarea.scrollHeight + heightDelta;
+
+        // If new height is less than 1 linem default to single line height
+        const heightSingleLine = Common.parseFloatWithDefault(textarea.style.heightSingleLine) + heightDelta;
+        if (heightNew < heightSingleLine) heightNew = heightSingleLine;
+
+        elTextarea.style.height = heightNew + 'px';
+    }
+}
+

static/js/components/common/table.js

@@ -0,0 +1,21 @@
+
+import Validation from "../../lib/validation.js";
+
+
+export default class Table {
+    getDataTableCellByNode(table, elRow, indexColumn) {
+        // normal jQuery selector won't pick up hidden columns
+        return document.querySelectorAll(table.DataTable().cells(elRow, indexColumn, null).nodes());
+    }
+    
+    outputTableElementDateInput(table, elRow, indexColumn, value) {
+    
+        let currentCell = getDataTableCellByNode(table, elRow, indexColumn);
+    
+        let dateTxt = '';
+    
+        if (!Validation.isEmpty(value)) {
+            if (typeof value === 'string') value = convertJSONDateString2Date(value);
+        }
+    }    
+}

static/js/components/common/temporary/overlay_confirm.js

@@ -0,0 +1,26 @@
+
+import Events from "../../../lib/events.js";
+
+export default class OverlayConfirm {
+    static hookup(callbackSuccess) {
+        Events.initialiseEventHandler(idOverlayConfirm + ' button.' + flagCancel, flagInitialised, (buttonCancel) => {
+            buttonCancel.addEventListener('click', () => {
+                let overlay = document.querySelector(idOverlayConfirm);
+                overlay.style.visibility = 'hidden';
+            });
+        });
+        Events.initialiseEventHandler(idOverlayConfirm + ' button.' + flagSubmit, flagInitialised, (buttonConfirm) => {
+            buttonConfirm.addEventListener('click', () => {
+                let overlay = document.querySelector(idOverlayConfirm);
+                let textarea = overlay.querySelector('textarea');
+                overlay.style.visibility = 'hidden';
+                callbackSuccess(textarea.value);
+            });
+        });
+    }
+    static show() {
+        let overlay = document.querySelector(idOverlayConfirm);
+        overlay.classList.remove(flagIsCollapsed);
+        overlay.style.visibility = 'visible';
+    }
+}

static/js/components/common/temporary/overlay_error.js

@@ -0,0 +1,19 @@
+
+import Events from "../../../lib/events.js";
+
+export default class OverlayError {
+    static hookup() {
+        Events.initialiseEventHandler(idOverlayError + ' button.' + flagCancel, flagInitialised, (buttonCancel) => {
+            buttonCancel.addEventListener('click', () => {
+                let overlay = document.querySelector(idOverlayError);
+                overlay.style.visibility = 'hidden';
+            });
+        });
+    }
+    static show(msgError) {
+        let overlay = document.querySelector(idOverlayError);
+        let labelError = overlay.querySelector(idLabelError);
+        labelError.innerText = msgError;
+        overlay.style.visibility = 'visible';
+    }
+}

static/js/components/common/video.js

@@ -0,0 +1,15 @@
+
+import Utils from '../../lib/utils.js';
+
+function videoPlay(elemVideo) {
+    if (!_loading) { // elemVideo.paused && 
+        elemVideo.play();
+        Utils.consoleLogIfNotProductionEnvironment("Playing video element: " + elemVideo.name);
+    }
+}
+
+function videoPause(elemVideo) {
+    elemVideo.pause();
+    Utils.consoleLogIfNotProductionEnvironment("Pausing video element: " + elemVideo.name);
+}
+

static/js/dom.js

@@ -0,0 +1,232 @@
+
+import Utils from "./lib/utils.js";
+import Validation from "./lib/validation.js";
+
+export default class DOM {
+    static setElementAttributesValuesCurrentAndPrevious(element, data) {
+        DOM.setElementAttributeValueCurrent(element, data);
+        DOM.setElementAttributeValuePrevious(element, data);
+    }
+    static setElementAttributeValueCurrent(element, data) {
+        element.setAttribute(attrValueCurrent, data);
+    }
+    static setElementAttributeValuePrevious(element, data) {
+        element.setAttribute(attrValuePrevious, data);
+    }
+    static setElementValuesCurrentAndPrevious(element, data) {
+        DOM.setElementValueCurrent(element, data);
+        DOM.setElementAttributeValuePrevious(element, data);
+    }
+    static setElementValueCurrent(element, data) {
+        DOM.setElementAttributeValueCurrent(element, data);
+        let tagName = element.tagName.toUpperCase();
+        if (element.type === "checkbox") {
+            element.checked = data;
+        }
+        else if (tagName === 'INPUT' || tagName === 'TEXTAREA' || tagName === 'SELECT') {
+            element.value = data;
+        }
+        else {
+            element.textContent = data;
+        }
+    }
+    static setElementValueCurrentIfEmpty(element, data) {
+        if (Validation.isEmpty(DOM.getElementValueCurrent(element))) {
+            DOM.setElementValueCurrent(element, data);
+        }
+    }
+    static getCellFromElement(element) {
+        return element.closest('td');
+    }
+    static getRowFromElement(element, flagRow) {
+        let selector = Validation.isEmpty(flagRow) ? 'tr' : 'tr.' + flagRow;
+        return element.closest(selector);
+    }
+    static getClosestParent(element, parentSelector) {
+        let parent = element.parentElement;
+        while (parent) {
+            if (parent.matches(parentSelector)) {
+                return parent;
+            }
+            parent = parent.parentElement;
+        }
+        return null;
+      }
+    static convertForm2JSON(elementForm) {
+        let dataForm = {};
+        if (Validation.isEmpty(elementForm)) {
+            return dataForm;
+        }
+        let containersFilter = elementForm.querySelectorAll('.' + flagContainerInput + '.' + flagFilter);
+        let containerFilter, labelFilter, keyFilter, filter;
+        for (let indexFilter = 0; indexFilter < containersFilter.length; indexFilter++) {
+            containerFilter = containersFilter[indexFilter];
+            labelFilter = containerFilter.querySelector('label');
+            keyFilter = labelFilter.getAttribute('for');
+            filter = containerFilter.querySelector(`#${keyFilter}`);
+            dataForm[keyFilter] = DOM.getElementValueCurrent(filter);
+        }
+        return dataForm;
+    }
+    static loadPageBody(contentNew) {
+        let pageBody = document.querySelector(idPageBody);
+        pageBody.innerHTML = contentNew;
+    }
+    static getHashPageCurrent() {
+        const hashPageCurrent = document.body.dataset.page;
+        return hashPageCurrent;
+    }
+    static updateAndCheckIsElementDirty(element) {
+        element.setAttribute(attrValueCurrent, DOM.getElementValueCurrent(element));
+        return DOM.isElementDirty(element);
+    }
+    static isElementDirty(element) {
+        let isDirty = element.getAttribute(attrValuePrevious) != element.getAttribute(attrValueCurrent);
+        DOM.handleDirtyElement(element, isDirty);
+        return isDirty;
+    }
+    static handleDirtyElement(element, isDirty) {
+        DOM.toggleElementHasClassnameFlag(element, isDirty, flagDirty);
+    }
+    static toggleElementHasClassnameFlag(element, elementHasFlag, flag) {
+        let elementAlreadyHasFlag = element.classList.contains(flag);
+        if (elementHasFlag == elementAlreadyHasFlag) return;
+        if (elementHasFlag) {
+            element.classList.add(flag);
+        } else {
+            element.classList.remove(flag);
+        }
+    }
+    static hasDirtyChildrenContainer(container) {
+        if (container == null) return false;
+        return container.querySelector('.' + flagDirty) != null;
+    }
+    static hasDirtyChildrenNotDeletedContainer(container) {
+        if (container == null || container.classList.contains(flagDelete)) return false;
+        return container.querySelector('.' + flagDirty + ':not(.' + flagDelete + ', .' + flagDelete + ' *)') != null;
+    }
+    static getElementValueCurrent(element) {
+        let returnVal = '';
+    
+        if (!Validation.isEmpty(element)) {
+    
+            let tagName = element.tagName.toUpperCase();
+            if (element.type === "checkbox") {
+                returnVal = element.checked;
+            }
+            /*
+            else if (element.classList.contains(flagIsDatePicker)) {
+                returnVal = getDatePickerDate(element, adjust4DayLightSavings);
+            }
+            */
+            else if (tagName === 'INPUT' || tagName === 'TEXTAREA' || tagName === 'SELECT') {
+                returnVal = element.value;
+            }
+            else if (element.classList.contains(flagButton) && element.classList.contains(flagActive)) { // tagName === 'BUTTON'
+                returnVal = element.classList.contains(flagDelete);
+            }
+            else if (tagName === 'TD') {
+                returnVal = DOM.getElementAttributeValueCurrent(element);
+            }
+            else if (tagName == 'SVG' && element.classList.contains(flagCheckbox)) {
+                returnVal = (element.classList.contains(flagIsChecked))
+            }
+            else {
+                returnVal = element.textContent;
+            }
+        }
+    
+        if (Validation.isEmpty(returnVal)) returnVal = '';
+    
+        return returnVal;
+    }
+    static getElementAttributeValueCurrent(element) {
+        // debugger;
+        if (Validation.isEmpty(element)) return null;
+        return element.getAttribute(attrValueCurrent);
+    }
+    static getElementAttributeValuePrevious(element) {
+        if (Validation.isEmpty(element)) return null;
+        return element.getAttribute(attrValuePrevious);
+    }
+    /* base_table.handleChangeElementCellTable
+    static updateAndCheckIsTableElementDirty(element) {
+        let wasDirty = DOM.isElementDirty(element);
+        let row = DOM.getRowFromElement(element);
+        let wasDirtyRow = DOM.hasDirtyChildrenNotDeletedContainer(row);
+        let isDirty = DOM.updateAndCheckIsElementDirty(element);
+        let cell = DOM.getCellFromElement(element);
+        Utils.consoleLogIfNotProductionEnvironment({element, row, cell, isDirty, wasDirty});
+        if (isDirty != wasDirty) {
+            DOM.handleDirtyElement(cell, isDirty);
+            let isDirtyRow = DOM.hasDirtyChildrenNotDeletedContainer(row);
+            Utils.consoleLogIfNotProductionEnvironment({isDirtyRow, wasDirtyRow});
+            if (isDirtyRow != wasDirtyRow) {
+                DOM.handleDirtyElement(row, isDirtyRow);
+            }
+        }
+    }
+    */
+    static scrollToElement(parent, element) {
+        // REQUIRED: parent has scroll-bar
+        parent.scrollTop(parent.scrollTop() + (element.offset().top - parent.offset().top));
+    }
+    static isElementInContainer(container, element) {
+
+        if (typeof jQuery === 'function') {
+            if (container instanceof jQuery) container = container[0];
+            if (element instanceof jQuery) element = element[0];
+        }
+
+        var containerBounds = container.getBoundingClientRect();
+        var elementBounds = element.getBoundingClientRect();
+
+        return (
+            containerBounds.top <= elementBounds.top &&
+            containerBounds.left <= elementBounds.left &&
+            ((elementBounds.top + elementBounds.height) <= (containerBounds.top + containerBounds.height)) &&
+            ((elementBounds.left + elementBounds.width) <= (containerBounds.left + containerBounds.width))
+        );
+    }
+    static alertError(errorType, errorText) {
+        alert(errorType + '\n' + errorText);
+    }
+    static createOptionUnselectedProductVariation() {
+        return {
+            [flagProductVariationType]: {
+                [flagNameAttrOptionText]: [flagName],
+                [flagNameAttrOptionValue]: [attrIdProductVariationType],
+                [flagName]: 'Select Variation Type',
+                [attrIdProductVariationType]: 0,
+            },
+            [flagProductVariation]: {
+                [flagNameAttrOptionText]: [flagName],
+                [flagNameAttrOptionValue]: [attrIdProductVariation],
+                [flagName]: 'Select Variation',
+                [attrIdProductVariation]: 0,
+            },
+        };
+    }
+    static createOption(optionJson) {
+        if (Validation.isEmpty(optionJson)) optionJson = {
+            text: 'Select',
+            value: 0,
+        };
+        let option = document.createElement('option');
+        option.value = optionJson.value;
+        option.textContent = optionJson.text;
+        option.selected = optionJson.selected;
+        return option;
+    }
+
+    static escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+    static unescapeHtml(html) {
+        const div = document.createElement('div');
+        div.innerHTML = html;
+        return div.textContent || div.innerText || '';
+    }
+}

static/js/lib/business_objects/business_objects.js

@@ -0,0 +1,29 @@
+
+import Utils from '../utils.js';
+
+export default class BusinessObjects {
+    static getOptionJsonFromObjectJsonAndKeys(objectJson, keyText, keyValue, valueSelected = null) {
+        return {
+            text: objectJson[keyText],
+            value: objectJson[keyValue],
+            selected: (objectJson[keyValue] == valueSelected),
+        };
+    }
+    static getOptionJsonFromObjectJson(objectJson, valueSelected = null) {
+        let keyText = objectJson[flagNameAttrOptionText];
+        let keyValue = objectJson[flagNameAttrOptionValue];
+        // Utils.consoleLogIfNotProductionEnvironment({objectJson, keyText, keyValue});
+        return BusinessObjects.getOptionJsonFromObjectJsonAndKeys(objectJson, keyText, keyValue, valueSelected);
+    }
+    static getObjectText(objectJson) {
+        return objectJson == null ? '' : objectJson[objectJson[flagNameAttrOptionText]];
+    }
+    static getListObjectsFromIdDictAndCsv(idDict, idCsv) {
+        let listObjects = [];
+        let ids = idCsv.split(',');
+        for (let id of ids) {
+            listObjects.push(idDict[id]);
+        }
+        return listObjects;
+    }
+}

static/js/lib/business_objects/store/product_permutation.js

@@ -0,0 +1,52 @@
+
+
+export default class ProductPermutation {
+    static getProductVariationsFromIdCsv(csvVariations) {
+        let productVariations = [];
+        if (!csvVariations) return productVariations;
+        let variationPairs = csvVariations.split(',');
+        if (variationPairs.length == 0) return productVariations;
+        let parts;
+        variationPairs.forEach((variationPair) => {
+            parts = variationPair.split(':');
+            if (parts.length == 2) {
+                let productVariationType = productVariationTypes[parts[0]];
+                productVariationType[flagProductVariations].some((productVariation) => {
+                    if (productVariation[attrIdProductVariation] == parts[1]) {
+                        productVariations.push([productVariationType, productVariation]);
+                        return true;
+                    }
+                    return false;
+                });
+            }
+        });
+        return productVariations;
+    }
+    static getProductVariationsPreviewFromIdCsv(csvVariations) {
+        let variationPairs = ProductPermutation.getProductVariationsFromIdCsv(csvVariations);
+        let preview = '';
+        if (variationPairs.length == 0) return preview;
+        let variationType, variation;
+        variationPairs.forEach((variationPair) => {
+            if (preview.length > 0) {
+                preview += '\n';
+            }
+            variationType = variationPair[0];
+            variation = variationPair[1];
+            preview += variationType[flagName] + ': ' + variation[flagName];
+        });
+        return preview;
+    }
+
+    static getProductVariationsIdCsvFromVariationTypeList(variationTypeList) {
+        let csvVariations = '';
+        if (Validation.isEmpty(variationTypeList)) return csvVariations;
+        variationTypeList.forEach((variationType) => {
+            if (csvVariations.length > 0) {
+                csvVariations += ',';
+            }
+            csvVariations += variationType[attrIdProductVariationType] + ':' + variationType[flagProductVariations][0][attrIdProductVariation];
+        });
+        return csvVariations;
+    }
+}

static/js/lib/common.js

@@ -0,0 +1,46 @@
+
+import Validation from "./validation.js";
+
+export default class Common {
+    static parseFloatWithDefault(value, defaultValue = 0.00) {
+        if (!Validation.isEmpty(value) && Validation.isValidNumber(value, true)) {
+            return parseFloat(value);
+        }
+        return defaultValue;
+    }
+
+    static allowClick() {
+        return !document.querySelectorAll("body").classList.contains(_dataLoadingFlag);
+    }
+
+    static displayOverlay(message, show, force) {
+
+        if (show) {
+            _overlayLoadingCount += 1;
+        }
+        else if (force) {
+            _overlayLoadingCount = 0;
+        }
+        else {
+            _overlayLoadingCount -= 1;
+            if (_overlayLoadingCount < 0) _overlayLoadingCount = 0;
+        }
+
+        var loadingImg = document.querySelectorAll(idImageLoading);
+        var overlay = document.querySelectorAll(loadingImg.closest("div.overlay"));
+
+        if (_overlayLoadingCount == 0) {
+
+            // Prevent short glimpse of prev. content before switch to new content
+            // caused by data load but not fully rendered
+            setTimeout(function() {
+                overlay.fadeOut();
+            }, 100);
+        }
+        else if (show && _overlayLoadingCount == 1) {
+            // only show once
+            loadingImg.innerHTML = message;
+            overlay.style.display = "";
+        }
+    }
+}

static/js/lib/constants.js

@@ -0,0 +1,5 @@
+
+const _dataLoadingFlag = 'data-loading'
+var _domParser = null;
+// var hashPageCurrent; // moved to layout
+const keyPublicStripe = 'pk_test_51OGrxlL7BuLKjoMpfpfw7bSmZZK1MhqMoQ5VhW2jUj7YtoEejO4vqnxKPiqTHHuh9U4qqkywbPCSI9TpFKtr4SYH007KHMWs68';

static/js/lib/events.js

@@ -0,0 +1,18 @@
+
+export default class Events {
+    static initialiseEventHandler(selectorElement, classInitialised, eventHandler) {
+        document.querySelectorAll(selectorElement).forEach(function(element) {
+            if (element.classList.contains(classInitialised)) return;
+            eventHandler(element);
+            element.classList.add(classInitialised);
+        });
+    }
+    static hookupEventHandler(eventType, selector, callback) {
+        Events.initialiseEventHandler(selector, flagInitialised, (element) => {
+            element.addEventListener(eventType, (event) => {
+                event.stopPropagation();
+                callback(event, element);
+            });
+        });
+    }
+}

static/js/lib/local_storage.js

@@ -0,0 +1,62 @@
+
+import Validation from "./validation.js";
+
+export default class LocalStorage {
+/*
+function getPageLocalStorage(pageHash) {
+
+    let ls;
+    try {
+        ls = JSON.parse(localStorage.getItem(pageHash));
+    } catch {
+
+    }
+
+    if (Validation.isEmpty(ls)) return {}
+
+    return ls;
+}
+function getPageLocalStorageCurrent() {
+
+    return JSON.parse(localStorage.getItem(hashPageCurrent));
+}
+
+function setPageLocalStorage(pageHash, newLS) {
+
+    localStorage.setItem(pageHash, JSON.stringify(newLS));
+}
+
+function clearPageLocalStorage(pageHash) {
+    localStorage.removeItem(pageHash);
+}
+
+function setupPageLocalStorage(pageHash) {
+
+    let ls = getPageLocalStorage(pageHash);
+
+    if (Validation.isEmpty(ls)) ls = {};
+
+    setPageLocalStorage(pageHash, ls);
+}
+*/
+
+    static getLocalStorage(key) {
+        return JSON.parse(localStorage.getItem(key));
+    }
+
+    static setLocalStorage(key, newLS) {
+        localStorage.setItem(key, JSON.stringify(newLS));
+    }
+
+/*
+function setupPageLocalStorageNext(pageHashNext) {
+    let lsOld = getPageLocalStorage(hashPageCurrent);
+    hashPageCurrent = pageHashNext;
+    clearPageLocalStorage(hashPageCurrent);
+    setupPageLocalStorage(hashPageCurrent);
+    let lsNew = getPageLocalStorage(hashPageCurrent);
+    lsNew[keyBasket] = (keyBasket in lsOld) ? lsOld[keyBasket] : {'items': []};
+    setPageLocalStorage(hashPageCurrent, lsNew);
+}
+*/
+}

static/js/lib/utils.js

@@ -0,0 +1,24 @@
+// Utility functions
+/*
+function $(selector) {
+    return document.querySelector(selector);
+}
+
+function $$(selector) {
+    return document.querySelectorAll(selector);
+}
+*/
+export default class Utils {
+    static getListFromDict(dict) {
+        let list = [];
+        for (let key in dict) {
+            list.push(dict[key]);
+        }
+        return list;
+    }
+    static consoleLogIfNotProductionEnvironment(message) {
+        if (environment.is_production != "true") {
+            console.log(message);
+        }
+    }
+}

static/js/lib/validation.js

@@ -0,0 +1,158 @@
+
+export default class Validation {
+    /*
+    isNullOrWhitespace(v) {
+        let txt = JSON.stringify(v).replace('/\s\g', '');
+        return (txt == '' || 'null');
+    }
+    */
+
+    static isEmpty(object) {
+
+        let isEmpty = true;
+
+        if (object !== null && object !== "null" && object !== undefined && object !== "undefined") {
+
+            if (object.length == undefined) {
+                isEmpty = false; // object exists but isn't a collection
+            }
+            else if (typeof object === "function") {
+                isEmpty = false; // object is reference
+            }
+            else { // string or collection
+
+                let isString = (typeof object == "string");
+
+                if (isString) object = object.trim();
+
+                if (object.length > 0) {
+
+                    if (isString) {
+                        isEmpty = false; // String greater than length 0
+                    }
+                    else {
+
+                        if (typeof object[0] != "string") {
+                            isEmpty = false;
+                        }
+                        else {
+                            for(let i = 0; i < object.length; i++) {
+                                if (object[i] != "") {
+                                    isEmpty = false;
+                                    break
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        return isEmpty;
+    }
+
+    static isValidNumber(value, positiveOnly) {
+        return !Validation.isEmpty(value) && !isNaN(value) && (!positiveOnly || parseFloat(value) > 0);
+    }
+
+    static getDataContentType(params) {
+
+        var data = null;
+        var contentType = '';
+
+        if (!Validation.isEmpty(params)) {
+
+            if (typeof params === "string") {
+                data = params;
+                contentType = "application/x-www-form-urlencoded; charset=UTF-8";
+            }
+            else {
+                data = JSON.stringify(params);
+                contentType = "application/json; charset=UTF-8";
+            }
+        }
+
+        return { Data: data, ContentType: contentType };
+    }
+
+    static arrayContainsItem(array, itemValue) {
+
+        var hasItem = false;
+
+        if (!Validation.isEmpty(array) && !Validation.isEmpty(itemValue)) {
+
+            var isJQueryElementArray = array[0] instanceof jQuery;
+
+            if (isJQueryElementArray) {
+
+                for (let i = 0; i < array.length; i++) {
+
+                    if (document.querySelectorAll(array[i]).is(itemValue)) {
+                        hasItem = true;
+                        break;
+                    }
+                }
+            }
+            else {
+
+                var isDate = array[0] instanceof Date;
+
+                if (isDate) {
+                    
+                    for (let i = 0; i < array.length; i++) {
+
+                        if (array[i].getTime() === itemValue.getTime()) {
+                            hasItem = true;
+                            break;
+                        }
+                    }
+                }
+                else {
+
+                    for (let i = 0; i < array.length; i++) {
+
+                        if (array[i] == itemValue) {
+                            hasItem = true;
+                            break;
+                        }
+                    }
+                }
+            }
+        }
+
+        return hasItem;
+    }
+
+    static dictHasKey(d, k) {
+        return (k in d);
+    }
+    static areEqualDicts(dict1, dict2) {
+        const keys1 = Object.keys(dict1);
+        const keys2 = Object.keys(dict2);
+        
+        if (keys1.length !== keys2.length) {
+        return false;
+        }
+        
+        for (let key of keys1) {
+        if (dict1[key] !== dict2[key]) {
+            return false;
+        }
+        }
+        
+        return true;
+    }
+
+    static imageExists(url, callback) {
+
+        var img = new Image();
+
+        img.onload = function() { callback(true); };
+        img.onerror = function() { callback(false); };
+        img.src = url;
+    }
+
+    static toFixedOrDefault(value, decimalPlaces, defaultValue = null) {
+        return Validation.isValidNumber(value) ? parseFloat(value).toFixed(decimalPlaces) : defaultValue;
+    }
+}

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

static/js/pages/base_table.js

@@ -0,0 +1,750 @@
+
+import BusinessObjects from "../lib/business_objects/business_objects.js";
+import Events from "../lib/events.js";
+import LocalStorage from "../lib/local_storage.js";
+import Validation from "../lib/validation.js";
+import BasePage from "./base.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 TableBasePage extends BasePage {
+    // static hash
+    // static attrIdRowObject
+    // callSaveTableContent
+
+    constructor(router) {
+        super(router);
+        this.cursorYInitial = null;
+        this.rowInitial = null;
+        this.placeholder = null;
+        this.dragSrcEl = null;
+        this.dragSrcRow = null;
+
+        this.hookupTableCellDdls = this.hookupTableCellDdls.bind(this);
+    }
+    
+    initialize(isPopState = false) {
+        throw new Error("Must implement initialize() method.");
+    }
+    sharedInitialize(isPopState = false, isSinglePageApp = false) {
+        if (!isPopState) {
+            super.sharedInitialize();
+            this.hookupFilters();
+            this.hookupButtonsSaveCancel();
+            this.hookupTableMain();
+            OverlayConfirm.hookup(() => {
+                if (isSinglePageApp) {
+                    this.saveRecordsTableDirtySinglePageApp();
+                }
+                else {
+                    this.saveRecordsTableDirty();
+                }
+            });
+        } else {
+            let dataPage = this.getLocalStoragePage();
+            let filters = dataPage[flagFormFilters];
+            let formFilters = TableBasePage.getFormFilters();
+            let filtersDefault = DOM.convertForm2JSON(formFilters);
+            if (!Validation.areEqualDicts(filters, filtersDefault)) {
+                this.callFilterTableContent();
+            }
+        }
+    }
+    hookupFilters() {
+        if (this.constructor === TableBasePage) {
+            throw new Error("Subclass of TableBasePage must implement method hookupFilters().");
+        }
+    }
+    sharedHookupFilters() {
+        this.hookupButtonApplyFilters();
+        this.hookupSearchTextFilter();
+    }
+    hookupFilterActive() {
+        let filterSelector = idFormFilters + ' #' + flagActiveOnly;
+        let filterActiveOld = document.querySelector(filterSelector);
+        filterActiveOld.removeAttribute('id');
+        let parentDiv = filterActiveOld.parentElement;
+        let isChecked = (DOM.getElementAttributeValuePrevious(parentDiv) == "True");
+        let filterActiveNew = document.querySelector(idFormFilters + ' div.' + flagActiveOnly + '.' + flagContainerInput + ' svg.' + flagActiveOnly);
+        filterActiveNew.setAttribute('id', flagActiveOnly);
+        if (isChecked) filterActiveNew.classList.add(flagIsChecked);
+
+        Events.hookupEventHandler("click", filterSelector, (event, filterActive) => {
+            Utils.consoleLogIfNotProductionEnvironment({ filterActive });
+            Utils.consoleLogIfNotProductionEnvironment({ [filterActive.tagName]: filterActive.tagName });
+            let svgElement = (filterActive.tagName.toUpperCase() == 'SVG') ? filterActive : filterActive.parentElement;
+            let wasChecked = svgElement.classList.contains(flagIsChecked);
+            if (wasChecked) {
+                svgElement.classList.remove(flagIsChecked);
+            }
+            else {
+                svgElement.classList.add(flagIsChecked);
+            }
+            return this.handleChangeFilter(event, filterActive);
+        });
+        let filter = document.querySelector(filterSelector);
+        let filterValuePrevious = DOM.getElementValueCurrent(filter);
+        filter.setAttribute(attrValueCurrent, filterValuePrevious);
+        filter.setAttribute(attrValuePrevious, filterValuePrevious);
+    }
+    hookupFilter(filterFlag, handler = (event, filter) => { return this.handleChangeFilter(event, filter); }) {
+        let filterSelector = idFormFilters + ' #' + filterFlag;
+        Events.hookupEventHandler("change", filterSelector, handler);
+        let filter = document.querySelector(filterSelector);
+        let filterValuePrevious = DOM.getElementValueCurrent(filter);
+        filter.setAttribute(attrValueCurrent, filterValuePrevious);
+        filter.setAttribute(attrValuePrevious, filterValuePrevious);
+    }
+    handleChangeFilter(event, filter) {
+        let isDirtyFilter = DOM.updateAndCheckIsElementDirty(filter);
+        let formFilters = TableBasePage.getFormFilters();
+        let areDirtyFilters = isDirtyFilter || DOM.hasDirtyChildrenContainer(formFilters);
+        let tbody = document.querySelector(idTableMain + ' tbody');
+        let rows = tbody.querySelectorAll(':scope > tr');
+        rows.forEach((row) => {
+            if (areDirtyFilters && !row.classList.contains(flagIsCollapsed)) row.classList.add(flagIsCollapsed);
+            if (!areDirtyFilters && row.classList.contains(flagIsCollapsed)) {
+                row.classList.remove(flagIsCollapsed);
+                let dirtyInputs = row.querySelectorAll('input.' + flagDirty);
+                dirtyInputs.forEach((dirtyInput) => {
+                    dirtyInput.value = DOM.getElementAttributeValueCurrent(dirtyInput);
+                });
+            }
+        });
+        if (areDirtyFilters) {
+            /*
+            tbody.querySelectorAll('tr').forEach((tr) => { 
+                if (!DOM.hasDirtyChildrenContainer(tr)) tr.remove(); 
+            });
+            */
+            tbody.innerHTML = '<div>Press "Apply Filters" to refresh the table.</div>' + tbody.innerHTML;
+            if (!tbody.classList.contains(flagIsCollapsed)) tbody.classList.add(flagIsCollapsed);
+        }
+        else {
+            let isDirtyLabel = tbody.querySelector(":scope > div");
+            if (isDirtyLabel != null) isDirtyLabel.remove();
+            if (tbody.classList.contains(flagIsCollapsed)) tbody.classList.remove(flagIsCollapsed);
+            let initialisedElements = tbody.querySelectorAll('.' + flagInitialised);
+            initialisedElements.forEach((initialisedElement) => {
+                initialisedElement.classList.remove(flagInitialised);
+            });
+            this.hookupTableMain();
+        }
+        this.updateAndToggleShowButtonsSaveCancel();
+    }
+    hookupFilterIsNotEmpty() {
+        this.hookupFilter(flagIsNotEmpty);
+    }
+    hookupButtonApplyFilters() {
+        Events.hookupEventHandler("click", idButtonApplyFilters, (event, button) => {
+            event.stopPropagation();
+            this.callFilterTableContent();
+        });
+    }
+    hookupSearchTextFilter() {
+        this.hookupFilter(flagSearch);
+    }
+    hookupFilterCommandCategory() {
+        this.hookupFilter(attrIdCommandCategory, (event, filterCommandCategory) => {
+            this.handleChangeFilter();
+            let isDirtyFilter = filterCommandCategory.classList.contains(flagDirty);
+            let idCommandCategory = DOM.getElementValueCurrent(filterCommandCategory);
+            console.log("filter commands unsorted");
+            console.log(Utils.getListFromDict(filterCommands));
+            let commandsInCategory = Utils.getListFromDict(filterCommands).filter(command => command[attrIdCommandCategory] == idCommandCategory);
+            let sortedCommands = commandsInCategory.sort((a, b) => a[flagName].localeCompare(b[flagName]));
+            let filterCommand = document.querySelector(idFormFilters + ' .' + flagCommand);
+            let idCommandPrevious = DOM.getElementAttributeValuePrevious(filterCommand);
+            filterCommand.innerHTML = '';
+            let optionJson, option;
+            option = DOM.createOption(null);
+            filterCommand.appendChild(option);
+            sortedCommands.forEach((command) => {
+                optionJson = BusinessObjects.getOptionJsonFromObjectJson(command, idCommandPrevious);
+                option = DOM.createOption(optionJson);
+                filterCommand.appendChild(option);
+            });
+            filterCommand.dispatchEvent(new Event('change'));
+            return isDirtyFilter;
+        });
+    }
+    hookupFilterCommand() {
+        this.hookupFilter(attrIdCommand);
+    }
+    hookupFilterLocation() {
+        this.hookupFilter(attrIdLocation);
+    }
+    /*
+    getAndLoadFilteredTableContent = () => {
+        this.callFilterTableContent()
+            .catch(error => console.error('Error:', error));
+    }
+    */
+    static getFormFilters() {
+        return document.querySelector(idFormFilters);
+    }
+    callFilterTableContent() {
+        let formFilters = TableBasePage.getFormFilters();
+        let filtersJson = DOM.convertForm2JSON(formFilters);
+        Utils.consoleLogIfNotProductionEnvironment("callFilterTableContent");
+        Utils.consoleLogIfNotProductionEnvironment("formFilters");
+        Utils.consoleLogIfNotProductionEnvironment(formFilters);
+        Utils.consoleLogIfNotProductionEnvironment("filtersJson");
+        Utils.consoleLogIfNotProductionEnvironment(filtersJson);
+        this.leave();
+        API.goToHash(this.constructor.hash, filtersJson);
+    }
+    callbackLoadTableContent(response) {
+        let table = TableBasePage.getTableMain();
+        let bodyTable = table.querySelector('tbody');
+        bodyTable.querySelectorAll('tr').forEach(function(row) { row.remove(); });
+        let rowsJson = response.data[flagRows];
+        if (!Validation.isEmpty(rowsJson) && rowsJson.every(row => row.hasOwnProperty('display_order'))) {
+            rowsJson = rowsJson.sort((a, b) => a.display_order - b.display_order);
+        }
+        rowsJson.forEach(this.loadRowTable.bind(this));
+        this.hookupTableMain();
+    }
+    static getTableMain() {
+        return document.querySelector(idTableMain);
+    }
+    loadRowTable(rowJson) {
+        throw new Error("Subclass of TableBasePage must implement method loadRowTable().");
+    }
+    getAndLoadFilteredTableContentSinglePageApp() {
+        this.callFilterTableContent()
+            .then(data => {
+                Utils.consoleLogIfNotProductionEnvironment('Table data received:', data);
+                this.callbackLoadTableContent(data);
+            })
+            .catch(error => console.error('Error:', error));
+    }
+    hookupButtonsSaveCancel() {
+        this.hookupButtonSave();
+        this.hookupButtonCancel();
+        this.toggleShowButtonsSaveCancel(false);
+    }
+    saveRecordsTableDirty() {
+        let records = this.getTableRecords(true);
+        if (records.length == 0) {
+            OverlayError.show('No records to save');
+            return;
+        }
+        let formElement = TableBasePage.getFormFilters();
+        let comment = DOM.getElementValueCurrent(document.querySelector(idTextareaConfirm));
+        /*
+        Utils.consoleLogIfNotProductionEnvironment({ formElement, comment, records });
+        Utils.consoleLogIfNotProductionEnvironment('records');
+        Utils.consoleLogIfNotProductionEnvironment(records);
+        debugger;
+        */
+        this.callSaveTableContent(records, formElement, comment)
+            .then(data => {
+                if (data[flagStatus] == flagSuccess) {
+                    if (_verbose) { 
+                        Utils.consoleLogIfNotProductionEnvironment('Records saved!');
+                        Utils.consoleLogIfNotProductionEnvironment('Data received:', data);
+                    }
+                    this.callFilterTableContent();
+                }
+                else {
+                    Utils.consoleLogIfNotProductionEnvironment("error: ", data[flagMessage]);
+                    OverlayError.show(data[flagMessage]);
+                }
+            })
+            .catch(error => console.error('Error:', error));
+    }
+    getTableRecords(dirtyOnly = false) {
+        let records = [];
+        let record;
+        document.querySelectorAll(idTableMain + ' > tbody > tr').forEach((row) => {
+            if (dirtyOnly && !DOM.hasDirtyChildrenContainer(row)) return;
+            record = this.getJsonRow(row);
+            records.push(record);
+        });
+        return records;
+    }
+    getJsonRow(row) {
+        throw new Error("Subclass of TableBasePage must implement method getJsonRow().");
+    }
+    saveRecordsTableDirtySinglePageApp() {
+        let records = this.getTableRecords(true);
+        if (records.length == 0) {
+            OverlayError.show('No records to save');
+            return;
+        }
+        let formElement = TableBasePage.getFormFilters();
+        let comment = DOM.getElementValueCurrent(document.querySelector(idTextareaConfirm));
+        this.callSaveTableContent(records, formElement, comment)
+            .then(data => {
+                if (data[flagStatus] == flagSuccess) {
+                    if (_verbose) { 
+                        Utils.consoleLogIfNotProductionEnvironment('Records saved!');
+                        Utils.consoleLogIfNotProductionEnvironment('Data received:', data);
+                    }
+                    this.callbackLoadTableContent(data);
+                }
+                else {
+                    Utils.consoleLogIfNotProductionEnvironment("error: ", data[flagMessage]);
+                    OverlayError.show(data[flagMessage]);
+                }
+            })
+            .catch(error => console.error('Error:', error));
+    }
+    hookupButtonCancel() {
+        Events.initialiseEventHandler('.' + flagContainer + '.' + flagSave + '.' + flagCancel + ' button.' + flagCancel, flagInitialised, (button) => {
+            button.addEventListener("click", (event) => {
+                event.stopPropagation();
+                button = event.target;
+                if (button.classList.contains(flagIsCollapsed)) return;
+                this.callFilterTableContent();
+            });
+            button.classList.add(flagIsCollapsed);
+        });
+    }
+    handleClickAddRowTable(event, button) {
+        event.stopPropagation();
+        _rowBlank.setAttribute(this.constructor.attrIdRowObject, -1 - _rowBlank.getAttribute(this.constructor.attrIdRowObject));
+        let tbody = document.querySelector(idTableMain + ' tbody');
+        if (tbody.classList.contains(flagIsCollapsed)) return;
+        let row = _rowBlank.cloneNode(true);
+        row.classList.remove(flagInitialised);
+        row.querySelectorAll('.' + flagInitialised).forEach(function(element) {
+            element.classList.remove(flagInitialised);
+        });
+        let countRows = document.querySelectorAll(idTableMain + ' > tbody > tr').length;
+        row.setAttribute(this.constructor.attrIdRowObject, -1 - countRows);
+        this.initialiseRowNew(tbody, row);
+        tbody.prepend(row);
+        tbody.scrollTop = 0;
+        this.hookupTableMain();
+        this.postInitialiseRowNewCallback(tbody);
+    }
+    initialiseRowNew(tbody, row) {
+        if (this.constructor === TableBasePage) {
+            throw new Error("Subclass of TableBasePage must implement method initialiseRowNew().");
+        }
+        // row.classList.remove(flagRowNew);
+    }
+    hookupTableMain() {
+        if (this.constructor === TableBasePage) {
+            throw new Error("Must implement hookupTableMain() method.");
+        }
+        Events.initialiseEventHandler(idTableMain, flagInitialised, (table) => {
+            this.cacheRowBlank();
+        });
+    }
+    cacheRowBlank() {
+        let selectorRowNew = idTableMain + ' tbody tr.' + flagRowNew;
+        let rowBlankTemp = document.querySelector(selectorRowNew);
+        Utils.consoleLogIfNotProductionEnvironment("row blank temp: ", rowBlankTemp);
+        let countRows = document.querySelectorAll(idTableMain + ' > tbody > tr').length;
+        _rowBlank = rowBlankTemp.cloneNode(true);
+        document.querySelectorAll(selectorRowNew).forEach(function(row) {
+            row.remove();
+        });
+        _rowBlank.setAttribute(this.constructor.attrIdRowObject, -1 - countRows);
+    }
+    postInitialiseRowNewCallback(tbody) {
+        if (this.constructor === TableBasePage) {
+            throw new Error("Subclass of TableBasePage must implement method postInitialiseRowNewCallback(tbody).");
+        }
+    }
+    initialiseSliderDisplayOrderRowNew(tbody, row) {
+        // let tdSelector = ':scope > tr > td.' + flagDisplayOrder;
+        // let tbody = document.querySelector('table' + (Validation.isEmpty(flagTable) ? '' : '.' + flagTable) + ' > tbody');
+        let slidersDisplayOrder = tbody.querySelectorAll(':scope > tr > td.' + flagDisplayOrder + ' input.' + flagSlider);
+        let maxDisplayOrder = 0;
+        slidersDisplayOrder.forEach((slider) => {
+            maxDisplayOrder = Math.max(maxDisplayOrder, parseFloat(DOM.getElementValueCurrent(slider)));
+        });
+        let sliderDisplayOrder = row.querySelector('td.' + flagDisplayOrder + ' .' + flagSlider);
+        DOM.setElementValuesCurrentAndPrevious(sliderDisplayOrder, maxDisplayOrder + 1);
+    }
+    hookupSlidersDisplayOrderTable() {
+        let selectorDisplayOrder = idTableMain + ' tbody tr td.' + flagDisplayOrder + ' input.' + flagSlider + '.' + flagDisplayOrder;
+        this.hookupChangeHandlerTableCells(selectorDisplayOrder);
+    }
+    hookupChangeHandlerTableCells(inputSelector, handler = (event, element) => { this.handleChangeNestedElementCellTable(event, element); }) {
+        Events.initialiseEventHandler(inputSelector, flagInitialised, (input) => {
+            input.addEventListener("change", (event) => {
+                handler(event, input);
+            });
+            handler(null, input);
+        });
+    }
+    handleChangeNestedElementCellTable(event, element) {
+        let wasDirtyParentRows = this.getAllIsDirtyRowsInParentTree(element);
+        let wasDirtyElement = element.classList.contains(flagDirty);
+        let isDirtyElement = DOM.updateAndCheckIsElementDirty(element);
+        // Utils.consoleLogIfNotProductionEnvironment({isDirtyElement, wasDirtyElement, wasDirtyParentRows});
+        // let td = DOM.getCellFromElement(element);
+        // DOM.setElementAttributeValueCurrent(td, DOM.getElementAttributeValueCurrent(element));
+        if (isDirtyElement != wasDirtyElement) {
+            // DOM.handleDirtyElement(td, isDirtyElement);
+            this.updateAndToggleShowButtonsSaveCancel();
+            this.cascadeChangedIsDirtyNestedElementCellTable(element, isDirtyElement, wasDirtyParentRows);
+        }
+    }
+    getAllIsDirtyRowsInParentTree(element) {
+        let rows = [];
+        let parent = element;
+        let isDirty;
+        while (parent) {
+            if (parent.tagName.toUpperCase() == 'TR') {
+                isDirty = parent.classList.contains(flagDirty)
+                rows.push(isDirty);
+            }
+            parent = parent.parentElement;
+        }
+        return rows;
+    }
+    cascadeChangedIsDirtyNestedElementCellTable(element, isDirtyElement, wasDirtyParentRows) {
+        if (Validation.isEmpty(wasDirtyParentRows)) return;
+        let tr = DOM.getRowFromElement(element);
+        let isDirtyRow = isDirtyElement || DOM.hasDirtyChildrenContainer(tr);
+        let wasDirtyRow = wasDirtyParentRows.shift();
+        Utils.consoleLogIfNotProductionEnvironment({isDirtyRow, wasDirtyRow});
+        if (isDirtyRow != wasDirtyRow) {
+            DOM.handleDirtyElement(tr, isDirtyRow);
+            this.updateAndToggleShowButtonsSaveCancel();
+            this.cascadeChangedIsDirtyNestedElementCellTable(tr.parentElement, isDirtyRow, wasDirtyParentRows);
+        }
+    }
+    hookupChangeHandlerTableCellsWhenNotCollapsed(inputSelector, handler = (event, element) => {
+        if (!element.classList.contains(flagIsCollapsed)) this.handleChangeNestedElementCellTable(event, element);
+    }) {
+        Events.hookupEventHandler("change", inputSelector, handler);
+    }
+    hookupFieldsCodeTable() {
+        this.hookupChangeHandlerTableCells(idTableMain + ' > tbody > tr > td.' + flagCode + ' > .' + flagCode);
+    }
+    hookupFieldsNameTable() {
+        this.hookupChangeHandlerTableCells(idTableMain + ' > tbody > tr > td.' + flagName + ' > .' + flagName);
+    }
+    hookupFieldsDescriptionTable() {
+        this.hookupChangeHandlerTableCells(idTableMain + ' > tbody > tr > td.' + flagDescription + ' > .' + flagDescription);
+    }
+    hookupFieldsNotesTable() {
+        this.hookupChangeHandlerTableCells(idTableMain + ' > tbody > tr > td.' + flagNotes + ' > .' + flagNotes);
+    }
+    hookupFieldsActive(flagTable = '', handleClickRowNew = (event, element) => { this.handleClickAddRowTable(event, element); }) {
+        let selectorButton = 'table.table-main' + (Validation.isEmpty(flagTable) ? '' : '.' + flagTable) + ' > tbody > tr > td.' + flagActive + ' .' + flagButton + '.' + flagActive;
+        let selectorButtonDelete = selectorButton + '.' + flagDelete;
+        let selectorButtonUndelete = selectorButton + ':not(.' + flagDelete + ')';
+        Utils.consoleLogIfNotProductionEnvironment("hookupFieldsActive: ", selectorButtonDelete, selectorButtonUndelete);
+        this.hookupButtonsRowDelete(selectorButtonDelete, selectorButtonUndelete);
+        this.hookupButtonsRowUndelete(selectorButtonDelete, selectorButtonUndelete);
+        Events.hookupEventHandler(
+            "click"
+            , 'table.table-main' + (Validation.isEmpty(flagTable) ? '' : '.' + flagTable) + ' > thead > tr > th.' + flagActive + ' .' + flagButton + '.' + flagActive
+            , (event, button) => { handleClickRowNew(event, button); }
+        );
+    }
+    hookupButtonsRowDelete(selectorButtonDelete, selectorButtonUndelete, changeHandler = (event, element) => { this.handleChangeNestedElementCellTable(event, element); }) {
+        Events.hookupEventHandler("click", selectorButtonDelete, (event, element) => {
+            this.handleClickButtonRowDelete(event, element, selectorButtonDelete, selectorButtonUndelete, (changeEvent, changeElement) => { changeHandler(changeEvent, changeElement); });
+        });
+    }
+    handleClickButtonRowDelete(event, element, selectorButtonDelete, selectorButtonUndelete, changeHandler = (event, element) => { this.handleChangeNestedElementCellTable(event, element); }) {
+        if (element.tagName.toUpperCase() != 'SVG') element = element.parentElement;
+        let valuePrevious = DOM.getElementAttributeValuePrevious(element);
+        let wasDirty = element.classList.contains(flagDirty);
+        let row = DOM.getRowFromElement(element);
+        if (row.classList.contains(flagRowNew) && !DOM.hasDirtyChildrenContainer(row)) {
+            row.parentNode.removeChild(row);
+        }
+        else {
+            let buttonAddTemplate = document.querySelector(idContainerTemplateElements + ' .' + flagButton + '.' + flagActive + '.' + flagAdd);
+            let buttonAdd = buttonAddTemplate.cloneNode(true);
+            DOM.setElementAttributeValuePrevious(buttonAdd, valuePrevious);
+            DOM.setElementAttributeValueCurrent(buttonAdd, false);
+            if (wasDirty) buttonAdd.classList.add(flagDirty);
+            element.replaceWith(buttonAdd);
+            changeHandler(null, buttonAdd);
+            this.hookupButtonsRowUndelete(selectorButtonDelete, selectorButtonUndelete, (changeEvent, changeElement) => { changeHandler(changeEvent, changeElement); });
+        }
+        this.updateAndToggleShowButtonsSaveCancel();
+    }
+    hookupButtonsRowUndelete(selectorButtonDelete, selectorButtonUndelete, changeHandler = (event, element) => { this.handleChangeNestedElementCellTable(event, element); }) {
+        Events.hookupEventHandler("click", selectorButtonUndelete, (event, element) => {
+            this.handleClickButtonRowUndelete(event, element, selectorButtonDelete, selectorButtonUndelete, (changeEvent, changeElement) => { changeHandler(changeEvent, changeElement); });
+        });
+    }
+    handleClickButtonRowUndelete(event, element, selectorButtonDelete, selectorButtonUndelete, changeHandler = (event, element) => { this.handleChangeNestedElementCellTable(event, element); }) {
+        if (element.tagName.toUpperCase() != 'SVG') element = element.parentElement;
+        let valuePrevious = DOM.getElementAttributeValuePrevious(element);
+        let wasDirty = DOM.isElementDirty(element);
+        let buttonDeleteTemplate = document.querySelector(idContainerTemplateElements + ' .' + flagButton + '.' + flagActive + '.' + flagDelete);
+        let buttonDelete = buttonDeleteTemplate.cloneNode(true);
+        DOM.setElementAttributeValuePrevious(buttonDelete, valuePrevious);
+        DOM.setElementAttributeValueCurrent(buttonDelete, true);
+        if (wasDirty) buttonDelete.classList.add(flagDirty);
+        element.replaceWith(buttonDelete);
+        changeHandler(null, buttonDelete);
+        this.hookupButtonsRowDelete(selectorButtonDelete, selectorButtonUndelete, (changeEvent, changeElement) => { changeHandler(changeEvent, changeElement); });
+        this.updateAndToggleShowButtonsSaveCancel();
+    }
+    hookupTdsAccessLevel() {
+        this.hookupTableCellDdlPreviews(flagAccessLevel, Utils.getListFromDict(accessLevels));
+    }
+    hookupTableCellDdlPreviews(
+        fieldFlag
+        , optionList
+        , cellSelector = null
+        , ddlHookup = (ddlSelector) => { this.hookupTableCellDdls(ddlSelector); }
+        , changeHandler = (event, element) => { this.handleChangeNestedElementCellTable(event, element); }
+    ) {
+        if (cellSelector == null) cellSelector = idTableMain + ' > tbody > tr > td.' + fieldFlag;
+        Events.hookupEventHandler("click", cellSelector + ' div.' + fieldFlag, (event, div) => {
+            this.handleClickTableCellDdlPreview(
+                event
+                , div
+                , fieldFlag
+                , optionList
+                , cellSelector
+                , (ddlSelector) => { ddlHookup(
+                    ddlSelector
+                    , (event, element) => { changeHandler(event, element); }
+                ); }
+            );
+        });
+        ddlHookup(cellSelector + ' select.' + fieldFlag);
+    }
+    hookupTableCellDdls(ddlSelector, changeHandler = (event, element) => { this.handleChangeNestedElementCellTable(event, element); }) {
+        this.hookupChangeHandlerTableCells(ddlSelector, (event, element) => { changeHandler(event, element); });
+    }
+    handleClickTableCellDdlPreview(event, div, fieldFlag, optionObjectList, cellSelector = null, ddlHookup = (cellSelector) => { this.hookupTableCellDdls(cellSelector); }) {
+        if (Validation.isEmpty(cellSelector)) cellSelector = idTableMain + ' > tbody > tr > td.' + fieldFlag;
+        let idSelected = DOM.getElementAttributeValueCurrent(div);
+        let td = DOM.getCellFromElement(div);
+        td.innerHTML = '';
+        let ddl = document.createElement('select');
+        ddl.classList.add(fieldFlag);
+        DOM.setElementValuesCurrentAndPrevious(ddl, idSelected);
+        let optionJson, option;
+        if (_verbose) { 
+            Utils.consoleLogIfNotProductionEnvironment("click table cell ddl preview");
+            Utils.consoleLogIfNotProductionEnvironment({optionObjectList, cellSelector});
+        }
+        option = DOM.createOption(null);
+        ddl.appendChild(option);
+        optionObjectList.forEach((optionObjectJson) => {
+            optionJson = BusinessObjects.getOptionJsonFromObjectJson(optionObjectJson, idSelected);
+            option = DOM.createOption(optionJson);
+            ddl.appendChild(option);
+        });
+        td.appendChild(ddl);
+        let ddlSelector = cellSelector + ' select.' + fieldFlag;
+        ddlHookup(ddlSelector);
+    }
+    /*
+    hookupTableCellDDlPreviewsWhenNotCollapsed(cellSelector, optionList, ddlHookup = (event, element) => { this.hookupTableCellDdls(event, element); }) {
+        Events.hookupEventHandler("click", cellSelector + ' div', (event, div) => {
+            this.handleClickTableCellDdlPreview(event, div, optionList, cellSelector, (event, element) => { ddlHookup(event, element); });
+        });
+    }
+    */
+    toggleColumnCollapsed(flagColumn, isCollapsed) {
+        this.toggleColumnHasClassnameFlag(flagColumn, isCollapsed, flagIsCollapsed);
+    }
+    toggleColumnHeaderCollapsed(flagColumn, isCollapsed) {
+        this.toggleColumnHasClassnameFlag(flagColumn, isCollapsed, flagIsCollapsed);
+    }
+
+    hookupFieldsCommandCategory(idTable = null) {
+        if (idTable == null) idTable = idTableMain;
+        this.hookupTableCellDdlPreviews(
+            flagCommandCategory
+            , Utils.getListFromDict(filterCommandCategories).sort((a, b) => a[flagName].localeCompare(b[flagName]))
+            , idTable + ' > tbody > tr > td.' + flagCommandCategory // + ' .' + flagCommandCategory
+            , (cellSelector) => { this.hookupCommandCategoryDdls(cellSelector); }
+        );
+    }
+    hookupCommandCategoryDdls(ddlSelector) {
+        this.hookupChangeHandlerTableCells(ddlSelector, (event, element) => { this.handleChangeCommandCategoryDdl(event, element); });
+    }
+    handleChangeCommandCategoryDdl(event, ddlCategory) {
+        let row = DOM.getRowFromElement(ddlCategory);
+        let idCommandCategoryRowOld = this.getIdCommandCategoryRow(row); // DOM.getElementAttributeValueCurrent(ddlCategory);
+        this.handleChangeNestedElementCellTable(event, ddlCategory);
+        let idCommandCategoryRowNew = this.getIdCommandCategoryRow(row); // DOM.getElementAttributeValueCurrent(ddlCategory);
+        if (
+            idCommandCategoryRowOld == idCommandCategoryRowNew
+            || idCommandCategoryRowNew == 0
+        ) return;
+        console.log({ idCommandCategoryRowNew, idCommandCategoryRowOld });
+        let idCommandCategoryFilter = this.getIdCommandCategoryFilter();
+        let tdCommand = row.querySelector('td.' + flagCommand);
+        tdCommand.dispatchEvent(new Event('click'));
+        let ddlCommand = row.querySelector('td.' + flagCommand + ' select.' + flagCommand);
+        ddlCommand.innerHTML = '';
+        ddlCommand.appendChild(DOM.createOption(null));
+        let optionJson, option;
+        let commandsInCategory = Utils.getListFromDict(filterCommands).filter(command => 
+            (
+                command[attrIdCommandCategory] == idCommandCategoryRowNew
+                || idCommandCategoryRowNew == 0
+            )
+            && (
+                   command[attrIdCommandCategory] == idCommandCategoryFilter
+                || idCommandCategoryFilter == 0
+            )
+        );
+        let sortedCommands = commandsInCategory.sort((a, b) => a[flagName].localeCompare(b[flagName]));
+        sortedCommands.forEach((command) => {
+            optionJson = BusinessObjects.getOptionJsonFromObjectJson(command);
+            option = DOM.createOption(optionJson);
+            ddlCommand.appendChild(option);
+        });
+        this.handleChangeNestedElementCellTable(event, ddlCommand);
+    }
+    hookupFieldsCommand(idTable = null) {
+        if (idTable == null) idTable = idTableMain;
+        Events.hookupEventHandler("click", idTable + ' > tbody > tr > td.' + flagCommand + ' div.' + flagCommand, (event, div) => {
+            Utils.consoleLogIfNotProductionEnvironment(div);
+            let parentTr = DOM.getRowFromElement(div);
+            Utils.consoleLogIfNotProductionEnvironment({ div, parentTr });
+            let tdCommandCategory = parentTr.querySelector('td.' + flagCommandCategory);
+            let idCommandCategoryRow = this.getIdCommandCategoryRow(parentTr); // DOM.getElementAttributeValueCurrent(tdCommandCategory);
+            let idCommandCategoryFilter = this.getIdCommandCategoryFilter();
+            let filterCommandList = Utils.getListFromDict(filterCommands);
+            let commandsInCategory = filterCommandList.filter(command => 
+                (
+                    command[attrIdCommandCategory] == idCommandCategoryRow
+                    || idCommandCategoryRow == 0
+                )
+                && (
+                       command[attrIdCommandCategory] == idCommandCategoryFilter
+                    || idCommandCategoryFilter == 0
+                )
+            );
+            let sortedCommands = commandsInCategory.sort((a, b) => a[flagName].localeCompare(b[flagName]));
+            Utils.consoleLogIfNotProductionEnvironment({ tdCommandCategory, idCommandCategoryRow, idCommandCategoryFilter, filterCommandList, commandsInCategory });
+            Utils.consoleLogIfNotProductionEnvironment(filterCommandList);
+            this.handleClickTableCellDdlPreview(
+                event
+                , div
+                , flagCommand // fieldFlag
+                , sortedCommands // optionList
+                , idTable + ' > tbody > tr > td.' + flagCommand // cellSelector
+                , (cellSelector) => { this.hookupTableCellDdls(
+                    cellSelector
+                    , (event, element) => { this.handleChangeCommandDdl(event, element); }
+                ); }
+            );
+        });
+        this.hookupTableCellDdls(
+            idTable + ' > tbody > tr > td.' + flagCommand + ' select.' + flagCommand
+            , (event, element) => { this.handleChangeCommandDdl(event, element); }
+        );
+    }
+    handleChangeCommandDdl(event, ddlCommand) {
+        // console.log("handle change command ddl");
+        let row = DOM.getRowFromElement(ddlCommand);
+        this.handleChangeNestedElementCellTable(event, ddlCommand);
+        let idCommandCategoryRowOld = this.getIdCommandCategoryRow(row);
+        let idCommandNew = this.getIdCommandRow(row);
+        let commandNew = filterCommands[idCommandNew];
+        // console.log({ idCommandCategoryRowOld, commandNew });
+        if (commandNew == null || idCommandCategoryRowOld == commandNew[attrIdCommandCategory]) return;
+        let divCommandCategory = row.querySelector('td.' + flagCommandCategory + ' div');
+        if (divCommandCategory) divCommandCategory.dispatchEvent(new Event('click'));
+        let ddlCommandCategory = row.querySelector('td.' + flagCommandCategory + ' select.' + flagCommandCategory);
+        DOM.setElementValueCurrent(ddlCommandCategory, commandNew[attrIdCommandCategory]);
+        // console.log({ ddlCommandCategory, commandNew });
+        this.handleChangeNestedElementCellTable(event, ddlCommandCategory);
+    }
+    getIdCommandCategoryRow(tr) {
+        let elementCommandCategory = tr.querySelector('td.' + flagCommandCategory + ' .' + flagCommandCategory);
+        return DOM.getElementAttributeValueCurrent(elementCommandCategory);
+    }
+    getIdCommandCategoryFilter() {
+        let formFilters = TableBasePage.getFormFilters();
+        let idCommandCategory = 0;
+        if (formFilters == null) return idCommandCategory;
+        let commandCategoryFilter = formFilters.querySelector('#' + attrIdCommandCategory);
+        let commandFilter = formFilters.querySelector('#' + attrIdCommand);
+        let valueCurrentCommandCategoryFilter = DOM.getElementAttributeValueCurrent(commandCategoryFilter);
+        Utils.consoleLogIfNotProductionEnvironment({ valueCurrentCommandCategoryFilter });
+        if (valueCurrentCommandCategoryFilter == "") {
+            let valueCurrentCommandFilter = DOM.getElementAttributeValueCurrent(commandFilter);
+            Utils.consoleLogIfNotProductionEnvironment({ valueCurrentCommandFilter });
+            if (valueCurrentCommandFilter != "") {
+                let command = filterCommands[valueCurrentCommandFilter];
+                idCommandCategory = command[attrIdCommandCategory];
+            }
+        } else {
+            idCommandCategory = Number(valueCurrentCommandCategoryFilter);
+        }
+        return idCommandCategory;
+    }
+    getHasCommandCategoryFilter() {
+        let idCommandCategoryFilter = this.getIdCommandCategoryFilter();
+        return !(Validation.isEmpty(idCommandCategoryFilter) || idCommandCategoryFilter == 0);
+    }
+    getIdCommandRow(tr) {
+        let elementCommand = tr.querySelector('td.' + flagCommand + ' .' + flagCommand);
+        return DOM.getElementAttributeValueCurrent(elementCommand);
+    }
+    getIdCommandFilter() {
+        let formFilters = TableBasePage.getFormFilters();
+        let commandFilter = formFilters.querySelector('#' + attrIdCommand);
+        let valueCurrentCommandFilter = DOM.getElementAttributeValueCurrent(commandFilter);
+        let idCommand = Number(valueCurrentCommandFilter);
+        return idCommand;
+    }
+    getHasCommandFilter() {
+        let idCommandFilter = this.getIdCommandFilter();
+        return !(Validation.isEmpty(idCommandFilter) || idCommandFilter == 0);
+    }
+    /*
+    createTdActive(isActive) {
+        let tdActive = document.createElement("td");
+        tdActive.classList.add(flagActive);
+        let buttonActive = document.createElement("button");
+        buttonActive.classList.add(flagActive);
+        buttonActive.classList.add(isActive ? flagDelete : flagAdd);
+        buttonActive.textContent = isActive ? 'x' : '+';
+        DOM.setElementAttributesValuesCurrentAndPrevious(buttonActive, isActive);
+        tdActive.appendChild(buttonActive);
+        return tdActive;
+    }
+    */
+    leave() {
+        if (this.constructor === TableBasePage) {
+            throw new Error("Must implement leave() method.");
+        }
+        super.leave();
+        let formFilters = TableBasePage.getFormFilters();
+        let dataPage = {};
+        dataPage[flagFormFilters] = DOM.convertForm2JSON(formFilters);
+        this.setLocalStoragePage(dataPage);
+    }
+
+    toggleColumnHasClassnameFlag(columnFlag, isRequiredFlag, classnameFlag) {
+        let table = TableBasePage.getTableMain();
+        let columnTh = table.querySelector('th.' + columnFlag);
+        let columnThHasFlag = columnTh.classList.contains(classnameFlag);
+        if (isRequiredFlag == columnThHasFlag) return;
+        DOM.toggleElementHasClassnameFlag(columnTh, isRequiredFlag, classnameFlag);
+    }
+    toggleColumnHeaderHasClassnameFlag(columnFlag, isRequiredFlag, classnameFlag) {
+        let table = TableBasePage.getTableMain();
+        let columnTh = table.querySelector('th.' + columnFlag);
+        DOM.toggleElementHasClassnameFlag(columnTh, isRequiredFlag, classnameFlag);
+    }
+
+    updateAndToggleShowButtonsSaveCancel() {
+        let pageBody = document.querySelector(idPageBody);
+        let isDirty = DOM.hasDirtyChildrenContainer(pageBody);
+
+        console.log({ pageBody, isDirty });
+
+        this.toggleShowButtonsSaveCancel(isDirty);
+    }
+}

static/js/pages/legal/accessibility_report.js

@@ -0,0 +1,17 @@
+import BasePage from "../base.js";
+
+export default class PageAccessibilityReport extends BasePage {
+    static hash = hashPageAccessibilityReport;
+
+    constructor(router) {
+        super(router);
+    }
+
+    initialize() {
+        this.sharedInitialize();
+    }
+
+    leave() {
+        super.leave();
+    }
+}

static/js/pages/legal/accessibility_statement.js

@@ -0,0 +1,17 @@
+import BasePage from "../base.js";
+
+export default class PageAccessibilityStatement extends BasePage {
+    static hash = hashPageAccessibilityStatement;
+
+    constructor(router) {
+        super(router);
+    }
+
+    initialize() {
+        this.sharedInitialize();
+    }
+
+    leave() {
+        super.leave();
+    }
+}

static/js/pages/legal/license.js

@@ -0,0 +1,18 @@
+
+import BasePage from "../base.js";
+
+export default class PageLicense extends BasePage {
+    static hash = hashPageLicense;
+
+    constructor(router) {
+        super(router);
+    }
+
+    initialize() {
+        this.sharedInitialize();
+    }
+
+    leave() {
+        super.leave();
+    }
+}

static/js/pages/legal/privacy_policy.js

@@ -0,0 +1,18 @@
+
+import BasePage from "../base.js";
+
+export default class PagePrivacyPolicy extends BasePage {
+    static hash = hashPagePrivacyPolicy;
+
+    constructor(router) {
+        super(router);
+    }
+
+    initialize() {
+        this.sharedInitialize();
+    }
+
+    leave() {
+        super.leave();
+    }
+}

static/js/pages/legal/retention_schedule.js

@@ -0,0 +1,17 @@
+import BasePage from "../base.js";
+
+export default class PageRetentionSchedule extends BasePage {
+    static hash = hashPageDataRetentionSchedule;
+
+    constructor(router) {
+        super(router);
+    }
+
+    initialize() {
+        this.sharedInitialize();
+    }
+
+    leave() {
+        super.leave();
+    }
+}

static/js/pages/mixin.js

@@ -0,0 +1,20 @@
+
+
+export default class MixinPage {
+    constructor(pageCurrent) {
+        this.page = pageCurrent;
+    }
+
+    initialize() {
+        Utils.consoleLogIfNotProductionEnvironment('hookup start for ', this.page.hash);
+        this.hookupFilters();
+        this.hookupLocalStorage();
+    }
+    hookupFilters() {
+    }
+    hookupLocalStorage() {
+        
+    }
+    
+    leave() {}
+}

static/js/pages/mixin_table.js

@@ -0,0 +1,19 @@
+
+import MixinPage from "./mixin.js";
+
+export default class TableMixinPage extends MixinPage {
+    constructor(pageCurrent) {
+        super(pageCurrent);
+    }
+    initialize() {
+        super.initialize();
+        this.hookupFilters();
+        this.hookupTable();
+    }
+    hookupFilters() {
+        // Implement filter-specific functionality here
+    }
+    hookupTable() {
+        // Implement table-specific functionality here
+    }
+}

static/js/pages/tcg/mtg_game.js

@@ -0,0 +1,691 @@
+
+
+import API from "../../api.js";
+import TableBasePage from "../base_table.js";
+import DOM from "../../dom.js";
+import Events from "../../lib/events.js";
+
+export default class PageMtgGame extends TableBasePage {
+    static hash = hashPageMtgGame;
+    static attrIdRowObject = attrGameId;
+    callSaveTableContent = API.saveGame;
+
+    constructor(router) {
+        super(router);
+    }
+
+    initialize() {
+        this.sharedInitialize();
+        this.hookupTcgGame();
+    }
+    hookupFilters() {
+        // this.sharedHookupFilters();
+    }
+    loadRowTable(rowJson) {
+        return;
+    }
+    getJsonRow(row) {
+        return;
+    }
+    initialiseRowNew(tbody, row) {
+        
+    }
+    postInitialiseRowNewCallback(tbody) {
+        
+    }
+
+    hookupTableMain() {
+        super.hookupTableMain();
+    }
+    hookupTcgGame() {
+        this.initGamePage();
+        let pageHeading = document.querySelector('.container.company-name .tcg-title.company-name');
+        pageHeading.innerText = `MTG Game #${gameId}`;
+    }
+
+    initGamePage() {
+        // Load existing game state from API or show setup
+        PageMtgGame.updatePlayerSetup();
+        if (typeof gameId !== 'undefined' && gameId) {
+            this.loadGameFromServer();
+        }
+        /*
+        else {
+            PageMtgGame.updatePlayerSetup();
+        }
+        */
+        
+        PageMtgGame.hookupResetButton();
+        PageMtgGame.hookupPlayerCountInput();
+        this.hookupStartGameButton();
+        /*
+        this.hookupCommanderDeathIncrementButtons();
+        this.hookupEliminateCommanderButtons();
+        this.hookupPlayerLifeIncrementButtons();
+        this.hookupCommanderDamageIncrementButtons();
+        */
+    }
+    static hookupResetButton() {
+        const resetGameButton = document.querySelector('header.game-header .header-right .btn-tcg.btn-tcg-secondary');
+        if (resetGameButton) {
+            resetGameButton.addEventListener('click', PageMtgGame.resetGame);
+        }
+    }
+    static hookupPlayerCountInput() {
+        const playerCountInput = document.getElementById('playerCount');
+        if (playerCountInput) {
+            playerCountInput.addEventListener('change', PageMtgGame.updatePlayerSetup);
+        }
+    }
+    hookupStartGameButton() {
+        const startGameButton = document.querySelector('.setup-section .setup-actions .btn-tcg');
+        if (startGameButton) {
+            startGameButton.addEventListener('click', () => { this.startGame(); });
+        }
+    }
+    /*
+    hookupCommanderDeathIncrementButtons() {
+        const commanderDeathIncremementButtons = document.querySelectorAll('#players-grid .player-card .commander-deaths .death-btn');
+        if (commanderDeathIncremementButtons) {
+            commanderDeathIncremementButtons.forEach((button) => {
+                button.addEventListener('click', PageMtgGame.changeCommanderDeaths);
+            });
+        }
+    }
+    hookupEliminateCommanderButtons() {
+        const eliminateCommanderButtons = document.querySelector('#players-grid .player-card .eliminate-btn');
+        if (eliminateCommanderButtons) {
+            eliminateCommanderButtons.forEach((button) => {
+                button.addEventListener('click', PageMtgGame.toggleEliminate);
+            });
+        }
+    }
+    hookupPlayerLifeIncrementButtons() {
+        const playerLifeIncrementButtons = document.querySelector('#players-grid .player-card .eliminate-btn');
+        if (playerLifeIncrementButtons) {
+            playerLifeIncrementButtons.forEach((button) => {
+                button.addEventListener('click', PageMtgGame.changeLife);
+            });
+        }
+    }
+    hookupCommanderDamageIncrementButtons() {
+        const commanderDamageIncrementButtons = document.querySelector('#players-grid .player-card .eliminate-btn');
+        if (commanderDamageIncrementButtons) {
+            commanderDamageIncrementButtons.forEach((button) => {
+                button.addEventListener('click', PageMtgGame.changeCommanderDamage);
+            });
+        }
+    }
+    */
+
+    async loadGameFromServer() {
+        console.log("loading game from server");
+        try {
+            // Fetch players, rounds, and damage records from API
+            const [playersResponse, roundsResponse, damageResponse] = await Promise.all([
+                  API.getGamePlayers(gameId)
+                , API.getGameRounds(gameId)
+                , API.getGameDamageRecords(gameId)
+            ]);
+            console.log({ playersResponse, damageResponse });
+
+            let setupSection = document.getElementById('setupSection');
+            let gameSection = document.getElementById('gameSection');
+            setupSection.classList.remove('hidden');
+            gameSection.classList.add('hidden');
+
+            if (playersResponse.status !== 'success') {
+                console.error('Failed to load players:', playersResponse.message);
+                return;
+            }
+
+            const savedPlayers = playersResponse.data || [];
+            const savedRounds = roundsResponse.status === 'success' ? (roundsResponse.data || []) : [];
+            const savedDamageRecords = damageResponse.status === 'success' ? (damageResponse.data || []) : [];
+            
+            players = savedPlayers;
+            rounds = savedRounds;
+            damageRecords = savedDamageRecords;
+
+            if (savedPlayers.length === 0) {
+                // No players yet, show setup section
+                return;
+            }
+
+            // Hide setup, show game
+            setupSection.classList.add('hidden');
+            gameSection.classList.remove('hidden');
+
+            console.log({ savedPlayers, damageRecords });
+
+            // Render players to DOM
+            this.renderPlayers();
+
+        } catch (error) {
+            console.error('Error loading game from server:', error);
+        }
+    }
+
+    renderPlayers() {
+        const grid = document.getElementById('playersGrid');
+        grid.innerHTML = '';
+
+        // Build a damage lookup: { playerId: { fromPlayerId: damageAmount } }
+        /*
+        const damageLookup = {};
+        damageRecords.forEach(damage => {
+            if (!damageLookup[damage.player_id]) {
+                damageLookup[damage.player_id] = {};
+            }
+            if (damage.received_from_commander_player_id) {
+                damageLookup[damage.player_id][damage.received_from_commander_player_id] = damage.health_change || 0;
+            }
+        });
+        */
+        const latestRoundId = PageMtgGame.getLatestRoundId();
+
+        players.forEach((player, index) => {
+            // Build display name: prefer user_name + deck_name, fallback to player name
+            const playerId = player[attrPlayerId];
+            let displayName = PageMtgGame.makePlayerDisplayName(playerId, index);
+            let damagePlayerPairs = [...players, { [attrPlayerId]: null }];
+            let maxCommanderDamageReceived = 0;
+            damagePlayerPairs.forEach(damagePlayerPair => {
+                const sourceId = damagePlayerPair[attrPlayerId];
+                const filteredPlayerDamages = damageRecords.filter(damage => (
+                        damage[attrRoundId] == latestRoundId
+                    &&  damage[attrPlayerId] == playerId
+                    &&  damage[attrReceivedFromCommanderPlayerId] == sourceId
+                )); //[playerId] || {};
+                if (filteredPlayerDamages.length == 0) {
+                    damageRecords.push(PageMtgGame.makeDefaultGameRoundPlayerDamage(playerId, sourceId));
+                }
+                maxCommanderDamageReceived = Math.max(
+                      maxCommanderDamageReceived
+                    , damageRecords.filter(damage => (
+                            damage[attrPlayerId] == playerId
+                        &&  damage[attrReceivedFromCommanderPlayerId] == sourceId
+                    ))
+                        .map(damage => damage[flagHealthChange])
+                        .reduce((acc, curr) => acc + curr, 0)
+                );
+            });
+
+            const totalDamage = damageRecords.filter(damage => ( damage[attrPlayerId] == playerId ))
+                .map(damage => damage[flagHealthChange])
+                .reduce((acc, curr) => acc + curr, 0);
+            let life = startingLife + totalDamage;
+
+            let isEliminatedByForce = damageRecords.filter(damage => ( damage[attrPlayerId] == playerId ))
+                .map(damage => damage[flagIsEliminated])
+                .some(Boolean);
+            const isEliminated = (
+                    isEliminatedByForce
+                ||  !player[flagActive]
+                ||  life < 1
+                ||  maxCommanderDamageReceived >= 21
+            );
+
+            const playerOwnDamage = damageRecords.filter(damage => (
+                    damage[attrPlayerId] == playerId
+                &&  damage[attrReceivedFromCommanderPlayerId] == null
+                &&  damage[attrRoundId] == latestRoundId
+            ))[0];
+            const card = document.createElement('div');
+            card.className = `player-card ${isEliminated ? 'eliminated' : ''}`;
+            card.style.animationDelay = `${index * 0.1}s`;
+            card.dataset.playerId = playerId;
+            card.dataset.userName = player.user_name || '';
+            card.dataset.deckName = player.deck_name || '';
+
+            card.innerHTML = `
+                <div class="player-header">
+                    <div class="player-info">
+                        <div class="player-name">${displayName}</div>
+                        <div class="commander-deaths">
+                            <span>Commander Deaths:</span>
+                            <div class="death-counter">
+                                <button class="death-btn death-minus" data-player-id="${playerId}">&minus;</button>
+                                <span class="death-display" data-player-id="${playerId}" ${attrValuePrevious}="${playerOwnDamage[flagCommanderDeaths]}">${playerOwnDamage[flagCommanderDeaths]}</span>
+                                <button class="death-btn death-plus" data-player-id="${playerId}">+</button>
+                            </div>
+                        </div>
+                    </div>
+                    <button class="eliminate-btn" data-player-id="${playerId}" ${attrValuePrevious}="${isEliminated}">
+                        ${isEliminated ? 'Revive' : 'Eliminate'}
+                    </button>
+                </div>
+
+                <div class="life-total">
+                    <input type="hidden" class="life-value" data-player-id="${playerId}" value="${life}">
+                    <div class="life-display" data-player-id="${playerId}" ${attrValuePrevious}="${life}">${life}</div>
+                    <div class="life-controls">
+                        <button class="life-btn" data-player-id="${playerId}" data-amount="-5">-5</button>
+                        <button class="life-btn" data-player-id="${playerId}" data-amount="-1">-1</button>
+                        <button class="life-btn" data-player-id="${playerId}" data-amount="1">+1</button>
+                        <button class="life-btn" data-player-id="${playerId}" data-amount="5">+5</button>
+                    </div>
+                </div>
+
+                <div class="commander-damage-section">
+                    <div class="section-title">Commander Damage Taken</div>
+                    <div class="damage-grid" data-player-id="${playerId}">
+                        ${PageMtgGame.renderCommanderDamageRows(
+                              playerId // playerId
+                            , player[attrDeckId] // deckId
+                        )}
+                    </div>
+                </div>
+            `;
+
+            grid.appendChild(card);
+        });
+
+        // Hookup all event handlers
+        this.hookupPlayerCardEvents();
+    }
+    static makeDefaultGameRoundPlayerDamage(playerId, receivedFromCommanderPlayerId) {
+        let roundId = PageMtgGame.getLatestRoundId();
+        return {
+              [attrDamageId]: -1 - damageRecords.length
+            , [attrRoundId]: roundId
+            , [attrPlayerId]: playerId
+            , [attrReceivedFromCommanderPlayerId]: receivedFromCommanderPlayerId
+            , [flagHealthChange]: 0
+            , [flagCommanderDeaths]: 0
+            , [flagActive]: true
+        };
+    }
+    static getLatestRoundId() {
+        let roundId = -1;
+        if (rounds.length > 0) {
+            let highestRoundDisplayOrder = Math.max(rounds.map(round => { return round[flagDisplayOrder]; }));
+            roundId = rounds.filter(round => round[flagDisplayOrder] == highestRoundDisplayOrder)[0][attrRoundId];
+            console.log({ "method": "getLatestRoundId", highestRoundDisplayOrder, roundId });
+        }
+        return roundId;
+    }
+    static makePlayerDisplayName(playerId, index) {
+        if (playerId == null) {
+            return `Player ${index + 1}`;
+        }
+        const player = players.filter(player => player[attrPlayerId] == playerId)[0];
+        const deckId = player[attrDeckId];
+        const deck = (deckId == null) ? null : decks.filter(deck => deck[attrDeckId] == deckId)[0];
+        const user = (playerId == null) ? null : users[player[attrUserId]];
+        return player[flagName] || `${(user == null) ? 'Error' : user[flagName]} - ${(deck == null) ? 'Error' : deck[flagName]}`;
+    }
+    static renderCommanderDamageRows(playerId) {
+        // const roundId = PageMtgGame.getLatestRoundId();
+        return players
+            .filter(otherPlayer => otherPlayer[attrPlayerId] !== playerId)
+            .map(otherPlayer => {
+                const sourceId = otherPlayer[attrPlayerId];
+                let otherPlayerDisplayName = PageMtgGame.makePlayerDisplayName(sourceId);
+                const totalDamage = damageRecords.filter(damage => (
+                        damage[attrPlayerId] == playerId
+                    &&  damage[attrReceivedFromCommanderPlayerId] == sourceId
+                ))
+                .map(damage => -damage[flagHealthChange])
+                .reduce((acc, curr) => acc + curr, 0);
+                const isLethal = totalDamage >= 21;
+
+                return `
+                    <div class="damage-row" data-player-id="${playerId}" data-source-id="${sourceId}">
+                        <span class="damage-source">from ${otherPlayerDisplayName}</span>
+                        <div class="damage-controls">
+                            <button class="damage-btn damage-minus" data-player-id="${playerId}" data-source-id="${sourceId}">&minus;</button>
+                            <input type="hidden" class="damage-value" data-player-id="${playerId}" data-source-id="${sourceId}" value="${totalDamage}">
+                            <span class="damage-display ${isLethal ? 'lethal' : ''}" data-player-id="${playerId}" data-source-id="${sourceId}" ${attrValuePrevious}="${totalDamage}">${totalDamage}</span>
+                            <button class="damage-btn damage-plus" data-player-id="${playerId}" data-source-id="${sourceId}">+</button>
+                        </div>
+                    </div>
+                `;
+            })
+            .join('');
+    }
+
+    hookupPlayerCardEvents() {
+        // Life buttons
+        let lifeButtonSelector = '.life-btn';
+        Events.hookupEventHandler("click", lifeButtonSelector, (event, button) => {
+            const playerId = button.dataset.playerId;
+            const amount = parseInt(button.dataset.amount);
+            const latestRoundId = PageMtgGame.getLatestRoundId();
+            const damageIndex = damageRecords.findIndex(damage => (
+                    damage[attrRoundId] == latestRoundId
+                &&  damage[attrPlayerId] == playerId
+                &&  damage[attrReceivedFromCommanderPlayerId] == null
+            ));
+            this.changeLife(
+                playerId // playerId
+                , amount // amount
+                , true // updateDamage
+                , damageIndex // damageIndex
+            );
+        });
+
+        // Commander death buttons
+        let commanderDeathButtonSelector = '.death-btn';
+        Events.hookupEventHandler("click", commanderDeathButtonSelector, (event, button) => {
+            const playerId = button.dataset.playerId;
+            const isMinusButton = button.classList.contains('death-minus');
+            const amount = (isMinusButton) ? -1 : 1;
+            this.changeCommanderDeaths(playerId, amount);
+        });
+
+        // Commander damage buttons
+        let commmanderDamageButtonSelector = '.damage-btn';
+        Events.hookupEventHandler("click", commmanderDamageButtonSelector, (event, button) => {
+            const playerId = button.dataset.playerId;
+            const sourceId = button.dataset.sourceId;
+            const isMinusButton = button.classList.contains('damage-minus');
+            const amount = (isMinusButton) ? -1 : 1;
+            this.changeCommanderDamage(playerId, sourceId, amount);
+        });
+
+        // Eliminate buttons
+        let eliminatePlayerButtonSelector = '.eliminate-btn';
+        Events.hookupEventHandler("click", eliminatePlayerButtonSelector, (event, button) => {
+            const playerId = button.dataset.playerId;
+            this.toggleEliminate(playerId);
+        });
+    }
+
+    changeLife(playerId, amount, updateDamage = false, damageIndex = null) {
+        const card = document.querySelector(`.player-card[data-player-id="${playerId}"]`);
+        if (!card || card.classList.contains('eliminated')) return;
+
+        const lifeInput = card.querySelector(`.life-value[data-player-id="${playerId}"]`);
+        const lifeDisplay = card.querySelector(`.life-display[data-player-id="${playerId}"]`);
+
+        const currentLife = parseInt(lifeInput.value) || 0;
+        const newLife = Math.max(0, currentLife + amount);
+        DOM.setElementAttributeValueCurrent(lifeDisplay, newLife);
+        DOM.isElementDirty(lifeDisplay);
+        lifeInput.value = newLife;
+        lifeDisplay.textContent = newLife;
+
+        if (updateDamage) {
+            damageRecords[damageIndex][flagHealthChange] += amount;
+        }
+
+        // PageMtgGame.debouncedSave();
+        this.updateAndToggleShowButtonsSaveCancel();
+    }
+
+    changeCommanderDamage(playerId, sourceId, amount) {
+        const card = document.querySelector(`.player-card[data-player-id="${playerId}"]`);
+        if (!card || card.classList.contains('eliminated')) return;
+
+        const damageInput = card.querySelector(`.damage-value[data-player-id="${playerId}"][data-source-id="${sourceId}"]`);
+        const damageDisplay = card.querySelector(`.damage-display[data-player-id="${playerId}"][data-source-id="${sourceId}"]`);
+
+        const currentDamage = parseInt(damageInput.value) || 0;
+        const newDamage = Math.max(0, currentDamage + amount);
+        amount = newDamage - currentDamage;
+        DOM.setElementAttributeValueCurrent(damageDisplay, newDamage);
+        DOM.isElementDirty(damageDisplay);
+        damageInput.value = newDamage;
+        damageDisplay.textContent = newDamage;
+
+        // Update lethal class
+        if (newDamage >= 21) {
+            damageDisplay.classList.add('lethal');
+        } else {
+            damageDisplay.classList.remove('lethal');
+        }
+
+        const latestRoundId = PageMtgGame.getLatestRoundId();
+        const damageIndex = damageRecords.findIndex(damageRecord => (
+                damage[attrRoundId] == latestRoundId
+            &&  damageRecord[attrPlayerId] == playerId
+            &&  damageRecord[attrReceivedFromCommanderPlayerId] == sourceId
+        ));
+        damageRecords[damageIndex][flagHealthChange] -= amount;
+        
+        this.changeLife(
+              playerId // playerId
+            , -amount // amount
+            , false // updateDamage
+            , damageIndex // damageIndex
+        );
+        // PageMtgGame.debouncedSave();
+    }
+
+    changeCommanderDeaths(playerId, amount) {
+        const card = document.querySelector(`.player-card[data-player-id="${playerId}"]`);
+        if (!card || card.classList.contains('eliminated')) return;
+
+        const deathDisplay = card.querySelector(`.death-display[data-player-id="${playerId}"]`);
+        const currentDeaths = parseInt(deathDisplay.textContent) || 0;
+        const newDeaths = Math.max(0, currentDeaths + amount);
+
+        deathDisplay.textContent = newDeaths;
+        DOM.setElementAttributeValueCurrent(deathDisplay, newDeaths);
+        DOM.isElementDirty(deathDisplay);
+
+        const latestRoundId = PageMtgGame.getLatestRoundId();
+        const damageIndex = damageRecords.findIndex(damage => (
+                damage[attrRoundId] == latestRoundId
+            &&  damage[attrPlayerId] == playerId
+            &&  damage[attrReceivedFromCommanderPlayerId] == null
+        ));
+        damageRecords[damageIndex][flagCommanderDeaths] = newDeaths;
+
+        // PageMtgGame.debouncedSave();
+        this.updateAndToggleShowButtonsSaveCancel();
+    }
+
+    toggleEliminate(playerId) {
+        const card = document.querySelector(`.player-card[data-player-id="${playerId}"]`);
+        if (!card) return;
+
+        const eliminateBtn = card.querySelector(`.eliminate-btn[data-player-id="${playerId}"]`);
+        const wasEliminated = card.classList.contains('eliminated');
+
+        if (wasEliminated) {
+            card.classList.remove('eliminated');
+            eliminateBtn.textContent = 'Eliminate';
+        } else {
+            card.classList.add('eliminated');
+            eliminateBtn.textContent = 'Revive';
+        }
+        const isEliminated = card.classList.contains('eliminated');
+
+        const latestRoundId = PageMtgGame.getLatestRoundId();
+        const damageIndex = damageRecords.findIndex(damage => (
+                damage[attrRoundId] == latestRoundId
+            &&  damage[attrPlayerId] == playerId
+            &&  damage[attrReceivedFromCommanderPlayerId] == null
+        ));
+        damageRecords[damageIndex][flagIsEliminated] = isEliminated;
+
+        DOM.setElementAttributeValueCurrent(eliminateBtn, isEliminated);
+        DOM.isElementDirty(eliminateBtn);
+        // PageMtgGame.debouncedSave();
+        this.updateAndToggleShowButtonsSaveCancel();
+    }
+
+    static updatePlayerSetup() {
+        const playerCountInput = document.getElementById('playerCount');
+        if (!playerCountInput) return;
+
+        const playerCount = parseInt(playerCountInput.value);
+        const grid = document.getElementById('playerSetupGrid');
+        if (!grid) return;
+
+        grid.innerHTML = '';
+        const wrapperTemplate = document.getElementById(playerSetupWrapperTemplateId);
+        let player, wrapper, wrapperHeading, userDdl, deckDdl, nameInput;
+        for (let i = 0; i < playerCount; i++) {
+            if (i < players.length) {
+                player = players[i];
+            }
+            else {
+                player = PageMtgGame.makeDefaultGamePlayer();
+                players.push(player);
+            }
+            wrapper = wrapperTemplate.cloneNode(true);
+            wrapper.removeAttribute("id");
+            wrapper.setAttribute(flagDisplayOrder, i + 1);
+            wrapper.classList.remove(flagIsCollapsed);
+            wrapperHeading = wrapper.querySelector('label');
+            wrapperHeading.innerText = 'Player ' + (i + 1);
+            userDdl = wrapper.querySelector('.playerUser select');
+            DOM.setElementValuesCurrentAndPrevious(userDdl, player[attrUserId]);
+            deckDdl = wrapper.querySelector('.playerDeck select');
+            DOM.setElementValuesCurrentAndPrevious(deckDdl, player[attrDeckId]);
+            nameInput = wrapper.querySelector('.playerName input');
+            DOM.setElementValuesCurrentAndPrevious(nameInput, player[flagName]);
+            console.log('player: ', player);
+            grid.appendChild(wrapper);
+        }
+    }
+    static makeDefaultGamePlayer() {
+        return {
+              [attrPlayerId]: -players.length
+            , [attrGameId]: gameId
+            , [attrUserId]: user[attrUserId]
+            , [attrDeckId]: 0
+            , [flagName]: ""
+            , [flagNotes]: null
+            , [flagDisplayOrder]: players.length
+            , [flagActive]: true
+        };
+    }
+
+    async startGame() {
+        const playerCountInput = document.getElementById('playerCount');
+        if (!playerCountInput) return;
+
+        const playerCount = parseInt(playerCountInput.value);
+        const playersToSave = [];
+
+        let playerSetupWrapper, playerId, player, userDdl, userId, deckDdl, deckId, nameInput, name;
+        for (let i = 0; i < playerCount; i++) {
+            playerSetupWrapper = document.querySelector('.player-name-input-wrapper[' + flagDisplayOrder + '="' + (i + 1) + '"]');
+            userDdl = playerSetupWrapper.querySelector('.playerUser select');
+            deckDdl = playerSetupWrapper.querySelector('.playerDeck select');
+            nameInput = playerSetupWrapper.querySelector('.playerName input');
+            
+            userId = DOM.getElementValueCurrent(userDdl);
+            deckId = DOM.getElementValueCurrent(deckDdl);
+            name = nameInput ? nameInput.value.trim() || `Player ${i + 1}` : `Player ${i + 1}`;
+
+            playerId = playerSetupWrapper.getAttribute(attrPlayerId);
+            player = players.filter(p => p[attrPlayerId] == playerId)[0];
+            playersToSave.push({
+                  ...player
+                , [attrGameId]: gameId
+                , [attrUserId]: userId
+                , [attrDeckId]: deckId
+                , [flagName]: name
+                , [flagDisplayOrder]: i + 1
+                , [flagActive]: true
+            });
+        }
+
+        // Save players to server
+        const comment = 'Save players';
+        const self = this;
+        API.saveGamePlayers(playersToSave, null, comment)
+            .then(data => {
+                if (data[flagStatus] == flagSuccess) {
+                    self.leave();
+                    window.location.reload();
+                }
+                else {
+                    console.error('Failed to save players:', data[flagMessage]);
+                    PageMtgGame.showError('An error occurred while creating the game');
+                }
+            })
+            .catch(error => {
+                console.error('Error creating game:', error);
+                PageMtgGame.showError('An error occurred while creating the game');
+            })
+            .finally(() => {
+            });
+    }
+
+    static resetGame() {
+        if (confirm('Are you sure you want to start a new game? Current game will be lost.')) {
+            localStorage.removeItem(`mtgGame_${gameId}`);
+            window.location.href = hashPageGames;
+        }
+    }
+
+    async saveGame() {
+        const gameState = {
+              [flagPlayer]: players
+            , [flagRound]: rounds
+            , [flagDamage]: damageRecords
+        };
+        /*
+        if (gameState[flagPlayer].length > 0) {
+            localStorage.setItem(`mtgGame_${gameId}`, JSON.stringify(gameState));
+            PageMtgGame.showSaveIndicator();
+        }
+        */
+        const comment = 'Save players';
+        const self = this;
+        API.saveGameRoundPlayerDamages(rounds, damageRecords, null, comment)
+            .then(data => {
+                if (data[flagStatus] == flagSuccess) {
+                    self.leave();
+                    window.location.reload();
+                }
+                else {
+                    console.error('Failed to save players:', data[flagMessage]);
+                    PageMtgGame.showError('An error occurred while creating the game');
+                }
+            })
+            .catch(error => {
+                console.error('Error creating game:', error);
+                PageMtgGame.showError('An error occurred while creating the game');
+            })
+            .finally(() => {
+            });
+    }
+    /*
+    static debouncedSave() {
+        clearTimeout(PageMtgGame._saveTimeout);
+        PageMtgGame._saveTimeout = setTimeout(() => PageMtgGame.saveGame(), 500);
+    }
+
+    static showSaveIndicator() {
+        const indicator = document.getElementById('saveIndicator');
+        if (indicator) {
+            indicator.classList.add('show');
+            setTimeout(() => {
+                indicator.classList.remove('show');
+            }, 2000);
+        }
+    }
+    */
+    saveRecordsTableDirty() {
+        this.saveGame();
+    }
+    static showError(message) {
+        // Check if there's an overlay error element
+        const errorOverlay = document.getElementById('overlayError');
+        if (errorOverlay) {
+            const errorLabel = errorOverlay.querySelector('.error-message, #labelError');
+            if (errorLabel) {
+                errorLabel.textContent = message;
+            }
+            errorOverlay.classList.remove('hidden');
+            errorOverlay.style.display = 'flex';
+        } else {
+            // Fallback to alert
+            alert(message);
+        }
+    }
+
+    leave() {
+        super.leave();
+    }
+}
+
+// Static timeout reference for debouncing
+PageMtgGame._saveTimeout = null;

static/js/pages/tcg/mtg_games.js

@@ -0,0 +1,250 @@
+
+import API from "../../api.js";
+import TableBasePage from "../base_table.js";
+import Utils from "../../lib/utils.js";
+
+export default class PageMtgGames extends TableBasePage {
+    static hash = hashPageMtgGames;
+    static attrIdRowObject = attrGameId;
+    callSaveTableContent = API.saveGame;
+
+    constructor(router) {
+        super(router);
+    }
+
+    initialize() {
+        this.sharedInitialize();
+        this.hookupTcgGames();
+    }
+    hookupTcgGames() {
+        PageMtgGames.initGamesPage();
+    }
+    static initGamesPage() {
+        // Initialize form submission
+        const newGameForm = document.getElementById('newGameForm');
+        if (newGameForm) {
+            newGameForm.addEventListener('submit', PageMtgGames.handleNewGameSubmit);
+        }
+
+        // Initialize filter form
+        const filterForm = document.getElementById('formFilters');
+        if (filterForm) {
+            filterForm.addEventListener('submit', PageMtgGames.handleFilterSubmit);
+        }
+
+        // Close modal on escape key
+        document.addEventListener('keydown', function(e) {
+            if (e.key === 'Escape') {
+                PageMtgGames.hideNewGameForm();
+            }
+        });
+
+        // Close modal on backdrop click
+        const modal = document.getElementById('newGameModal');
+        if (modal) {
+            modal.addEventListener('click', function(e) {
+                if (e.target === modal) {
+                    PageMtgGames.hideNewGameForm();
+                }
+            });
+        }
+
+        // Button onclicks
+        const newGameButton = document.getElementById('btnNewGame');
+        if (newGameButton) {
+            newGameButton.addEventListener('click', PageMtgGames.showNewGameForm);
+        }
+        const cancelNewGameButtons = document.querySelectorAll(
+            '#newGameForm .form-actions .btn-tcg.btn-tcg-secondary'
+            + ','
+            + '#newGameModal .modal-content .modal-header .modal-close'
+        );
+        if (cancelNewGameButtons.length > 0) {
+            cancelNewGameButtons.forEach((button) => {
+                button.addEventListener('click', PageMtgGames.hideNewGameForm);
+            });
+        }
+
+    }
+    static showNewGameForm() {
+        const modal = document.getElementById('newGameModal');
+        if (modal) {
+            modal.classList.remove('hidden');
+            document.body.style.overflow = 'hidden';
+
+            // Focus on first input
+            const firstInput = modal.querySelector('input, select');
+            if (firstInput) {
+                firstInput.focus();
+            }
+        }
+    }
+    static hideNewGameForm() {
+        const modal = document.getElementById('newGameModal');
+        if (modal) {
+            modal.classList.add('hidden');
+            document.body.style.overflow = '';
+
+            // Reset form
+            const form = document.getElementById('newGameForm');
+            if (form) {
+                form.reset();
+            }
+        }
+    }
+    static async handleNewGameSubmit(e) {
+        e.preventDefault();
+
+        const form = e.target;
+        const formData = new FormData(form);
+
+        const gameType = formData.get('game_type');
+        const gameData = {
+              [attrGameId]: -1
+            , [flagIsCommander]: gameType === 'commander'
+            , [flagIsDraft]: gameType === 'draft'
+            , [flagIsSealed]: gameType === 'sealed'
+            , [flagLocationName]: formData.get(flagLocationName) || null
+            , [flagNotes]: formData.get(flagNotes) || null
+            , [flagStartOn]: new Date().toISOString()
+            , [flagStartingLife]: formData.get(flagStartingLife) || 40
+            , [flagActive]: true
+        };
+
+        const submitBtn = form.querySelector('button[type="submit"]');
+        const originalText = submitBtn.textContent;
+        submitBtn.textContent = 'Creating...';
+        submitBtn.disabled = true;
+
+        const games = [gameData];
+        const comment = 'Create new game';
+        debugger;
+        API.saveGame(games, form, comment)
+            .then(data => {
+                if (data[flagStatus] == flagSuccess) {
+                    if (_verbose) { 
+                        Utils.consoleLogIfNotProductionEnvironment('Records saved!');
+                        Utils.consoleLogIfNotProductionEnvironment('Data received:', data);
+                    }
+                    this.callFilterTableContent(gameData.game_id);
+                }
+                else {
+                    Utils.consoleLogIfNotProductionEnvironment("error: " + data[flagMessage]);
+                    // OverlayError.show(data[flagMessage]);
+                    window.location.reload();
+                }
+            })
+            .catch(error => {
+                console.error('Error creating game:', error);
+                PageMtgGames.showError('An error occurred while creating the game');
+            })
+            .finally(() => {
+                submitBtn.textContent = originalText;
+                submitBtn.disabled = false;
+            });
+    
+    }
+    callFilterTableContent(gameId) {
+        const gamePageHash = `${hashPageGame}/${gameId}`;
+        let filtersJson = {};
+        Utils.consoleLogIfNotProductionEnvironment("callFilterTableContent");
+        this.leave();
+        API.goToHash(gamePageHash, filtersJson);
+    }
+    static handleFilterSubmit(e) {
+        // Let the form submit normally - it will reload with query params
+        // You can add client-side filtering here if needed
+    }
+    static getCSRFToken() {
+        // Try meta tag first
+        const metaTag = document.querySelector('meta[name="csrf-token"]');
+        if (metaTag) {
+            return metaTag.getAttribute('content');
+        }
+
+        // Try hidden input
+        const hiddenInput = document.querySelector('input[name="csrf_token"]');
+        if (hiddenInput) {
+            return hiddenInput.value;
+        }
+
+        // Try cookie
+        const cookies = document.cookie.split(';');
+        for (let cookie of cookies) {
+            const [name, value] = cookie.trim().split('=');
+            if (name === 'csrf_token') {
+                return value;
+            }
+        }
+
+        return '';
+    }
+    static showError(message) {
+        // Check if there's an overlay error element
+        const errorOverlay = document.getElementById('overlayError');
+        if (errorOverlay) {
+            const errorLabel = errorOverlay.querySelector('.error-message, #labelError');
+            if (errorLabel) {
+                errorLabel.textContent = message;
+            }
+            errorOverlay.classList.remove('hidden');
+            errorOverlay.style.display = 'flex';
+        } else {
+            // Fallback to alert
+            alert(message);
+        }
+    }
+    static showSuccess(message) {
+        // Could implement a toast notification here
+        console.log('Success:', message);
+    }
+    static joinGame(gameId) {
+        window.location.href = `${hashPageGame}/${gameId}`;
+    }
+    static async deleteGame(gameId) {
+        if (!confirm('Are you sure you want to delete this game? This action cannot be undone.')) {
+            return;
+        }
+
+        try {
+            const gameData = {
+                'game_id': gameId,
+                'active': false
+            };
+
+            const response = await fetch(hashSaveGame, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRFToken': PageMtgGames.getCSRFToken()
+                },
+                body: JSON.stringify({
+                    [flagGame]: [gameData],
+                    'form-filters': {},
+                    'comment': 'Game deleted'
+                })
+            });
+
+            const result = await response.json();
+
+            if (result.status === 'success') {
+                // Remove the row from the table
+                const row = document.querySelector(`tr[data-game-id="${gameId}"]`);
+                if (row) {
+                    row.style.animation = 'tcg-fadeOut 0.3s ease-out forwards';
+                    setTimeout(() => row.remove(), 300);
+                }
+            } else {
+                PageMtgGames.showError(result.message || 'Failed to delete game');
+            }
+        } catch (error) {
+            console.error('Error deleting game:', error);
+            PageMtgGames.showError('An error occurred while deleting the game');
+        }
+    }
+
+    toggleShowButtonsSaveCancel() {}
+    leave() {
+        super.leave();
+    }
+}

static/js/pages/tcg/mtg_home.js

@@ -0,0 +1,26 @@
+
+
+import API from "../../api.js";
+import BasePage from "../base.js";
+import DOM from "../../dom.js";
+import Events from "../../lib/events.js";
+
+export default class PageMtgHome extends BasePage {
+    static hash = hashPageMtgHome;
+
+    constructor(router) {
+        super(router);
+    }
+
+    initialize() {
+        this.sharedInitialize();
+        this.hookupTcgHome();
+    }
+
+    hookupTcgHome() {
+    }
+
+    leave() {
+        super.leave();
+    }
+}

static/js/pages/user/user.js

@@ -0,0 +1,83 @@
+
+import API from "../../api.js";
+import TableMixinPage from "../mixin_table.js";
+import DOM from "../../dom.js";
+import TableBasePage from "../base_table.js";
+
+export default class PageUser extends TableBasePage {
+    static hash = hashPageUserAccount;
+    static attrIdRowObject = attrUserId;
+    callSaveTableContent = API.saveUsers;
+
+    constructor(router) {
+        super(router);
+        this.mixin = new TableMixinPage(this);
+    }
+
+    initialize() {
+        this.sharedInitialize();
+        this.hookupTableMain();
+    }
+
+
+    hookupFilters() {
+    }
+
+    loadRowTable(rowJson) {
+        if (rowJson == null) return;
+        if (_verbose) { Utils.consoleLogIfNotProductionEnvironment("applying data row: ", rowJson); }
+    }
+    getTableRecords(dirtyOnly = false) {
+        dirtyOnly = true;
+        let container = document.querySelector('.' + flagCard + '.' + flagUser);
+        return [this.getJsonRow(container)];
+    }
+    getJsonRow(container) {
+        console.log("getJsonRow: ", container);
+        if (container == null) return;
+        let inputFirstname = container.querySelector(' #' + flagFirstname);
+        let inputSurname = container.querySelector(' #' + flagSurname);
+        let inputEmail = container.querySelector(' #' + flagEmail);
+
+        let idUser = container.getAttribute(attrUserId);
+        
+        let jsonRow = {
+            [attrUserAuth0Id]: null
+            , [flagEmail]: null
+            , [flagIsEmailVerified]: null
+            , [flagIsSuperUser]: null
+            , [flagCanAdminUser]: null
+        };
+
+        jsonRow[attrUserId] = idUser;
+        jsonRow[flagFirstname] = DOM.getElementAttributeValueCurrent(inputFirstname);
+        jsonRow[flagSurname] = DOM.getElementAttributeValueCurrent(inputSurname);
+        jsonRow[flagEmail] = DOM.getElementAttributeValueCurrent(inputEmail);
+        return jsonRow;
+    }
+    
+    initialiseRowNew(tbody, row) {
+    }
+    postInitialiseRowNewCallback(tbody) {
+    }
+
+    hookupTableMain() {
+        super.hookupTableMain();
+        this.hookupFieldsFirstname();
+        this.hookupFieldsSurname();
+        this.hookupFieldsEmail();
+    }
+    hookupFieldsFirstname() {
+        this.hookupChangeHandlerTableCells('.' + flagCard + '.' + flagUser + ' #' + flagFirstname);
+    }
+    hookupFieldsSurname() {
+        this.hookupChangeHandlerTableCells('.' + flagCard + '.' + flagUser + ' #' + flagSurname);
+    }
+    hookupFieldsEmail() {
+        this.hookupChangeHandlerTableCells('.' + flagCard + '.' + flagUser + ' #' + flagEmail);
+    }
+
+    leave() {
+        super.leave();
+    }
+}

static/js/pages/user/users.js

@@ -0,0 +1,86 @@
+
+import API from "../../api";
+import TableMixinPage from "../mixin_table";
+import DOM from "../../dom";
+import TableBasePage from "../base_table";
+import Utils from "../../lib/utils";
+
+export default class PageUsers extends TableBasePage {
+    static hash = hashPageUserAccounts;
+    static attrIdRowObject = attrUserId;
+    callSaveTableContent = API.saveUsers;
+
+    constructor(router) {
+        super(router);
+        this.mixin = new TableMixinPage(this);
+    }
+
+    initialize() {
+        this.sharedInitialize();
+    }
+
+    hookupFilters() {
+        this.sharedHookupFilters();
+        this.hookupFilterActive();
+    }
+
+    loadRowTable(rowJson) {
+        if (rowJson == null) return;
+        if (_verbose) { Utils.consoleLogIfNotProductionEnvironment("applying data row: ", rowJson); }
+    }
+    getJsonRow(row) {
+        if (row == null) return;
+        let inputFirstname = row.querySelector('td.' + flagFirstname + ' .' + flagFirstname);
+        let inputSurname = row.querySelector('td.' + flagSurname + ' .' + flagSurname);
+        let inputNotes = row.querySelector('td.' + flagNotes + ' .' + flagNotes);
+        let buttonActive = row.querySelector('td.' + flagActive + ' .' + flagActive);
+
+        let jsonRow = {
+            [attrUserAuth0Id]: null
+            , [flagEmail]: null
+            , [flagIsEmailVerified]: null
+            , [flagIsSuperUser]: null
+            , [flagCanAdminUser]: null
+        };
+        jsonRow[attrUserId] = row.getAttribute(attrUserId);
+        jsonRow[flagFirstname] = DOM.getElementAttributeValueCurrent(inputFirstname);
+        jsonRow[flagSurname] = DOM.getElementAttributeValueCurrent(inputSurname);
+        jsonRow[flagNotes] = DOM.getElementAttributeValueCurrent(inputNotes);
+        jsonRow[flagActive] = buttonActive.classList.contains(flagDelete);
+
+        console.log("jsonRow");
+        console.log(jsonRow);
+
+        return jsonRow;
+    }
+    
+    initialiseRowNew(tbody, row) {
+        
+    }
+    postInitialiseRowNewCallback(tbody) {
+        let newRows = tbody.querySelectorAll('tr.' + flagRowNew);
+        let newestRow = newRows[0];
+        let clickableElementsSelector = [].join('');
+        newestRow.querySelectorAll(clickableElementsSelector).forEach((clickableElement) => {
+            clickableElement.click();
+        });
+    }
+
+    hookupTableMain() {
+        super.hookupTableMain();
+        this.hookupFieldsFirstname();
+        this.hookupFieldsSurname();
+        this.hookupFieldsNotesTable();
+        this.hookupFieldsActive();
+    }
+    hookupFieldsFirstname() {
+        this.hookupChangeHandlerTableCells(flagFirstname);
+    }
+    hookupFieldsSurname() {
+        this.hookupChangeHandlerTableCells(flagSurname);
+    }
+
+    leave() {
+        super.leave();
+    }
+}

static/js/router.js

@@ -0,0 +1,110 @@
+
+// Pages
+// Core
+// TCG
+import PageMtgGame from './pages/tcg/mtg_game.js';
+import PageMtgGames from './pages/tcg/mtg_games.js';
+import PageMtgHome from './pages/tcg/mtg_home.js';
+// Legal
+import PageAccessibilityReport from './pages/legal/accessibility_report.js';
+import PageAccessibilityStatement from './pages/legal/accessibility_statement.js';
+import PageLicense from './pages/legal/license.js';
+import PagePrivacyPolicy from './pages/legal/privacy_policy.js';
+import PageRetentionSchedule from './pages/legal/retention_schedule.js';
+// User
+// import PageUserLogin from './pages/user/login.js';
+// import PageUserLogout from './pages/user/logout.js';
+import PageUser from './pages/user/user.js';
+import PageUsers from './pages/user/users.js';
+
+import API from './api.js';
+import DOM from './dom.js';
+import Utils from './lib/utils.js';
+
+
+export default class Router {
+    constructor() {
+        // Pages
+        this.pages = {};
+        // Core
+        // TCG
+        this.pages[hashPageMtgGame] = { name: 'PageMtgGame', module: PageMtgGame };
+        this.pages[hashPageMtgGames] = { name: 'PageMtgGames', module: PageMtgGames };
+        this.pages[hashPageMtgHome] = { name: 'PageMtgGame', module: PageMtgHome };
+        // Legal
+        this.pages[hashPageAccessibilityStatement] = { name: 'PageAccessibilityStatement', module: PageAccessibilityStatement };
+        this.pages[hashPageDataRetentionSchedule] = { name: 'PageDataRetentionSchedule', module: PageRetentionSchedule };
+        this.pages[hashPageLicense] = { name: 'PageLicense', module: PageLicense };
+        this.pages[hashPagePrivacyPolicy] = { name: 'PagePrivacyPolicy', module: PagePrivacyPolicy };
+        // User
+        // this.pages[hashPageUserLogin] = { name: 'PageUserLogin', module: PageUserLogin }; // pathModule: './pages/user/login.js' };
+        // this.pages[hashPageUserLogout] = { name: 'PageUserLogout', module: PageUserLogout }; // pathModule: './pages/user/logout.js' };
+        this.pages[hashPageUserAccount] = { name: 'PageUser', module: PageUser };
+        this.pages[hashPageUserAccounts] = { name: 'PageUsers', module: PageUsers };
+        // Routes
+        this.routes = {};
+        // Core
+        // TCG
+        this.routes[hashPageMtgGame] = (isPopState = false) => this.navigateToHash(hashPageMtgGame, isPopState);
+        this.routes[hashPageMtgGames] = (isPopState = false) => this.navigateToHash(hashPageMtgGames, isPopState);
+        this.routes[hashPageMtgHome] = (isPopState = false) => this.navigateToHash(hashPageMtgHome, isPopState);
+        // Legal
+        this.routes[hashPageAccessibilityStatement] = (isPopState = false) => this.navigateToHash(hashPageAccessibilityStatement, isPopState);
+        this.routes[hashPageDataRetentionSchedule] = (isPopState = false) => this.navigateToHash(hashPageDataRetentionSchedule, isPopState);
+        this.routes[hashPageLicense] = (isPopState = false) => this.navigateToHash(hashPageLicense, isPopState);
+        this.routes[hashPagePrivacyPolicy] = (isPopState = false) => this.navigateToHash(hashPagePrivacyPolicy, isPopState);
+        // User
+        // this.routes[hashPageUserLogin] = (isPopState = false) => this.navigateToHash(hashPageUserLogin, isPopState);
+        // this.routes[hashPageUserLogout] = (isPopState = false) => this.navigateToHash(hashPageUserLogout, isPopState);
+        this.routes[hashPageUserAccount] = (isPopState = false) => this.navigateToHash(hashPageUserAccount, isPopState);
+        this.routes[hashPageUserAccounts] = (isPopState = false) => this.navigateToHash(hashPageUserAccounts, isPopState);
+        this.initialize();
+    }
+    loadPage(hashPage, isPopState = false) {
+        const PageClass = this.getClassPageFromHash(hashPage);
+        this.currentPage = new PageClass(this);
+        this.currentPage.initialize(isPopState);
+        window.addEventListener('beforeunload', () => this.currentPage.leave());
+    }
+    getClassPageFromHash(hashPage) {
+        
+        let pageJson = this.pages[hashPage];
+        try {
+            const module = pageJson.module;
+            return module; 
+        }
+        catch (error) {
+            Utils.consoleLogIfNotProductionEnvironment("this.pages: ", this.pages);
+            console.error('Page not found:', hashPage);
+            throw error;
+        }
+    }
+    initialize() {
+        window.addEventListener('popstate', this.handlePopState.bind(this));
+    }
+    handlePopState(event) {
+        this.loadPageCurrent();
+    }
+    loadPageCurrent() {
+        const hashPageCurrent = DOM.getHashPageCurrent();
+        this.loadPage(hashPageCurrent);
+    }
+    navigateToHash(hash, data = null, params = null, isPopState = false) {
+        let url = API.getUrlFromHash(hash, params);
+        history.pushState({data: data, params: params}, '', hash);
+        API.goToUrl(url, data);
+    }
+    
+    navigateToUrl(url, data = null, appendHistory = true) {
+        // this.beforeLeave();
+        if (appendHistory) history.pushState(data, '', url);
+        url = API.parameteriseUrl(url, data);
+        API.goToUrl(url);
+    }
+
+    static loadPageBodyFromResponse(response) {
+        DOM.loadPageBody(response.data);
+    }
+}
+
+export const router = new Router();

static/js/test.js

@@ -0,0 +1,23 @@
+document.querySelectorAll('#_r_j_ ul li.bg-card').forEach((li) => {
+    let ratingElement = li.querySelector('section.grid.gap-x-2.items-center.grid-cols-[60px_1fr].sm:flex.grid-rows-[15px_1fr_1fr].sm:grid-rows-1 span.[&>a]:font-semibold.font-semibold.flex.bg-secondary-soft.text-secondary-altFg.rounded-xl.max-w-fit-content.min-w-14.justify-center.p-2.shrink.text-lg.row-start-2.row-span-2');
+    let rating = ratingElement.innerText;
+
+    let nameElement = li.querySelector('section.grid.gap-x-2.items-center.grid-cols-[60px_1fr].sm:flex.grid-rows-[15px_1fr_1fr].sm:grid-rows-1 h3.text-text-neutral-primary.text-base.font-bold.row-span-2.row-start-2.col-start-2');
+    let name = nameElement.innerText
+
+    let postedOnElement = li.querySelector('section.grid.gap-x-2.items-center.grid-cols-[60px_1fr].sm:flex.grid-rows-[15px_1fr_1fr].sm:grid-rows-1 p.[&>a]:font-semibold.font-normal.text-neutral-strong.text-xxs.ml-auto.shrink-0.row-start-1.col-start-2');
+    let postedOn = contentElement.innerText;
+
+    let contentElement = li.querySelector('');
+
+    console.log("\nReview");
+    console.log(`Rating: ${rating}`);
+    console.log(`Rating: ${rating}`);
+    console.log(`Rating: ${rating}`);
+    console.log(`Rating: ${rating}`);
+    console.log(`Rating: ${rating}`);
+    console.log(`Rating: ${rating}`);
+});
+/*
+html body.flex.h-full.flex-col.bg-main.text-main-fg.antialiased.__variable_605d37.__variable_6549f3.__className_6549f3 main.flex.min-h-screen.flex-col.items-center.justify-between div.flex.size-full.min-h-screen.flex-col.items-center.justify-between.bg-neutral-0 div.fixed.inset-0.flex.z-20.overflow-hidden dialog.fixed.left-0.top-0.z-50.m-0.size-full.max-h-none.max-w-none.bg-main.p-0.backdrop:bg-[#000]/50.backdrop:backdrop-blur-sm.md:bg-transparent.md:px-10.md:py-5 div#_r_j_.max-w-full.max-h-full.self-center.mx-auto.z-40.flex.size-full.flex-col.md:rounded-lg.md:bg-main.md:shadow-xl div.flex.flex-1.overflow-hidden div.flex-1.overflow-y-auto div.flex.flex-1.flex-col.items-center.gap-4.rounded-b-lg.bg-[#F4F3F0].px-4.py-6 ul.grid.w-full.grid-cols-1.gap-4 li.bg-card.rounded-2xl.flex.flex-col.p-4.gap-3.border.border-neutral-200 section.grid.gap-x-2.items-center.grid-cols-[60px_1fr].sm:flex.grid-rows-[15px_1fr_1fr].sm:grid-rows-1 p.[&>a]:font-semibold.font-normal.text-neutral-strong.text-xxs.ml-auto.shrink-0.row-start-1.col-start-2
+*/