1.started removal of CDNs.\n 2. Improved modular structure for all parts of project including database.

static/js/DEPRECATED/routing.js

@@ -0,0 +1,109 @@
+
+function mapHashToController(hash) {
+    if (hash == null) return mapHashToController(hashPageHome);
+
+    url = _pathHost; // + '/';
+    console.log("url: " + url + "\nhash: " + hash);
+    return url + hash;
+
+    switch (hash) {
+        case hashPageErrorNoPermission:
+            url += 'error';
+            break;
+        case hashPageStoreHome:
+            url += 'store/home';
+            break;
+        case hashPageStoreProduct:
+            url += 'store/product';
+            break;
+        case hashStoreBasketLoad:
+            url += 'store/basket_load';
+            break;
+        case hashStoreBasketAdd:
+            url += 'store/product';
+            break;
+        default:
+            url += '';
+    }
+
+    return url;
+}
+
+/*
+function goToPage(pageHash, parameters) {
+    window.location.href = "{{ url_for(" + pageHash + (parameters == '' ? '' : ',' + parameters) + ") }}"; // getPageRoute(pageHash, parameters);
+}
+*/
+function goToPage(pageHash, parametersJSON) {
+    // window.location.href = "{{ url_for(" + pageHash + (parameters == '' ? '' : ',' + parameters) + ") }}"; // getPageRoute(pageHash, parameters);
+    // ajaxJSONData(pageHash, mapHashToController(pageHash), parameters, null, false);
+    url = mapHashToController(pageHash);
+
+    
+    if (!isEmpty(parametersJSON)) {
+        url += '%3F'; // '?';
+        let firstParameter = true;
+        for (var p in parametersJSON) {
+            // url += p + '=' + parametersJSON[p];
+            if (!firstParameter) {
+                url += '&';
+            } else {
+                firstParameter = false;
+            }
+            url += parametersJSON[p];
+        }
+    }
+    
+    leavePage();
+
+    window.location.href = url;
+    // ajaxJSONData(pageHash, url, parametersJSON, loadPageBody, false);
+}
+function leavePage() {}
+
+function goToUrl(parameterisedUrl) {
+    
+    leavePage();
+
+    window.location.href = parameterisedUrl;
+}
+
+function htmlEncode(value) {
+    return document.createElement('<div/>').text(value).innerHTML;
+}
+
+var _domParser = null;
+function htmlDecode(value) {
+    if (_domParser == null) _domParser = DOMParser(); // https://www.w3docs.com/snippets/javascript/how-to-html-encode-a-string.html
+    return _domParser.parseFromString(value, 'text/html').documentElement.textContent;
+}
+
+function convertForm2JSON(elemForm) {
+    
+    formData = {}
+
+    formDataTmp = elemForm.serializeArray();
+
+    $.each(formDataTmp, function(index, field) {
+        formData[field.name] = field.value;
+        /*
+        console.log('field name: ' + field.name);
+        console.log('field value: ' + field.value);
+        console.log('field currentval: ' + getElementCurrentValue(field));
+        */
+    });
+    
+    return formData;
+}
+
+function loadPageBody(response) {
+
+    let pageBody = document.querySelectorAll(idPageBody);
+
+    console.log('ajax:');
+    console.log(response.data);
+
+    pageBody.innerHTML = response.data['html_block'];
+}
+
+

static/js/accessibility_statement.js

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

static/js/api.js

@@ -0,0 +1,69 @@
+import DOM from './dom.js';
+
+// Module for API calls
+export default class API {
+    
+    static getCsrfToken() {
+        // return document.querySelectorAll('meta[name=' + nameCSRFToken + ']').attr('content');
+        return document.querySelector(idCSRFToken).getAttribute('content');
+    }
+    
+    static async request(hashEndpoint, method = 'GET', data = null) {
+        const url = mapHashToController(hashEndpoint);
+        const options = {
+            method,
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRFToken': API.getCsrfToken()
+            }
+        };
+
+        if (data) { //} && (method === 'POST' || method === 'PUT' || method === 'PATCH')) {
+            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;
+        }
+    }
+
+    
+    // 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'),
+    */
+    static async loginUser() {
+        let callback = {};
+        callback[keyCallback] = DOM.getHashPageCurrent();
+        return await API.request(hashPageUserLogin, 'POST', callback);
+    }
+}
+
+/*
+
+const api = new API();
+export default api;
+
+Example of using the API
+document.addEventListener('DOMContentLoaded', () => {
+    initializeApp();
+    setupEventListeners();
+    initializeComponents();
+    
+    // Example of using the API
+    API.getData('/some-endpoint')
+        .then(data => console.log('Data received:', data))
+        .catch(error => console.error('Error:', error));
+});
+*/

static/js/app.js

@@ -0,0 +1,68 @@
+
+// Main entry point for the application
+'use strict';
+
+// import API from './api.js';
+import DOM from './dom.js';
+import Router from './router.js';
+
+
+class App {
+    constructor() {
+        this.dom = new DOM();
+        this.router = new Router();
+    }
+
+    initialize() {
+        console.log('Initializing application...');
+        this.setupEventListeners();
+        this.start();
+    }
+
+    setupEventListeners() {
+        // Global event listeners
+        // document.addEventListener('click', this.handleGlobalClick.bind(this));
+        // Add more global event listeners as needed
+    }
+
+    handleGlobalClick(event) {
+        // Handle global click events
+        console.log('Global click:', event.target);
+    }
+
+    start() {
+        console.log('Starting application...');
+        // Additional startup logic
+        this.initPageCurrent();
+    }
+
+    initPageCurrent() {
+        console.log("initPageCurrent");
+        _pageCurrent = Router.getPageCurrent();
+        _pageCurrent.initialize();
+    }
+    
+}
+
+// Application instance
+const app = new App();
+
+// DOM ready handler
+function domReady(fn) {
+    if (document.readyState !== 'loading') {
+        fn();
+    } else {
+        document.addEventListener('DOMContentLoaded', fn);
+    }
+}
+
+// Initialize and start the app when DOM is ready
+domReady(() => {
+    app.initialize();
+});
+
+// Expose app to window for debugging (optional)
+window.app = app;
+
+// Export app if using modules
+export default app;

static/js/components/input_date.js

@@ -1,82 +1,4 @@
 
-/* Page elements */
-function displayOverlay(message, show, force) {
-
-    if (show) {
-        _overlayLoadingCount += 1;
-    }
-    else if (force) {
-        _overlayLoadingCount = 0;
-    }
-    else {
-        _overlayLoadingCount -= 1;
-        if (_overlayLoadingCount < 0) _overlayLoadingCount = 0;
-    }
-
-    var loadingImg = $(idImageLoading);
-    var overlay = $(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.html(message);
-        overlay.show();
-    }
-}
-
-function setBackgroundToLoading(elId, isLoading) {
-
-    if (isEmpty(el)) {
-
-        var elObj = $(elId);
-
-        if (isLoading) {
-
-            setTimeout(function() {
-                elObj.html("");
-                elObj.css({
-                    "background-image": "url(" + urlImgLoading + ")",
-                    "background-position": "center",
-                    "background-repeat": "no-repeat"
-                });
-            }, 0);
-        }
-        else {
-            elObj.css("background-image", "");
-        }
-    }
-}
-
-function allowClick() {
-    return !$("body").hasClass(_dataLoadingFlag);
-}
-
-function imageExists(url, callback) {
-
-    var img = new Image();
-
-    img.onload = function() { callback(true); };
-    img.onerror = function() { callback(false); };
-    img.src = url;
-}
-
-function validateImageUrl(id, img) {
-    imageExists(img, function(exists) {
-        if (exists) {
-            $("#" + id).css({ "background-image": "url(" + url + ")", "background-size": "35px 35px"})
-        }
-    })
-}
-
-
-
 
 // Date picker inputs
 /*
@@ -88,7 +10,7 @@ function hookupInputDatePickers(dateInputs, notFuture, notPast, parent, addClear
 
         for (let i = 0; i < dateInputs.length; i++) {
 
-            currentInput = $(dateInputs[i]);
+            currentInput = document.querySelectorAll(dateInputs[i]);
             currentDateString = currentInput.val();
             currentDate = (!isEmpty(currentDateString)) ? convertDDMMYYYYString2Date(currentDateString, false) : null;
             exceptionsArray = (currentDate != null) ? [currentDate] : null;
@@ -101,9 +23,9 @@ function hookupInputDatePickers(dateInputs, notFuture, notPast, parent, addClear
             // which will clear the whole value to ensure we either have a whole
             // date string or none
 
-            parent.on("keydown", isDatePickerSelector, function(event) {
+            parent.addEventListener("keydown", isDatePickerSelector, function(event) {
                 if (event.keyCode == 46 | event.keyCode == 8) { // delete or backspace
-                    $(this).val('');
+                    this.val('');
                 }
                 else {
                     event.preventDefault();
@@ -128,8 +50,8 @@ function hookupInputDatePickers(dateInputs, notFuture, notPast, parent, addClear
                         "clears": {
                             name: "Clear Date",
                             icon: "delete",
-                            disabled: function(key, opt) { return isEmpty($(opt.$trigger)); }, // if it's already empty, don't do anything
-                            callback: function(itemKey, opt, rootMenu, originalEvent) { var input = $(opt.$trigger); input.val(''); input.trigger('change'); }
+                            disabled: function(key, opt) { return 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'); }
                         }
                     }
                 });
@@ -172,7 +94,7 @@ function turnInputIntoDatePicker(input, notFuture, notPast, exceptionValueArray)
     });
 
     // prevent datepicker from appearing on right click
-    input.on('contextmenu', function() { $(this).datepicker('hide'); });
+    input.addEventListener('contextmenu', function() { this.datepicker('hide'); });
 
     // Disable autocomplete suggestions appearing when clicking on input
     input.attr('autocomplete', 'off');
@@ -257,21 +179,3 @@ function convertDate2DDMMYYYYString(date) {
         return 'Formatting error';
     }
 }
-
-
-// Data tables
-function getDataTableCellByNode(table, elRow, indexColumn) {
-    // normal jQuery selector won't pick up hidden columns
-    return $(table.DataTable().cells(elRow, indexColumn, null).nodes());
-}
-
-function outputTableElementDateInput(table, elRow, indexColumn, value) {
-
-    let currentCell = getDataTableCellByNode(table, elRow, indexColumn);
-
-    let dateTxt = '';
-
-    if (!isEmpty(value)) {
-        if (typeof value === 'string') value = convertJSONDateString2Date(value);
-    }
-}

static/js/components/select.js

@@ -0,0 +1,16 @@
+
+
+function handleSelectCollapse(elementSelect) {
+    let optionSelected = document.querySelectorAll(elementSelect).querySelector('option:selected');
+    optionSelected.text(optionSelected.attr(attrTextCollapsed));
+    console.log('collapsed: ', optionSelected.text());
+    optionSelected.classList.remove(flagExpanded);
+    optionSelected.classList.add(flagCollapsed);
+}
+function handleSelectExpand(elementSelect) {
+    let optionSelected = document.querySelectorAll(elementSelect).querySelector('option:selected');
+    optionSelected.text(optionSelected.attr(attrTextExpanded));
+    console.log('expanded: ', optionSelected.text());
+    optionSelected.classList.remove(flagCollapsed);
+    optionSelected.classList.add(flagExpanded);
+}

static/js/components/table.js

@@ -0,0 +1,18 @@
+
+
+// Data tables
+function getDataTableCellByNode(table, elRow, indexColumn) {
+    // normal jQuery selector won't pick up hidden columns
+    return document.querySelectorAll(table.DataTable().cells(elRow, indexColumn, null).nodes());
+}
+
+function outputTableElementDateInput(table, elRow, indexColumn, value) {
+
+    let currentCell = getDataTableCellByNode(table, elRow, indexColumn);
+
+    let dateTxt = '';
+
+    if (!isEmpty(value)) {
+        if (typeof value === 'string') value = convertJSONDateString2Date(value);
+    }
+}

static/js/components/textarea.js

@@ -0,0 +1,41 @@
+
+function removeBlankTextAreaLines(textarea) {
+    textarea.val(textarea.val.replace(/(?:(?:\r\n|\r|\n)\s*){2}/gm, ''));
+}
+
+function fitTextAreasToContent(parent) {
+    var textareas = parent.querySelector('textarea');
+
+    if (!isEmpty(textareas)) {
+        for (var t = 0; t < textareas.length; t++) {
+            fitTextAreaToContent(document.querySelectorAll(textareas[t]));
+        }
+    }
+}
+
+function 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.attr('rows', 1);
+
+    const paddingTop = parseCSSPropertyToFloat(textarea, 'padding-top');
+    const paddingBottom= parseCSSPropertyToFloat(textarea, 'padding-bottom');
+    const borderTop = parseCSSPropertyToFloat(textarea, 'border-top');
+    const borderBottom = parseCSSPropertyToFloat(textarea, 'border-bottom');
+    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 = parseCSSPropertyToFloat(textarea, 'line-height') + heightDelta;
+    if (heightNew < heightSingleLine) heightNew = heightSingleLine;
+
+    elTextarea.style.height = heightNew + 'px';
+}
+
+

static/js/components/video.js

@@ -0,0 +1,13 @@
+
+function videoPlay(elemVideo) {
+    if (!_loading) { // elemVideo.paused && 
+        elemVideo.play();
+        if (_verbose) { console.log("Playing video element: " + elemVideo.name)};
+    }
+}
+
+function videoPause(elemVideo) {
+    elemVideo.pause();
+    if (_verbose) { console.log("Pausing video element: " + elemVideo.name)};
+}
+

static/js/contact.js

@@ -1,21 +0,0 @@
-var _loading = true; 
-
-function hookupPageContact() {
-    _loading = false;
-}
-
-function stylePageContact() {
-    let elementEmail = $(idEmail);
-    let elementName = $(idName);
-    let elementMessage = $(idMessage);
-
-    elementEmail.css({
-        width: "50%"
-    });
-    elementName.css({
-        width: "40%"
-    });
-    elementMessage.css({
-        width: "66%"
-    });
-}

static/js/dom.js

@@ -0,0 +1,33 @@
+// Module for DOM manipulation
+export default class DOM {
+    static updateElement(id, data) {
+        const element = document.getElementById(id);
+        if (element) {
+            element.textContent = data;
+        }
+    }
+
+    // Add more DOM manipulation methods as needed
+    
+    static convertForm2JSON(elementForm) {
+        formData = {}
+        formDataTmp = elementForm.serializeArray();
+        formDataTmp.forEach((value, key) => {
+            formData[key] = value;
+            /*
+            console.log('key: ' + key);
+            console.log('value: ' + value);
+            */
+        });
+        return formData;
+    }
+    
+    static loadPageBody(contentNew) {
+        let pageBody = document.querySelector(idPageBody);
+        pageBody.innerHTML = contentNew;
+    }
+
+    static getHashPageCurrent() {
+        return document.body.dataset.page;
+    }
+}

static/js/home.js

@@ -1,9 +0,0 @@
-var _loading = true; 
-
-function hookupPageHome() {
-    // hookupVideos();
-    
-    hookupButtonsContactUs();
-    
-    _loading = false;
-}

static/js/lib/common.js

@@ -0,0 +1,142 @@
+
+function getElementCurrentValue(element) {
+    let returnVal = '';
+
+    if (!isEmpty(element)) {
+
+        if (element.type === "checkbox") {
+            returnVal = element.checked;
+        }
+        /*
+        else if (element.classList.contains(flagIsDatePicker)) {
+            returnVal = getDatePickerDate(element, adjust4DayLightSavings);
+        }
+        */
+        else if (element.tagName === 'INPUT' || element.tagName === 'textarea' || element.tagName === 'select') {
+            returnVal = element.value;
+        }
+        else {
+            returnVal = element.textContent;
+        }
+    }
+
+    if (isEmpty(returnVal)) returnVal = '';
+
+    return returnVal;
+}
+
+function parseCSSPropertyToFloat(element, propertyName) {
+    var propertyText = element.css(propertyName);
+
+    if (!isEmpty(propertyText)) {
+
+        propertyText = propertyText.replace('px', '');
+
+        if (!isValidNumber(propertyText, true)) return parseFloat(propertyText);
+    }
+
+    return 0.00;
+}
+
+function scrollToElement(parent, element) {
+    // REQUIRED: parent has scroll-bar
+    parent.scrollTop(parent.scrollTop() + (element.offset().top - parent.offset().top));
+}
+
+function 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))
+    );
+}
+
+function getRowFromElement(element) {
+    return document.querySelectorAll(element).closest('tr');
+}
+
+function getCellFromElement(element) {
+    return document.querySelectorAll(element).closest('td');
+}
+
+function alertError(errorType, errorText) {
+    alert(errorType + '\n' + errorText);
+}
+
+function setPageToLoading(isLoading) {
+
+    if (isLoading) {
+        document.querySelectorAll(document.body).classList.add(_dataLoadingFlag);
+    }
+    else {
+        document.querySelectorAll(document.body).classList.remove(_dataLoadingFlag);
+    }
+}
+
+function setBackgroundToLoading(elId, isLoading) {
+
+    if (isEmpty(el)) {
+
+        var elObj = document.querySelectorAll(elId);
+
+        if (isLoading) {
+
+            setTimeout(function() {
+                elObj.innerHTML = "";
+                elObj.css({
+                    "background-image": "url(" + urlImgLoading + ")",
+                    "background-position": "center",
+                    "background-repeat": "no-repeat"
+                });
+            }, 0);
+        }
+        else {
+            elObj.css("background-image", "");
+        }
+    }
+}
+
+function allowClick() {
+    return !document.querySelectorAll("body").classList.contains(_dataLoadingFlag);
+}
+
+function 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,7 @@
+
+const _dataLoadingFlag = 'data-loading'
+var _domParser = null;
+// var hashPageCurrent; // moved to layout
+const keyPublicStripe = 'pk_test_51OGrxlL7BuLKjoMpfpfw7bSmZZK1MhqMoQ5VhW2jUj7YtoEejO4vqnxKPiqTHHuh9U4qqkywbPCSI9TpFKtr4SYH007KHMWs68';
+var _pageCurrent = null;
+var _verbose = true;

static/js/lib/events.js

@@ -0,0 +1,9 @@
+
+function initialiseEventHandler(selectorElement, classInitialised, eventHandler) {
+    document.querySelectorAll(selectorElement).forEach(function(element) {
+        if (!element.classList.contains(classInitialised)) {
+            element.classList.add(classInitialised);
+            eventHandler(element);
+        }
+    });
+}

static/js/lib/init.js

@@ -0,0 +1,3 @@
+// Shared JS file names: routing, main, shared, localStorage, appDialogs
+
+

static/js/lib/local_storage.js

@@ -0,0 +1,59 @@
+
+// Local storage
+/*
+function getPageLocalStorage(pageHash) {
+
+    let ls;
+    try {
+        ls = JSON.parse(localStorage.getItem(pageHash));
+    } catch {
+
+    }
+
+    if (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 (isEmpty(ls)) ls = {};
+
+    setPageLocalStorage(pageHash, ls);
+}
+*/
+
+function getLocalStorage(key) {
+    return JSON.parse(localStorage.getItem(key));
+}
+
+function 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,10 @@
+// Utility functions
+/*
+function $(selector) {
+    return document.querySelector(selector);
+}
+
+function $$(selector) {
+    return document.querySelectorAll(selector);
+}
+*/

static/js/lib/validation.js

@@ -0,0 +1,146 @@
+
+// Argument validation
+/*
+function isNullOrWhitespace(v) {
+    let txt = JSON.stringify(v).replace('/\s\g', '');
+    return (txt == '' || 'null');
+}
+*/
+
+function 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 function 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;
+}
+
+function isValidNumber(value, positiveOnly) {
+    return !isEmpty(value) && !isNaN(value) && (!positiveOnly || parseFloat(value) > 0);
+}
+
+function getDataContentType(params) {
+
+    var data = null;
+    var contentType = '';
+
+    if (!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 };
+}
+
+function arrayContainsItem(array, itemValue) {
+
+    var hasItem = false;
+
+    if (!isEmpty(array) && !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;
+}
+
+function dictHasKey(d, k) {
+    return (k in d);
+}
+
+function imageExists(url, callback) {
+
+    var img = new Image();
+
+    img.onload = function() { callback(true); };
+    img.onerror = function() { callback(false); };
+    img.src = url;
+}
+
+function validateImageUrl(id, img) {
+    imageExists(img, function(exists) {
+        if (exists) {
+            document.querySelectorAll("#" + id).css({ "background-image": "url(" + url + ")", "background-size": "35px 35px"})
+        }
+    })
+}
+

static/js/license.js

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

static/js/pages/page_accessibility_statement.js

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

static/js/pages/page_admin_home.js

@@ -0,0 +1,46 @@
+
+import { PageBase } from "./page_base.js";
+import { router } from "../router.js";
+
+export class PageAdminHome extends PageBase {
+    static hash = hashPageAdminHome;
+
+    constructor() {
+        super();
+    }
+
+    initialize() {
+        this.sharedInitialize();
+        this.hookupAdminStore();
+    }
+    
+    hookupAdminStore() {
+        this.hookupButtonNavStoreProductCategories();
+        this.hookupButtonNavStoreProducts();
+        this.hookupButtonNavStoreProductPermutations();
+        this.hookupButtonNavStoreProductPrices();
+        this.hookupButtonNavStoreStockItems();
+        this.hookupButtonNavStoreProductVariations();
+
+        this.hookupButtonNavAdminStoreStripeProducts();
+        this.hookupButtonNavAdminStoreStripePrices();
+    }
+    hookupButtonNavAdminStoreStripeProducts() {
+        initialiseEventHandler('.' + flagNavAdminStoreStripeProducts, flagInitialised, function(navigator) {
+            navigator.addEventListener("click", function(event) {
+                router.navigateToHash(hashPageAdminStoreStripeProducts);
+            });
+        });
+    }
+    hookupButtonNavAdminStoreStripePrices() {
+        initialiseEventHandler('.' + flagNavAdminStoreStripePrices, flagInitialised, function(navigator) {
+            navigator.addEventListener("click", function(event) {
+                router.navigateToHash(hashPageAdminStoreStripePrices);
+            });
+        });
+    }
+
+    leave() {
+        super.leave();
+    }
+}

static/js/pages/page_base.js

@@ -0,0 +1,244 @@
+import API from "../api.js";
+import { router } from "../router.js";
+
+export class PageBase {
+    constructor() {
+        this.title = titlePageCurrent;
+        // this.hash = hashPageCurrent;
+        if (this.constructor === PageBase) {
+            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 'init()' must be implemented.");
+    }
+
+    sharedInitialize() {
+        this.logInitialisation();
+        this.hookupCommonElements();
+    }
+
+    logInitialisation() {
+        console.log('Initializing ' + this.title + ' page');
+    }
+    
+    hookupCommonElements() {
+        // hookupVideos();
+        this.hookupNavigation();
+        this.hookupImagesLogo();
+    }
+    
+    hookupNavigation() {
+        /* Can be removed: */
+        console.log("hooking up navigation");
+        let overlayHamburger = document.querySelector(idOverlayHamburger);
+        let hamburgerOptions = overlayHamburger.querySelectorAll('div.' + flagRow);
+        let countOptions = hamburgerOptions.length;
+        console.log('count nav options: ', countOptions);
+        // overlayHamburger.css('height', (countOptions * 27) + 'px');
+        /* end of can be removed */
+
+        initialiseEventHandler(idButtonHamburger, flagInitialised, function(buttonToggleOverlayNavigation) {
+            buttonToggleOverlayNavigation.addEventListener("click", function(event) {
+                event.stopPropagation();
+                let overlayHamburger = document.querySelector(idOverlayHamburger);
+                if (overlayHamburger.classList.contains(flagCollapsed)) {
+                    overlayHamburger.classList.remove(flagCollapsed);
+                    overlayHamburger.classList.add(flagExpanded);
+                } else {
+                    overlayHamburger.classList.remove(flagExpanded);
+                    overlayHamburger.classList.add(flagCollapsed);
+                }
+                // overlayHamburger.classList.add(flagInitialised);
+            });
+        });
+
+        this.hookupButtonNavHome();
+        this.hookupButtonNavServices();
+        this.hookupButtonNavContact();
+        this.hookupButtonNavUserAccount();
+        this.hookupButtonNavUserLogout();
+        this.hookupButtonNavUserLogin();
+        this.hookupButtonNavStoreHome();
+        this.hookupButtonNavStoreProductPermutations();
+        this.hookupButtonNavStoreStockItems();
+        this.hookupButtonNavAdminHome();
+    }
+    hookupButtonNavHome() {
+        initialiseEventHandler('.' + flagNavHome, flagInitialised, function(navigator) {
+            navigator.addEventListener("click", function(event) {
+                event.stopPropagation();
+                router.navigateToHash(hashPageHome);
+            });
+        });
+    }
+    hookupButtonNavServices() {        
+        initialiseEventHandler('.' + flagNavServices, flagInitialised, function(navigator) {
+            navigator.addEventListener("click", function(event) {
+                event.stopPropagation();
+                console.log('going to services page');
+                router.navigateToHash(hashPageServices);
+            });
+        });
+    }
+    hookupButtonNavContact() {        
+        initialiseEventHandler('.' + flagNavContact, flagInitialised, function(navigator) {
+            navigator.addEventListener("click", function(event) {
+                event.stopPropagation();
+                router.navigateToHash(hashPageContact);
+            });
+        });
+    }
+    hookupButtonNavUserAccount() {        
+        initialiseEventHandler('.' + flagNavUserAccount, flagInitialised, function(navigator) {
+            navigator.addEventListener("click", function(event) {
+                event.stopPropagation();
+                router.navigateToHash(hashPageUserAccount);
+            });
+        });
+    }
+    hookupButtonNavUserLogout() {        
+        initialiseEventHandler('.' + flagNavUserLogout, flagInitialised, function(navigator) {
+            navigator.addEventListener("click", function(event) {
+                event.stopPropagation();
+                router.navigateToHash(hashPageUserLogout);
+            });
+        });
+    }
+    hookupButtonNavUserLogin() {        
+        initialiseEventHandler('.' + flagNavUserLogin, flagInitialised, function(navigator) {
+            navigator.addEventListener("click", function(event) {
+                event.stopPropagation();
+                // router.navigateToHash(hashPageUserLogin);
+                /*
+                let dataRequest = {};
+                dataRequest[keyCallback] = hashPageCurrent;
+                console.log('sending data to user login controller: '); 
+                console.log(dataRequest);
+                */
+                API.loginUser()
+                    .then(function(response) {
+                    if (response.Success) {
+                        window.app.router.navigateToUrl(response[keyCallback], null, false);
+                    } else {
+                        alertError("Error", response.Message);
+                    }
+                });
+            });
+        });
+    }
+    hookupButtonNavStoreHome() {        
+        initialiseEventHandler('.' + flagNavStoreHome, flagInitialised, function(navigator) {
+            navigator.addEventListener("click", function(event) {
+                event.stopPropagation();
+                router.navigateToHash(hashPageStoreHome);
+            });
+        });
+    }
+    hookupButtonNavStoreProductCategories() {
+        initialiseEventHandler('.' + flagNavStoreProductCategories, flagInitialised, function(navigator) {
+            navigator.addEventListener("click", function(event) {
+                event.stopPropagation();
+                router.navigateToHash(hashPageStoreProductCategories);
+            });
+        });
+    }
+    hookupButtonNavStoreProducts() {
+        initialiseEventHandler('.' + flagNavStoreProducts, flagInitialised, function(navigator) {
+            navigator.addEventListener("click", function(event) {
+                event.stopPropagation();
+                router.navigateToHash(hashPageStoreProducts);
+            });
+        });
+    }
+    hookupButtonNavStoreProductPermutations() {
+        initialiseEventHandler('.' + flagNavStoreProductPermutations, flagInitialised, function(navigator) {
+            navigator.addEventListener("click", function(event) {
+                event.stopPropagation();
+                router.navigateToHash(hashPageStoreProductPermutations);
+            });
+        });
+    }
+    hookupButtonNavStoreProductPrices() {
+        initialiseEventHandler('.' + flagNavStoreProductPrices, flagInitialised, function(navigator) {
+            navigator.addEventListener("click", function(event) {
+                event.stopPropagation();
+                router.navigateToHash(hashPageStoreProductPrices);
+            });
+        });
+    }
+    hookupButtonNavStoreProductVariations() {
+        initialiseEventHandler('.' + flagNavStoreProductVariations, flagInitialised, function(navigator) {
+            navigator.addEventListener("click", function(event) {
+                event.stopPropagation();
+                router.navigateToHash(hashPageStoreProductVariations);
+            });
+        });
+    }
+    hookupButtonNavStoreStockItems() {
+        initialiseEventHandler('.' + flagNavStoreStockItems, flagInitialised, function(navigator) {
+            navigator.addEventListener("click", function(event) {
+                event.stopPropagation();
+                router.navigateToHash(hashPageStoreStockItems);
+            });
+        });
+    }
+    hookupButtonNavAdminHome() {
+        initialiseEventHandler('.' + flagNavAdminHome, flagInitialised, function(navigator) {
+            navigator.addEventListener("click", function(event) {
+                event.stopPropagation();
+                router.navigateToHash(hashPageAdminHome);
+            });
+        });
+    }
+
+    hookupImagesLogo() {
+        let selectorImagesLogo = "img." + flagImageLogo;
+        initialiseEventHandler(selectorImagesLogo, flagInitialised, function(imageLogo) {
+            imageLogo.addEventListener("click", function(event) {
+                event.stopPropagation();
+                router.navigateToHash(hashPageHome);
+            });
+        });
+    }
+
+    hookupOverlayFromId(idOverlay) {
+        initialiseEventHandler(idOverlay, flagInitialised, function(overlay) {
+            overlay.querySelector('button.' + flagClose).addEventListener("click", function(event) {
+                event.stopPropagation();
+                overlay.css('display', 'none');
+            });
+        });
+    }
+
+    
+    hookupButtonsContactUs() {
+        let selectorButtonsContactUs = "." + flagNavContact;
+        initialiseEventHandler(selectorButtonsContactUs, flagInitialised, function(buttonContactUs) {
+            buttonContactUs.addEventListener("click", function(event) {
+                event.stopPropagation();
+                router.navigateToHash(hashPageContact);
+            });
+        });
+    }
+
+    hookupVideos() {
+        initialiseEventHandler('video', flagInitialised, function(video) {
+            video.addEventListener("mouseover", videoPlay(video));
+            video.addEventListener("mouseout", videoPause(video));
+        });
+    }
+
+    leave() {
+        console.log('Leaving ' + this.title + ' page');
+        _pageCurrent = null;
+        if (this.constructor === PageBase) {
+            throw new Error("Must implement leave() method.");
+        }
+    }
+}

static/js/pages/page_contact.js

@@ -0,0 +1,14 @@
+
+import { PageBase } from "./page_base.js";
+
+export class PageContact extends PageBase {
+    static hash = hashPageContact;
+
+    constructor() {
+        super();
+    }
+
+    initialize() {
+        this.sharedInitialize();
+    }
+}

static/js/pages/page_home.js

@@ -0,0 +1,19 @@
+
+import { PageBase } from "./page_base.js";
+
+export class PageHome extends PageBase {
+    static hash = hashPageHome;
+
+    constructor() {
+        super();
+    }
+
+    initialize() {
+        this.sharedInitialize();
+        this.hookupButtonsContactUs();
+    }
+
+    leave() {
+        super.leave();
+    }
+}

static/js/pages/page_license.js

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

static/js/pages/page_services.js

@@ -0,0 +1,19 @@
+
+import { PageBase } from "./page_base.js";
+
+export class PageServices extends PageBase {
+    static hash = hashPageServices;
+
+    constructor() {
+        super();
+    }
+
+    initialize() {
+        this.sharedInitialize();
+    }
+
+    leave() {
+        super.leave();
+    }
+}
+

static/js/pages/page_store_base.js

@@ -0,0 +1,382 @@
+
+import { PageBase } from "./page_base.js";
+
+export class PageStoreHome extends PageBase {
+    constructor() {
+        super();
+    }
+
+    sharedInitialize() {
+        super.sharedInitialize();
+        this.hookupFiltersStore();
+        this.hookupStoreHome();
+    }
+
+
+    hookupStore() {
+        console.log('hookup store start');
+        console.log(_pathHost);
+        hookupLocalStorageStore();
+        hookupBasket();
+        hookupBtnsAdd2Basket();
+    }
+
+    hookupBasket() {
+        
+        // const containerBasket = document.querySelectorAll(idContainerBasket);
+        toggleShowBtnCheckout(); // containerBasket
+        hookupBtnCheckout();
+        hookupBtnsPlusMinus();
+        hookupBasketAddInputs();
+        hookupBasketEditInputs();
+        hookupBtnsDelete();
+    }
+
+    hookupLocalStorageStore() {
+
+        // setupPageLocalStorage(hashPageCurrent);
+        // let lsPage = getPageLocalStorage(hashPageCurrent);
+        // let d = {}
+        // d[keyBasket] = getLocalStorage(keyBasket); // (keyBasket in lsPage) ? lsPage[keyBasket] : {'items': []};
+        // console.log('d:'); console.log(d);
+        let basket;
+        let createNewBasket = true;
+        if (true) { // !isUserLoggedIn) {
+            try {
+                basket = getLocalStorage(keyBasket);
+                console.log('basket found: '); console.log(basket);
+                createNewBasket = isEmpty(basket);
+            }
+            catch {
+                
+            }
+            // lsPage[keyBasket] = ajaxJSONData(keyBasket, hashStoreBasketLoad, d, loadBasket, false);
+        }
+        else {
+            // store basket from server in localStorage
+            
+        }
+        if (createNewBasket) {
+            basket = {};
+            basket[keyItems] = [];
+            basket[keyIsIncludedVAT] = true;
+            basket[keyIdCurrency] = 1;
+            basket[keyIdRegionDelivery] = 1;
+            setLocalStorage(keyBasket, basket);
+            console.log("new local basket created");
+        }
+        let ajaxData = {}
+        ajaxData[keyBasket] = basket;
+        // console.log("hookupLocalStorageStore\nhashStoreBasketLoad: " + hashStoreBasketLoad + "\n");
+        // ajaxData[keyIsIncludedVAT] = getLocalStorage(keyIsIncludedVAT);
+        console.log('ajax:' + ajaxData);
+        ajaxJSONData(keyBasket, mapHashToController(hashStoreBasketLoad), ajaxData, loadBasket, false);
+    }
+
+    /*
+    setupPageLocalStorageNextStore(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);
+    }
+
+    goToPageStore(pageHash, parameters_dict) {
+        
+        let lsOld = getPageLocalStorage(pageHashCurrent);
+        pageHashCurrent = pageHash;
+        clearPageLocalStorage(pageHashCurrent);
+        setupPageLocalStorage(pageHashCurrent);
+        let lsNew = getPageLocalStorage(pageHashCurrent);
+        lsNew[keyBasket] = (keyBasket in lsOld) ? lsOld[keyBasket] : {'items': []};
+        setPageLocalStorage(pageHashCurrent, lsNew);
+        
+        goToPage(pageHash, parameters_dict);
+    }
+    */
+
+    toggleShowBtnCheckout() { // containerBasket
+        
+        console.log("toggling checkout button");
+
+        const btnCheckout = document.querySelectorAll(idBtnCheckout);
+        const labelBasketEmpty = document.querySelectorAll(idLabelBasketEmpty);
+
+        // let lsPage = getPageLocalStorage(hashPageCurrent);
+        // let basket = lsPage[keyBasket]['items'];
+        // let products = containerBasket.filter('');
+        let basket = getLocalStorage(keyBasket);
+
+        if (basket['items'].length == 0) {
+            btnCheckout.style.display = "none";
+            labelBasketEmpty.style.display = "";
+        } else {
+            btnCheckout.style.display = "";
+            labelBasketEmpty.style.display = "none";
+        }
+    }
+
+    /*
+    getBasket() {
+
+        lsShared = getPageLocalStorage(keyShared);
+
+        return lsShared[keyBasket];
+    }
+    */
+
+    hookupBtnsAdd2Basket() {
+
+        // let product, btn, lsPage;
+        // [' + attrIdProduct + '=' + elBtn.attr(attrIdProduct) + ']
+        document.querySelectorAll('form[' + attrFormType + '="' + typeFormBasketAdd +'"]').each(function() {
+        
+            var form = this;
+
+            initialiseEventHandler(form, flagInitialised, function() {
+                // form = document.querySelectorAll(form);
+                form.submit(function(event) {
+                    event.preventDefault();
+
+                    // lsShared = getPageLocalStorage(keyShared);
+                    console.log("adding to basket for product ID: ", form.attr(attrIdProduct));
+
+                    ajaxData = {};
+                    ajaxData[keyIdProduct] = form.attr(attrIdProduct);
+                    ajaxData[keyIdPermutation] = form.attr(attrIdPermutation);
+                    basket = getLocalStorage(keyBasket);
+                    ajaxData[keyBasket] = basket; // lsShared[keyBasket];
+                    console.log("basket before add: ", basket);
+                    ajaxData[keyForm] = convertForm2JSON(form); // formData; // form.serialize();
+                    console.log("ajax data:"); console.log(ajaxData);
+                    ajaxJSONData('add2Basket', mapHashToController(hashStoreBasketAdd), ajaxData, loadBasket, false); // { product_id: form.attr(attrIdProduct), basket_local: lsPage[keyBasket] , }
+                });
+                console.log("basket add method added for product ID: ", form.attr(attrIdProduct));
+            });
+        });
+    }
+
+    hookupBtnCheckout() {
+
+        console.log("hooking up checkout button");
+
+        const btnCheckout = document.querySelectorAll(idBtnCheckout);
+        // let lsPage = getPageLocalStorage(hashPageCurrent);
+        initialiseEventHandler(btnCheckout, flagInitialised, function() {
+            btnCheckout.addEventListener("click", function() {
+                /*
+                //setupPageLocalStorageNext(hashPageStoreBasket);
+                let basket = getLocalStorage(keyBasket);
+                // goToPage(hashPageStoreBasket);
+                let ajaxData = {};
+                ajaxData[keyBasket] = basket;
+
+                ajaxJSONData('checkout', mapHashToController(hashPageStoreBasket), ajaxData, null, false);
+                */
+            goToPage(hashPageStoreBasket);
+            });
+        });
+    }
+
+    loadBasket(response) {
+
+        let basketContainer = document.querySelectorAll(idBasketContainer);
+        // let lsPage = getPageLocalStorage(hashPageCurrent);
+        // let lsShared = getPageLocalStorage(keyShared);
+
+        console.log('ajax:'); console.log(response.data);
+
+        let basket = response.data[keyBasket]; // JSON.parse(response.data[keyBasket]);
+        // setPageLocalStorage(keyShared, lsShared);
+        setLocalStorage(keyBasket, basket);
+        items = basket['items'];
+        // console.log('old basket:'); console.log(basketContainer.innerHTML);
+        // console.log('setting basket:'); console.log(response.data['html_block']);
+        basketContainer.innerHTML = response.data['html_block'];
+        
+        /*
+        if (items.length > 0) {
+            let basketItem;
+            for (let indexItemBasket = 0; indexItemBasket < items.length; indexItemBasket++) {
+                basketItem = items[indexItemBasket];
+                if (basketItem[keyQuantity] > 1) {
+                    elInput = basketContainer.querySelector('form[' + attrFormType + '=' + typeFormBasketEdit + ']').querySelector('input[type="number"]');
+                    // todo : what is missing?
+                    elInput.val(basketItem[keyQuantity]);
+                }
+            }
+        }
+        */
+    
+        hookupBasket();
+    }
+
+    getFormProductSelector(typeForm, elementInForm) {
+        idPermutation = elementInForm.attr(attrIdPermutation);
+        console.log('idPermutation: ', idPermutation);
+        hasPermutation = !isEmpty(idPermutation);
+        console.log('has permutation: ', hasPermutation);
+        selectorIdPermutation = hasPermutation ? '[' + attrIdPermutation + '=' + idPermutation + ']' : '';
+        return 'form[' + attrFormType + '="' + typeForm + '"][' + attrIdProduct + '=' + elementInForm.attr(attrIdProduct) + ']' + selectorIdPermutation;
+    }
+
+    hookupBtnsPlusMinus() {
+        
+        // let elBtn, elInput, newVal, product;
+        const minVal = 1;
+        // Basket Add
+        // Increment
+        document.querySelectorAll('div.btn-increment[' + attrFormType + '=' + typeFormBasketAdd + ']').each(function() {
+            let elBtn = this;
+            initialiseEventHandler(elBtn, flagInitialised, function(){
+                elBtn.addEventListener("click", function(event) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    let elInput = document.querySelectorAll(getFormProductSelector(typeFormBasketAdd, elBtn)).querySelector('input[type="number"]');
+                    // console.log('input selector ='); console.log('form[' + attrFormType + '=' + elBtn.attr(attrFormType) + '][' + attrIdProduct + '=' + elBtn.attr(attrIdProduct) + ']');
+                    let newVal = parseInt(getElementCurrentValue(elInput));
+                    if (isNaN(newVal)) newVal = minVal;
+                    newVal += 1;
+                    elInput.val(newVal);
+                });
+            });
+        });
+        // Decrement
+        document.querySelectorAll('div.btn-decrement[' + attrFormType + '=' + typeFormBasketAdd + ']').each(function() {
+            let elBtn = this;
+            initialiseEventHandler(elBtn, flagInitialised, function(){
+                elBtn.addEventListener("click", function(event) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    // let product = document.querySelectorAll('.card.subcard[' + attrIdProduct +'=' + elBtn.attr(attrIdProduct) + ']');
+                    let elInput= document.querySelectorAll(getFormProductSelector(typeFormBasketAdd, elBtn)).querySelector('input[type="number"]');
+                    let newVal = parseInt(getElementCurrentValue(elInput));
+                    if (isNaN(newVal)) newVal = minVal;
+                    newVal = Math.max(minVal, newVal - 1);
+                    elInput.val(newVal);
+                });
+            });
+        });
+
+        // Basket Edit
+        // Increment
+        document.querySelectorAll('div.btn-increment[' + attrFormType + '=' + typeFormBasketEdit + ']').each(function() {
+            let elBtn = this;
+            initialiseEventHandler(elBtn, flagInitialised, function(){
+                elBtn.addEventListener("click", function(event) {
+                    event.stopPropagation();
+                    // basketItem = document.querySelectorAll('.card.subcard[' + attrIdProduct +'=' + elBtn.attr(attrIdProduct) + ']');
+                    let elInput = document.querySelectorAll(getFormProductSelector(typeFormBasketEdit, elBtn)).querySelector('input[type="number"]');
+                    // console.log('input selector ='); console.log('form[' + attrFormType + '=' + elBtn.attr(attrFormType) + '][' + attrIdProduct + '=' + elBtn.attr(attrIdProduct) + ']');
+                    let newVal = parseInt(getElementCurrentValue(elInput));
+                    if (isNaN(newVal)) newVal = minVal;
+                    newVal += 1;
+                    elInput.val(newVal);
+                    elInput.trigger("change");
+                });
+            });
+        });
+        // Decrement
+        document.querySelectorAll('div.btn-decrement[' + attrFormType + '=' + typeFormBasketEdit + ']').each(function() {
+            let elBtn = this;
+            initialiseEventHandler(elBtn, flagInitialised, function(){
+                elBtn.addEventListener("click", function(event) {
+                    event.stopPropagation();
+                    let elInput= document.querySelectorAll(getFormProductSelector(typeFormBasketEdit, elBtn)).querySelector('input[type="number"]');
+                    let newVal = parseInt(getElementCurrentValue(elInput));
+                    if (isNaN(newVal)) newVal = minVal;
+                    newVal = Math.max(minVal, newVal - 1);
+                    elInput.val(newVal);
+                    elInput.trigger("change");
+                });
+            });
+        });
+    }
+
+    hookupBasketAddInputs() {
+        
+        document.querySelectorAll('form[' + attrFormType + '=' + typeFormBasketAdd + ']').each(function() {
+            let elForm = this;
+            let elInput = elForm.querySelector('input[type="number"]');
+            initialiseEventHandler(elInput, flagInitialised, function(){
+                elInput.addEventListener("change", function(event) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                });
+                elInput.addEventListener("click", function(event) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                });
+            });
+        });
+    }
+
+    hookupBasketEditInputs() {
+        
+        // let elBtn, elInput, newVal, product;
+        const minVal = 1;
+        // Basket Edit
+        // Increment
+        document.querySelectorAll('form[' + attrFormType + '=' + typeFormBasketEdit + ']').each(function() {
+            let elForm = this;
+            let elInput = elForm.querySelector('input[type="number"]');
+            initialiseEventHandler(elInput, flagInitialised, function(){
+                elInput.addEventListener("change", function(event) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    // let lsPage = getPageLocalStorageCurrent();
+                    d = {};
+                    d[keyBasket]= getLocalStorage(keyBasket); // lsPage[keyBasket]; // JSON.parse(lsPage[keyBasket]);
+                    d[keyIdProduct] = elForm.attr(attrIdProduct); // lsPage[keyIdProduct];
+                    d[keyIdPermutation] = elForm.attr(attrIdPermutation);
+                    // d[keyQuantity] = lsPage[keyQuantity];
+                    d[keyForm] = convertForm2JSON(elForm);
+                    d[keyForm][keyQuantity] = elInput.val();
+                    console.log('sending data to basket edit controller: '); console.log(d);
+                    ajaxJSONData('basket update', mapHashToController(hashStoreBasketEdit), d, loadBasket, false);
+                });
+            });
+        });
+    }
+
+    hookupBtnsDelete() {
+        
+        console.log('hooking up basket item delete buttons');
+        // let elForm, elDelete;
+        // const minVal = 1;
+        // Basket Add
+        // Increment
+        document.querySelectorAll('form[' + attrFormType + '=' + typeFormBasketEdit + ']').each(function() {
+            let elForm = this;
+            let elDelete = elForm.querySelector('a.' + flagBasketItemDelete);
+            initialiseEventHandler(elDelete, flagInitialised, function(){
+                elDelete.addEventListener("click", function(event) {
+                    event.stopPropagation();
+                    ajaxData = {};
+                    ajaxData[keyBasket]= getLocalStorage(keyBasket);
+                    ajaxData[keyIdProduct] = elForm.attr(attrIdProduct);
+                    ajaxData[keyIdPermutation] = elForm.attr(attrIdPermutation);
+                    console.log('sending data to basket delete controller: '); console.log(ajaxData);
+                    ajaxJSONData('basket update', mapHashToController(hashStoreBasketDelete), ajaxData, loadBasket, false);
+                });
+            });
+        });
+    }
+
+    getCurrencySelected() {
+        let elementSelectorCurrency = document.querySelectorAll(idSelectorCurrency);
+        let selectedCurrency = elementSelectorCurrency.val();
+        console.log("selected currency: ", selectedCurrency);
+        return selectedCurrency;
+    }
+
+    addMetadataBasketToJSON(jsonData) {
+        jsonData[keyIdCurrency] = getLocalStorage(keyIdCurrency);
+        jsonData[keyIdRegionDelivery] = getLocalStorage(keyIdRegionDelivery);
+        jsonData[keyIsIncludedVAT] = getLocalStorage(keyIsIncludedVAT);
+        return jsonData;
+    }
+}

static/js/pages/page_store_basket.js

@@ -0,0 +1,191 @@
+import { PageBase } from "./page_base.js";
+
+export class PageStoreBasket extends PageBase {
+    static hash = hashPageStoreBasket;
+
+    constructor() {
+        super();
+    }
+
+    initialize() {
+        this.sharedInitialize();
+        this.hookupStoreCardsInfo();
+        this.hookupOverlaysStoreBasketInfo();
+        this.hookupBtnCheckoutSession();
+    }
+
+    
+    hookupStoreCardsInfo() {
+        
+        document.querySelectorAll(idContainerInfoDelivery).addEventListener("click", function(event) {
+            console.log("delivery modal display method");
+            document.querySelectorAll(idOverlayInfoDelivery).css('display', 'block');
+        });
+        
+        document.querySelectorAll(idContainerInfoBilling).addEventListener("click", function(event) {
+            console.log("billing modal display method");
+            document.querySelectorAll(idOverlayInfoBilling).css('display', 'block');
+        });
+    }
+
+    hookupOverlaysStoreBasketInfo() {
+
+        let elOverlay, elForm;
+
+        // Delivery
+        elOverlay = document.querySelectorAll(idOverlayInfoDelivery);
+        elForm = elOverlay.querySelector('form');
+        
+        hookupOverlay(elOverlay);
+        initialiseEventHandler(elForm, flagInitialised, function() {
+            elForm.submit(function(event) {
+                elForm = document.querySelectorAll(elForm);
+                event.preventDefault();
+                console.log("delivery submit method");
+                
+                ajaxData = {};
+                ajaxData[keyInfoType] = keyInfoDelivery;
+                ajaxData = convertFormBilling2JSON(ajaxData, idOverlayInfoDelivery); 
+
+                ajaxJSONData('info delivery', mapHashToController(hashStoreBasketInfo), ajaxData, loadInfoAddress, false);
+                // document.querySelectorAll(idOverlayInfoDelivery).css('display', 'none');
+            });
+        });
+
+        // Billing
+        elOverlay = document.querySelectorAll(idOverlayInfoBilling);
+        elForm = elOverlay.querySelector('form');
+
+        hookupOverlay(elOverlay);
+        initialiseEventHandler(elForm, flagInitialised, function() {
+            elForm.submit(function(event) {
+                event.preventDefault();
+                console.log("billing submit method");
+                
+                ajaxData = {};
+                ajaxData[keyInfoType] = keyInfoBilling;
+                ajaxData = convertFormBilling2JSON(ajaxData, idOverlayInfoBilling); // formData; // form.serialize();
+
+                ajaxJSONData('info billing', mapHashToController(hashStoreBasketInfo), ajaxData, loadInfoAddress, false);
+                // document.querySelectorAll(idOverlayInfoBilling).css('display', 'none');
+            });
+        });
+        let keys = [keyNameFull, keyPhoneNumber, keyPostcode, keyAddress1, keyCity, keyCounty];
+        for (var k in keys) {
+            elForm.querySelector('#' + keys[k]).removeAttr('required');
+        }
+    }
+
+    loadInfoAddress(response) {
+        
+        console.log('ajax:'); console.log(response.data);
+        let infoType = response.data[keyInfoType];
+        let infoAddress = response.data[infoType];
+        setLocalStorage(infoType, infoAddress);
+
+        // update webpage elements in background
+        if (infoType == keyInfoBilling) {
+
+            let container = document.querySelectorAll(idContainerInfoBilling);
+            if (infoAddress[keyInfoIdentical]) {
+                container.querySelector('div').innerHTML = "Same as delivery address";
+            } else {
+                container.querySelector('div').innerHTML = "<strong>" + infoAddress[keyNameFull] + '</strong> at <strong>' + infoAddress[keyPostcode] + "</strong>";
+            }
+
+            document.querySelectorAll(idOverlayInfoBilling).css('display', 'none');
+
+            document.querySelectorAll(idOverlayInfoBilling).querySelector('form').classList.add(flagSubmitted);
+        } else {
+
+            let container = document.querySelectorAll(idContainerInfoDelivery);
+            container.querySelector('div').innerHTML = "<strong>" + infoAddress[keyNameFull] + '</strong> at <strong>' + infoAddress[keyPostcode] + "</strong>";
+
+            document.querySelectorAll(idOverlayInfoDelivery).css('display', 'none');
+
+            document.querySelectorAll(idOverlayInfoDelivery).querySelector('form').classList.add(flagSubmitted);
+        }
+    }
+
+    convertFormBilling2JSON(ajaxData, idOverlayInfo) {
+        
+        let elOverlay, elForm, elOverlayDelivery, elFormDelivery;
+        
+        elOverlay = document.querySelectorAll(idOverlayInfo);
+        elForm = elOverlay.querySelector('form');
+        elOverlay = document.querySelectorAll(idOverlayInfoDelivery);
+        elForm = elOverlay.querySelector('form');
+        
+        console.log('converting billing form to json\nform ID: ' + elForm.id);
+        ajaxData[keyForm] = convertForm2JSON(elForm); // formData; // form.serialize();
+        let keys = [keyNameFull, keyPhoneNumber, keyPostcode, keyAddress1, keyAddress2, keyCity, keyCounty];
+        console.log('ajaxData:');
+        console.log(ajaxData);
+        ajaxData[keyForm][keyInfoIdentical] = getElementCurrentValue(elForm.querySelector('#' + keyInfoIdentical));
+        for (var k in keys) {
+            if (idOverlayInfo == idOverlayInfoBilling && ajaxData[keyForm][keyInfoIdentical]) {
+                ajaxData[keyForm][keys[k]] = getElementCurrentValue(elFormDelivery.querySelector('#' + keys[k]));
+            } else {
+                ajaxData[keyForm][keys[k]] = getElementCurrentValue(elForm.querySelector('#' + keys[k]));
+            }
+        }
+        console.log('ajaxData:');
+        console.log(ajaxData);
+        return ajaxData;
+    }
+
+    hookupBtnCheckoutSession() {
+        let btnCheckout = document.querySelectorAll(idBtnCheckout);
+        btnCheckout.classList.remove(flagInitialised);
+        initialiseEventHandler(idBtnCheckout, flagInitialised, function() {
+
+            btnCheckout.removeEventListener("click");
+            btnCheckout.addEventListener("click", function(event) {
+                
+                
+                //setupPageLocalStorageNext(hashPageStoreBasket);
+                let basket = getLocalStorage(keyBasket);
+                // goToPage(hashPageStoreBasket);
+                let ajaxData = {};
+                ajaxData[keyBasket] = basket;
+                ajaxData = convertFormBilling2JSON(ajaxData, idOverlayInfoDelivery);
+                ajaxData = convertFormBilling2JSON(ajaxData, idOverlayInfoBilling);
+                ajaxData[key_code_currency] = getCurrencySelected();
+                // ajaxData[keyIsSubscription] = false; // only checkout one-time payment items for now
+
+                ajaxJSONData('checkout session', mapHashToController(hashPageStoreCheckout), ajaxData, handleResponseCheckout, false);
+            });
+        });
+    }
+
+    handleResponseCheckout(response) {
+        // let tmpData = {};
+        // tmpData[keyIdCheckout] = response.data[keyIdCheckout]
+        // goToPage(hashPageStoreCheckoutSession, tmpData);
+        window.location.href = response.data[keyUrlCheckout]
+    }
+
+    hookupBtnFormBillingCopy() {
+
+        // let elBtn = document.querySelectorAll(idBtnFormBillingCopy);
+
+        initialiseEventHandler(idBtnFormBillingCopy, flagInitialised, function() {
+            document.querySelectorAll(idBtnFormBillingCopy).addEventListener("click", function (event) {
+                
+                let keys = [keyNameFull, keyPhoneNumber, keyPostcode, keyAddress1, keyAddress2, keyCity, keyCounty];
+
+                let elFormBilling = document.querySelectorAll(idOverlayInfoBilling).querySelector('form');
+                let elFormDelivery = document.querySelectorAll(idOverlayInfoDelivery).querySelector('form');
+
+                for (var k in keys) {
+                    elFormBilling.querySelector('#' + keys[k]).value = getElementCurrentValue(elFormDelivery.querySelector('#' + keys[k]));
+                }
+            });
+        });
+    }
+
+
+    leave() {
+        super.leave();
+    }
+}

static/js/pages/page_store_home.js

@@ -0,0 +1,174 @@
+
+import { PageBase } from "./page_base.js";
+
+export class PageStoreHome extends PageBase {
+    static hash = hashPageStoreHome;
+
+    constructor() {
+        super();
+    }
+
+    initialize() {
+        this.sharedInitialize();
+        this.hookupFiltersStore();
+        this.hookupStoreHome();
+    }
+
+    
+    hookupFiltersStore() {
+        hookupFilterCurrency();
+        hookupFilterDeliveryRegion();
+        hookupFilterIsIncludedVAT();
+    }
+
+    hookupFilterCurrency() {
+        /*
+        let elForm = document.querySelectorAll(idFormCurrency);
+        let elSelector = document.querySelectorAll(elForm.querySelector('select')[0]);
+        initialiseEventHandler(elSelector, flagInitialised, function(){
+            elForm = document.querySelectorAll(idFormCurrency);
+            elSelector.addEventListener("change", function(event) {
+                ajaxData = {};
+                ajaxData[keyForm] = convertForm2JSON(elForm);
+                console.log('sending data to currency selector controller: '); console.log(ajaxData);
+                ajaxJSONData('select currency', mapHashToController(hashStoreSelectCurrency), ajaxData, function() { window.location.reload() }, false);
+
+                let optionSelected = elSelector.options[elSelector.selectedIndex]
+                let textSelected = optionSelected.attr(attrDataShort)
+                
+            });
+        });
+        console.log("form currency initialised")
+        */
+
+        let dropdownCurrency = document.querySelectorAll(idCurrency)[0];
+        // dropdownCurrency.options.map(function(option) {
+        let option, indexHyphen, textOption;
+        for (let indexOption = 0; indexOption < dropdownCurrency.options.length; indexOption++) {
+            option = document.querySelectorAll(dropdownCurrency.options[indexOption]);
+            textOption = option.text();
+            indexHyphen = textOption.indexOf('-');
+            option.attr(attrTextExpanded, textOption);
+            option.attr(attrTextCollapsed, textOption.substring(0, indexHyphen - 1));
+            option.classList.add(flagCollapsed);
+        }
+        handleSelectCollapse(dropdownCurrency);
+        initialiseEventHandler(dropdownCurrency, flagInitialised, function() {
+            dropdownCurrency = document.querySelectorAll(dropdownCurrency);
+            dropdownCurrency.addEventListener("focus", function() {
+                handleSelectExpand(dropdownCurrency);
+            });
+            dropdownCurrency.addEventListener("blur", function() {
+                handleSelectCollapse(dropdownCurrency);
+            });
+            dropdownCurrency.addEventListener("change", function() {
+                let selectedCurrency = dropdownCurrency.val();
+                console.log("selected currency: ", selectedCurrency);
+                let basket = getLocalStorage(keyBasket);
+                basket[keyIdCurrency] = selectedCurrency;
+                // setLocalStorage(keyIdCurrency, selectedCurrency);
+                setLocalStorage(keyBasket, basket);
+                let ajaxData = {};
+                ajaxData[keyBasket] = basket;
+                ajaxJSONData('update currency', mapHashToController(hashPageCurrent), ajaxData, loadPageBody, false);
+            });
+        });
+    }
+
+    hookupFilterDeliveryRegion() {
+        /*
+        let elForm = document.querySelectorAll(idFormDeliveryRegion);
+        let elSelector = document.querySelectorAll(elForm.querySelector('select')[0]);
+        initialiseEventHandler(elSelector, flagInitialised, function(){
+            elForm = document.querySelectorAll(idFormDeliveryRegion);
+            elSelector.addEventListener("change", function(event) {
+                ajaxData = {};
+                ajaxData[keyForm] = convertForm2JSON(elForm);
+                console.log('sending data to delivery region selector controller: '); console.log(ajaxData);
+                ajaxJSONData('select delivery region', mapHashToController(hashStoreSelectDeliveryRegion), ajaxData, function() { window.location.reload() }, false);
+            });
+            console.log("form delivery region initialised")
+        });
+        */
+    
+        let dropdownRegion = document.querySelectorAll(idRegionDelivery)[0];
+        
+        let option, indexHyphen, textOption;
+        for (let indexOption = 0; indexOption < dropdownRegion.options.length; indexOption++) {
+            option = document.querySelectorAll(dropdownRegion.options[indexOption]);
+            textOption = option.text();
+            indexHyphen = textOption.indexOf('-');
+            option.attr(attrTextExpanded, textOption);
+            option.attr(attrTextCollapsed, textOption.substring(0, indexHyphen - 1));
+            option.classList.add(flagCollapsed);
+        }
+
+        handleSelectCollapse(dropdownRegion);
+
+        initialiseEventHandler(dropdownRegion, flagInitialised, function() {
+            dropdownRegion = document.querySelectorAll(dropdownRegion);
+            dropdownRegion.addEventListener("focus", function() {
+                console.log("dropdown region focused");
+                handleSelectExpand(dropdownRegion);
+            });
+            dropdownRegion.addEventListener("blur", function() {
+                console.log("dropdown region blurred");
+                handleSelectCollapse(dropdownRegion);
+            });
+            dropdownRegion.addEventListener("change", function() {
+                handleSelectCollapse(dropdownRegion);
+                let selectedRegion = dropdownRegion.val();
+                console.log("selected region: ", selectedRegion);
+                let basket = getLocalStorage(keyBasket);
+                basket[keyIdRegionDelivery] = selectedRegion;
+                // setLocalStorage(keyIdRegionDelivery, selectedRegion);
+                setLocalStorage(keyBasket, basket);
+                let ajaxData = {};
+                ajaxData[keyIdRegionDelivery] = selectedRegion;
+                ajaxJSONData('update region', mapHashToController(hashStoreSetRegion), ajaxData, null, false);
+            });
+        });
+    }
+
+    hookupFilterIsIncludedVAT() {
+        let elForm = document.querySelectorAll(idFormIsIncludedVAT);
+        let elSelector = document.querySelectorAll(elForm.querySelector('input[type="checkbox"]')[0]);
+        initialiseEventHandler(elSelector, flagInitialised, function(){
+            elForm = document.querySelectorAll(idFormIsIncludedVAT);
+            elSelector.addEventListener("change", function(event) {
+                ajaxData = {};
+                ajaxData[keyForm] = convertForm2JSON(elForm);
+                console.log('sending data to include VAT controller: '); console.log(ajaxData);
+                ajaxJSONData('set include VAT', mapHashToController(hashStoreSetIsIncludedVAT), ajaxData, function() { window.location.reload() }, false);
+            });
+            console.log("form is included VAT initialised")
+        });
+    }
+
+    hookupStoreCardsProduct() {
+        
+        let d; // , lsShared;
+        let selectorCardProduct = '.card.subcard';
+        initialiseEventHandler(selectorCardProduct, flagInitialised, function(cardProduct) {
+            console.log("initialising product card: ", cardProduct);
+            cardProduct.addEventListener("click", function(event) {
+                // d = { keyIdProduct: product.attr(attrIdProduct) }
+                var elemClicked = event.target;
+                if (elemClicked.id != 'submit') { // disable for submit buttons
+                    console.log("product click: " + cardProduct.attr(attrIdProduct));
+                    console.log("permutation click: " + cardProduct.attr(attrIdPermutation));
+                    var d = {}
+                    d[keyIdProduct] = cardProduct.attr(attrIdProduct)
+                    d[keyIdPermutation] = cardProduct.attr(attrIdPermutation)
+                    // send quantity requested
+                    goToPage(hashPageStoreProduct, d);
+                }
+            });
+            console.log("click method added for product ID: " + cardProduct.attr(attrIdProduct) + ', permutation ID: ', cardProduct.attr(attrIdPermutation));
+        });
+    }
+
+    leave() {
+        super.leave();
+    }
+}

static/js/pages/page_store_product_categories.js

@@ -0,0 +1,474 @@
+var _rowBlank = null;
+
+import { PageBase } from "./page_base.js";
+
+export class PageStoreProductCategories extends PageBase {
+    static hash = hashPageStoreProductCategories;
+
+    constructor() {
+        super();
+    }
+
+    initialize() {
+        this.sharedInitialize();
+        hookupFilters();
+        hookupButtonsSaveCancel();
+        hookupTableMain();
+        hookupOverlayConfirm(saveCategories);
+    }
+
+    hookupFilters() {
+        initialiseEventHandler(idFilterCategory, flagInitialised, function(filterCategory) {
+            console.log("hooking up filter category");
+            /*
+            listCategories.forEach(function(category) {
+                console.log('adding category: ', category.value, category.text);
+                /*
+                let option = document.createElement('option');
+                option.value = category.value;
+                option.text = category.text;
+                *
+            filterCategory.appendChild(document.createElement('<option>', category));
+            });
+            console.log(listCategories);
+            */
+            filterCategory.addEventListener("change", function(event) {
+                loadCategories();
+            });
+            console.log("hooked up filter category");
+        });
+
+        initialiseEventHandler(idFilterProduct, flagInitialised, function(filterProduct) {
+            listProducts.forEach(function(product) {
+                if (product[attrIdCategory] != getElementCurrentValue(document.querySelectorAll(idFilterCategory))) return;
+                /*
+                let option = document.createElement('option');
+                option.value = product.value;
+                option.text = product.text;
+                */
+            filterProduct.appendChild(document.createElement('<option>', product));
+            });
+            filterProduct.addEventListener("change", function(event) {
+                loadCategories();
+            });
+        });
+        
+        initialiseEventHandler(idFilterIsOutOfStock, flagInitialised, function(filterIsOutOfStock) {
+            filterIsOutOfStock.addEventListener("change", function(event) {
+                loadCategories();
+            });
+        });
+
+        initialiseEventHandler(idFilterQuantityMin, flagInitialised, function(filterQuantityMin) {
+            filterQuantityMin.addEventListener("change", function(event) {
+                loadCategories();
+            });
+        });
+        
+        initialiseEventHandler(idFilterQuantityMax, flagInitialised, function(filterQuantityMax) {
+            filterQuantityMax.addEventListener("change", function(event) {
+                loadCategories();
+            });
+        });
+    }
+
+    loadCategories() {
+
+        let elForm = document.querySelectorAll(idFormFiltersCategories);
+        let ajaxData = {};
+        ajaxData[keyForm] = convertForm2JSON(elForm);
+        ajaxData.csrf_token = ajaxData[keyForm].csrf_token;
+        /*
+        ajaxData[attrIdCategory] = getElementCurrentValue(document.querySelectorAll(idFilterCategory));
+        ajaxData[attrIdProduct] = getElementCurrentValue(document.querySelectorAll(idFilterProduct));
+        ajaxData[flagIsOutOfStock] = getElementCurrentValue(document.querySelectorAll(idFilterIsOutOfStock));
+        ajaxData[flagQuantityMin] = getElementCurrentValue(document.querySelectorAll(idFilterQuantityMin));
+        ajaxData[flagQuantityMax] = getElementCurrentValue(document.querySelectorAll(idFilterQuantityMax));
+        */
+
+        console.log('ajaxData:'); console.log(ajaxData);
+
+        ajaxJSONData('permutations', mapHashToController(hashPageStoreCategoriesPost), ajaxData, callbackLoadCategories, false, {"X-CSRFToken": ajaxData.csrf_token});
+    }
+
+    callbackLoadCategories(response) {
+        
+        console.log('ajax:'); console.log(response.data);
+
+        let table = document.querySelectorAll(idTableMain);
+        let bodyTable, row, dllCategory, ddlProduct;
+
+        // table.querySelector('tr').remove(); // :not(.' + flagRowNew + ')
+        bodyTable = table.querySelector('tbody');
+        bodyTable.querySelector('tr').remove(); 
+
+        response.data.forEach(function(dataRow) {
+            row = _rowBlank.cloneNode(true);
+            row = document.querySelectorAll(row);
+            row.classList.remove(flagRowNew);
+            console.log("applying data row: ", dataRow);
+            dllCategory = row.querySelector('td.' + flagCategory + ' select');
+            dllCategory.value = dataRow[attrIdCategory];
+            ddlProduct = row.querySelector('td.' + flagProduct + ' select');
+            listProducts.forEach(function(product) {
+                if (product[attrIdCategory] != dataRow[attrIdCategory]) return;
+                ddlProduct.appendChild(document.createElement('<option>', product));
+            });
+            ddlProduct.value = dataRow[attrIdProduct];
+            row.querySelector('td.' + flagVariations + ' textarea').value = dataRow[flagVariations];
+            row.querySelector('td.' + flagQuantityStock + ' input').value = dataRow[flagQuantityStock];
+            row.querySelector('td.' + flagQuantityMin + ' input').value = dataRow[flagQuantityMin];
+            row.querySelector('td.' + flagQuantityMax + ' input').value = dataRow[flagQuantityMax];
+            row.querySelector('td.' + flagCostLocalVATIncl).innerHTML = dataRow[flagCostLocalVATIncl];
+            row.attr(attrIdCategory, dataRow[flagCategory]);
+            row.attr(attrIdProduct, dataRow[flagProduct]);
+            row.attr(attrIdPermutation, dataRow[attrIdPermutation]);
+            bodyTable.appendChild(row);
+        });
+    }
+
+    hookupButtonsSaveCancel() {
+        initialiseEventHandler(idButtonSave, flagInitialised, function(button) {
+            button.addEventListener("click", function(event) {
+                event.stopPropagation();
+                showOverlayConfirm();
+            });
+        });
+        // let parentSave = btnSave.closest('div.' + flagColumn);
+        // parentSave.classList.add(flagCollapsed);
+
+        initialiseEventHandler(idButtonCancel, flagInitialised, function(button) {
+            button.addEventListener("click", function(event) {
+                event.stopPropagation();
+                loadCategories();
+            });
+        });
+        // let parentCancel = btnCancel.closest('div.' + flagColumn);
+        // parentCancel.classList.add(flagCollapsed);
+
+        initialiseEventHandler(idButtonCancel, flagInitialised, function(button) {
+            button.addEventListener("click", function(event) {
+                event.stopPropagation();
+                let table = document.querySelectorAll(idTableMain);
+                let row = _rowBlank.cloneNode(true);
+                row = document.querySelectorAll(row);
+                row.classList.remove(flagRowNew);
+                let ddlCategory = row.querySelector('td.' + flagCategory + ' select');
+                let idCategory = getElementCurrentValue(document.querySelectorAll(idFilterCategory));
+                idCategory = (idCategory == 0) ? idCategoryDefault : idCategory;
+                let ddlProduct = row.querySelector('td.' + flagProduct + ' select');
+                let products = productsByCategory[idCategory];
+                products.forEach(function(product) {
+                    ddlProduct.appendChild(document.createElement('<option>', product));
+                });
+                table.querySelector('tbody').appendChild(row);
+            });
+        });
+    }
+
+    saveCategories() {
+
+        let permutations = getCategories(true);
+        
+        if (permutations.length == 0) {
+            showOverlayError('No permutations to save');
+            return;
+        }
+
+        let ajaxData = {};
+        ajaxData[keyCategories] = permutations;
+        ajaxData[keyForm] = convertForm2JSON(elForm);
+        ajaxData.csrf_token = ajaxData[keyForm].csrf_token;
+        ajaxData.comment = document.querySelectorAll(idTextareaConfirm).value;
+
+        console.log('ajaxData:'); console.log(ajaxData);
+        ajaxJSONData('permutations', mapHashToController(hashPageStoreCategoriesPost), ajaxData, callbackLoadCategories, false, {});
+    }
+
+    getCategories(dirtyOnly) {
+        let table = document.querySelectorAll(idTableMain);
+        let permutations = [];
+        let row, permutation, ddlCategory, ddlProduct, variations, quantityStock, quantityMin, quantityMax, costLocal;
+        table.querySelector('tbody tr').each(function(index, row) {
+            row = document.querySelectorAll(row);
+            if (dirtyOnly && !row.classList.contains(flagDirty)) return;
+
+            ddlCategory = row.querySelector('td.' + flagCategory + ' select');
+            ddlProduct = row.querySelector('td.' + flagProduct + ' select');
+            variations = row.querySelector('td.' + flagVariations + ' textarea');
+            quantityStock = row.querySelector('td.' + flagQuantityStock + ' input');
+            quantityMin = row.querySelector('td.' + flagQuantityMin + ' input');
+            quantityMax = row.querySelector('td.' + flagQuantityMax + ' input');
+
+            permutation = {};
+            permutation[attrIdCategory] = ddlCategory.attr(attrValueCurrent);
+            permutation[attrIdProduct] = ddlProduct.attr(attrValueCurrent);
+            permutation[attrIdPermutation] = row.attr(attrIdPermutation)
+            permutation[flagVariations] = variations.attr(attrValueCurrent);
+            permutation[flagQuantityStock] = quantityStock.attr(attrValueCurrent);
+            permutation[flagQuantityMin] = quantityMin.attr(attrValueCurrent);
+            permutation[flagQuantityMax] = quantityMax.attr(attrValueCurrent);
+            permutations.push(permutation);
+        });
+        return permutations;
+    }
+
+    hookupTableMain() {
+        initialiseEventHandler(idTableMain, flagInitialised, function(table) {
+
+            table.querySelectorAll('td.' + flagCategory + ' select').addEventListener("change", function(event) {
+                handleChangeInputCategories(this);
+                ddlCategory = this;
+                row = getRowFromElement(ddlCategory);
+                ddlProduct = row.querySelector('td.' + flagProduct + ' select');
+                ddlProduct.querySelector('option').remove();
+                ddlProduct.appendChild(document.createElement('<option>', {value: '', text: 'Select Product'}));
+                listProducts.forEach(function(product) {
+                    if (product[attrIdCategory] != getElementCurrentValue(ddlCategory)) return;
+                    ddlProduct.appendChild(document.createElement('<option>', product));
+                });
+                handleChangeInputCategories(ddlProduct);
+            });
+
+            table.querySelectorAll("change", 'td.' + flagProduct + ' select' + ',' + 'td.' + flagQuantityStock + ' input' + ',' + 'td.' + flagQuantityMin + ' input' + ',' + 'td.' + flagQuantityMax + ' input').addEventListener("change", function(event) {
+                handleChangeInputCategories(this);
+            });
+
+            table.querySelectorAll("click", 'td.' + flagVariations + ' textarea').addEventListener("change", function(event) {
+                event.stopPropagation();
+                handleClickCategoriesInputVariations(this);
+            });
+
+            table.querySelectorAll("click", 'td.' + flagDetail + ' button').addEventListener("change", function(event) {
+                event.stopPropagation();
+                console.log("not implemented error: detail clicked");
+            });
+
+            table.querySelectorAll("click", 'td.' + flagVariations + ' button.' + flagAdd).addEventListener("change", function(event) {
+                event.stopPropagation();
+                handleClickCategoriesVariationsButtonAdd(this);
+            });
+        });
+
+        // cache new row for cloning
+        let rowBlankTemp = table.querySelector('tr.' + flagRowNew);
+        console.log("row blank temp: ", rowBlankTemp);
+        _rowBlank = rowBlankTemp.cloneNode(true);
+        table.querySelectorAll('tr.' + flagRowNew).forEach(function(row) {
+            row.remove();
+        });
+    }
+
+    handleChangeInputCategories(element) {
+        console.log("handleChangeInputCategories");
+        console.log("element value:", element.value);
+        let row = getRowFromElement(element);
+        let formFilters = document.querySelector(idFormFiltersCategories);
+        let buttonCancel = formFilters.querySelector(idButtonCancel);
+        let buttonSave = formFilters.querySelector(idButtonSave);
+        let wasDirty = isElementDirty(element);
+
+        if (objJQuery.classList.contains(flagVariations)) {
+            element.setAttribute(attrValueCurrent, getProductVariationsText(element));
+        } else {
+            element.setAttribute(attrValueCurrent, getElementCurrentValue(element));
+        }
+        let isDirty = isElementDirty(element);
+
+        if (wasDirty != isDirty) {
+            isRowDirty(row);
+            let permutationsDirty = getCategories(true);
+            if (isEmpty(permutationsDirty)) {
+                buttonCancel.classList.add(flagCollapsed);
+                buttonSave.classList.add(flagCollapsed);
+            } else {
+                buttonCancel.classList.remove(flagCollapsed);
+                buttonSave.classList.remove(flagCollapsed);
+            }
+        }
+    }
+
+    isElementDirty(element) {
+        let isDirty = element.attr(attrValuePrevious) != element.attr(attrValueCurrent);
+        let cell = getCellFromElement(element);
+        if (isDirty) {
+            element.classList.add(flagDirty);
+            cell.classList.add(flagDirty);
+        } else {
+            element.classList.remove(flagDirty);
+            cell.classList.remove(flagDirty);
+        }
+        return isDirty;
+    }
+
+    isRowDirty(row) {
+        let ddlCategory = row.querySelector('td.' + flagCategory + ' select');
+        let ddlProduct = row.querySelector('td.' + flagProduct + ' select');
+        let variations = row.querySelector('td.' + flagVariations + ' textarea');
+        let quantityStock = row.querySelector('td.' + flagQuantityStock + ' input');
+        let quantityMin = row.querySelector('td.' + flagQuantityMin + ' input');
+        let quantityMax = row.querySelector('td.' + flagQuantityMax + ' input');
+        
+        // return isElementDirty(ddlCategory) || isElementDirty(ddlProduct) || isElementDirty(variations) || isElementDirty(quantityStock) || isElementDirty(quantityMin) || isElementDirty(quantityMax);
+        let isDirty = ddlCategory.classList.contains(flagDirty) || ddlProduct.classList.contains(flagDirty) || variations.classList.contains(flagDirty) || 
+            quantityStock.classList.contains(flagDirty) || quantityMin.classList.contains(flagDirty) || quantityMax.classList.contains(flagDirty);
+        if (isDirty) {
+            row.classList.add(flagDirty);
+        } else {
+            row.classList.remove(flagDirty);
+        }
+        return isDirty;
+    }
+
+    getProductVariationsText(element) {
+        element = document.querySelectorAll(element);
+        /*
+        let value = element.value;
+        let variations = value.split('\n');
+        variations = variations.map(function(variation) {
+            return variation.trim();
+        });
+        variations = variations.filter(function(variation) {
+            return variation.length > 0;
+        });
+        */
+        let variations = dictVariations[element.attr(attrIdVariation)].map((variation, index) => {
+            return variation[keyNameVariationType] + ': ' + variation[keyNameVariation];
+        });
+        return variations.join(',\n');
+    }
+
+    getElementProductVariations(element) {
+        element = document.querySelectorAll(element);
+        let variations = element.attr(attrValueCurrent);
+        let objVariations = [];
+        if (!isEmpty(variations)) {
+            variations = variations.split(',');
+            variations.forEach((variation) => {
+                let parts = variation.split(':');
+                if (parts.length == 2) {
+                    objVariations.push({
+                        [attrIdVariationType]: parts[0].trim(),
+                        [attrIdVariation]: parts[1].trim(),
+                    });
+                }
+            });
+        }
+        return objVariations;
+    }
+
+    handleClickCategoriesInputVariations(element) {
+        element = document.querySelectorAll(element);
+        
+        let jsonVariation, jsonVariationType, tr, tdVariationType, variationType, attributesVariationType, tdNameVariation, nameVariation, attributesNameVariation, tdDelete, buttonDelete, tmpJsonVariation, tmpJsonVariationType;
+        let variations = getElementProductVariations(element);
+        let tblVariations = document.createElement("<table>");
+        let thead = document.createElement("<thead>");
+        tr = document.createElement("<tr>");
+        let thVariationType = document.createElement("<th>", {
+            text: 'Type',
+        });
+        let thNameVariation = document.createElement("<th>", {
+            text: 'Name',
+        });
+        let buttonAdd = document.createElement("<button>", {
+            class: flagAdd,
+            text: '+',
+        });
+        let thAddDelete = document.createElement("<th>");
+        thAddDelete.appendChild(buttonAdd);
+        tr.appendChild(thVariationType);
+        tr.appendChild(thNameVariation);
+        tr.appendChild(thAddDelete);
+        thead.appendChild(tr);
+        tblVariations.appendChild(thead);
+
+        let tbody = document.createElement("<tbody>");
+        console.log('variations:', variations);
+        /*
+        if (isEmpty(variations)) {
+            return;
+        }
+        */
+        variations.forEach((variation, index) => {
+            jsonVariationType = dictVariations[variation[attrIdVariationType]];
+            jsonVariation = dictVariations[variation[attrIdVariation]];
+            tdVariationType = document.createElement("<td>", {
+                class: attrIdVariationType,
+            });
+            attributesVariationType = {
+                class: attrIdVariationType,
+                value: variation[attrIdVariationType],
+            };
+            attributesVariationType[attrValueCurrent] = jsonVariation[attrIdVariationType];
+            attributesVariationType[attrValuePrevious] = jsonVariation[attrIdVariationType];
+            variationType = document.createElement("<select>", attributesVariationType);
+            listVariationTypes.forEach((idVariationType) => {
+                tmpJsonVariationType = dictVariationTypes[idVariationType];
+                variationType.appendChild(document.createElement('<option>', { 
+                    value: jsonVariationType[attrIdVariationType],
+                    text: jsonVariationType[keyNameVariationType],
+                    selected: (idVariationType == jsonVariationType[attrIdVariationType]),
+                }));
+            });
+            tdNameVariation = document.createElement("<td>", {
+                class: attrIdVariation,
+            });
+            attributesNameVariation = {
+                class: attrIdVariation,
+                value: variation[attrIdVariation],
+            };
+            attributesNameVariation[attrValueCurrent] = jsonVariation[attrIdVariation];
+            attributesNameVariation[attrValuePrevious] = jsonVariation[attrIdVariation];
+            nameVariation = document.createElement("<select>", attributesNameVariation);
+            listVariations.forEach((idVariation) => {
+                tmpJsonVariation = dictVariations[idVariation];
+                console.log("id_variation: ", idVariation);
+                console.log("tmpJsonVariation: ", tmpJsonVariation);
+                nameVariation.appendChild(document.createElement('<option>', {
+                    value: tmpJsonVariation[attrIdVariation],
+                    text: tmpJsonVariation[keyNameVariation],
+                    selected: (idVariation == jsonVariation[attrIdVariation]),
+                }));
+            });
+            tdDelete = document.createElement("<td>", {
+                class: flagDelete,
+            });
+            buttonDelete = document.createElement("<button>", {
+                class: flagDelete,
+                text: 'x',
+            });
+            tr = document.createElement("<tr>");
+            tdVariationType.appendChild(variationType);
+            tr.appendChild(tdVariationType);
+            tdNameVariation.appendChild(nameVariation);
+            tr.appendChild(tdNameVariation);
+            tdDelete.appendChild(buttonDelete);
+            tr.appendChild(tdDelete);
+            tbody.appendChild(tr);
+        });
+        
+        tblVariations.appendChild(tbody);
+        let parent = element.parentElement;
+        parent.innerHTML = '';
+        parent.appendChild(tblVariations);
+        console.log("tblVariations: ", tblVariations);
+    }
+
+    handleClickCategoriesVariationsButtonAdd(element) {
+        element = document.querySelectorAll(element);
+        let row = getRowFromElement(element);
+        let variations = row.querySelector('td.' + flagVariations + ' textarea');
+        let value = variations.value;
+        value = (isEmpty(value)) ? '' : value + '\n';
+        value += 'Type: Variation\n';
+        variations.value = value;
+        handleChangeInputCategories(variations);
+        console.log("error: not implemented");
+    }
+
+    leave() {
+        super.leave();
+    }
+}
+

static/js/pages/page_store_product_permutations.js

@@ -0,0 +1,474 @@
+var _rowBlank = null;
+
+import { PageBase } from "./page_base.js";
+
+export class PageStoreProductPermutations extends PageBase {
+    static hash = hashPageStoreProductPermutations;
+
+    constructor() {
+        super();
+    }
+
+    initialize() {
+        this.sharedInitialize();
+        hookupFilters();
+        hookupButtonsSaveCancel();
+        hookupTableMain();
+        hookupOverlayConfirm(savePermutations);
+    }
+
+    hookupFilters() {
+        initialiseEventHandler(idFilterCategory, flagInitialised, function(filterCategory) {
+            console.log("hooking up filter category");
+            /*
+            listCategories.forEach(function(category) {
+                console.log('adding category: ', category.value, category.text);
+                /*
+                let option = document.createElement('option');
+                option.value = category.value;
+                option.text = category.text;
+                *
+            filterCategory.appendChild(document.createElement('<option>', category));
+            });
+            console.log(listCategories);
+            */
+            filterCategory.addEventListener("change", function(event) {
+                loadPermutations();
+            });
+            console.log("hooked up filter category");
+        });
+
+        initialiseEventHandler(idFilterProduct, flagInitialised, function(filterProduct) {
+            listProducts.forEach(function(product) {
+                if (product[attrIdCategory] != getElementCurrentValue(document.querySelectorAll(idFilterCategory))) return;
+                /*
+                let option = document.createElement('option');
+                option.value = product.value;
+                option.text = product.text;
+                */
+            filterProduct.appendChild(document.createElement('<option>', product));
+            });
+            filterProduct.addEventListener("change", function(event) {
+                loadPermutations();
+            });
+        });
+        
+        initialiseEventHandler(idFilterIsOutOfStock, flagInitialised, function(filterIsOutOfStock) {
+            filterIsOutOfStock.addEventListener("change", function(event) {
+                loadPermutations();
+            });
+        });
+
+        initialiseEventHandler(idFilterQuantityMin, flagInitialised, function(filterQuantityMin) {
+            filterQuantityMin.addEventListener("change", function(event) {
+                loadPermutations();
+            });
+        });
+        
+        initialiseEventHandler(idFilterQuantityMax, flagInitialised, function(filterQuantityMax) {
+            filterQuantityMax.addEventListener("change", function(event) {
+                loadPermutations();
+            });
+        });
+    }
+
+    loadPermutations() {
+
+        let elForm = document.querySelectorAll(idFormFiltersPermutations);
+        let ajaxData = {};
+        ajaxData[keyForm] = convertForm2JSON(elForm);
+        ajaxData.csrf_token = ajaxData[keyForm].csrf_token;
+        /*
+        ajaxData[attrIdCategory] = getElementCurrentValue(document.querySelectorAll(idFilterCategory));
+        ajaxData[attrIdProduct] = getElementCurrentValue(document.querySelectorAll(idFilterProduct));
+        ajaxData[flagIsOutOfStock] = getElementCurrentValue(document.querySelectorAll(idFilterIsOutOfStock));
+        ajaxData[flagQuantityMin] = getElementCurrentValue(document.querySelectorAll(idFilterQuantityMin));
+        ajaxData[flagQuantityMax] = getElementCurrentValue(document.querySelectorAll(idFilterQuantityMax));
+        */
+
+        console.log('ajaxData:'); console.log(ajaxData);
+
+        ajaxJSONData('permutations', mapHashToController(hashPageStorePermutationsPost), ajaxData, callbackLoadPermutations, false, {"X-CSRFToken": ajaxData.csrf_token});
+    }
+
+    callbackLoadPermutations(response) {
+        
+        console.log('ajax:'); console.log(response.data);
+
+        let table = document.querySelectorAll(idTableMain);
+        let bodyTable, row, dllCategory, ddlProduct;
+
+        // table.querySelector('tr').remove(); // :not(.' + flagRowNew + ')
+        bodyTable = table.querySelector('tbody');
+        bodyTable.querySelector('tr').remove(); 
+
+        response.data.forEach(function(dataRow) {
+            row = _rowBlank.cloneNode(true);
+            row = document.querySelectorAll(row);
+            row.classList.remove(flagRowNew);
+            console.log("applying data row: ", dataRow);
+            dllCategory = row.querySelector('td.' + flagCategory + ' select');
+            dllCategory.value = dataRow[attrIdCategory];
+            ddlProduct = row.querySelector('td.' + flagProduct + ' select');
+            listProducts.forEach(function(product) {
+                if (product[attrIdCategory] != dataRow[attrIdCategory]) return;
+                ddlProduct.appendChild(document.createElement('<option>', product));
+            });
+            ddlProduct.value = dataRow[attrIdProduct];
+            row.querySelector('td.' + flagVariations + ' textarea').value = dataRow[flagVariations];
+            row.querySelector('td.' + flagQuantityStock + ' input').value = dataRow[flagQuantityStock];
+            row.querySelector('td.' + flagQuantityMin + ' input').value = dataRow[flagQuantityMin];
+            row.querySelector('td.' + flagQuantityMax + ' input').value = dataRow[flagQuantityMax];
+            row.querySelector('td.' + flagCostLocalVATIncl).innerHTML = dataRow[flagCostLocalVATIncl];
+            row.attr(attrIdCategory, dataRow[flagCategory]);
+            row.attr(attrIdProduct, dataRow[flagProduct]);
+            row.attr(attrIdPermutation, dataRow[attrIdPermutation]);
+            bodyTable.appendChild(row);
+        });
+    }
+
+    hookupButtonsSaveCancel() {
+        initialiseEventHandler(idButtonSave, flagInitialised, function(button) {
+            button.addEventListener("click", function(event) {
+                event.stopPropagation();
+                showOverlayConfirm();
+            });
+        });
+        // let parentSave = btnSave.closest('div.' + flagColumn);
+        // parentSave.classList.add(flagCollapsed);
+
+        initialiseEventHandler(idButtonCancel, flagInitialised, function(button) {
+            button.addEventListener("click", function(event) {
+                event.stopPropagation();
+                loadPermutations();
+            });
+        });
+        // let parentCancel = btnCancel.closest('div.' + flagColumn);
+        // parentCancel.classList.add(flagCollapsed);
+
+        initialiseEventHandler(idButtonCancel, flagInitialised, function(button) {
+            button.addEventListener("click", function(event) {
+                event.stopPropagation();
+                let table = document.querySelectorAll(idTableMain);
+                let row = _rowBlank.cloneNode(true);
+                row = document.querySelectorAll(row);
+                row.classList.remove(flagRowNew);
+                let ddlCategory = row.querySelector('td.' + flagCategory + ' select');
+                let idCategory = getElementCurrentValue(document.querySelectorAll(idFilterCategory));
+                idCategory = (idCategory == 0) ? idCategoryDefault : idCategory;
+                let ddlProduct = row.querySelector('td.' + flagProduct + ' select');
+                let products = productsByCategory[idCategory];
+                products.forEach(function(product) {
+                    ddlProduct.appendChild(document.createElement('<option>', product));
+                });
+                table.querySelector('tbody').appendChild(row);
+            });
+        });
+    }
+
+    savePermutations() {
+
+        let permutations = getPermutations(true);
+        
+        if (permutations.length == 0) {
+            showOverlayError('No permutations to save');
+            return;
+        }
+
+        let ajaxData = {};
+        ajaxData[keyPermutations] = permutations;
+        ajaxData[keyForm] = convertForm2JSON(elForm);
+        ajaxData.csrf_token = ajaxData[keyForm].csrf_token;
+        ajaxData.comment = document.querySelectorAll(idTextareaConfirm).value;
+
+        console.log('ajaxData:'); console.log(ajaxData);
+        ajaxJSONData('permutations', mapHashToController(hashPageStorePermutationsPost), ajaxData, callbackLoadPermutations, false, {});
+    }
+
+    getPermutations(dirtyOnly) {
+        let table = document.querySelectorAll(idTableMain);
+        let permutations = [];
+        let row, permutation, ddlCategory, ddlProduct, variations, quantityStock, quantityMin, quantityMax, costLocal;
+        table.querySelector('tbody tr').each(function(index, row) {
+            row = document.querySelectorAll(row);
+            if (dirtyOnly && !row.classList.contains(flagDirty)) return;
+
+            ddlCategory = row.querySelector('td.' + flagCategory + ' select');
+            ddlProduct = row.querySelector('td.' + flagProduct + ' select');
+            variations = row.querySelector('td.' + flagVariations + ' textarea');
+            quantityStock = row.querySelector('td.' + flagQuantityStock + ' input');
+            quantityMin = row.querySelector('td.' + flagQuantityMin + ' input');
+            quantityMax = row.querySelector('td.' + flagQuantityMax + ' input');
+
+            permutation = {};
+            permutation[attrIdCategory] = ddlCategory.attr(attrValueCurrent);
+            permutation[attrIdProduct] = ddlProduct.attr(attrValueCurrent);
+            permutation[attrIdPermutation] = row.attr(attrIdPermutation)
+            permutation[flagVariations] = variations.attr(attrValueCurrent);
+            permutation[flagQuantityStock] = quantityStock.attr(attrValueCurrent);
+            permutation[flagQuantityMin] = quantityMin.attr(attrValueCurrent);
+            permutation[flagQuantityMax] = quantityMax.attr(attrValueCurrent);
+            permutations.push(permutation);
+        });
+        return permutations;
+    }
+
+    hookupTableMain() {
+        initialiseEventHandler(idTableMain, flagInitialised, function(table) {
+
+            table.querySelectorAll('td.' + flagCategory + ' select').addEventListener("change", function(event) {
+                handleChangeInputPermutations(this);
+                ddlCategory = this;
+                row = getRowFromElement(ddlCategory);
+                ddlProduct = row.querySelector('td.' + flagProduct + ' select');
+                ddlProduct.querySelector('option').remove();
+                ddlProduct.appendChild(document.createElement('<option>', {value: '', text: 'Select Product'}));
+                listProducts.forEach(function(product) {
+                    if (product[attrIdCategory] != getElementCurrentValue(ddlCategory)) return;
+                    ddlProduct.appendChild(document.createElement('<option>', product));
+                });
+                handleChangeInputPermutations(ddlProduct);
+            });
+
+            table.querySelectorAll("change", 'td.' + flagProduct + ' select' + ',' + 'td.' + flagQuantityStock + ' input' + ',' + 'td.' + flagQuantityMin + ' input' + ',' + 'td.' + flagQuantityMax + ' input').addEventListener("change", function(event) {
+                handleChangeInputPermutations(this);
+            });
+
+            table.querySelectorAll("click", 'td.' + flagVariations + ' textarea').addEventListener("change", function(event) {
+                event.stopPropagation();
+                handleClickPermutationsInputVariations(this);
+            });
+
+            table.querySelectorAll("click", 'td.' + flagDetail + ' button').addEventListener("change", function(event) {
+                event.stopPropagation();
+                console.log("not implemented error: detail clicked");
+            });
+
+            table.querySelectorAll("click", 'td.' + flagVariations + ' button.' + flagAdd).addEventListener("change", function(event) {
+                event.stopPropagation();
+                handleClickPermutationsVariationsButtonAdd(this);
+            });
+        });
+
+        // cache new row for cloning
+        let rowBlankTemp = table.querySelector('tr.' + flagRowNew);
+        console.log("row blank temp: ", rowBlankTemp);
+        _rowBlank = rowBlankTemp.cloneNode(true);
+        table.querySelectorAll('tr.' + flagRowNew).forEach(function(row) {
+            row.remove();
+        });
+    }
+
+    handleChangeInputPermutations(element) {
+        console.log("handleChangeInputPermutations");
+        console.log("element value:", element.value);
+        let row = getRowFromElement(element);
+        let formFilters = document.querySelector(idFormFiltersPermutations);
+        let buttonCancel = formFilters.querySelector(idButtonCancel);
+        let buttonSave = formFilters.querySelector(idButtonSave);
+        let wasDirty = isElementDirty(element);
+
+        if (objJQuery.classList.contains(flagVariations)) {
+            element.setAttribute(attrValueCurrent, getProductVariationsText(element));
+        } else {
+            element.setAttribute(attrValueCurrent, getElementCurrentValue(element));
+        }
+        let isDirty = isElementDirty(element);
+
+        if (wasDirty != isDirty) {
+            isRowDirty(row);
+            let permutationsDirty = getPermutations(true);
+            if (isEmpty(permutationsDirty)) {
+                buttonCancel.classList.add(flagCollapsed);
+                buttonSave.classList.add(flagCollapsed);
+            } else {
+                buttonCancel.classList.remove(flagCollapsed);
+                buttonSave.classList.remove(flagCollapsed);
+            }
+        }
+    }
+
+    isElementDirty(element) {
+        let isDirty = element.attr(attrValuePrevious) != element.attr(attrValueCurrent);
+        let cell = getCellFromElement(element);
+        if (isDirty) {
+            element.classList.add(flagDirty);
+            cell.classList.add(flagDirty);
+        } else {
+            element.classList.remove(flagDirty);
+            cell.classList.remove(flagDirty);
+        }
+        return isDirty;
+    }
+
+    isRowDirty(row) {
+        let ddlCategory = row.querySelector('td.' + flagCategory + ' select');
+        let ddlProduct = row.querySelector('td.' + flagProduct + ' select');
+        let variations = row.querySelector('td.' + flagVariations + ' textarea');
+        let quantityStock = row.querySelector('td.' + flagQuantityStock + ' input');
+        let quantityMin = row.querySelector('td.' + flagQuantityMin + ' input');
+        let quantityMax = row.querySelector('td.' + flagQuantityMax + ' input');
+        
+        // return isElementDirty(ddlCategory) || isElementDirty(ddlProduct) || isElementDirty(variations) || isElementDirty(quantityStock) || isElementDirty(quantityMin) || isElementDirty(quantityMax);
+        let isDirty = ddlCategory.classList.contains(flagDirty) || ddlProduct.classList.contains(flagDirty) || variations.classList.contains(flagDirty) || 
+            quantityStock.classList.contains(flagDirty) || quantityMin.classList.contains(flagDirty) || quantityMax.classList.contains(flagDirty);
+        if (isDirty) {
+            row.classList.add(flagDirty);
+        } else {
+            row.classList.remove(flagDirty);
+        }
+        return isDirty;
+    }
+
+    getProductVariationsText(element) {
+        element = document.querySelectorAll(element);
+        /*
+        let value = element.value;
+        let variations = value.split('\n');
+        variations = variations.map(function(variation) {
+            return variation.trim();
+        });
+        variations = variations.filter(function(variation) {
+            return variation.length > 0;
+        });
+        */
+        let variations = dictVariations[element.attr(attrIdVariation)].map((variation, index) => {
+            return variation[keyNameVariationType] + ': ' + variation[keyNameVariation];
+        });
+        return variations.join(',\n');
+    }
+
+    getElementProductVariations(element) {
+        element = document.querySelectorAll(element);
+        let variations = element.attr(attrValueCurrent);
+        let objVariations = [];
+        if (!isEmpty(variations)) {
+            variations = variations.split(',');
+            variations.forEach((variation) => {
+                let parts = variation.split(':');
+                if (parts.length == 2) {
+                    objVariations.push({
+                        [attrIdVariationType]: parts[0].trim(),
+                        [attrIdVariation]: parts[1].trim(),
+                    });
+                }
+            });
+        }
+        return objVariations;
+    }
+
+    handleClickPermutationsInputVariations(element) {
+        element = document.querySelectorAll(element);
+        
+        let jsonVariation, jsonVariationType, tr, tdVariationType, variationType, attributesVariationType, tdNameVariation, nameVariation, attributesNameVariation, tdDelete, buttonDelete, tmpJsonVariation, tmpJsonVariationType;
+        let variations = getElementProductVariations(element);
+        let tblVariations = document.createElement("<table>");
+        let thead = document.createElement("<thead>");
+        tr = document.createElement("<tr>");
+        let thVariationType = document.createElement("<th>", {
+            text: 'Type',
+        });
+        let thNameVariation = document.createElement("<th>", {
+            text: 'Name',
+        });
+        let buttonAdd = document.createElement("<button>", {
+            class: flagAdd,
+            text: '+',
+        });
+        let thAddDelete = document.createElement("<th>");
+        thAddDelete.appendChild(buttonAdd);
+        tr.appendChild(thVariationType);
+        tr.appendChild(thNameVariation);
+        tr.appendChild(thAddDelete);
+        thead.appendChild(tr);
+        tblVariations.appendChild(thead);
+
+        let tbody = document.createElement("<tbody>");
+        console.log('variations:', variations);
+        /*
+        if (isEmpty(variations)) {
+            return;
+        }
+        */
+        variations.forEach((variation, index) => {
+            jsonVariationType = dictVariations[variation[attrIdVariationType]];
+            jsonVariation = dictVariations[variation[attrIdVariation]];
+            tdVariationType = document.createElement("<td>", {
+                class: attrIdVariationType,
+            });
+            attributesVariationType = {
+                class: attrIdVariationType,
+                value: variation[attrIdVariationType],
+            };
+            attributesVariationType[attrValueCurrent] = jsonVariation[attrIdVariationType];
+            attributesVariationType[attrValuePrevious] = jsonVariation[attrIdVariationType];
+            variationType = document.createElement("<select>", attributesVariationType);
+            listVariationTypes.forEach((idVariationType) => {
+                tmpJsonVariationType = dictVariationTypes[idVariationType];
+                variationType.appendChild(document.createElement('<option>', { 
+                    value: jsonVariationType[attrIdVariationType],
+                    text: jsonVariationType[keyNameVariationType],
+                    selected: (idVariationType == jsonVariationType[attrIdVariationType]),
+                }));
+            });
+            tdNameVariation = document.createElement("<td>", {
+                class: attrIdVariation,
+            });
+            attributesNameVariation = {
+                class: attrIdVariation,
+                value: variation[attrIdVariation],
+            };
+            attributesNameVariation[attrValueCurrent] = jsonVariation[attrIdVariation];
+            attributesNameVariation[attrValuePrevious] = jsonVariation[attrIdVariation];
+            nameVariation = document.createElement("<select>", attributesNameVariation);
+            listVariations.forEach((idVariation) => {
+                tmpJsonVariation = dictVariations[idVariation];
+                console.log("id_variation: ", idVariation);
+                console.log("tmpJsonVariation: ", tmpJsonVariation);
+                nameVariation.appendChild(document.createElement('<option>', {
+                    value: tmpJsonVariation[attrIdVariation],
+                    text: tmpJsonVariation[keyNameVariation],
+                    selected: (idVariation == jsonVariation[attrIdVariation]),
+                }));
+            });
+            tdDelete = document.createElement("<td>", {
+                class: flagDelete,
+            });
+            buttonDelete = document.createElement("<button>", {
+                class: flagDelete,
+                text: 'x',
+            });
+            tr = document.createElement("<tr>");
+            tdVariationType.appendChild(variationType);
+            tr.appendChild(tdVariationType);
+            tdNameVariation.appendChild(nameVariation);
+            tr.appendChild(tdNameVariation);
+            tdDelete.appendChild(buttonDelete);
+            tr.appendChild(tdDelete);
+            tbody.appendChild(tr);
+        });
+        
+        tblVariations.appendChild(tbody);
+        let parent = element.parentElement;
+        parent.innerHTML = '';
+        parent.appendChild(tblVariations);
+        console.log("tblVariations: ", tblVariations);
+    }
+
+    handleClickPermutationsVariationsButtonAdd(element) {
+        element = document.querySelectorAll(element);
+        let row = getRowFromElement(element);
+        let variations = row.querySelector('td.' + flagVariations + ' textarea');
+        let value = variations.value;
+        value = (isEmpty(value)) ? '' : value + '\n';
+        value += 'Type: Variation\n';
+        variations.value = value;
+        handleChangeInputPermutations(variations);
+        console.log("error: not implemented");
+    }
+
+    leave() {
+        super.leave();
+    }
+}
+

static/js/pages/page_store_stock_items.js

@@ -0,0 +1,377 @@
+
+var _rowBlank = null;
+
+import { PageBase } from "./page_base.js";
+
+export class PageStoreStockItems extends PageBase {
+    static hash = hashPageStoreStockItems;
+
+    constructor() {
+        super();
+    }
+
+    initialize() {
+        this.sharedInitialize();
+        hookupFilters();
+        hookupButtonsSaveCancel();
+        hookupTableMain();
+        hookupOverlayConfirm(savePermutations);
+    }
+
+    hookupFilters() {
+        let filterCategory = document.querySelectorAll(idFilterCategory);
+        initialiseEventHandler(filterCategory, flagInitialised, function() {
+            console.log("hooking up filter category");
+            filterCategory = document.querySelectorAll(filterCategory);
+            /*
+            listCategories.forEach(function(category) {
+                console.log('adding category: ', category.value, category.text);
+                /*
+                let option = document.createElement('option');
+                option.value = category.value;
+                option.text = category.text;
+                *
+            filterCategory.appendChild(document.createElement('<option>', category));
+            });
+            console.log(listCategories);
+            */
+            filterCategory.addEventListener("change", function(event) {
+                loadPermutations();
+            });
+            console.log("hooked up filter category");
+        });
+
+        let filterProduct = document.querySelectorAll(idFilterProduct);
+        initialiseEventHandler(filterProduct, flagInitialised, function() {
+            listProducts.forEach(function(product) {
+                if (product[attrIdCategory] != getElementCurrentValue(document.querySelectorAll(idFilterCategory))) return;
+                /*
+                let option = document.createElement('option');
+                option.value = product.value;
+                option.text = product.text;
+                */
+            filterProduct.appendChild(document.createElement('<option>', product));
+            });
+            filterProduct.addEventListener("change", function(event) {
+                loadPermutations();
+            });
+        });
+        
+        let filterIsOutOfStock = document.querySelectorAll(idFilterIsOutOfStock);
+        initialiseEventHandler(filterIsOutOfStock, flagInitialised, function() {
+            filterIsOutOfStock.addEventListener("change", function(event) {
+                loadPermutations();
+            });
+        });
+
+        let filterQuantityMin = document.querySelectorAll(idFilterQuantityMin);
+        initialiseEventHandler(filterQuantityMin, flagInitialised, function() {
+            filterQuantityMin.addEventListener("change", function(event) {
+                loadPermutations();
+            });
+        });
+        
+        let filterQuantityMax = document.querySelectorAll(idFilterQuantityMax);
+        initialiseEventHandler(filterQuantityMax, flagInitialised, function() {
+            filterQuantityMax.addEventListener("change", function(event) {
+                loadPermutations();
+            });
+        });
+    }
+
+    loadPermutations() {
+
+        let elForm = document.querySelectorAll(idFormFiltersPermutations);
+        let ajaxData = {};
+        ajaxData[keyForm] = convertForm2JSON(elForm);
+        ajaxData.csrf_token = ajaxData[keyForm].csrf_token;
+        /*
+        ajaxData[attrIdCategory] = getElementCurrentValue(document.querySelectorAll(idFilterCategory));
+        ajaxData[attrIdProduct] = getElementCurrentValue(document.querySelectorAll(idFilterProduct));
+        ajaxData[flagIsOutOfStock] = getElementCurrentValue(document.querySelectorAll(idFilterIsOutOfStock));
+        ajaxData[flagQuantityMin] = getElementCurrentValue(document.querySelectorAll(idFilterQuantityMin));
+        ajaxData[flagQuantityMax] = getElementCurrentValue(document.querySelectorAll(idFilterQuantityMax));
+        */
+
+        console.log('ajaxData:'); console.log(ajaxData);
+
+        ajaxJSONData('permutations', mapHashToController(hashPageStorePermutationsPost), ajaxData, callbackLoadPermutations, false, {"X-CSRFToken": ajaxData.csrf_token});
+    }
+
+    callbackLoadPermutations(response) {
+        
+        console.log('ajax:'); console.log(response.data);
+
+        let table = document.querySelectorAll(idTableMain);
+        let bodyTable, row, dllCategory, ddlProduct;
+
+    // table.querySelector('tr').remove(); // :not(.' + flagRowNew + ')
+        bodyTable = table.querySelector('tbody');
+        bodyTable.querySelector('tr').remove(); 
+
+        $.each(response.data, function(_, dataRow) { 
+            row = _rowBlank.cloneNode(true);
+            row = document.querySelectorAll(row);
+            row.classList.remove(flagRowNew);
+            console.log("applying data row: ", dataRow);
+            dllCategory = row.querySelector('td.' + flagCategory + ' select');
+            dllCategory.val(dataRow[attrIdCategory]);
+            ddlProduct = row.querySelector('td.' + flagProduct + ' select');
+            listProducts.forEach(function(product) {
+                if (product[attrIdCategory] != dataRow[attrIdCategory]) return;
+                ddlProduct.appendChild(document.createElement('<option>', product));
+            });
+            ddlProduct.val(dataRow[attrIdProduct]);
+            row.querySelector('td.' + flagVariations + ' textarea').value = dataRow[flagVariations];
+            row.querySelector('td.' + flagQuantityStock + ' input').value = dataRow[flagQuantityStock];
+            row.querySelector('td.' + flagQuantityMin + ' input').value = dataRow[flagQuantityMin];
+            row.querySelector('td.' + flagQuantityMax + ' input').value = dataRow[flagQuantityMax];
+            row.querySelector('td.' + flagCostLocal).innerHTML = dataRow[flagCostLocal];
+            row.attr(attrIdCategory, dataRow[flagCategory]);
+            row.attr(attrIdProduct, dataRow[flagProduct]);
+            row.attr(attrIdPermutation, dataRow[attrIdPermutation]);
+            bodyTable.appendChild(row);
+        });
+        
+    }
+
+    hookupButtonsSaveCancel() {
+        let btnSave = document.querySelectorAll(idButtonSave);
+        let btnCancel = document.querySelectorAll(idButtonCancel);
+        let btnAdd = document.querySelectorAll(idButtonAdd);
+
+        btnSave.addEventListener("click", function(event) {
+            event.stopPropagation();
+            showOverlayConfirm();
+        });
+        btnSave.classList.add(flagCollapsed);
+
+        btnCancel.addEventListener("click", function(event) {
+            event.stopPropagation();
+            loadPermutations();
+        });
+        btnCancel.classList.add(flagCollapsed);
+
+        btnAdd.addEventListener("click", function(event) {
+            event.stopPropagation();
+            let table = document.querySelectorAll(idTableMain);
+            let row = _rowBlank.cloneNode(true);
+            row = document.querySelectorAll(row);
+            row.classList.remove(flagRowNew);
+            table.querySelector('tbody').appendChild(row);
+        });
+    }
+
+    savePermutations() {
+
+        let permutations = getPermutations(true);
+        
+        if (permutations.length == 0) {
+            showOverlayError('No permutations to save');
+            return;
+        }
+
+        let ajaxData = {};
+        ajaxData[keyPermutations] = permutations;
+        ajaxData[keyForm] = convertForm2JSON(elForm);
+        ajaxData.csrf_token = ajaxData[keyForm].csrf_token;
+        ajaxData.comment = document.querySelector(idTextareaConfirm).value;
+
+        console.log('ajaxData:'); console.log(ajaxData);
+        ajaxJSONData('permutations', mapHashToController(hashPageStorePermutationsPost), ajaxData, callbackLoadPermutations, false, {});
+    }
+
+    getPermutations(dirtyOnly) {
+        let table = document.querySelectorAll(idTableMain);
+        let permutations = [];
+        let row, permutation, ddlCategory, ddlProduct, variations, quantityStock, quantityMin, quantityMax, costLocal;
+        table.querySelector('tbody tr').each(function(index, row) {
+            row = document.querySelectorAll(row);
+            if (dirtyOnly && !row.classList.contains(flagDirty)) return;
+
+            ddlCategory = row.querySelector('td.' + flagCategory + ' select');
+            ddlProduct = row.querySelector('td.' + flagProduct + ' select');
+            variations = row.querySelector('td.' + flagVariations + ' textarea');
+            quantityStock = row.querySelector('td.' + flagQuantityStock + ' input');
+            quantityMin = row.querySelector('td.' + flagQuantityMin + ' input');
+            quantityMax = row.querySelector('td.' + flagQuantityMax + ' input');
+
+            permutation = {};
+            permutation[attrIdCategory] = ddlCategory.attr(attrValueCurrent);
+            permutation[attrIdProduct] = ddlProduct.attr(attrValueCurrent);
+            permutation[attrIdPermutation] = row.attr(attrIdPermutation)
+            permutation[flagVariations] = variations.attr(attrValueCurrent);
+            permutation[flagQuantityStock] = quantityStock.attr(attrValueCurrent);
+            permutation[flagQuantityMin] = quantityMin.attr(attrValueCurrent);
+            permutation[flagQuantityMax] = quantityMax.attr(attrValueCurrent);
+            permutations.push(permutation);
+        });
+        return permutations;
+    }
+
+    hookupTableMain() {
+        let table = document.querySelectorAll(idTableMain);
+        let rowBlankTemp = table.querySelector('tr.' + flagRowNew);
+        console.log("row blank temp: ", rowBlankTemp);
+        _rowBlank = rowBlankTemp[0].cloneNode(true);
+        table.querySelector('tr.' + flagRowNew).remove();
+
+        /*
+        let ddlCategory, ddlProduct;
+        let optionsCategory = document.querySelectorAll(idFilterCategory + ' option');
+        optionsCategory.
+
+        console.log('optionsCategory:', optionsCategory);
+
+        table.querySelector('tbody tr').each(function(index, row) {
+            console.log("hooking up row ", index);
+            row = document.querySelectorAll(row);
+            ddlCategory = row.querySelector('td.' + flagCategory + ' select');
+            ddlProduct = row.querySelector('td.' + flagProduct + ' select');
+            
+            optionsCategory.clone().appendTo(ddlCategory);
+
+            /*
+            listProducts.forEach(function(product) {
+                if (product[attrIdCategory] != getElementCurrentValue(ddlCategory)) return;
+                ddlProduct.appendChild(document.createElement('<option>', product));
+            });
+            *
+        });
+        */
+
+        let ddlCategory, ddlProduct, variations, quantityStock, quantityMin, quantityMax, costLocal;
+        table.querySelector('tbody tr').each(function(index, row) {
+            console.log("hooking up row ", index);
+            row = document.querySelectorAll(row);
+            ddlCategory = row.querySelector('td.' + flagCategory + ' select');
+            ddlProduct = row.querySelector('td.' + flagProduct + ' select');
+            variations = row.querySelector('td.' + flagVariations + ' textarea');
+            quantityStock = row.querySelector('td.' + flagQuantityStock + ' input');
+            quantityMin = row.querySelector('td.' + flagQuantityMin + ' input');
+            quantityMax = row.querySelector('td.' + flagQuantityMax + ' input');
+            
+            initialiseEventHandler(ddlCategory, flagInitialised, function() {
+                // ddlCategory = document.querySelectorAll(ddlCategory);
+                ddlCategory.addEventListener('change', function() {
+                    /*
+                    ddlCategory.attr(attrValuePrevious, ddlCategory.attr(attrValueCurrent));
+                    ddlCategory.attr(attrValueCurrent, ddlCategory.val());
+                    */
+                    handleChangeInputPermutations(this);
+                    ddlCategory = this;
+                    row = getRowFromElement(ddlCategory);
+                    ddlProduct = row.querySelector('td.' + flagProduct + ' select');
+                    // ddlProduct = document.querySelectorAll(ddlProduct);
+                    ddlProduct.querySelector('option').remove();
+                    ddlProduct.appendChild(document.createElement('<option>', {value: '', text: 'Select Product'}));
+                    listProducts.forEach(function(product) {
+                        if (product[attrIdCategory] != getElementCurrentValue(ddlCategory)) return;
+                        ddlProduct.appendChild(document.createElement('<option>', product));
+                    });
+                    handleChangeInputPermutations(ddlProduct);
+                });
+            });
+
+            initialiseEventHandler(ddlProduct, flagInitialised, function() {
+                // ddlProduct = document.querySelectorAll(ddlProduct);
+                ddlProduct.addEventListener('change', function() {
+                    handleChangeInputPermutations(this);
+                });
+            });
+
+            initialiseEventHandler(variations, flagInitialised, function() {
+                // variations = document.querySelectorAll(variations);
+                variations.addEventListener('change', function() {
+                    handleChangeInputPermutations(this);
+                });
+            });
+
+            initialiseEventHandler(quantityStock, flagInitialised, function() {
+                // quantityStock = document.querySelectorAll(quantityStock);
+                quantityStock.addEventListener('change', function() {
+                    // console.log(this.value);
+                    // quantityStock.value = this.value;
+                    handleChangeInputPermutations(this);
+                });
+            });
+
+            initialiseEventHandler(quantityMin, flagInitialised, function() {
+                // quantityMin = document.querySelectorAll(quantityMin);
+                quantityMin.addEventListener('change', function() {
+                    handleChangeInputPermutations(this);
+                });
+            });
+
+            initialiseEventHandler(quantityMax, flagInitialised, function() {
+                // quantityMax = document.querySelectorAll(quantityMax);
+                quantityMax.addEventListener('change', function() {
+                    handleChangeInputPermutations(this);
+                });
+            });
+        });
+    }
+
+    handleChangeInputPermutations(element) {
+        console.log(element.value);
+        let objJQuery = document.querySelectorAll(element);
+        objJQuery.value = element.value;
+        let row = getRowFromElement(objJQuery);
+        let buttonCancel = document.querySelectorAll(idButtonCancel);
+        let buttonSave = document.querySelectorAll(idButtonSave);
+        let wasDirty = isElementDirty(objJQuery);
+
+        if (objJQuery.classList.contains(flagVariations)) {
+            objJQuery.attr(attrValueCurrent, getVariationsCurrentValue(objJQuery));
+        } else {
+            objJQuery.attr(attrValueCurrent, getElementCurrentValue(objJQuery));
+        }
+        let isDirty = isElementDirty(objJQuery);
+        if (wasDirty != isDirty) {
+            isRowDirty(row);
+            let permutationsDirty = getPermutations(true);
+            if (isEmpty(permutationsDirty)) {
+                buttonCancel.classList.add(flagCollapsed);
+                buttonSave.classList.add(flagCollapsed);
+            } else {
+                buttonCancel.classList.remove(flagCollapsed);
+                buttonSave.classList.remove(flagCollapsed);
+            }
+        }
+    }
+
+    isRowDirty(row) {
+        let ddlCategory = row.querySelector('td.' + flagCategory + ' select');
+        let ddlProduct = row.querySelector('td.' + flagProduct + ' select');
+        let variations = row.querySelector('td.' + flagVariations + ' textarea');
+        let quantityStock = row.querySelector('td.' + flagQuantityStock + ' input');
+        let quantityMin = row.querySelector('td.' + flagQuantityMin + ' input');
+        let quantityMax = row.querySelector('td.' + flagQuantityMax + ' input');
+        
+        // return isElementDirty(ddlCategory) || isElementDirty(ddlProduct) || isElementDirty(variations) || isElementDirty(quantityStock) || isElementDirty(quantityMin) || isElementDirty(quantityMax);
+        let isDirty = ddlCategory.classList.contains(flagDirty) || ddlProduct.classList.contains(flagDirty) || variations.classList.contains(flagDirty) || 
+            quantityStock.classList.contains(flagDirty) || quantityMin.classList.contains(flagDirty) || quantityMax.classList.contains(flagDirty);
+        if (isDirty) {
+            row.classList.add(flagDirty);
+        } else {
+            row.classList.remove(flagDirty);
+        }
+        return isDirty;
+    }
+
+    getVariationsCurrentValue(element) {
+        let value = element.value || null;
+        let variations = value.split('\n');
+        variations = variations.map(function(variation) {
+            return variation.trim();
+        });
+        variations = variations.filter(function(variation) {
+            return variation.length > 0;
+        });
+        return variations.join(',');
+    }
+
+    leave() {
+        super.leave();
+    }
+}

static/js/pages/page_user.js

@@ -0,0 +1,19 @@
+
+import { PageBase } from "./page_base.js";
+
+export class PageUser extends PageBase {
+    static hash = hashPageUser;
+
+    constructor() {
+        super();
+    }
+
+    initialize() {
+        this.sharedInitialize();
+        hookupButtonsContactUs();
+    }
+
+    leave() {
+        super.leave();
+    }
+}

static/js/router.js

@@ -0,0 +1,204 @@
+
+import { PageAdminHome } from './pages/page_admin_home.js';
+import { PageHome } from './pages/page_home.js';
+import { PageContact } from './pages/page_contact.js';
+import { PageAccessibilityStatement } from './pages/page_accessibility_statement.js';
+import { PageLicense } from './pages/page_license.js';
+import { PageServices } from './pages/page_services.js';
+import { PageStoreBasket } from './pages/page_store_basket.js';
+import { PageStoreHome } from './pages/page_store_home.js';
+import { PageStoreProductCategories } from './pages/page_store_product_categories.js';
+import { PageStoreProductPermutations } from './pages/page_store_product_permutations.js';
+// import { PageStoreProductPrices } from './pages/page_store_product_prices.js';
+// import { PageStoreProducts } from './pages/page_store_products.js';
+// import { PageStoreProductVariations } from './pages/page_store_product_variations.js';
+import { PageStoreStockItems } from './pages/page_store_stock_items.js';
+import DOM from './dom.js';
+
+export default class Router {
+    constructor() {
+        this.routes = {};
+        this.initialize();
+    }
+
+    initialize() {
+        let pages = Router.getPages();
+        for (const key of Object.keys(pages)) {
+            let page = pages[key];
+            this.addRoute(page.hash, page.initialize);
+        }
+        window.addEventListener('popstate', this.handlePopState.bind(this)); // page accessed by history navigation
+    }
+
+    static getPages() {
+        let pages = {};
+        pages[hashPageAccessibilityStatement] = PageAccessibilityStatement;
+        pages[hashPageAdminHome] = PageAdminHome;
+        pages[hashPageHome] = PageHome;
+        pages[hashPageContact] = PageContact;
+        pages[hashPageLicense] = PageLicense;
+        pages[hashPageServices] = PageServices;
+        pages[hashPageStoreBasket] = PageStoreBasket;
+        pages[hashPageStoreHome] = PageStoreHome;
+        pages[hashPageStoreProductCategories] = PageStoreProductCategories;
+        pages[hashPageStoreProductPermutations] = PageStoreProductPermutations;
+        // pages[hashPageStoreProductPrices] = PageStoreProductPrices;
+        // pages[hashPageStoreProducts] = PageStoreProducts;
+        // pages[hashPageStoreProductVariations] = PageStoreProductVariations;
+        pages[hashPageStoreStockItems] = PageStoreStockItems;
+        console.log("pages: ", pages);
+        return pages;
+    }
+
+    addRoute(path, handler) {
+        this.routes[path] = handler;
+    }
+
+    handlePopState(event) {
+        let url = window.location.pathname;
+        url = url.split('?')[0];
+        let hash = url.replace(_pathHost, '');
+        console.log("handlePopState: " + hash);
+        this.handleRouteHash(hash);
+    }
+
+    navigateToHash(hash, data = null) {
+        const url = Router.getUrlFromHash(hash);
+        this.navigateToUrl(url, data);
+    }
+    
+    static getUrlFromHash(hash) {
+        if (hash == null) hash = hashPageHome;
+        console.log("getUrlFromHash:");
+        console.log("base url: " + _pathHost + "\nhash: " + hash);
+        return _pathHost + hash;
+    }
+
+    navigateToUrl(url, data = null, appendHistory = true) {
+        this.leavePageCurrent();
+        if (appendHistory) history.pushState(data, '', url);
+        url = Router.parameteriseUrl(url, data);
+        Router.#goToUrl(url);
+    }
+
+    leavePageCurrent() {
+        const pageCurrent = Router.getPageCurrent();
+        if (pageCurrent) pageCurrent.leave();
+    }
+    
+    static getPageCurrent() {
+        if (_pageCurrent) return _pageCurrent;
+        const hashPageCurrent = DOM.getHashPageCurrent();
+        console.log("hashPageCurrent: " + hashPageCurrent);
+        const pages = Router.getPages();
+        let page;
+        for (const key of Object.keys(pages)) {
+            page = pages[key];
+            console.log("page hashL ", page.hash);
+            if (page.hash == hashPageCurrent) return new page();
+        }
+        throw new Error('Page not found: ' + hashPageCurrent);
+    }
+
+    static parameteriseUrl(url, parameters) {
+        if (!isEmpty(parameters)) {
+            url += '%3F'; // '?';
+            let firstParameter = true;
+            for (var p in parameters) {
+                if (!firstParameter) {
+                    url += '&';
+                } else {
+                    firstParameter = false;
+                }
+                url += parameters[p];
+            }
+        }
+        return url;
+    }
+
+    static #goToUrl(url) {
+        window.location.href = url;
+    }
+    
+    /*
+    handleRouteUrl(url) {
+        const path = url.split('?')[0]; // Remove query parameters
+        if (this.routes[path]) {
+            this.routes[path]();
+        } else if (url.includes('auth0.com')) {
+            Router.goToUrl(url);
+        } else {
+            console.warn('No handler found for path:', path);
+            // Optionally, handle 404 or redirect to a default route
+        }
+    }
+
+    handleRouteHash(hash) {
+        if (this.routes[hash]) {
+            this.routes[hash]();
+        } else {
+            console.warn('No handler found for hash:', hash);
+        }
+    }
+    */
+    
+    /*
+    static htmlEncode(value) {
+        return document.createElement('<div/>').text(value).innerHTML;
+    }
+    
+    static htmlDecode(value) {
+        if (_domParser == null) _domParser = DOMParser(); // https://www.w3docs.com/snippets/javascript/how-to-html-encode-a-string.html
+        return _domParser.parseFromString(value, 'text/html').documentElement.textContent;
+    }
+    */
+
+    // Additional utility methods
+    /*
+    static getQueryParams() {
+        return Object.fromEntries(new URLSearchParams(window.location.search));
+    }
+
+    static updateQueryParams(params) {
+        const searchParams = new URLSearchParams(window.location.search);
+        for (const [key, value] of Object.entries(params)) {
+            searchParams.set(key, value);
+        }
+        const newUrl = `${window.location.pathname}?${searchParams.toString()}`;
+        history.replaceState(null, '', newUrl);
+    }
+    */
+   
+    static loadPageBodyFromResponse(response) {
+        console.log(response.data);
+        DOM.loadPageBody(response.data);
+    }
+}
+
+// Create and export a singleton instance
+export const router = new Router();
+// import this for navigation
+
+// Usage example (you can put this in your main.js or app.js)
+/*
+router.addRoute('/', () => {
+    console.log('Home page');
+    // Load home page content
+});
+
+router.addRoute('/about', () => {
+    console.log('About page');
+    // Load about page content
+});
+
+// Example of how to use the router in other parts of your application
+export function setupNavigationEvents() {
+    document.querySelectorAll('a[data-nav]').forEach(link => {
+        link.addEventListener('click', (e) => {
+            e.preventDefault();
+            const url = e.target.getAttribute('href');
+            router.navigateToUrl(url);
+        });
+    });
+}
+*/

static/js/services.js

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

static/js/shared.js

@@ -1,847 +0,0 @@
-// Shared JS file names: routing, main, shared, localStorage, appDialogs
-const _dataLoadingFlag = 'data-loading'
-var _verbose = true;
-var hashPageCurrent;
-
-function hookupShared() {
-    // hookupVideos();
-    hookupNavigation();
-    /*
-    $(idOverlayHamburger).removeClass(flagCollapsed);
-    $(idOverlayHamburger).addClass(flagExpanded);
-    */
-
-    let imgLogo = $($("img.header-logo")[0]);
-    initialiseEventHandler(imgLogo, flagInitialised, function() {
-        imgLogo.on("click", function(event) {
-            event.stopPropagation();
-            goToPage(hashPageHome);
-        });
-    });
-}
-
-function hookupNavigation() {
-    console.log("hooking up navigation");
-
-    let overlayHamburger = $(idOverlayHamburger);
-    countOptions = overlayHamburger.find('div.' + flagRow).length;
-    console.log('count nav options: ', countOptions);
-    overlayHamburger.css('height', (countOptions * 27) + 'px');
-
-    let buttonHamburger = $(idButtonHamburger);
-    initialiseEventHandler(buttonHamburger, flagInitialised, function() {
-        buttonHamburger.on("click", function(event) {
-            event.stopPropagation();
-            let overlayHamburger = $(idOverlayHamburger);
-            if (overlayHamburger.hasClass(flagCollapsed)) {
-                overlayHamburger.removeClass(flagCollapsed);
-                overlayHamburger.addClass(flagExpanded);
-            } else {
-                overlayHamburger.removeClass(flagExpanded);
-                overlayHamburger.addClass(flagCollapsed);
-            }
-        });
-    });
-
-    let btnNavHome = $(idNavHome);
-    initialiseEventHandler(btnNavHome, flagInitialised, function() {
-        btnNavHome.on("click", function(event) {
-            event.stopPropagation();
-            // setupPageLocalStorageNext(hashPageStoreHome);
-            goToPage(hashPageHome);
-        });
-    });
-    
-    let btnNavServices = $(idNavServices);
-    initialiseEventHandler(btnNavServices, flagInitialised, function() {
-        btnNavServices.on("click", function(event) {
-            event.stopPropagation();
-            goToPage(hashPageServices);
-        });
-    });
-    
-    let btnNavContact = $(idNavContact);
-    initialiseEventHandler(btnNavContact, flagInitialised, function() {
-        btnNavContact.on("click", function(event) {
-            event.stopPropagation();
-            // setupPageLocalStorageNext(hashPageStoreHome);
-            goToPage(hashPageContact);
-        });
-    });
-    
-    let btnNavUserAccount = $(idNavUserAccount);
-    initialiseEventHandler(btnNavUserAccount, flagInitialised, function() {
-        btnNavUserAccount.on("click", function(event) {
-            event.stopPropagation();
-            goToPage(hashPageUserAccount);
-        });
-    });
-    
-    let btnNavUserLogout = $(idNavUserLogout);
-    initialiseEventHandler(btnNavUserLogout, flagInitialised, function() {
-        btnNavUserLogout.on("click", function(event) {
-            event.stopPropagation();
-            goToPage(hashPageUserLogout);
-        });
-    });
-    
-    let btnNavUserLogin = $(idNavUserLogin);
-    initialiseEventHandler(btnNavUserLogin, flagInitialised, function() {
-        btnNavUserLogin.on("click", function(event) {
-            event.stopPropagation();
-            // goToPage(hashPageUserLogin);
-            ajaxData = {};
-            ajaxData[keyCallback] = hashPageCurrent;
-            console.log('sending data to user login controller: '); console.log(ajaxData);
-            ajaxJSONData('Login user', mapHashToController(hashPageUserLogin), ajaxData, function(response) {
-                if (response.Success) {
-                    goToUrl(response[keyCallback]);
-                } else {
-                    alertError("Error", response.Message);
-                }
-            }, false);
-        });
-    });
-    
-    
-    let btnNavStoreHome = $(idNavStoreHome);
-    console.log("hooking up store home");
-    console.log("btn: ", btnNavStoreHome, "\nHash: ", hashPageStoreHome, "\nflag: ", flagInitialised);
-    initialiseEventHandler(btnNavStoreHome, flagInitialised, function() {
-        console.log("hooking up store home");
-        console.log("btn: ", btnNavStoreHome, "\nHash: ", hashPageStoreHome);
-        btnNavStoreHome.on("click", function(event) {
-            event.stopPropagation();
-            // setupPageLocalStorageNext(hashPageStoreHome);
-            goToPage(hashPageStoreHome);
-        });
-    });
-
-    let btnNavStorePermutations = $(idNavStorePermutations);
-    initialiseEventHandler(btnNavStorePermutations, flagInitialised, function() {
-        btnNavStorePermutations.on("click", function(event) {
-            event.stopPropagation();
-            // setupPageLocalStorageNext(hashPageStoreHome);
-            goToPage(hashPageStorePermutations);
-        });
-    });
-
-   
-    try 
-    {
-        hookupSelectorCurrency();
-        hookupSelectorDeliveryRegion();
-        hookupCheckboxIsIncludedVAT();
-    }
-    catch {}
-    
-}
-
-function hookupOverlay(idOverlay) {
-
-    initialiseEventHandler(idOverlay, flagInitialised, function() {
-
-        let overlay = $(idOverlay)
-        
-        // close button
-        overlay.find('button.' + flagBtnOverlayClose).on("click", function(event) {
-            overlay.css('display', 'none');
-        });
-    });
-}
-
-function hookupSelectorCurrency() {
-    /*
-    let elForm = $(idFormCurrency);
-    let elSelector = $(elForm.find('select')[0]);
-    initialiseEventHandler(elSelector, flagInitialised, function(){
-        elForm = $(idFormCurrency);
-        elSelector.on("change", function(event) {
-            ajaxData = {};
-            ajaxData[keyForm] = convertForm2JSON(elForm);
-            console.log('sending data to currency selector controller: '); console.log(ajaxData);
-            ajaxJSONData('select currency', mapHashToController(hashStoreSelectCurrency), ajaxData, function() { window.location.reload() }, false);
-
-            let optionSelected = elSelector.options[elSelector.selectedIndex]
-            let textSelected = optionSelected.attr(attrDataShort)
-            
-        });
-    });
-    console.log("form currency initialised")
-    */
-
-    let dropdownCurrency = $(idCurrency)[0];
-    // dropdownCurrency.options.map(function(option) {
-    let option, indexHyphen, textOption;
-    for (let indexOption = 0; indexOption < dropdownCurrency.options.length; indexOption++) {
-        option = $(dropdownCurrency.options[indexOption]);
-        textOption = option.text();
-        indexHyphen = textOption.indexOf('-');
-        option.attr(attrTextExpanded, textOption);
-        option.attr(attrTextCollapsed, textOption.substring(0, indexHyphen - 1));
-        option.addClass(flagCollapsed);
-    }
-    handleSelectCollapse(dropdownCurrency);
-    initialiseEventHandler(dropdownCurrency, flagInitialised, function() {
-        dropdownCurrency = $(dropdownCurrency);
-        dropdownCurrency.on("focus", function() {
-            handleSelectExpand(dropdownCurrency);
-        });
-        dropdownCurrency.on("blur", function() {
-            handleSelectCollapse(dropdownCurrency);
-        });
-        dropdownCurrency.on("change", function() {
-            let selectedCurrency = dropdownCurrency.val();
-            console.log("selected currency: ", selectedCurrency);
-            let basket = getLocalStorage(keyBasket);
-            basket[keyIdCurrency] = selectedCurrency;
-            // setLocalStorage(keyIdCurrency, selectedCurrency);
-            setLocalStorage(keyBasket, basket);
-            let ajaxData = {};
-            ajaxData[keyBasket] = basket;
-            ajaxJSONData('update currency', mapHashToController(hashPageCurrent), ajaxData, loadPageBody, false);
-        });
-    });
-}
-
-function hookupSelectorDeliveryRegion() {
-    /*
-    let elForm = $(idFormDeliveryRegion);
-    let elSelector = $(elForm.find('select')[0]);
-    initialiseEventHandler(elSelector, flagInitialised, function(){
-        elForm = $(idFormDeliveryRegion);
-        elSelector.on("change", function(event) {
-            ajaxData = {};
-            ajaxData[keyForm] = convertForm2JSON(elForm);
-            console.log('sending data to delivery region selector controller: '); console.log(ajaxData);
-            ajaxJSONData('select delivery region', mapHashToController(hashStoreSelectDeliveryRegion), ajaxData, function() { window.location.reload() }, false);
-        });
-        console.log("form delivery region initialised")
-    });
-    */
-   
-    let dropdownRegion = $(idRegionDelivery)[0];
-    
-    let option, indexHyphen, textOption;
-    for (let indexOption = 0; indexOption < dropdownRegion.options.length; indexOption++) {
-        option = $(dropdownRegion.options[indexOption]);
-        textOption = option.text();
-        indexHyphen = textOption.indexOf('-');
-        option.attr(attrTextExpanded, textOption);
-        option.attr(attrTextCollapsed, textOption.substring(0, indexHyphen - 1));
-        option.addClass(flagCollapsed);
-    }
-
-    handleSelectCollapse(dropdownRegion);
-
-    initialiseEventHandler(dropdownRegion, flagInitialised, function() {
-        dropdownRegion = $(dropdownRegion);
-        dropdownRegion.on("focus", function() {
-            console.log("dropdown region focused");
-            handleSelectExpand(dropdownRegion);
-        });
-        dropdownRegion.on("blur", function() {
-            console.log("dropdown region blurred");
-            handleSelectCollapse(dropdownRegion);
-        });
-        dropdownRegion.on("change", function() {
-            handleSelectCollapse(dropdownRegion);
-            let selectedRegion = dropdownRegion.val();
-            console.log("selected region: ", selectedRegion);
-            let basket = getLocalStorage(keyBasket);
-            basket[keyIdRegionDelivery] = selectedRegion;
-            // setLocalStorage(keyIdRegionDelivery, selectedRegion);
-            setLocalStorage(keyBasket, basket);
-            let ajaxData = {};
-            ajaxData[keyIdRegionDelivery] = selectedRegion;
-            ajaxJSONData('update region', mapHashToController(hashStoreSetRegion), ajaxData, null, false);
-        });
-    });
-}
-
-function handleSelectCollapse(elementSelect) {
-    let optionSelected = $(elementSelect).find('option:selected');
-    optionSelected.text(optionSelected.attr(attrTextCollapsed));
-    console.log('collapsed: ', optionSelected.text());
-    optionSelected.removeClass(flagExpanded);
-    optionSelected.addClass(flagCollapsed);
-}
-function handleSelectExpand(elementSelect) {
-    let optionSelected = $(elementSelect).find('option:selected');
-    optionSelected.text(optionSelected.attr(attrTextExpanded));
-    console.log('expanded: ', optionSelected.text());
-    optionSelected.removeClass(flagCollapsed);
-    optionSelected.addClass(flagExpanded);
-}
-
-function hookupCheckboxIsIncludedVAT() {
-    let elForm = $(idFormIsIncludedVAT);
-    let elSelector = $(elForm.find('input[type="checkbox"]')[0]);
-    initialiseEventHandler(elSelector, flagInitialised, function(){
-        elForm = $(idFormIsIncludedVAT);
-        elSelector.on("change", function(event) {
-            ajaxData = {};
-            ajaxData[keyForm] = convertForm2JSON(elForm);
-            console.log('sending data to include VAT controller: '); console.log(ajaxData);
-            ajaxJSONData('set include VAT', mapHashToController(hashStoreSetIsIncludedVAT), ajaxData, function() { window.location.reload() }, false);
-        });
-        console.log("form is included VAT initialised")
-    });
-}
-
-// shared hookup methods
-function hookupButtonsContactUs() {
-    let btnContact = $($("button.button-contact")[0]);
-    initialiseEventHandler(btnContact, flagInitialised, function() {
-        btnContact.on("click", function(event) {
-            event.stopPropagation();
-            goToPage(hashPageContact);
-        });
-    });
-}
-
-function hookupVideos() {
-    let videos = document.querySelectorAll('video');
-    videos.forEach(function(video) {
-        video.addEventListener('mouseover', videoPlay(video));
-        video.addEventListener('mouseout', videoPause(video));
-    });
-}
-
-function videoPlay(elemVideo) {
-    if (!_loading) { // elemVideo.paused && 
-        elemVideo.play();
-        if (_verbose) { console.log("Playing video element: " + elemVideo.name)};
-    }
-}
-
-function videoPause(elemVideo) {
-    elemVideo.pause();
-    if (_verbose) { console.log("Pausing video element: " + elemVideo.name)};
-}
-
-
-// Argument validation
-/*
-function isNullOrWhitespace(v) {
-    let txt = JSON.stringify(v).replace('/\s\g', '');
-    return (txt == '' || 'null');
-}
-*/
-
-function 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 function 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;
-}
-
-function isValidNumber(value, positiveOnly) {
-    return !isEmpty(value) && !isNaN(value) && (!positiveOnly || parseFloat(value) > 0);
-}
-
-function getDataContentType(params) {
-
-    var data = null;
-    var contentType = '';
-
-    if (!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 };
-}
-
-function arrayContainsItem(array, itemValue) {
-
-    var hasItem = false;
-
-    if (!isEmpty(array) && !isEmpty(itemValue)) {
-
-        var isJQueryElementArray = array[0] instanceof jQuery;
-
-        if (isJQueryElementArray) {
-
-            for (let i = 0; i < array.length; i++) {
-
-                if ($(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;
-}
-
-function dictHasKey(d, k) {
-    return (k in d);
-}
-
-/* System Interation
-AJAX
- */
-function xmlJSONData(methodName, objJSON) {
-    
-    var xhr = new XMLHttpRequest();
-
-    // Specify post-request actions
-    xhr.onreadystatechange = function() {
-        if (xhr.readyState === 4 && xhr.status === 200) {
-            // Parse the JSON response
-            return JSON.parse(xhr.responseText);
-        }
-    };
-
-    // Specify request path
-    xhr.open('GET', '/' + methodName, true);
-
-    // send request
-    xhr.send();
-}
-
-function ajaxJSONData(dataName, url, postData, successCallback, async, headers = {}) {
-
-    if (isEmpty(async)) async = true;
-    let formattedParams = getDataContentType(postData);
-
-    headers[keyCSRFToken] = getCSRFToken();
-    console.log("headers: ", headers);
-    $.ajax({
-        async: async,
-        type: 'POST',
-        cache: false,
-        url: url,
-        headers: headers,
-        data: formattedParams.Data,
-        dataType: 'json',
-        contentType: formattedParams.ContentType,
-        success: function(result) {
-            if (result.Success) {
-                successCallback(result);
-            }
-            else {
-                alertError("Error", result.Message);
-            }
-        },
-        error: function(xhr, ajaxOptions, thrownError) {
-            var errorMessage = "There was an error while getting the " + dataName + " data";
-            alertError("Error", errorMessage);
-        }
-    })
-}
-
-function getCSRFToken() {
-    // return $('meta[name=' + nameCSRFToken + ']').attr('content');
-    return $(idCSRFToken).attr('content');
-}
-
-function mapHashToController(hash) {
-    if (hash == null) return mapHashToController(hashPageHome);
-
-    url = _pathHost; // + '/';
-    console.log("url: " + url + "\nhash: " + hash);
-    return url + hash;
-
-    switch (hash) {
-        case hashPageErrorNoPermission:
-            url += 'error';
-            break;
-        case hashPageStoreHome:
-            url += 'store/home';
-            break;
-        case hashPageStoreProduct:
-            url += 'store/product';
-            break;
-        case hashStoreBasketLoad:
-            url += 'store/basket_load';
-            break;
-        case hashStoreBasketAdd:
-            url += 'store/product';
-            break;
-        default:
-            url += '';
-    }
-
-    return url;
-}
-
-/*
-function goToPage(pageHash, parameters) {
-    window.location.href = "{{ url_for(" + pageHash + (parameters == '' ? '' : ',' + parameters) + ") }}"; // getPageRoute(pageHash, parameters);
-}
-*/
-function goToPage(pageHash, parametersJSON) {
-    // window.location.href = "{{ url_for(" + pageHash + (parameters == '' ? '' : ',' + parameters) + ") }}"; // getPageRoute(pageHash, parameters);
-    // ajaxJSONData(pageHash, mapHashToController(pageHash), parameters, null, false);
-    url = mapHashToController(pageHash);
-
-    
-    if (!isEmpty(parametersJSON)) {
-        url += '%3F'; // '?';
-        let firstParameter = true;
-        for (var p in parametersJSON) {
-            // url += p + '=' + parametersJSON[p];
-            if (!firstParameter) {
-                url += '&';
-            } else {
-                firstParameter = false;
-            }
-            url += parametersJSON[p];
-        }
-    }
-    
-    leavePage();
-
-    window.location.href = url;
-    // ajaxJSONData(pageHash, url, parametersJSON, loadPageBody, false);
-}
-function leavePage() {}
-
-function goToUrl(parameterisedUrl) {
-    
-    leavePage();
-
-    window.location.href = parameterisedUrl;
-}
-
-function htmlEncode(value) {
-    return $('<div/>').text(value).html();
-}
-
-var _domParser = null;
-function htmlDecode(value) {
-    if (_domParser == null) _domParser = DOMParser(); // https://www.w3docs.com/snippets/javascript/how-to-html-encode-a-string.html
-    return _domParser.parseFromString(value, 'text/html').documentElement.textContent;
-}
-
-function convertForm2JSON(elemForm) {
-    
-    formData = {}
-
-    formDataTmp = elemForm.serializeArray();
-
-    $.each(formDataTmp, function(index, field) {
-        formData[field.name] = field.value;
-        /*
-        console.log('field name: ' + field.name);
-        console.log('field value: ' + field.value);
-        console.log('field currentval: ' + getElementCurrentValue(field));
-        */
-    });
-    
-    return formData;
-}
-
-function loadPageBody(response) {
-
-    let pageBody = $(idPageBody);
-
-    console.log('ajax:');
-    console.log(response.data);
-
-    pageBody.html(response.data['html_block']);
-}
-
-/* Page elements */
-function initialiseEventHandler(elSelector, initialisedClass, eventHandler) {
-
-    // only add once
-    var elObject = $(elSelector);
-    if (elObject.hasClass(initialisedClass)) return;
-
-    // add event handler
-    eventHandler();
-
-    // flag as initialised
-    elObject.addClass(initialisedClass);
-}
-
-function alertError(errorType, errorText) {
-    alert(errorType + '\n' + errorText);
-}
-
-function setPageToLoading(isLoading) {
-
-    if (isLoading) {
-        $(document.body).addClass(_dataLoadingFlag);
-    }
-    else {
-        $(document.body).removeClass(_dataLoadingFlag);
-    }
-}
-
-
-function setBackgroundToLoading(elId, isLoading) {
-
-    if (isEmpty(el)) {
-
-        var elObj = $(elId);
-
-        if (isLoading) {
-
-            setTimeout(function() {
-                elObj.html("");
-                elObj.css({
-                    "background-image": "url(" + urlImgLoading + ")",
-                    "background-position": "center",
-                    "background-repeat": "no-repeat"
-                });
-            }, 0);
-        }
-        else {
-            elObj.css("background-image", "");
-        }
-    }
-}
-
-function allowClick() {
-    return !$("body").hasClass(_dataLoadingFlag);
-}
-
-function getElementCurrentValue(el) {
-    let returnVal = '';
-    let element = $(el);
-
-    if (!isEmpty(el)) {
-
-        if (element.is("input:checkbox")) {
-            returnVal = (element.is(":checked"));
-        }
-        /*
-        else if (element.hasClass(flagIsDatePicker)) {
-            returnVal = getDatePickerDate(element, adjust4DayLightSavings);
-        }
-        */
-        else if (element.is("input") || element.is("textarea") || element.is("select")) {
-            returnVal = element.val();
-        }
-        else {
-            returnVal = element.text();
-        }
-    }
-
-    if (isEmpty(returnVal)) returnVal = '';
-
-    return returnVal;
-}
-
-function parseCSSPropertyToFloat(element, propertyName) {
-    var propertyText = element.css(propertyName);
-
-    if (!isEmpty(propertyText)) {
-
-        propertyText = propertyText.replace('px', '');
-
-        if (!isValidNumber(propertyText, true)) return parseFloat(propertyText);
-    }
-
-    return 0.00;
-}
-
-function scrollToElement(parent, element) {
-    // REQUIRED: parent has scroll-bar
-    parent.scrollTop(parent.scrollTop() + (element.offset().top - parent.offset().top));
-}
-
-function 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))
-    );
-}
-
-function getRowFromElement(element) {
-    return $(element).closest('tr');
-}
-
-function getCellFromElement(element) {
-    return $(element).closest('td');
-}
-
-
-
-// Textareas
-function removeBlankTextAreaLines(textarea) {
-    textarea.val(textarea.val.replace(/(?:(?:\r\n|\r|\n)\s*){2}/gm, ''));
-}
-
-function fitTextAreasToContent(parent) {
-    var textareas = parent.find('textarea');
-
-    if (!isEmpty(textareas)) {
-        for (var t = 0; t < textareas.length; t++) {
-            fitTextAreaToContent($(textareas[t]));
-        }
-    }
-}
-
-function 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.attr('rows', 1);
-
-    const paddingTop = parseCSSPropertyToFloat(textarea, 'padding-top');
-    const paddingBottom= parseCSSPropertyToFloat(textarea, 'padding-bottom');
-    const borderTop = parseCSSPropertyToFloat(textarea, 'border-top');
-    const borderBottom = parseCSSPropertyToFloat(textarea, 'border-bottom');
-    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 = parseCSSPropertyToFloat(textarea, 'line-height') + heightDelta;
-    if (heightNew < heightSingleLine) heightNew = heightSingleLine;
-
-    elTextarea.style.height = heightNew + 'px';
-}
-
-
-
-// Local storage
-/*
-function getPageLocalStorage(pageHash) {
-
-    let ls;
-    try {
-        ls = JSON.parse(localStorage.getItem(pageHash));
-    } catch {
-
-    }
-
-    if (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 (isEmpty(ls)) ls = {};
-
-    setPageLocalStorage(pageHash, ls);
-}
-*/
-
-function getLocalStorage(key) {
-
-    return JSON.parse(localStorage.getItem(key));
-}
-
-function 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/store_admin.js

@@ -1,28 +0,0 @@
-var _loading = true; 
-
-function hookupPageStorePageAdmin() {
-    _loading = false;
-
-    hookupBtnProductNew();
-    hookupBtnPriceNew();
-}
-
-function hookupBtnProductNew() {
-    let btnProductNew = $(idBtnProductNew);
-    btnProductNew.removeClass(flagInitialised);
-    initialiseEventHandler(idBtnProductNew, flagInitialised, function() {
-        btnProductNew.on("click", function(event) {
-            goToPage(hashPageStoreProductNew);
-        });
-    });
-}
-
-function hookupBtnPriceNew() {
-    let btnPriceNew = $(idBtnPriceNew);
-    btnPriceNew.removeClass(flagInitialised);
-    initialiseEventHandler(idBtnPriceNew, flagInitialised, function() {
-        btnPriceNew.on("click", function(event) {
-            goToPage(hashPageStorePriceNew);
-        });
-    });
-}

static/js/store_home.js

@@ -1,35 +0,0 @@
-var _loading = true; 
-
-function hookupStorePageHome() {
-    _loading = false;
-
-    hookupStoreCardsProduct();
-}
-
-function hookupStoreCardsProduct() {
-    
-    let d; // , lsShared;
-    // let selectorCardProduct = '.card.subcard';
-    $('div.card.subcard[' + attrIdProduct +']').each(function() {
-
-        var product = $(this);
-        initialiseEventHandler(product, flagInitialised, function() {
-            product = $(product);
-            console.log("initialising product: ", product);
-            product.on("click", function(event) {
-                // d = { keyIdProduct: product.attr(attrIdProduct) }
-                var elemClicked = event.target;
-                if (elemClicked.id != 'submit') { // disable for submit buttons
-                    console.log("product click: " + product.attr(attrIdProduct));
-                    console.log("permutation click: " + product.attr(attrIdPermutation));
-                    var d = {}
-                    d[keyIdProduct] = product.attr(attrIdProduct)
-                    d[keyIdPermutation] = product.attr(attrIdPermutation)
-                    // send quantity requested
-                    goToPage(hashPageStoreProduct, d);
-                }
-            });
-            console.log("click method added for product ID: " + product.attr(attrIdProduct) + ', permutation ID: ', product.attr(attrIdPermutation));
-        });
-    });
-}

static/js/store_page_basket.js

@@ -1,178 +0,0 @@
-var _loading = true; 
-
-function hookupStorePageBasket() {
-    _loading = false;
-
-    hookupStoreCardsInfo();
-    hookupOverlaysStoreBasketInfo();
-    hookupBtnCheckoutSession();
-}
-
-function hookupStoreCardsInfo() {
-    
-    $(idContainerInfoDelivery).on("click", function(event) {
-        console.log("delivery modal display method");
-        $(idOverlayInfoDelivery).css('display', 'block');
-    });
-    
-    $(idContainerInfoBilling).on("click", function(event) {
-        console.log("billing modal display method");
-        $(idOverlayInfoBilling).css('display', 'block');
-    });
-}
-
-function hookupOverlaysStoreBasketInfo() {
-
-    let elOverlay, elForm;
-
-    // Delivery
-    elOverlay = $(idOverlayInfoDelivery);
-    elForm = elOverlay.find('form');
-    
-    hookupOverlay(elOverlay);
-    initialiseEventHandler(elForm, flagInitialised, function() {
-        elForm.submit(function(event) {
-            elForm = $(elForm);
-            event.preventDefault();
-            console.log("delivery submit method");
-            
-            ajaxData = {};
-            ajaxData[keyInfoType] = keyInfoDelivery;
-            ajaxData = convertFormBilling2JSON(ajaxData, idOverlayInfoDelivery); 
-
-            ajaxJSONData('info delivery', mapHashToController(hashStoreBasketInfo), ajaxData, loadInfoAddress, false);
-            // $(idOverlayInfoDelivery).css('display', 'none');
-        });
-    });
-
-    // Billing
-    elOverlay = $(idOverlayInfoBilling);
-    elForm = elOverlay.find('form');
-
-    hookupOverlay(elOverlay);
-    initialiseEventHandler(elForm, flagInitialised, function() {
-        elForm.submit(function(event) {
-            event.preventDefault();
-            console.log("billing submit method");
-            
-            ajaxData = {};
-            ajaxData[keyInfoType] = keyInfoBilling;
-            ajaxData = convertFormBilling2JSON(ajaxData, idOverlayInfoBilling); // formData; // form.serialize();
-
-            ajaxJSONData('info billing', mapHashToController(hashStoreBasketInfo), ajaxData, loadInfoAddress, false);
-            // $(idOverlayInfoBilling).css('display', 'none');
-        });
-    });
-    let keys = [keyNameFull, keyPhoneNumber, keyPostcode, keyAddress1, keyCity, keyCounty];
-    for (var k in keys) {
-        elForm.find('#' + keys[k]).removeAttr('required');
-    }
-}
-
-function loadInfoAddress(response) {
-    
-    console.log('ajax:'); console.log(response.data);
-    let infoType = response.data[keyInfoType];
-    let infoAddress = response.data[infoType];
-    setLocalStorage(infoType, infoAddress);
-
-    // update webpage elements in background
-    if (infoType == keyInfoBilling) {
-
-        let container = $(idContainerInfoBilling);
-        if (infoAddress[keyInfoIdentical]) {
-            container.find('div').html("Same as delivery address");
-        } else {
-            container.find('div').html("<strong>" + infoAddress[keyNameFull] + '</strong> at <strong>' + infoAddress[keyPostcode] + "</strong>");
-        }
-
-        $(idOverlayInfoBilling).css('display', 'none');
-
-        $(idOverlayInfoBilling).find('form').addClass(flagSubmitted);
-    } else {
-
-        let container = $(idContainerInfoDelivery);
-        container.find('div').html("<strong>" + infoAddress[keyNameFull] + '</strong> at <strong>' + infoAddress[keyPostcode] + "</strong>");
-
-        $(idOverlayInfoDelivery).css('display', 'none');
-
-        $(idOverlayInfoDelivery).find('form').addClass(flagSubmitted);
-    }
-}
-
-function convertFormBilling2JSON(ajaxData, idOverlayInfo) {
-    
-    let elOverlay, elForm, elOverlayDelivery, elFormDelivery;
-    
-    elOverlay = $(idOverlayInfo);
-    elForm = elOverlay.find('form');
-    elOverlay = $(idOverlayInfoDelivery);
-    elForm = elOverlay.find('form');
-    
-    console.log('converting billing form to json\nform ID: ' + elForm.id);
-    ajaxData[keyForm] = convertForm2JSON(elForm); // formData; // form.serialize();
-    let keys = [keyNameFull, keyPhoneNumber, keyPostcode, keyAddress1, keyAddress2, keyCity, keyCounty];
-    console.log('ajaxData:');
-    console.log(ajaxData);
-    ajaxData[keyForm][keyInfoIdentical] = getElementCurrentValue(elForm.find('#' + keyInfoIdentical));
-    for (var k in keys) {
-        if (idOverlayInfo == idOverlayInfoBilling && ajaxData[keyForm][keyInfoIdentical]) {
-            ajaxData[keyForm][keys[k]] = getElementCurrentValue(elFormDelivery.find('#' + keys[k]));
-        } else {
-            ajaxData[keyForm][keys[k]] = getElementCurrentValue(elForm.find('#' + keys[k]));
-        }
-    }
-    console.log('ajaxData:');
-    console.log(ajaxData);
-    return ajaxData;
-}
-
-function hookupBtnCheckoutSession() {
-    let btnCheckout = $(idBtnCheckout);
-    btnCheckout.removeClass(flagInitialised);
-    initialiseEventHandler(idBtnCheckout, flagInitialised, function() {
-
-        btnCheckout.off("click");
-        btnCheckout.on("click", function(event) {
-            
-            
-            //setupPageLocalStorageNext(hashPageStoreBasket);
-            let basket = getLocalStorage(keyBasket);
-            // goToPage(hashPageStoreBasket);
-            let ajaxData = {};
-            ajaxData[keyBasket] = basket;
-            ajaxData = convertFormBilling2JSON(ajaxData, idOverlayInfoDelivery);
-            ajaxData = convertFormBilling2JSON(ajaxData, idOverlayInfoBilling);
-            ajaxData[key_code_currency] = getCurrencySelected();
-            // ajaxData[keyIsSubscription] = false; // only checkout one-time payment items for now
-
-            ajaxJSONData('checkout session', mapHashToController(hashPageStoreCheckout), ajaxData, handleResponseCheckout, false);
-        });
-    });
-}
-
-function handleResponseCheckout(response) {
-    // let tmpData = {};
-    // tmpData[keyIdCheckout] = response.data[keyIdCheckout]
-    // goToPage(hashPageStoreCheckoutSession, tmpData);
-    window.location.href = response.data[keyUrlCheckout]
-}
-
-function hookupBtnFormBillingCopy() {
-
-    // let elBtn = $(idBtnFormBillingCopy);
-
-    initialiseEventHandler(idBtnFormBillingCopy, flagInitialised, function() {
-        $(idBtnFormBillingCopy).on("click", function (event) {
-            
-            let keys = [keyNameFull, keyPhoneNumber, keyPostcode, keyAddress1, keyAddress2, keyCity, keyCounty];
-
-            let elFormBilling = $(idOverlayInfoBilling).find('form');
-            let elFormDelivery = $(idOverlayInfoDelivery).find('form');
-
-            for (var k in keys) {
-                elFormBilling.find('#' + keys[k]).val(getElementCurrentValue(elFormDelivery.find('#' + keys[k])));
-            }
-        });
-    });
-}

static/js/store_product_permutation.js

@@ -1,500 +0,0 @@
-var _loading = true;
-var _rowBlank = null;
-
-function hookupStorePageProductPermutation() {
-    _loading = false;
-    hookupFilters();
-    hookupButtonsSaveCancel();
-    hookupTableMain();
-    hookupOverlayConfirm(savePermutations);
-}
-
-function hookupFilters() {
-    let filterCategory = $(idFilterCategory);
-    initialiseEventHandler(filterCategory, flagInitialised, function() {
-        console.log("hooking up filter category");
-        filterCategory = $(filterCategory);
-        /*
-        listCategories.forEach(function(category) {
-            console.log('adding category: ', category.value, category.text);
-            /*
-            let option = document.createElement('option');
-            option.value = category.value;
-            option.text = category.text;
-            *
-           filterCategory.append($('<option>', category));
-        });
-        console.log(listCategories);
-        */
-        filterCategory.on("change", function(event) {
-            loadPermutations();
-        });
-        console.log("hooked up filter category");
-    });
-
-    let filterProduct = $(idFilterProduct);
-    initialiseEventHandler(filterProduct, flagInitialised, function() {
-        listProducts.forEach(function(product) {
-            if (product[attrIdCategory] != getElementCurrentValue($(idFilterCategory))) return;
-            /*
-            let option = document.createElement('option');
-            option.value = product.value;
-            option.text = product.text;
-            */
-           filterProduct.append($('<option>', product));
-        });
-        filterProduct.on("change", function(event) {
-            loadPermutations();
-        });
-    });
-    
-    let filterIsOutOfStock = $(idFilterIsOutOfStock);
-    initialiseEventHandler(filterIsOutOfStock, flagInitialised, function() {
-        filterIsOutOfStock.on("change", function(event) {
-            loadPermutations();
-        });
-    });
-
-    let filterQuantityMin = $(idFilterQuantityMin);
-    initialiseEventHandler(filterQuantityMin, flagInitialised, function() {
-        filterQuantityMin.on("change", function(event) {
-            loadPermutations();
-        });
-    });
-    
-    let filterQuantityMax = $(idFilterQuantityMax);
-    initialiseEventHandler(filterQuantityMax, flagInitialised, function() {
-        filterQuantityMax.on("change", function(event) {
-            loadPermutations();
-        });
-    });
-}
-
-function loadPermutations() {
-
-    let elForm = $(idFormFiltersPermutations);
-    let ajaxData = {};
-    ajaxData[keyForm] = convertForm2JSON(elForm);
-    ajaxData.csrf_token = ajaxData[keyForm].csrf_token;
-    /*
-    ajaxData[attrIdCategory] = getElementCurrentValue($(idFilterCategory));
-    ajaxData[attrIdProduct] = getElementCurrentValue($(idFilterProduct));
-    ajaxData[flagIsOutOfStock] = getElementCurrentValue($(idFilterIsOutOfStock));
-    ajaxData[flagQuantityMin] = getElementCurrentValue($(idFilterQuantityMin));
-    ajaxData[flagQuantityMax] = getElementCurrentValue($(idFilterQuantityMax));
-    */
-
-    console.log('ajaxData:'); console.log(ajaxData);
-
-    ajaxJSONData('permutations', mapHashToController(hashPageStorePermutationsPost), ajaxData, callbackLoadPermutations, false, {"X-CSRFToken": ajaxData.csrf_token});
-}
-
-function callbackLoadPermutations(response) {
-    
-    console.log('ajax:'); console.log(response.data);
-
-    let table = $(idTableMain);
-    let bodyTable, row, dllCategory, ddlProduct;
-
-   // table.find('tr').remove(); // :not(.' + flagRowNew + ')
-    bodyTable = table.find('tbody');
-    bodyTable.find('tr').remove(); 
-
-    $.each(response.data, function(_, dataRow) { 
-        row = _rowBlank.cloneNode(true);
-        row = $(row);
-        row.removeClass(flagRowNew);
-        console.log("applying data row: ", dataRow);
-        dllCategory = row.find('td.' + flagCategory + ' select');
-        dllCategory.val(dataRow[attrIdCategory]);
-        ddlProduct = row.find('td.' + flagProduct + ' select');
-        listProducts.forEach(function(product) {
-            if (product[attrIdCategory] != dataRow[attrIdCategory]) return;
-            ddlProduct.append($('<option>', product));
-        });
-        ddlProduct.val(dataRow[attrIdProduct]);
-        row.find('td.' + flagVariations + ' textarea').val(dataRow[flagVariations]);
-        row.find('td.' + flagQuantityStock + ' input').val(dataRow[flagQuantityStock]);
-        row.find('td.' + flagQuantityMin + ' input').val(dataRow[flagQuantityMin]);
-        row.find('td.' + flagQuantityMax + ' input').val(dataRow[flagQuantityMax]);
-        row.find('td.' + flagCostLocalVATIncl).html(dataRow[flagCostLocalVATIncl]);
-        row.attr(attrIdCategory, dataRow[flagCategory]);
-        row.attr(attrIdProduct, dataRow[flagProduct]);
-        row.attr(attrIdPermutation, dataRow[attrIdPermutation]);
-        bodyTable.append(row);
-    });
-    
-}
-
-function hookupButtonsSaveCancel() {
-    let btnSave = $(idButtonSave);
-    let btnCancel = $(idButtonCancel);
-    let btnAdd = $(idButtonAdd);
-
-    btnSave.on("click", function(event) {
-        event.stopPropagation();
-        showOverlayConfirm();
-    });
-    let parentSave = btnSave.closest('div.' + flagColumn);
-    // parentSave.addClass(flagCollapsed);
-
-    btnCancel.on("click", function(event) {
-        event.stopPropagation();
-        loadPermutations();
-    });
-    let parentCancel = btnCancel.closest('div.' + flagColumn);
-    // parentCancel.addClass(flagCollapsed);
-
-    btnAdd.on("click", function(event) {
-        event.stopPropagation();
-        let table = $(idTableMain);
-        let row = _rowBlank.cloneNode(true);
-        row = $(row);
-        row.removeClass(flagRowNew);
-        table.find('tbody').append(row);
-    });
-}
-
-function savePermutations() {
-
-    let permutations = getPermutations(true);
-    
-    if (permutations.length == 0) {
-        showOverlayError('No permutations to save');
-        return;
-    }
-
-    let ajaxData = {};
-    ajaxData[keyPermutations] = permutations;
-    ajaxData[keyForm] = convertForm2JSON(elForm);
-    ajaxData.csrf_token = ajaxData[keyForm].csrf_token;
-    ajaxData.comment = $(idTextareaConfirm).val();
-
-    console.log('ajaxData:'); console.log(ajaxData);
-    ajaxJSONData('permutations', mapHashToController(hashPageStorePermutationsPost), ajaxData, callbackLoadPermutations, false, {});
-}
-
-function getPermutations(dirtyOnly) {
-    let table = $(idTableMain);
-    let permutations = [];
-    let row, permutation, ddlCategory, ddlProduct, variations, quantityStock, quantityMin, quantityMax, costLocal;
-    table.find('tbody tr').each(function(index, row) {
-        row = $(row);
-        if (dirtyOnly && !row.hasClass(flagDirty)) return;
-
-        ddlCategory = row.find('td.' + flagCategory + ' select');
-        ddlProduct = row.find('td.' + flagProduct + ' select');
-        variations = row.find('td.' + flagVariations + ' textarea');
-        quantityStock = row.find('td.' + flagQuantityStock + ' input');
-        quantityMin = row.find('td.' + flagQuantityMin + ' input');
-        quantityMax = row.find('td.' + flagQuantityMax + ' input');
-
-        permutation = {};
-        permutation[attrIdCategory] = ddlCategory.attr(attrValueCurrent);
-        permutation[attrIdProduct] = ddlProduct.attr(attrValueCurrent);
-        permutation[attrIdPermutation] = row.attr(attrIdPermutation)
-        permutation[flagVariations] = variations.attr(attrValueCurrent);
-        permutation[flagQuantityStock] = quantityStock.attr(attrValueCurrent);
-        permutation[flagQuantityMin] = quantityMin.attr(attrValueCurrent);
-        permutation[flagQuantityMax] = quantityMax.attr(attrValueCurrent);
-        permutations.push(permutation);
-    });
-    return permutations;
-}
-
-function hookupTableMain() {
-    let table = $(idTableMain);
-    let rowBlankTemp = table.find('tr.' + flagRowNew);
-    console.log("row blank temp: ", rowBlankTemp);
-    _rowBlank = rowBlankTemp[0].cloneNode(true);
-    table.find('tr.' + flagRowNew).remove();
-
-    /*
-    let ddlCategory, ddlProduct;
-    let optionsCategory = $(idFilterCategory + ' option');
-    optionsCategory.
-
-    console.log('optionsCategory:', optionsCategory);
-
-    table.find('tbody tr').each(function(index, row) {
-        console.log("hooking up row ", index);
-        row = $(row);
-        ddlCategory = row.find('td.' + flagCategory + ' select');
-        ddlProduct = row.find('td.' + flagProduct + ' select');
-        
-        optionsCategory.clone().appendTo(ddlCategory);
-
-        /*
-        listProducts.forEach(function(product) {
-            if (product[attrIdCategory] != getElementCurrentValue(ddlCategory)) return;
-            ddlProduct.append($('<option>', product));
-        });
-        *
-    });
-    */
-
-    let ddlCategory, ddlProduct, variations, quantityStock, quantityMin, quantityMax, costLocal, detail;
-    table.find('tbody tr').each(function(index, row) {
-        console.log("hooking up row ", index);
-        row = $(row);
-        ddlCategory = row.find('td.' + flagCategory + ' select');
-        ddlProduct = row.find('td.' + flagProduct + ' select');
-        variations = row.find('td.' + flagVariations + ' textarea');
-        quantityStock = row.find('td.' + flagQuantityStock + ' input');
-        quantityMin = row.find('td.' + flagQuantityMin + ' input');
-        quantityMax = row.find('td.' + flagQuantityMax + ' input');
-        detail = row.find('td.' + flagDetail + ' button');
-
-        initialiseEventHandler(ddlCategory, flagInitialised, function() {
-            // ddlCategory = $(ddlCategory);
-            ddlCategory.on('change', function() {
-                /*
-                ddlCategory.attr(attrValuePrevious, ddlCategory.attr(attrValueCurrent));
-                ddlCategory.attr(attrValueCurrent, ddlCategory.val());
-                */
-                handleChangeInputPermutations(this);
-                ddlCategory = $(this);
-                row = getRowFromElement(ddlCategory);
-                ddlProduct = row.find('td.' + flagProduct + ' select');
-                // ddlProduct = $(ddlProduct);
-                ddlProduct.find('option').remove();
-                ddlProduct.append($('<option>', {value: '', text: 'Select Product'}));
-                listProducts.forEach(function(product) {
-                    if (product[attrIdCategory] != getElementCurrentValue(ddlCategory)) return;
-                    ddlProduct.append($('<option>', product));
-                });
-                handleChangeInputPermutations(ddlProduct);
-            });
-        });
-
-        initialiseEventHandler(ddlProduct, flagInitialised, function() {
-            // ddlProduct = $(ddlProduct);
-            ddlProduct.on('change', function() {
-                handleChangeInputPermutations(this);
-            });
-        });
-
-        initialiseEventHandler(variations, flagInitialised, function() {
-            // variations = $(variations);
-            variations.on('click', function() {
-                handleClickPermutationsInputVariations(this);
-            });
-        });
-
-        initialiseEventHandler(quantityStock, flagInitialised, function() {
-            // quantityStock = $(quantityStock);
-            quantityStock.on('change', function() {
-                // console.log(this.value);
-                // quantityStock.value = this.value;
-                handleChangeInputPermutations(this);
-            });
-        });
-
-        initialiseEventHandler(quantityMin, flagInitialised, function() {
-            // quantityMin = $(quantityMin);
-            quantityMin.on('change', function() {
-                handleChangeInputPermutations(this);
-            });
-        });
-
-        initialiseEventHandler(quantityMax, flagInitialised, function() {
-            // quantityMax = $(quantityMax);
-            quantityMax.on('change', function() {
-                handleChangeInputPermutations(this);
-            });
-        });
-
-        initialiseEventHandler(detail, flagInitialised, function() {
-            detail.on('click', function() {
-                console.log("not implemented error: detail clicked");
-            });
-        });
-    });
-}
-
-function handleChangeInputPermutations(element) {
-    console.log(element.value);
-    let objJQuery = $(element);
-    objJQuery.value = element.value;
-    let row = getRowFromElement(objJQuery);
-    let buttonCancel = $(idButtonCancel);
-    let buttonSave = $(idButtonSave);
-    let wasDirty = isElementDirty(objJQuery);
-
-    if (objJQuery.hasClass(flagVariations)) {
-        objJQuery.attr(attrValueCurrent, getProductVariationsText(objJQuery));
-    } else {
-        objJQuery.attr(attrValueCurrent, getElementCurrentValue(objJQuery));
-    }
-    let isDirty = isElementDirty(objJQuery);
-    if (wasDirty != isDirty) {
-        isRowDirty(row);
-        let permutationsDirty = getPermutations(true);
-        if (isEmpty(permutationsDirty)) {
-            buttonCancel.addClass(flagCollapsed);
-            buttonSave.addClass(flagCollapsed);
-        } else {
-            buttonCancel.removeClass(flagCollapsed);
-            buttonSave.removeClass(flagCollapsed);
-        }
-    }
-}
-
-/*
-function isElementDirty(element) {
-    return element.hasClass(flagDirty);
-}
-*/
-function isElementDirty(element) {
-    let isDirty = element.attr(attrValuePrevious) != element.attr(attrValueCurrent);
-    let cell = getCellFromElement(element);
-    if (isDirty) {
-        element.addClass(flagDirty);
-        cell.addClass(flagDirty);
-    } else {
-        element.removeClass(flagDirty);
-        cell.removeClass(flagDirty);
-    }
-    return isDirty;
-}
-
-function isRowDirty(row) {
-    let ddlCategory = row.find('td.' + flagCategory + ' select');
-    let ddlProduct = row.find('td.' + flagProduct + ' select');
-    let variations = row.find('td.' + flagVariations + ' textarea');
-    let quantityStock = row.find('td.' + flagQuantityStock + ' input');
-    let quantityMin = row.find('td.' + flagQuantityMin + ' input');
-    let quantityMax = row.find('td.' + flagQuantityMax + ' input');
-    
-    // return isElementDirty(ddlCategory) || isElementDirty(ddlProduct) || isElementDirty(variations) || isElementDirty(quantityStock) || isElementDirty(quantityMin) || isElementDirty(quantityMax);
-    let isDirty = ddlCategory.hasClass(flagDirty) || ddlProduct.hasClass(flagDirty) || variations.hasClass(flagDirty) || 
-        quantityStock.hasClass(flagDirty) || quantityMin.hasClass(flagDirty) || quantityMax.hasClass(flagDirty);
-    if (isDirty) {
-        row.addClass(flagDirty);
-    } else {
-        row.removeClass(flagDirty);
-    }
-    return isDirty;
-}
-
-function getProductVariationsText(element) {
-    element = $(element);
-    /*
-    let value = element.val();
-    let variations = value.split('\n');
-    variations = variations.map(function(variation) {
-        return variation.trim();
-    });
-    variations = variations.filter(function(variation) {
-        return variation.length > 0;
-    });
-    */
-    let variations = dictVariations[element.attr(attrIdVariation)].map((variation, index) => {
-        return variation[keyNameVariationType] + ': ' + variation[keyNameVariation];
-    });
-    return variations.join(',\n');
-}
-
-function getElementProductVariations(element) {
-    element = $(element);
-    let variations = element.attr(attrValueCurrent);
-    let objVariations = [];
-    if (!isEmpty(variations)) {
-        variations = variations.split(',');
-        variations.forEach((variation) => {
-            let parts = variation.split(':');
-            if (parts.length == 2) {
-                objVariations.push({
-                    [attrIdVariationType]: parts[0].trim(),
-                    [attrIdVariation]: parts[1].trim(),
-                });
-            }
-        });
-    }
-    return objVariations;
-}
-
-function handleClickPermutationsInputVariations(element) {
-    element = $(element);
-    
-    let jsonVariation, jsonVariationType, tr, tdVariationType, variationType, attributesVariationType, tdNameVariation, nameVariation, attributesNameVariation, tdDelete, buttonDelete, tmpJsonVariation, tmpJsonVariationType;
-    let variations = getElementProductVariations(element);
-    let tblVariations = $("<table>");
-    tblVariations.append("<thead><tr><th>Type</th><th>Name</th></tr></thead>");
-    let tbody = $("<tbody>");
-    console.log('variations:', variations);
-    if (isEmpty(variations)) {
-        return;
-    }
-    variations.forEach((variation, index) => {
-        jsonVariationType = dictVariations[variation[attrIdVariationType]];
-        jsonVariation = dictVariations[variation[attrIdVariation]];
-        tdVariationType = $("<td>", {
-            class: attrIdVariationType,
-        });
-        attributesVariationType = {
-            class: attrIdVariationType,
-            value: variation[attrIdVariationType],
-        };
-        attributesVariationType[attrValueCurrent] = jsonVariation[attrIdVariationType];
-        attributesVariationType[attrValuePrevious] = jsonVariation[attrIdVariationType];
-        variationType = $("<select>", attributesVariationType);
-        listVariationTypes.forEach((idVariationType) => {
-            tmpJsonVariationType = dictVariationTypes[idVariationType];
-            variationType.append($('<option>', { 
-                value: jsonVariationType[attrIdVariationType],
-                text: jsonVariationType[keyNameVariationType],
-                selected: (idVariationType == jsonVariationType[attrIdVariationType]),
-            }));
-        });
-        tdNameVariation = $("<td>", {
-            class: attrIdVariation,
-        });
-        attributesNameVariation = {
-            class: attrIdVariation,
-            value: variation[attrIdVariation],
-        };
-        attributesNameVariation[attrValueCurrent] = jsonVariation[attrIdVariation];
-        attributesNameVariation[attrValuePrevious] = jsonVariation[attrIdVariation];
-        nameVariation = $("<select>", attributesNameVariation);
-        listVariations.forEach((idVariation) => {
-            tmpJsonVariation = dictVariations[idVariation];
-            console.log("id_variation: ", idVariation);
-            console.log("tmpJsonVariation: ", tmpJsonVariation);
-            nameVariation.append($('<option>', {
-                value: tmpJsonVariation[attrIdVariation],
-                text: tmpJsonVariation[keyNameVariation],
-                selected: (idVariation == jsonVariation[attrIdVariation]),
-            }));
-        });
-        tdDelete = $("<td>", {
-            class: flagDelete,
-        });
-        buttonDelete = $("<button>", {
-            class: flagDelete,
-            text: 'x',
-        });
-        tr = $("<tr>");
-        tdVariationType.append(variationType);
-        tr.append(tdVariationType);
-        tdNameVariation.append(nameVariation);
-        tr.append(tdNameVariation);
-        tdDelete.append(buttonDelete);
-        tr.append(tdDelete);
-        tbody.append(tr);
-    });
-    tr = $("<tr>");
-    let buttonAdd = $("<button>", {
-        class: flagAdd,
-        text: '+',
-    });
-    let tdAdd = $("<td>");
-    tdAdd.append(buttonAdd);
-    tr.append(tdAdd);
-    tbody.append(tr);
-    tblVariations.append(tbody);
-    let parent = element.parent();
-    parent.html('');
-    parent.append(tblVariations);
-    console.log("tblVariations: ", tblVariations);
-}

static/js/store_shared.js

@@ -1,368 +0,0 @@
-
-
-function hookupStore() {
-    console.log('hookup store start');
-    console.log(_pathHost);
-    hookupLocalStorageStore();
-    hookupBasket();
-    hookupBtnsAdd2Basket();
-}
-
-function hookupBasket() {
-    
-    // const containerBasket = $(idContainerBasket);
-    toggleShowBtnCheckout(); // containerBasket
-    hookupBtnCheckout();
-    hookupBtnsPlusMinus();
-    hookupBasketAddInputs();
-    hookupBasketEditInputs();
-    hookupBtnsDelete();
-}
-
-function hookupLocalStorageStore() {
-
-    // setupPageLocalStorage(hashPageCurrent);
-    // let lsPage = getPageLocalStorage(hashPageCurrent);
-    // let d = {}
-    // d[keyBasket] = getLocalStorage(keyBasket); // (keyBasket in lsPage) ? lsPage[keyBasket] : {'items': []};
-    // console.log('d:'); console.log(d);
-    let basket;
-    let createNewBasket = true;
-    if (true) { // !isUserLoggedIn) {
-        try {
-            basket = getLocalStorage(keyBasket);
-            console.log('basket found: '); console.log(basket);
-            createNewBasket = isEmpty(basket);
-        }
-        catch {
-            
-        }
-        // lsPage[keyBasket] = ajaxJSONData(keyBasket, hashStoreBasketLoad, d, loadBasket, false);
-    }
-    else {
-        // store basket from server in localStorage
-        
-    }
-    if (createNewBasket) {
-        basket = {};
-        basket[keyItems] = [];
-        basket[keyIsIncludedVAT] = true;
-        basket[keyIdCurrency] = 1;
-        basket[keyIdRegionDelivery] = 1;
-        setLocalStorage(keyBasket, basket);
-        console.log("new local basket created");
-    }
-    let ajaxData = {}
-    ajaxData[keyBasket] = basket;
-    // console.log("hookupLocalStorageStore\nhashStoreBasketLoad: " + hashStoreBasketLoad + "\n");
-    // ajaxData[keyIsIncludedVAT] = getLocalStorage(keyIsIncludedVAT);
-    console.log('ajax:' + ajaxData);
-    ajaxJSONData(keyBasket, mapHashToController(hashStoreBasketLoad), ajaxData, loadBasket, false);
-}
-
-/*
-function setupPageLocalStorageNextStore(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);
-}
-
-function goToPageStore(pageHash, parameters_dict) {
-    
-    let lsOld = getPageLocalStorage(pageHashCurrent);
-    pageHashCurrent = pageHash;
-    clearPageLocalStorage(pageHashCurrent);
-    setupPageLocalStorage(pageHashCurrent);
-    let lsNew = getPageLocalStorage(pageHashCurrent);
-    lsNew[keyBasket] = (keyBasket in lsOld) ? lsOld[keyBasket] : {'items': []};
-    setPageLocalStorage(pageHashCurrent, lsNew);
-    
-    goToPage(pageHash, parameters_dict);
-}
-*/
-
-function toggleShowBtnCheckout() { // containerBasket
-    
-    console.log("toggling checkout button");
-
-    const btnCheckout = $(idBtnCheckout);
-    const labelBasketEmpty = $(idLabelBasketEmpty);
-
-    // let lsPage = getPageLocalStorage(hashPageCurrent);
-    // let basket = lsPage[keyBasket]['items'];
-    // let products = containerBasket.filter('');
-    let basket = getLocalStorage(keyBasket);
-
-    if (basket['items'].length == 0) {
-        btnCheckout.hide();
-        labelBasketEmpty.show();
-    } else {
-        btnCheckout.show();
-        labelBasketEmpty.hide();
-    }
-}
-
-/*
-function getBasket() {
-
-    lsShared = getPageLocalStorage(keyShared);
-
-    return lsShared[keyBasket];
-}
-*/
-
-function hookupBtnsAdd2Basket() {
-
-    // let product, btn, lsPage;
-    // [' + attrIdProduct + '=' + elBtn.attr(attrIdProduct) + ']
-    $('form[' + attrFormType + '="' + typeFormBasketAdd +'"]').each(function() {
-    
-        var form = $(this);
-
-        initialiseEventHandler(form, flagInitialised, function() {
-            // form = $(form);
-            form.submit(function(event) {
-                event.preventDefault();
-
-                // lsShared = getPageLocalStorage(keyShared);
-                console.log("adding to basket for product ID: ", form.attr(attrIdProduct));
-
-                ajaxData = {};
-                ajaxData[keyIdProduct] = form.attr(attrIdProduct);
-                ajaxData[keyIdPermutation] = form.attr(attrIdPermutation);
-                basket = getLocalStorage(keyBasket);
-                ajaxData[keyBasket] = basket; // lsShared[keyBasket];
-                console.log("basket before add: ", basket);
-                ajaxData[keyForm] = convertForm2JSON(form); // formData; // form.serialize();
-                console.log("ajax data:"); console.log(ajaxData);
-                ajaxJSONData('add2Basket', mapHashToController(hashStoreBasketAdd), ajaxData, loadBasket, false); // { product_id: form.attr(attrIdProduct), basket_local: lsPage[keyBasket] , }
-            });
-            console.log("basket add method added for product ID: ", form.attr(attrIdProduct));
-        });
-    });
-}
-
-function hookupBtnCheckout() {
-
-    console.log("hooking up checkout button");
-
-    const btnCheckout = $(idBtnCheckout);
-    // let lsPage = getPageLocalStorage(hashPageCurrent);
-    initialiseEventHandler(btnCheckout, flagInitialised, function() {
-        btnCheckout.on("click", function() {
-            /*
-            //setupPageLocalStorageNext(hashPageStoreBasket);
-            let basket = getLocalStorage(keyBasket);
-            // goToPage(hashPageStoreBasket);
-            let ajaxData = {};
-            ajaxData[keyBasket] = basket;
-
-            ajaxJSONData('checkout', mapHashToController(hashPageStoreBasket), ajaxData, null, false);
-            */
-           goToPage(hashPageStoreBasket);
-        });
-    });
-}
-
-function loadBasket(response) {
-
-    let basketContainer = $(idBasketContainer);
-    // let lsPage = getPageLocalStorage(hashPageCurrent);
-    // let lsShared = getPageLocalStorage(keyShared);
-
-    console.log('ajax:'); console.log(response.data);
-
-    let basket = response.data[keyBasket]; // JSON.parse(response.data[keyBasket]);
-    // setPageLocalStorage(keyShared, lsShared);
-    setLocalStorage(keyBasket, basket);
-    items = basket['items'];
-    // console.log('old basket:'); console.log(basketContainer.html());
-    // console.log('setting basket:'); console.log(response.data['html_block']);
-    basketContainer.html(response.data['html_block']);
-    
-    /*
-    if (items.length > 0) {
-        let basketItem;
-        for (let indexItemBasket = 0; indexItemBasket < items.length; indexItemBasket++) {
-            basketItem = items[indexItemBasket];
-            if (basketItem[keyQuantity] > 1) {
-                elInput = basketContainer.find('form[' + attrFormType + '=' + typeFormBasketEdit + ']').find('input[type="number"]');
-                // todo : what is missing?
-                elInput.val(basketItem[keyQuantity]);
-            }
-        }
-    }
-    */
-   
-    hookupBasket();
-}
-
-function getFormProductSelector(typeForm, elementInForm) {
-    idPermutation = elementInForm.attr(attrIdPermutation);
-    console.log('idPermutation: ', idPermutation);
-    hasPermutation = !isEmpty(idPermutation);
-    console.log('has permutation: ', hasPermutation);
-    selectorIdPermutation = hasPermutation ? '[' + attrIdPermutation + '=' + idPermutation + ']' : '';
-    return 'form[' + attrFormType + '="' + typeForm + '"][' + attrIdProduct + '=' + elementInForm.attr(attrIdProduct) + ']' + selectorIdPermutation;
-}
-
-function hookupBtnsPlusMinus() {
-    
-    // let elBtn, elInput, newVal, product;
-    const minVal = 1;
-    // Basket Add
-    // Increment
-    $('div.btn-increment[' + attrFormType + '=' + typeFormBasketAdd + ']').each(function() {
-        let elBtn = $(this);
-        initialiseEventHandler(elBtn, flagInitialised, function(){
-            elBtn.on("click", function(event) {
-                event.preventDefault();
-                event.stopPropagation();
-                let elInput = $(getFormProductSelector(typeFormBasketAdd, elBtn)).find('input[type="number"]');
-                // console.log('input selector ='); console.log('form[' + attrFormType + '=' + elBtn.attr(attrFormType) + '][' + attrIdProduct + '=' + elBtn.attr(attrIdProduct) + ']');
-                let newVal = parseInt(getElementCurrentValue(elInput));
-                if (isNaN(newVal)) newVal = minVal;
-                newVal += 1;
-                elInput.val(newVal);
-            });
-        });
-    });
-    // Decrement
-    $('div.btn-decrement[' + attrFormType + '=' + typeFormBasketAdd + ']').each(function() {
-        let elBtn = $(this);
-        initialiseEventHandler(elBtn, flagInitialised, function(){
-            elBtn.on("click", function(event) {
-                event.preventDefault();
-                event.stopPropagation();
-                // let product = $('.card.subcard[' + attrIdProduct +'=' + elBtn.attr(attrIdProduct) + ']');
-                let elInput= $(getFormProductSelector(typeFormBasketAdd, elBtn)).find('input[type="number"]');
-                let newVal = parseInt(getElementCurrentValue(elInput));
-                if (isNaN(newVal)) newVal = minVal;
-                newVal = Math.max(minVal, newVal - 1);
-                elInput.val(newVal);
-            });
-        });
-    });
-
-    // Basket Edit
-    // Increment
-    $('div.btn-increment[' + attrFormType + '=' + typeFormBasketEdit + ']').each(function() {
-        let elBtn = $(this);
-        initialiseEventHandler(elBtn, flagInitialised, function(){
-            elBtn.on("click", function(event) {
-                event.stopPropagation();
-                // basketItem = $('.card.subcard[' + attrIdProduct +'=' + elBtn.attr(attrIdProduct) + ']');
-                let elInput = $(getFormProductSelector(typeFormBasketEdit, elBtn)).find('input[type="number"]');
-                // console.log('input selector ='); console.log('form[' + attrFormType + '=' + elBtn.attr(attrFormType) + '][' + attrIdProduct + '=' + elBtn.attr(attrIdProduct) + ']');
-                let newVal = parseInt(getElementCurrentValue(elInput));
-                if (isNaN(newVal)) newVal = minVal;
-                newVal += 1;
-                elInput.val(newVal);
-                elInput.trigger("change");
-            });
-        });
-    });
-    // Decrement
-    $('div.btn-decrement[' + attrFormType + '=' + typeFormBasketEdit + ']').each(function() {
-        let elBtn = $(this);
-        initialiseEventHandler(elBtn, flagInitialised, function(){
-            elBtn.on("click", function(event) {
-                event.stopPropagation();
-                let elInput= $(getFormProductSelector(typeFormBasketEdit, elBtn)).find('input[type="number"]');
-                let newVal = parseInt(getElementCurrentValue(elInput));
-                if (isNaN(newVal)) newVal = minVal;
-                newVal = Math.max(minVal, newVal - 1);
-                elInput.val(newVal);
-                elInput.trigger("change");
-            });
-        });
-    });
-}
-
-function hookupBasketAddInputs() {
-    
-    $('form[' + attrFormType + '=' + typeFormBasketAdd + ']').each(function() {
-        let elForm = $(this);
-        let elInput = elForm.find('input[type="number"]');
-        initialiseEventHandler(elInput, flagInitialised, function(){
-            elInput.on("change", function(event) {
-                event.preventDefault();
-                event.stopPropagation();
-            });
-            elInput.on("click", function(event) {
-                event.preventDefault();
-                event.stopPropagation();
-            });
-        });
-    });
-}
-
-function hookupBasketEditInputs() {
-    
-    // let elBtn, elInput, newVal, product;
-    const minVal = 1;
-    // Basket Edit
-    // Increment
-    $('form[' + attrFormType + '=' + typeFormBasketEdit + ']').each(function() {
-        let elForm = $(this);
-        let elInput = elForm.find('input[type="number"]');
-        initialiseEventHandler(elInput, flagInitialised, function(){
-            elInput.on("change", function(event) {
-                event.preventDefault();
-                event.stopPropagation();
-                // let lsPage = getPageLocalStorageCurrent();
-                d = {};
-                d[keyBasket]= getLocalStorage(keyBasket); // lsPage[keyBasket]; // JSON.parse(lsPage[keyBasket]);
-                d[keyIdProduct] = elForm.attr(attrIdProduct); // lsPage[keyIdProduct];
-                d[keyIdPermutation] = elForm.attr(attrIdPermutation);
-                // d[keyQuantity] = lsPage[keyQuantity];
-                d[keyForm] = convertForm2JSON(elForm);
-                d[keyForm][keyQuantity] = elInput.val();
-                console.log('sending data to basket edit controller: '); console.log(d);
-                ajaxJSONData('basket update', mapHashToController(hashStoreBasketEdit), d, loadBasket, false);
-            });
-        });
-    });
-}
-
-function hookupBtnsDelete() {
-    
-    console.log('hooking up basket item delete buttons');
-    // let elForm, elDelete;
-    // const minVal = 1;
-    // Basket Add
-    // Increment
-    $('form[' + attrFormType + '=' + typeFormBasketEdit + ']').each(function() {
-        let elForm = $(this);
-        let elDelete = elForm.find('a.' + flagBasketItemDelete);
-        initialiseEventHandler(elDelete, flagInitialised, function(){
-            elDelete.on("click", function(event) {
-                event.stopPropagation();
-                ajaxData = {};
-                ajaxData[keyBasket]= getLocalStorage(keyBasket);
-                ajaxData[keyIdProduct] = elForm.attr(attrIdProduct);
-                ajaxData[keyIdPermutation] = elForm.attr(attrIdPermutation);
-                console.log('sending data to basket delete controller: '); console.log(ajaxData);
-                ajaxJSONData('basket update', mapHashToController(hashStoreBasketDelete), ajaxData, loadBasket, false);
-            });
-        });
-    });
-}
-
-function getCurrencySelected() {
-    let elementSelectorCurrency = $(idSelectorCurrency);
-    let selectedCurrency = elementSelectorCurrency.val();
-    console.log("selected currency: ", selectedCurrency);
-    return selectedCurrency;
-}
-
-function addMetadataBasketToJSON(jsonData) {
-    jsonData[keyIdCurrency] = getLocalStorage(keyIdCurrency);
-    jsonData[keyIdRegionDelivery] = getLocalStorage(keyIdRegionDelivery);
-    jsonData[keyIsIncludedVAT] = getLocalStorage(keyIsIncludedVAT);
-    return jsonData;
-}

static/js/store_stock_item.js

@@ -1,363 +0,0 @@
-var _loading = true;
-var _rowBlank = null;
-
-function hookupStorePageProductPermutation() {
-    _loading = false;
-    hookupFilters();
-    hookupButtonsSaveCancel();
-    hookupTableMain();
-    hookupOverlayConfirm(savePermutations);
-}
-
-function hookupFilters() {
-    let filterCategory = $(idFilterCategory);
-    initialiseEventHandler(filterCategory, flagInitialised, function() {
-        console.log("hooking up filter category");
-        filterCategory = $(filterCategory);
-        /*
-        listCategories.forEach(function(category) {
-            console.log('adding category: ', category.value, category.text);
-            /*
-            let option = document.createElement('option');
-            option.value = category.value;
-            option.text = category.text;
-            *
-           filterCategory.append($('<option>', category));
-        });
-        console.log(listCategories);
-        */
-        filterCategory.on("change", function(event) {
-            loadPermutations();
-        });
-        console.log("hooked up filter category");
-    });
-
-    let filterProduct = $(idFilterProduct);
-    initialiseEventHandler(filterProduct, flagInitialised, function() {
-        listProducts.forEach(function(product) {
-            if (product[attrIdCategory] != getElementCurrentValue($(idFilterCategory))) return;
-            /*
-            let option = document.createElement('option');
-            option.value = product.value;
-            option.text = product.text;
-            */
-           filterProduct.append($('<option>', product));
-        });
-        filterProduct.on("change", function(event) {
-            loadPermutations();
-        });
-    });
-    
-    let filterIsOutOfStock = $(idFilterIsOutOfStock);
-    initialiseEventHandler(filterIsOutOfStock, flagInitialised, function() {
-        filterIsOutOfStock.on("change", function(event) {
-            loadPermutations();
-        });
-    });
-
-    let filterQuantityMin = $(idFilterQuantityMin);
-    initialiseEventHandler(filterQuantityMin, flagInitialised, function() {
-        filterQuantityMin.on("change", function(event) {
-            loadPermutations();
-        });
-    });
-    
-    let filterQuantityMax = $(idFilterQuantityMax);
-    initialiseEventHandler(filterQuantityMax, flagInitialised, function() {
-        filterQuantityMax.on("change", function(event) {
-            loadPermutations();
-        });
-    });
-}
-
-function loadPermutations() {
-
-    let elForm = $(idFormFiltersPermutations);
-    let ajaxData = {};
-    ajaxData[keyForm] = convertForm2JSON(elForm);
-    ajaxData.csrf_token = ajaxData[keyForm].csrf_token;
-    /*
-    ajaxData[attrIdCategory] = getElementCurrentValue($(idFilterCategory));
-    ajaxData[attrIdProduct] = getElementCurrentValue($(idFilterProduct));
-    ajaxData[flagIsOutOfStock] = getElementCurrentValue($(idFilterIsOutOfStock));
-    ajaxData[flagQuantityMin] = getElementCurrentValue($(idFilterQuantityMin));
-    ajaxData[flagQuantityMax] = getElementCurrentValue($(idFilterQuantityMax));
-    */
-
-    console.log('ajaxData:'); console.log(ajaxData);
-
-    ajaxJSONData('permutations', mapHashToController(hashPageStorePermutationsPost), ajaxData, callbackLoadPermutations, false, {"X-CSRFToken": ajaxData.csrf_token});
-}
-
-function callbackLoadPermutations(response) {
-    
-    console.log('ajax:'); console.log(response.data);
-
-    let table = $(idTableMain);
-    let bodyTable, row, dllCategory, ddlProduct;
-
-   // table.find('tr').remove(); // :not(.' + flagRowNew + ')
-    bodyTable = table.find('tbody');
-    bodyTable.find('tr').remove(); 
-
-    $.each(response.data, function(_, dataRow) { 
-        row = _rowBlank.cloneNode(true);
-        row = $(row);
-        row.removeClass(flagRowNew);
-        console.log("applying data row: ", dataRow);
-        dllCategory = row.find('td.' + flagCategory + ' select');
-        dllCategory.val(dataRow[attrIdCategory]);
-        ddlProduct = row.find('td.' + flagProduct + ' select');
-        listProducts.forEach(function(product) {
-            if (product[attrIdCategory] != dataRow[attrIdCategory]) return;
-            ddlProduct.append($('<option>', product));
-        });
-        ddlProduct.val(dataRow[attrIdProduct]);
-        row.find('td.' + flagVariations + ' textarea').val(dataRow[flagVariations]);
-        row.find('td.' + flagQuantityStock + ' input').val(dataRow[flagQuantityStock]);
-        row.find('td.' + flagQuantityMin + ' input').val(dataRow[flagQuantityMin]);
-        row.find('td.' + flagQuantityMax + ' input').val(dataRow[flagQuantityMax]);
-        row.find('td.' + flagCostLocal).html(dataRow[flagCostLocal]);
-        row.attr(attrIdCategory, dataRow[flagCategory]);
-        row.attr(attrIdProduct, dataRow[flagProduct]);
-        row.attr(attrIdPermutation, dataRow[attrIdPermutation]);
-        bodyTable.append(row);
-    });
-    
-}
-
-function hookupButtonsSaveCancel() {
-    let btnSave = $(idButtonSave);
-    let btnCancel = $(idButtonCancel);
-    let btnAdd = $(idButtonAdd);
-
-    btnSave.on("click", function(event) {
-        event.stopPropagation();
-        showOverlayConfirm();
-    });
-    btnSave.addClass(flagCollapsed);
-
-    btnCancel.on("click", function(event) {
-        event.stopPropagation();
-        loadPermutations();
-    });
-    btnCancel.addClass(flagCollapsed);
-
-    btnAdd.on("click", function(event) {
-        event.stopPropagation();
-        let table = $(idTableMain);
-        let row = _rowBlank.cloneNode(true);
-        row = $(row);
-        row.removeClass(flagRowNew);
-        table.find('tbody').append(row);
-    });
-}
-
-function savePermutations() {
-
-    let permutations = getPermutations(true);
-    
-    if (permutations.length == 0) {
-        showOverlayError('No permutations to save');
-        return;
-    }
-
-    let ajaxData = {};
-    ajaxData[keyPermutations] = permutations;
-    ajaxData[keyForm] = convertForm2JSON(elForm);
-    ajaxData.csrf_token = ajaxData[keyForm].csrf_token;
-    ajaxData.comment = $(idTextareaConfirm).val();
-
-    console.log('ajaxData:'); console.log(ajaxData);
-    ajaxJSONData('permutations', mapHashToController(hashPageStorePermutationsPost), ajaxData, callbackLoadPermutations, false, {});
-}
-
-function getPermutations(dirtyOnly) {
-    let table = $(idTableMain);
-    let permutations = [];
-    let row, permutation, ddlCategory, ddlProduct, variations, quantityStock, quantityMin, quantityMax, costLocal;
-    table.find('tbody tr').each(function(index, row) {
-        row = $(row);
-        if (dirtyOnly && !row.hasClass(flagDirty)) return;
-
-        ddlCategory = row.find('td.' + flagCategory + ' select');
-        ddlProduct = row.find('td.' + flagProduct + ' select');
-        variations = row.find('td.' + flagVariations + ' textarea');
-        quantityStock = row.find('td.' + flagQuantityStock + ' input');
-        quantityMin = row.find('td.' + flagQuantityMin + ' input');
-        quantityMax = row.find('td.' + flagQuantityMax + ' input');
-
-        permutation = {};
-        permutation[attrIdCategory] = ddlCategory.attr(attrValueCurrent);
-        permutation[attrIdProduct] = ddlProduct.attr(attrValueCurrent);
-        permutation[attrIdPermutation] = row.attr(attrIdPermutation)
-        permutation[flagVariations] = variations.attr(attrValueCurrent);
-        permutation[flagQuantityStock] = quantityStock.attr(attrValueCurrent);
-        permutation[flagQuantityMin] = quantityMin.attr(attrValueCurrent);
-        permutation[flagQuantityMax] = quantityMax.attr(attrValueCurrent);
-        permutations.push(permutation);
-    });
-    return permutations;
-}
-
-function hookupTableMain() {
-    let table = $(idTableMain);
-    let rowBlankTemp = table.find('tr.' + flagRowNew);
-    console.log("row blank temp: ", rowBlankTemp);
-    _rowBlank = rowBlankTemp[0].cloneNode(true);
-    table.find('tr.' + flagRowNew).remove();
-
-    /*
-    let ddlCategory, ddlProduct;
-    let optionsCategory = $(idFilterCategory + ' option');
-    optionsCategory.
-
-    console.log('optionsCategory:', optionsCategory);
-
-    table.find('tbody tr').each(function(index, row) {
-        console.log("hooking up row ", index);
-        row = $(row);
-        ddlCategory = row.find('td.' + flagCategory + ' select');
-        ddlProduct = row.find('td.' + flagProduct + ' select');
-        
-        optionsCategory.clone().appendTo(ddlCategory);
-
-        /*
-        listProducts.forEach(function(product) {
-            if (product[attrIdCategory] != getElementCurrentValue(ddlCategory)) return;
-            ddlProduct.append($('<option>', product));
-        });
-        *
-    });
-    */
-
-    let ddlCategory, ddlProduct, variations, quantityStock, quantityMin, quantityMax, costLocal;
-    table.find('tbody tr').each(function(index, row) {
-        console.log("hooking up row ", index);
-        row = $(row);
-        ddlCategory = row.find('td.' + flagCategory + ' select');
-        ddlProduct = row.find('td.' + flagProduct + ' select');
-        variations = row.find('td.' + flagVariations + ' textarea');
-        quantityStock = row.find('td.' + flagQuantityStock + ' input');
-        quantityMin = row.find('td.' + flagQuantityMin + ' input');
-        quantityMax = row.find('td.' + flagQuantityMax + ' input');
-        
-        initialiseEventHandler(ddlCategory, flagInitialised, function() {
-            // ddlCategory = $(ddlCategory);
-            ddlCategory.on('change', function() {
-                /*
-                ddlCategory.attr(attrValuePrevious, ddlCategory.attr(attrValueCurrent));
-                ddlCategory.attr(attrValueCurrent, ddlCategory.val());
-                */
-                handleChangeInputPermutations(this);
-                ddlCategory = $(this);
-                row = getRowFromElement(ddlCategory);
-                ddlProduct = row.find('td.' + flagProduct + ' select');
-                // ddlProduct = $(ddlProduct);
-                ddlProduct.find('option').remove();
-                ddlProduct.append($('<option>', {value: '', text: 'Select Product'}));
-                listProducts.forEach(function(product) {
-                    if (product[attrIdCategory] != getElementCurrentValue(ddlCategory)) return;
-                    ddlProduct.append($('<option>', product));
-                });
-                handleChangeInputPermutations(ddlProduct);
-            });
-        });
-
-        initialiseEventHandler(ddlProduct, flagInitialised, function() {
-            // ddlProduct = $(ddlProduct);
-            ddlProduct.on('change', function() {
-                handleChangeInputPermutations(this);
-            });
-        });
-
-        initialiseEventHandler(variations, flagInitialised, function() {
-            // variations = $(variations);
-            variations.on('change', function() {
-                handleChangeInputPermutations(this);
-            });
-        });
-
-        initialiseEventHandler(quantityStock, flagInitialised, function() {
-            // quantityStock = $(quantityStock);
-            quantityStock.on('change', function() {
-                // console.log(this.value);
-                // quantityStock.value = this.value;
-                handleChangeInputPermutations(this);
-            });
-        });
-
-        initialiseEventHandler(quantityMin, flagInitialised, function() {
-            // quantityMin = $(quantityMin);
-            quantityMin.on('change', function() {
-                handleChangeInputPermutations(this);
-            });
-        });
-
-        initialiseEventHandler(quantityMax, flagInitialised, function() {
-            // quantityMax = $(quantityMax);
-            quantityMax.on('change', function() {
-                handleChangeInputPermutations(this);
-            });
-        });
-    });
-}
-
-function handleChangeInputPermutations(element) {
-    console.log(element.value);
-    let objJQuery = $(element);
-    objJQuery.value = element.value;
-    let row = getRowFromElement(objJQuery);
-    let buttonCancel = $(idButtonCancel);
-    let buttonSave = $(idButtonSave);
-    let wasDirty = isElementDirty(objJQuery);
-
-    if (objJQuery.hasClass(flagVariations)) {
-        objJQuery.attr(attrValueCurrent, getVariationsCurrentValue(objJQuery));
-    } else {
-        objJQuery.attr(attrValueCurrent, getElementCurrentValue(objJQuery));
-    }
-    let isDirty = isElementDirty(objJQuery);
-    if (wasDirty != isDirty) {
-        isRowDirty(row);
-        let permutationsDirty = getPermutations(true);
-        if (isEmpty(permutationsDirty)) {
-            buttonCancel.addClass(flagCollapsed);
-            buttonSave.addClass(flagCollapsed);
-        } else {
-            buttonCancel.removeClass(flagCollapsed);
-            buttonSave.removeClass(flagCollapsed);
-        }
-    }
-}
-
-function isRowDirty(row) {
-    let ddlCategory = row.find('td.' + flagCategory + ' select');
-    let ddlProduct = row.find('td.' + flagProduct + ' select');
-    let variations = row.find('td.' + flagVariations + ' textarea');
-    let quantityStock = row.find('td.' + flagQuantityStock + ' input');
-    let quantityMin = row.find('td.' + flagQuantityMin + ' input');
-    let quantityMax = row.find('td.' + flagQuantityMax + ' input');
-    
-    // return isElementDirty(ddlCategory) || isElementDirty(ddlProduct) || isElementDirty(variations) || isElementDirty(quantityStock) || isElementDirty(quantityMin) || isElementDirty(quantityMax);
-    let isDirty = ddlCategory.hasClass(flagDirty) || ddlProduct.hasClass(flagDirty) || variations.hasClass(flagDirty) || 
-        quantityStock.hasClass(flagDirty) || quantityMin.hasClass(flagDirty) || quantityMax.hasClass(flagDirty);
-    if (isDirty) {
-        row.addClass(flagDirty);
-    } else {
-        row.removeClass(flagDirty);
-    }
-    return isDirty;
-}
-
-function getVariationsCurrentValue(element) {
-    let value = element.val();
-    let variations = value.split('\n');
-    variations = variations.map(function(variation) {
-        return variation.trim();
-    });
-    variations = variations.filter(function(variation) {
-        return variation.length > 0;
-    });
-    return variations.join(',');
-}

static/js/stripe.js

@@ -1 +0,0 @@
-var key_pub = 'pk_test_51OGrxlL7BuLKjoMpfpfw7bSmZZK1MhqMoQ5VhW2jUj7YtoEejO4vqnxKPiqTHHuh9U4qqkywbPCSI9TpFKtr4SYH007KHMWs68';

static/js/user.js

@@ -1,6 +0,0 @@
-
-function hookupPageUserAccount() {
-    hookupButtonsContactUs();
-    
-    _loading = false;
-}