Feat(SQL, UI): 1. Calc and Get Many Stored Procedures created for Weather, Lighting Level, Assessment, Distraction Type, Distraction Intensity Level, Distraction, Bribe, Assessment Command Modality Link, Response Quality Metric, Obedience Level, and Assessment Response. \n 2. Assessments and Assessment pages created with data loading and hooked up, but not saving.

2025-07-24 16:48:18 +01:00
parent 6bb3a77a34
commit fad5336cc4
137 changed files with 10442 additions and 1116 deletions
--- a/static/js/lib/business_objects/business_objects.js
+++ b/static/js/lib/business_objects/business_objects.js
@@ -12,7 +12,7 @@ export default class BusinessObjects {
    static getOptionJsonFromObjectJson(objectJson, valueSelected = null) {
        let keyText = objectJson[flagNameAttrOptionText];
        let keyValue = objectJson[flagNameAttrOptionValue];
-        Utils.consoleLogIfNotProductionEnvironment({objectJson, keyText, keyValue});
+        // Utils.consoleLogIfNotProductionEnvironment({objectJson, keyText, keyValue});
        return BusinessObjects.getOptionJsonFromObjectJsonAndKeys(objectJson, keyText, keyValue, valueSelected);
    }
    static getObjectText(objectJson) {
--- a/static/js/lib/events.js
+++ b/static/js/lib/events.js
@@ -7,4 +7,12 @@ export default class Events {
            element.classList.add(classInitialised);
        });
    }
+    static hookupEventHandler(eventType, selector, callback) {
+        Events.initialiseEventHandler(selector, flagInitialised, (element) => {
+            element.addEventListener(eventType, (event) => {
+                event.stopPropagation();
+                callback(event, element);
+            });
+        });
+    }
 }
--- a/static/js/pages/base.js
+++ b/static/js/pages/base.js
@@ -48,17 +48,8 @@ export default class BasePage {
        this.hookupOverlays();
    }
    
-    hookupEventHandler(eventType, selector, callback) {
-        Events.initialiseEventHandler(selector, flagInitialised, (element) => {
-            element.addEventListener(eventType, (event) => {
-                event.stopPropagation();
-                callback(event, element);
-            });
-        });
-    }
-    
    hookupNavigation() {
-        this.hookupEventHandler("click", idButtonHamburger, (event, element) => {
+        Events.hookupEventHandler("click", idButtonHamburger, (event, element) => {
            let overlayHamburger = document.querySelector(idOverlayHamburger);
            if (overlayHamburger.classList.contains(flagIsCollapsed)) {
                overlayHamburger.classList.remove(flagIsCollapsed);
@@ -85,6 +76,7 @@ export default class BasePage {
        this.hookupButtonsNavDogLocations();
        this.hookupButtonsNavDogButtonIcons();
        this.hookupButtonsNavDogCommandButtonLinks();
+        this.hookupButtonsNavDogAssessments();
    }
    hookupEventHandler(eventType, selector, callback) {
        Events.initialiseEventHandler(selector, flagInitialised, (element) => {
@@ -98,7 +90,7 @@ export default class BasePage {
        this.hookupButtonsNav('.' + flagNavHome, hashPageHome);
    }
    hookupButtonsNav(buttonSelector, hashPageNav) {
-        this.hookupEventHandler("click", buttonSelector, (event, button) => { 
+        Events.hookupEventHandler("click", buttonSelector, (event, button) => { 
            this.router.navigateToHash(hashPageNav); 
        });
    }
@@ -117,7 +109,7 @@ export default class BasePage {
        this.hookupButtonsNav('.' + flagNavUserLogout, hashPageUserLogout);
    }
    hookupButtonsNavUserLogin() {
-        this.hookupEventHandler("click", '.' + flagNavUserLogin, (event, navigator) => { 
+        Events.hookupEventHandler("click", '.' + flagNavUserLogin, (event, navigator) => { 
            event.stopPropagation();
            this.leave();
            API.loginUser()
@@ -154,9 +146,12 @@ export default class BasePage {
    hookupButtonsNavDogCommandButtonLinks() {
        this.hookupButtonsNav('.' + flagNavDogCommandButtonLinks, hashPageDogCommandButtonLinks);
    }
+    hookupButtonsNavDogAssessments() {
+        this.hookupButtonsNav('.' + flagNavDogAssessments, hashPageDogAssessments);
+    }

    hookupLogos() {
-        this.hookupEventHandler("click", "." + flagImageLogo + "," + "." + flagLogo, (event, element) => {
+        Events.hookupEventHandler("click", "." + flagImageLogo + "," + "." + flagLogo, (event, element) => {
            Utils.consoleLogIfNotProductionEnvironment('clicking logo');
            this.router.navigateToHash(hashPageHome);
        });
@@ -201,9 +196,9 @@ export default class BasePage {
        return LocalStorage.getLocalStorage(this.hash);
    }

-    toggleShowButtonsSaveCancel(show) { // , buttonSave = null, buttonCancel = null
-        let buttonSave = document.querySelector('form.' + flagFilter + ' button.' + flagSave);
-        let buttonCancel = document.querySelector('form.' + flagFilter + ' button.' + flagCancel);
+    toggleShowButtonsSaveCancel(show, buttonContainerSelector = '.' + flagContainer + '.' + flagSave + '.' + flagCancel) { // , buttonSave = null, buttonCancel = null
+        let buttonSave = document.querySelector(buttonContainerSelector + ' button.' + flagSave);
+        let buttonCancel = document.querySelector(buttonContainerSelector + ' button.' + flagCancel);
        if (show) {
            buttonCancel.classList.remove(flagIsCollapsed);
            buttonSave.classList.remove(flagIsCollapsed);
--- a/static/js/pages/base_table.js
+++ b/static/js/pages/base_table.js
@@ -73,7 +73,7 @@ export default class TableBasePage extends BasePage {
        filterActiveNew.setAttribute('id', flagActiveOnly);
        if (isChecked) filterActiveNew.classList.add(flagIsChecked);

-        this.hookupEventHandler("click", filterSelector, (event, filterActive) => {
+        Events.hookupEventHandler("click", filterSelector, (event, filterActive) => {
            Utils.consoleLogIfNotProductionEnvironment({ filterActive });
            Utils.consoleLogIfNotProductionEnvironment({ [filterActive.tagName]: filterActive.tagName });
            let svgElement = (filterActive.tagName.toUpperCase() == 'SVG') ? filterActive : filterActive.parentElement;
@@ -93,7 +93,7 @@ export default class TableBasePage extends BasePage {
    }
    hookupFilter(filterFlag, handler = (event, filter) => { return this.handleChangeFilter(event, filter); }) {
        let filterSelector = idFormFilters + ' #' + filterFlag;
-        this.hookupEventHandler("change", filterSelector, handler);
+        Events.hookupEventHandler("change", filterSelector, handler);
        let filter = document.querySelector(filterSelector);
        let filterValuePrevious = DOM.getElementValueCurrent(filter);
        filter.setAttribute(attrValueCurrent, filterValuePrevious);
@@ -140,7 +140,7 @@ export default class TableBasePage extends BasePage {
        this.hookupFilter(flagIsNotEmpty);
    }
    hookupButtonApplyFilters() {
-        this.hookupEventHandler("click", idButtonApplyFilters, (event, button) => {
+        Events.hookupEventHandler("click", idButtonApplyFilters, (event, button) => {
            event.stopPropagation();
            this.callFilterTableContent();
        });
@@ -178,6 +178,9 @@ export default class TableBasePage extends BasePage {
    hookupFilterCommand() {
        this.hookupFilter(attrIdCommand);
    }
+    hookupFilterLocation() {
+        this.hookupFilter(attrIdLocation);
+    }
    /*
    getAndLoadFilteredTableContent = () => {
        this.callFilterTableContent()
@@ -334,11 +337,9 @@ export default class TableBasePage extends BasePage {
        if (this.constructor === TableBasePage) {
            throw new Error("Must implement hookupTableMain() method.");
        }
-        if (true) { // _rowBlank == null) {
-            Events.initialiseEventHandler(idTableMain, flagInitialised, (table) => {
-               this.cacheRowBlank();
-            });
-        }
+        Events.initialiseEventHandler(idTableMain, flagInitialised, (table) => {
+            this.cacheRowBlank();
+        });
    }
    cacheRowBlank() {
        let selectorRowNew = idTableMain + ' tbody tr.' + flagRowNew;
@@ -379,79 +380,6 @@ export default class TableBasePage extends BasePage {
            handler(null, input);
        });
    }
-    /*
-    handleChangeElementCellTable(event, element) {
-        let row = DOM.getRowFromElement(element);
-        let td = DOM.getCellFromElement(element);
-        let wasDirtyRow = DOM.hasDirtyChildrenContainer(row);
-        let wasDirtyElement = element.classList.contains(flagDirty);
-        let isDirtyElement = DOM.updateAndCheckIsElementDirty(element);
-        if (isDirtyElement != wasDirtyElement) {
-            DOM.handleDirtyElement(td, isDirtyElement);
-            let isNowDirtyRow = DOM.hasDirtyChildrenContainer(row);
-            if (isNowDirtyRow != wasDirtyRow) {
-                DOM.handleDirtyElement(row, isNowDirtyRow);
-                let rows = this.getTableRecords(true);
-                let existsDirtyRecord = rows.length > 0;
-                this.toggleShowButtonsSaveCancel(existsDirtyRecord);
-            }
-        }
-    }
-    handleChangeElementNestedCellTable(event, element, flagColumnList = [], orderNesting = 1) {
-        let orderNestingTemp = orderNesting;
-        let row, td, nestedRowSelector;
-        while (orderNestingTemp > 0) {
-            nestedRowSelector = idTableMain;
-            for (let indexOrderNesting = 0; indexOrderNesting < orderNestingTemp; indexOrderNesting++) {
-                nestedRowSelector += ' tbody tr';
-            }
-            row = DOM.getClosestParent(element, nestedRowSelector);
-            td = row.querySelector('td.' + flag);
-        }
-        let row = DOM.getRowFromElement(element);
-        let td = DOM.getCellFromElement(element);
-        let wasDirtyRow = DOM.hasDirtyChildrenContainer(row);
-        let wasDirtyElement = element.classList.contains(flagDirty);
-        let isDirtyElement = DOM.updateAndCheckIsElementDirty(element);
-        if (isDirtyElement != wasDirtyElement) {
-            DOM.handleDirtyElement(td, isDirtyElement);
-            let isNowDirtyRow = DOM.hasDirtyChildrenContainer(row);
-            if (isNowDirtyRow != wasDirtyRow) {
-                DOM.handleDirtyElement(row, isNowDirtyRow);
-                let rows = this.getTableRecords(true);
-                let existsDirtyRecord = rows.length > 0;
-                this.toggleShowButtonsSaveCancel(existsDirtyRecord);
-            }
-        }
-    }
-    handleChangeElementSubtableCell(event, element, flagFieldSubtable) {
-        let rowSubtable = element.closest(idTableMain + ' td.' + flagFieldSubtable + ' tbody tr');
-        let rowTable = rowSubtable.closest(idTableMain + ' > tbody > tr');
-        let td = DOM.getCellFromElement(element);
-        // let tdSubtable = td.closest('td.' + flagFieldSubtable);
-        let wasDirtyRowSubtable = DOM.hasDirtyChildrenContainer(rowSubtable);
-        let wasDirtyRowTable = DOM.hasDirtyChildrenContainer(rowTable);
-        let wasDirtyElement = element.classList.contains(flagDirty);
-        let isDirtyElement = DOM.updateAndCheckIsElementDirty(element);
-        Utils.consoleLogIfNotProductionEnvironment({isDirtyElement, wasDirtyElement});
-        if (isDirtyElement != wasDirtyElement) {
-            DOM.handleDirtyElement(td, isDirtyElement);
-            let isNowDirtyRowSubtable = DOM.hasDirtyChildrenContainer(rowSubtable);
-            Utils.consoleLogIfNotProductionEnvironment({isNowDirtyRowSubtable, wasDirtyRowSubtable});
-            if (isNowDirtyRowSubtable != wasDirtyRowSubtable) {
-                DOM.handleDirtyElement(rowSubtable, isNowDirtyRowSubtable);
-                let isNowDirtyRowTable = DOM.hasDirtyChildrenContainer(rowTable);
-                Utils.consoleLogIfNotProductionEnvironment({isNowDirtyRowTable, wasDirtyRowTable});
-                if (isNowDirtyRowTable != wasDirtyRowTable) {
-                    DOM.handleDirtyElement(rowTable, isNowDirtyRowTable);
-                    let rows = this.getTableRecords(true);
-                    let existsDirtyRecord = rows.length > 0;
-                    this.toggleShowButtonsSaveCancel(existsDirtyRecord);
-                }
-            }
-        }
-    }
-    */
    handleChangeNestedElementCellTable(event, element) {
        let wasDirtyParentRows = this.getAllIsDirtyRowsInParentTree(element);
        let wasDirtyElement = element.classList.contains(flagDirty);
@@ -493,7 +421,7 @@ export default class TableBasePage extends BasePage {
    hookupChangeHandlerTableCellsWhenNotCollapsed(inputSelector, handler = (event, element) => {
        if (!element.classList.contains(flagIsCollapsed)) this.handleChangeNestedElementCellTable(event, element);
    }) {
-        this.hookupEventHandler("change", inputSelector, handler);
+        Events.hookupEventHandler("change", inputSelector, handler);
    }
    hookupFieldsCodeTable() {
        this.hookupChangeHandlerTableCells(idTableMain + ' > tbody > tr > td.' + flagCode + ' > .' + flagCode);
@@ -508,20 +436,20 @@ export default class TableBasePage extends BasePage {
        this.hookupChangeHandlerTableCells(idTableMain + ' > tbody > tr > td.' + flagNotes + ' > .' + flagNotes);
    }
    hookupFieldsActive(flagTable = '', handleClickRowNew = (event, element) => { this.handleClickAddRowTable(event, element); }) {
-        let selectorButton = 'table' + (Validation.isEmpty(flagTable) ? '' : '.' + flagTable) + ' > tbody > tr > td.' + flagActive + ' .' + flagButton + '.' + flagActive;
+        let selectorButton = 'table.table-main' + (Validation.isEmpty(flagTable) ? '' : '.' + flagTable) + ' > tbody > tr > td.' + flagActive + ' .' + flagButton + '.' + flagActive;
        let selectorButtonDelete = selectorButton + '.' + flagDelete;
        let selectorButtonUndelete = selectorButton + ':not(.' + flagDelete + ')';
        Utils.consoleLogIfNotProductionEnvironment("hookupFieldsActive: ", selectorButtonDelete, selectorButtonUndelete);
        this.hookupButtonsRowDelete(selectorButtonDelete, selectorButtonUndelete);
        this.hookupButtonsRowUndelete(selectorButtonDelete, selectorButtonUndelete);
-        this.hookupEventHandler(
+        Events.hookupEventHandler(
            "click"
-            , 'table' + (Validation.isEmpty(flagTable) ? '' : '.' + flagTable) + ' > thead > tr > th.' + flagActive + ' .' + flagButton + '.' + flagActive
+            , 'table.table-main' + (Validation.isEmpty(flagTable) ? '' : '.' + flagTable) + ' > thead > tr > th.' + flagActive + ' .' + flagButton + '.' + flagActive
            , (event, button) => { handleClickRowNew(event, button); }
        );
    }
    hookupButtonsRowDelete(selectorButtonDelete, selectorButtonUndelete, changeHandler = (event, element) => { this.handleChangeNestedElementCellTable(event, element); }) {
-        this.hookupEventHandler("click", selectorButtonDelete, (event, element) => {
+        Events.hookupEventHandler("click", selectorButtonDelete, (event, element) => {
            this.handleClickButtonRowDelete(event, element, selectorButtonDelete, selectorButtonUndelete, (changeEvent, changeElement) => { changeHandler(changeEvent, changeElement); });
        });
    }
@@ -546,7 +474,7 @@ export default class TableBasePage extends BasePage {
        this.updateAndToggleShowButtonsSaveCancel();
    }
    hookupButtonsRowUndelete(selectorButtonDelete, selectorButtonUndelete, changeHandler = (event, element) => { this.handleChangeNestedElementCellTable(event, element); }) {
-        this.hookupEventHandler("click", selectorButtonUndelete, (event, element) => {
+        Events.hookupEventHandler("click", selectorButtonUndelete, (event, element) => {
            this.handleClickButtonRowUndelete(event, element, selectorButtonDelete, selectorButtonUndelete, (changeEvent, changeElement) => { changeHandler(changeEvent, changeElement); });
        });
    }
@@ -575,7 +503,7 @@ export default class TableBasePage extends BasePage {
        , changeHandler = (event, element) => { this.handleChangeNestedElementCellTable(event, element); }
    ) {
        if (cellSelector == null) cellSelector = idTableMain + ' > tbody > tr > td.' + fieldFlag;
-        this.hookupEventHandler("click", cellSelector + ' div.' + fieldFlag, (event, div) => {
+        Events.hookupEventHandler("click", cellSelector + ' div.' + fieldFlag, (event, div) => {
            this.handleClickTableCellDdlPreview(
                event
                , div
@@ -619,7 +547,7 @@ export default class TableBasePage extends BasePage {
    }
    /*
    hookupTableCellDDlPreviewsWhenNotCollapsed(cellSelector, optionList, ddlHookup = (event, element) => { this.hookupTableCellDdls(event, element); }) {
-        this.hookupEventHandler("click", cellSelector + ' div', (event, div) => {
+        Events.hookupEventHandler("click", cellSelector + ' div', (event, div) => {
            this.handleClickTableCellDdlPreview(event, div, optionList, cellSelector, (event, element) => { ddlHookup(event, element); });
        });
    }
@@ -631,11 +559,12 @@ export default class TableBasePage extends BasePage {
        this.toggleColumnHasClassnameFlag(flagColumn, isCollapsed, flagIsCollapsed);
    }

-    hookupFieldsCommandCategory() {
+    hookupFieldsCommandCategory(idTable = null) {
+        if (idTable == null) idTable = idTableMain;
        this.hookupTableCellDdlPreviews(
            flagCommandCategory
            , Utils.getListFromDict(filterCommandCategories).sort((a, b) => a[flagName].localeCompare(b[flagName]))
-            , null
+            , idTable + ' > tbody > tr > td.' + flagCommandCategory // + ' .' + flagCommandCategory
            , (cellSelector) => { this.hookupCommandCategoryDdls(cellSelector); }
        );
    }
@@ -647,7 +576,11 @@ export default class TableBasePage extends BasePage {
        let idCommandCategoryRowOld = this.getIdCommandCategoryRow(row); // DOM.getElementAttributeValueCurrent(ddlCategory);
        this.handleChangeNestedElementCellTable(event, ddlCategory);
        let idCommandCategoryRowNew = this.getIdCommandCategoryRow(row); // DOM.getElementAttributeValueCurrent(ddlCategory);
-        if (idCommandCategoryRowOld == idCommandCategoryRowNew) return;
+        if (
+            idCommandCategoryRowOld == idCommandCategoryRowNew
+            || idCommandCategoryRowNew == 0
+        ) return;
+        console.log({ idCommandCategoryRowNew, idCommandCategoryRowOld });
        let idCommandCategoryFilter = this.getIdCommandCategoryFilter();
        let tdCommand = row.querySelector('td.' + flagCommand);
        tdCommand.dispatchEvent(new Event('click'));
@@ -673,8 +606,9 @@ export default class TableBasePage extends BasePage {
        });
        this.handleChangeNestedElementCellTable(event, ddlCommand);
    }
-    hookupFieldsCommand() {
-        this.hookupEventHandler("click", idTableMain + ' td.' + flagCommand + ' .' + flagCommand, (event, div) => {
+    hookupFieldsCommand(idTable = null) {
+        if (idTable == null) idTable = idTableMain;
+        Events.hookupEventHandler("click", idTable + ' > tbody > tr > td.' + flagCommand + ' div.' + flagCommand, (event, div) => {
            Utils.consoleLogIfNotProductionEnvironment(div);
            let parentTr = DOM.getRowFromElement(div);
            Utils.consoleLogIfNotProductionEnvironment({ div, parentTr });
@@ -698,16 +632,35 @@ export default class TableBasePage extends BasePage {
            this.handleClickTableCellDdlPreview(
                event
                , div
-                , flagCommand
-                , sortedCommands
-                , null
+                , flagCommand // fieldFlag
+                , sortedCommands // optionList
+                , idTable + ' > tbody > tr > td.' + flagCommand // cellSelector
                , (cellSelector) => { this.hookupTableCellDdls(
                    cellSelector
-                    , (event, element) => { this.handleChangeNestedElementCellTable(event, element); }
+                    , (event, element) => { this.handleChangeCommandDdl(event, element); }
                ); }
            );
        });
-        this.hookupTableCellDdls(idTableMain + ' td.' + flagCommand + ' select.' + flagCommand);
+        this.hookupTableCellDdls(
+            idTable + ' > tbody > tr > td.' + flagCommand + ' select.' + flagCommand
+            , (event, element) => { this.handleChangeCommandDdl(event, element); }
+        );
+    }
+    handleChangeCommandDdl(event, ddlCommand) {
+        // console.log("handle change command ddl");
+        let row = DOM.getRowFromElement(ddlCommand);
+        this.handleChangeNestedElementCellTable(event, ddlCommand);
+        let idCommandCategoryRowOld = this.getIdCommandCategoryRow(row);
+        let idCommandNew = this.getIdCommandRow(row);
+        let commandNew = filterCommands[idCommandNew];
+        // console.log({ idCommandCategoryRowOld, commandNew });
+        if (commandNew == null || idCommandCategoryRowOld == commandNew[attrIdCommandCategory]) return;
+        let divCommandCategory = row.querySelector('td.' + flagCommandCategory + ' div');
+        if (divCommandCategory) divCommandCategory.dispatchEvent(new Event('click'));
+        let ddlCommandCategory = row.querySelector('td.' + flagCommandCategory + ' select.' + flagCommandCategory);
+        DOM.setElementValueCurrent(ddlCommandCategory, commandNew[attrIdCommandCategory]);
+        // console.log({ ddlCommandCategory, commandNew });
+        this.handleChangeNestedElementCellTable(event, ddlCommandCategory);
    }
    getIdCommandCategoryRow(tr) {
        let elementCommandCategory = tr.querySelector('td.' + flagCommandCategory + ' .' + flagCommandCategory);
@@ -715,9 +668,10 @@ export default class TableBasePage extends BasePage {
    }
    getIdCommandCategoryFilter() {
        let formFilters = TableBasePage.getFormFilters();
+        let idCommandCategory = 0;
+        if (formFilters == null) return idCommandCategory;
        let commandCategoryFilter = formFilters.querySelector('#' + attrIdCommandCategory);
        let commandFilter = formFilters.querySelector('#' + attrIdCommand);
-        let idCommandCategory = 0;
        let valueCurrentCommandCategoryFilter = DOM.getElementAttributeValueCurrent(commandCategoryFilter);
        Utils.consoleLogIfNotProductionEnvironment({ valueCurrentCommandCategoryFilter });
        if (valueCurrentCommandCategoryFilter == "") {
@@ -758,7 +712,7 @@ export default class TableBasePage extends BasePage {
        let elementDog = tr.querySelector('td.' + flagDog + ' .' + flagDog);
        return DOM.getElementAttributeValueCurrent(elementDog);
    }
-    
+    /*
    createTdActive(isActive) {
        let tdActive = document.createElement("td");
        tdActive.classList.add(flagActive);
@@ -770,7 +724,7 @@ export default class TableBasePage extends BasePage {
        tdActive.appendChild(buttonActive);
        return tdActive;
    }
-    
+    */
    leave() {
        if (this.constructor === TableBasePage) {
            throw new Error("Must implement leave() method.");
--- a/static/js/pages/dog/assessment.js
+++ b/static/js/pages/dog/assessment.js
@@ -0,0 +1,603 @@
+
+import API from "../../api.js";
+import BusinessObjects from "../../lib/business_objects/business_objects.js";
+import DOM from "../../dom.js";
+import Events from "../../lib/events.js";
+import TableBasePage from "../base_table.js";
+import Utils from "../../lib/utils.js";
+import Validation from "../../lib/validation.js";
+import DogTableMixinPage from "./mixin_table.js";
+
+var _rowBlankDistraction;
+var _rowBlankAssessmentCommandModalityLink;
+
+export default class PageDogAssessment extends TableBasePage {
+    static hash = hashPageDogAssessment;
+    static attrIdRowObject = attrIdAssessment;
+    callSaveTableContent = API.saveAssessments;
+
+    constructor(router) {
+        super(router);
+        this.dogMixin = new DogTableMixinPage(this);
+    }
+
+    initialize() {
+        this.sharedInitialize();
+    }
+
+    hookupFilters() {
+    }
+
+    loadRowTable(rowJson) {
+        if (rowJson == null) return;
+        if (_verbose) { Utils.consoleLogIfNotProductionEnvironment("applying data row: ", rowJson); }
+    }
+    getJsonRow(row) {
+        if (row == null) return;
+        /*
+        let inputTemperatureCelcius = row.querySelector('td.' + flagTemperatureCelcius + ' input');
+        let buttonActive = row.querySelector('td.' + flagActive + ' .' + flagActive);
+        */
+        let jsonRow = {};
+        jsonRow[attrIdAssessment] = row.getAttribute(attrIdAssessment);
+        return jsonRow;
+    }
+    initialiseRowNew(tbody, row) {
+        
+    }
+    postInitialiseRowNewCallback(tbody) {
+        let newRows = tbody.querySelectorAll('tr.' + flagRowNew);
+        let newestRow = newRows[0];
+        let clickableElementsSelector = [
+            'td.' + flagWeather + ' div.' + flagWeather
+            , ',td.' + flagLightingLevel + ' div.' + flagLightingLevel
+            , ',td.' + flagLocation + ' div.' + flagLocation
+            , ',td.' + flagUserHandler + ' div.' + flagUserHandler
+        ].join('');
+        newestRow.querySelectorAll(clickableElementsSelector).forEach((clickableElement) => {
+            clickableElement.click();
+        });
+    }
+
+    hookupTableMain() {
+        super.hookupTableMain();
+        this.hookupTableAssessmentHeader();
+        this.hookupTableDistractions();
+        this.hookupTableAssessmentCommandModalityLinks();
+    }
+    hookupTableAssessmentHeader() {
+        this.hookupTableAssessmentFieldWeather();
+        this.hookupTableAssessmentFieldLightingLevel();
+        this.hookupTableAssessmentFieldTemperature();
+        this.hookupTableAssessmentFieldLocation();
+        this.hookupTableAssessmentFieldUserHandler();
+        this.hookupTableAssessmentFieldNotes();
+    }
+    hookupTableAssessmentFieldWeather() {
+        let fieldFlag = flagWeather;
+        let optionList = Utils.getListFromDict(filterWeathers); // .sort((a, b) => a[flagName].localeCompare(b[flagName]))
+        let cellSelector = idTableAssessment + ' td.' + flagWeather;
+        this.hookupTableCellDdlPreviews(
+            fieldFlag
+            , optionList
+            , cellSelector
+        );
+    }
+    hookupTableAssessmentFieldLightingLevel() {
+        let fieldFlag = flagLightingLevel;
+        let optionList = Utils.getListFromDict(filterLightingLevels); // .sort((a, b) => a[flagName].localeCompare(b[flagName]))
+        let cellSelector = idTableAssessment + ' td.' + flagLightingLevel;
+        this.hookupTableCellDdlPreviews(
+            fieldFlag
+            , optionList
+            , cellSelector
+        );
+    }
+    hookupTableAssessmentFieldTemperature() {
+        this.hookupChangeHandlerTableCells(idTableAssessment + ' td.' + flagTemperatureCelcius + ' .' + flagTemperatureCelcius);
+    }
+    hookupTableAssessmentFieldLocation() {
+        let fieldFlag = flagLocation;
+        let optionList = Utils.getListFromDict(filterLocations); // .sort((a, b) => a[flagName].localeCompare(b[flagName]))
+        let cellSelector = idTableAssessment + ' td.' + flagLocation;
+        this.hookupTableCellDdlPreviews(
+            fieldFlag
+            , optionList
+            , cellSelector
+        );
+    }
+    hookupTableAssessmentFieldUserHandler() {
+        let fieldFlag = flagUserHandler;
+        let optionList = Utils.getListFromDict(filterUserHandlers); // .sort((a, b) => a[flagName].localeCompare(b[flagName]));
+        let cellSelector = idTableAssessment + ' td.' + flagUserHandler;
+        this.hookupTableCellDdlPreviews(
+            fieldFlag
+            , optionList
+            , cellSelector
+        );
+    }
+    hookupTableAssessmentFieldNotes() {
+        this.hookupChangeHandlerTableCells(idTableAssessment + ' td.' + flagNotes + ' .' + flagNotes);
+    }
+    hookupTableDistractions() {
+        Events.initialiseEventHandler(idTableDistractions, flagInitialised, (table) => {
+            let selectorRowNew = idTableDistractions + ' tbody tr.' + flagRowNew;
+            let rowBlankTemp = document.querySelector(selectorRowNew);
+            Utils.consoleLogIfNotProductionEnvironment("row blank temp: ", rowBlankTemp);
+            let countRows = document.querySelectorAll(idTableDistractions + ' > tbody > tr').length;
+            _rowBlankDistraction = rowBlankTemp.cloneNode(true);
+            document.querySelectorAll(selectorRowNew).forEach(function(row) {
+                row.remove();
+            });
+            _rowBlankDistraction.setAttribute(attrIdDistraction, -1 - countRows);
+        });
+
+        this.hookupTableDistractionsFieldsDistractionType();
+        this.hookupTableDistractionsFieldsIntensityLevelEmotional();
+        this.hookupTableDistractionsFieldsIntensityLevelScent();
+        this.hookupTableDistractionsFieldsIntensityLevelSight();
+        this.hookupTableDistractionsFieldsIntensityLevelSound();
+        this.hookupTableDistractionsFieldsIntensityLevelTouch();
+        this.hookupTableDistractionsFieldsQuantity();
+        this.hookupTableDistractionsFieldsProximityMetres();
+        this.hookupTableDistractionsFieldsNotes();
+        this.hookupTableDistractionsFieldsActive();
+    }
+    hookupTableDistractionsFieldsDistractionType() {
+        let fieldFlag = flagDistractionType;
+        let optionList = Utils.getListFromDict(filterDistractionTypes); // .sort((a, b) => a[flagName].localeCompare(b[flagName]))
+        let cellSelector = idTableDistractions + ' td.' + flagDistractionType;
+        this.hookupTableCellDdlPreviews(
+            fieldFlag
+            , optionList
+            , cellSelector
+        );
+    }
+    hookupTableDistractionsFieldsIntensityLevelEmotional() {
+        let fieldFlag = flagDistractionIntensityLevelEmotional;
+        let optionList = Utils.getListFromDict(filterDistractionIntensityLevels); // .sort((a, b) => a[flagName].localeCompare(b[flagName]))
+        let cellSelector = idTableDistractions + ' td.' + flagDistractionIntensityLevelEmotional;
+        this.hookupTableCellDdlPreviews(
+            fieldFlag
+            , optionList
+            , cellSelector
+        );
+    }
+    hookupTableDistractionsFieldsIntensityLevelScent() {
+        let fieldFlag = flagDistractionIntensityLevelScent;
+        let optionList = Utils.getListFromDict(filterDistractionIntensityLevels); // .sort((a, b) => a[flagName].localeCompare(b[flagName]))
+        let cellSelector = idTableDistractions + ' td.' + flagDistractionIntensityLevelScent;
+        this.hookupTableCellDdlPreviews(
+            fieldFlag
+            , optionList
+            , cellSelector
+        );
+    }
+    hookupTableDistractionsFieldsIntensityLevelSight() {
+        let fieldFlag = flagDistractionIntensityLevelSight;
+        let optionList = Utils.getListFromDict(filterDistractionIntensityLevels); // .sort((a, b) => a[flagName].localeCompare(b[flagName]))
+        let cellSelector = idTableDistractions + ' td.' + flagDistractionIntensityLevelSight;
+        this.hookupTableCellDdlPreviews(
+            fieldFlag
+            , optionList
+            , cellSelector
+        );
+    }
+    hookupTableDistractionsFieldsIntensityLevelSound() {
+        let fieldFlag = flagDistractionIntensityLevelSound;
+        let optionList = Utils.getListFromDict(filterDistractionIntensityLevels); // .sort((a, b) => a[flagName].localeCompare(b[flagName]))
+        let cellSelector = idTableDistractions + ' td.' + flagDistractionIntensityLevelSound;
+        this.hookupTableCellDdlPreviews(
+            fieldFlag
+            , optionList
+            , cellSelector
+        );
+    }
+    hookupTableDistractionsFieldsIntensityLevelTouch() {
+        let fieldFlag = flagDistractionIntensityLevelTouch;
+        let optionList = Utils.getListFromDict(filterDistractionIntensityLevels); // .sort((a, b) => a[flagName].localeCompare(b[flagName]))
+        let cellSelector = idTableDistractions + ' td.' + flagDistractionIntensityLevelTouch;
+        this.hookupTableCellDdlPreviews(
+            fieldFlag
+            , optionList
+            , cellSelector
+        );
+    }
+    hookupTableDistractionsFieldsQuantity() {
+        this.hookupChangeHandlerTableCells(idTableDistractions + ' td.' + flagQuantity + ' .' + flagQuantity);
+    }
+    hookupTableDistractionsFieldsProximityMetres() {
+        this.hookupChangeHandlerTableCells(idTableDistractions + ' td.' + flagProximityMetres + ' .' + flagProximityMetres);
+    }
+    hookupTableDistractionsFieldsNotes() {
+        this.hookupChangeHandlerTableCells(idTableDistractions + ' td.' + flagNotes + ' .' + flagNotes);
+    }
+    hookupTableDistractionsFieldsActive() {
+        this.hookupFieldsActive(flagDistraction, (event, element) => { this.handleClickAddRowTableDistractions(event, element); });
+    }
+    handleClickAddRowTableDistractions(event, button) {
+        event.stopPropagation();
+        _rowBlankDistraction.setAttribute(attrIdDistraction, -1 - _rowBlankDistraction.getAttribute(attrIdDistraction));
+        let tbody = document.querySelector(idTableDistractions + ' tbody');
+        if (tbody.classList.contains(flagIsCollapsed)) return;
+        let row = _rowBlankDistraction.cloneNode(true);
+        row.classList.remove(flagInitialised);
+        row.querySelectorAll('.' + flagInitialised).forEach(function(element) {
+            element.classList.remove(flagInitialised);
+        });
+        let countRows = document.querySelectorAll(idTableDistractions + ' > tbody > tr').length;
+        row.setAttribute(attrIdDistraction, -1 - countRows);
+        tbody.prepend(row);
+        tbody.scrollTop = 0;
+        this.hookupTableDistractions();
+        this.postInitialiseDistractionRowNewCallback(tbody);
+    }
+    postInitialiseDistractionRowNewCallback(tbody) {
+        let newRows = tbody.querySelectorAll('tr.' + flagRowNew);
+        let newestRow = newRows[0];
+        let clickableElementsSelector = [
+            'td.' + flagDistractionType + ' div.' + flagDistractionType
+            , ',td.' + flagDistractionIntensityLevelEmotional + ' div.' + flagDistractionIntensityLevelEmotional
+            , ',td.' + flagDistractionIntensityLevelScent + ' div.' + flagDistractionIntensityLevelScent
+            , ',td.' + flagDistractionIntensityLevelSight + ' div.' + flagDistractionIntensityLevelSight
+            , ',td.' + flagDistractionIntensityLevelSound + ' div.' + flagDistractionIntensityLevelSound
+            , ',td.' + flagDistractionIntensityLevelTouch + ' div.' + flagDistractionIntensityLevelTouch
+        ].join('');
+        newestRow.querySelectorAll(clickableElementsSelector).forEach((clickableElement) => {
+            clickableElement.click();
+        });
+    }
+    hookupTableAssessmentCommandModalityLinks() {
+        Events.initialiseEventHandler(idTableAssessmentCommandModalityLinks, flagInitialised, (table) => {
+            let selectorRowNew = idTableAssessmentCommandModalityLinks + ' tbody tr.' + flagRowNew;
+            let rowBlankTemp = document.querySelector(selectorRowNew);
+            Utils.consoleLogIfNotProductionEnvironment("row blank temp: ", rowBlankTemp);
+            let countRows = document.querySelectorAll(idTableAssessmentCommandModalityLinks + ' > tbody > tr').length;
+            _rowBlankAssessmentCommandModalityLink = rowBlankTemp.cloneNode(true);
+            document.querySelectorAll(selectorRowNew).forEach(function(row) {
+                row.remove();
+            });
+            _rowBlankAssessmentCommandModalityLink.setAttribute(attrIdAssessmentCommandModalityLink, -1 - countRows);
+        });
+
+        this.hookupTableAssessmentCommandModalityLinksFieldsCommandCategory();
+        this.hookupTableAssessmentCommandModalityLinksFieldsCommand();
+        this.hookupTableAssessmentCommandModalityLinksFieldsCommandModality();
+        this.hookupTableAssessmentCommandModalityLinksFieldsBribe();
+        this.hookupTableAssessmentCommandModalityLinksFieldsDistanceFromHandler();
+        this.hookupTableAssessmentCommandModalityLinksFieldsIsInHearingRangeOfHandler();
+        this.hookupTableAssessmentCommandModalityLinksFieldsIsInScentRangeOfHandler();
+        this.hookupTableAssessmentCommandModalityLinksFieldsIsInSightOfHandler();
+        this.hookupTableAssessmentCommandModalityLinksFieldsIsOnLead();
+        this.hookupTableAssessmentCommandModalityLinksFieldsTrialCount();
+        this.hookupTableAssessmentCommandModalityLinksFieldsNotes();
+        this.hookupTableAssessmentCommandModalityLinksFieldsResponses();
+        this.hookupTableAssessmentCommandModalityLinksFieldsActive();
+    }
+    hookupTableAssessmentCommandModalityLinksFieldsCommandCategory() {
+        this.hookupFieldsCommandCategory(idTableAssessmentCommandModalityLinks);
+        /*
+        let fieldFlag = flagCommandCategory;
+        let optionList = Utils.getListFromDict(filterCommandCategories).sort((a, b) => a[flagName].localeCompare(b[flagName]));
+        let cellSelector = idTableAssessmentCommandModalityLinks + ' td.' + flagCommandCategory;
+        this.hookupTableCellDdlPreviews(
+            fieldFlag
+            , optionList
+            , cellSelector
+            , (tdSelector) => { this.hookupTableAssessmentCommandModalityLinksDdlsCommandCategory(tdSelector); }
+            , (event, element) => { this.handleChangeTableAssessmentCommandModalityLinksDdlCommandCategory(event, element); }
+        );
+        */
+    }
+    /*
+    hookupTableAssessmentCommandModalityLinksDdlsCommandCategory(ddlSelector) {
+        this.hookupChangeHandlerTableCells(ddlSelector, (event, element) => { this.handleChangeTableAssessmentCommandModalityLinksDdlCommandCategory(event, element); });
+    }
+    handleChangeTableAssessmentCommandModalityLinksDdlCommandCategory(event, ddlCategory) {
+        let row = DOM.getRowFromElement(ddlCategory);
+        let idCommandCategoryRowOld = this.getIdCommandCategoryRow(row); // DOM.getElementAttributeValueCurrent(ddlCategory);
+        this.handleChangeNestedElementCellTable(event, ddlCategory);
+        let idCommandCategoryRowNew = this.getIdCommandCategoryRow(row); // DOM.getElementAttributeValueCurrent(ddlCategory);
+        if (idCommandCategoryRowOld == idCommandCategoryRowNew) return;
+        let divCommand = row.querySelector('td.' + flagCommand + ' div');
+        if (divCommand) divCommand.dispatchEvent(new Event('click'));
+        let ddlCommand = row.querySelector('td.' + flagCommand + ' select.' + flagCommand);
+        ddlCommand.innerHTML = '';
+        ddlCommand.appendChild(DOM.createOption(null));
+        let optionJson, option;
+        let commandsInCategory = Utils.getListFromDict(filterCommands).filter(command => 
+            (
+                command[attrIdCommandCategory] == idCommandCategoryRowNew
+                || idCommandCategoryRowNew == 0
+            )
+        );
+        let sortedCommands = commandsInCategory.sort((a, b) => a[flagName].localeCompare(b[flagName]));
+        sortedCommands.forEach((command) => {
+            optionJson = BusinessObjects.getOptionJsonFromObjectJson(command);
+            option = DOM.createOption(optionJson);
+            ddlCommand.appendChild(option);
+        });
+        this.handleChangeNestedElementCellTable(event, ddlCommand);
+    }
+    */
+    hookupTableAssessmentCommandModalityLinksFieldsCommand() {
+        this.hookupFieldsCommand(idTableAssessmentCommandModalityLinks);
+    }
+    hookupTableAssessmentCommandModalityLinksFieldsCommandModality() {
+        let fieldFlag = flagCommandModality;
+        let optionList = Utils.getListFromDict(filterCommandModalities); // .sort((a, b) => a[flagName].localeCompare(b[flagName]))
+        let cellSelector = idTableAssessmentCommandModalityLinks + ' td.' + flagCommandModality;
+        this.hookupTableCellDdlPreviews(
+            fieldFlag
+            , optionList
+            , cellSelector
+        );
+    }
+    hookupTableAssessmentCommandModalityLinksFieldsBribe() {
+        let fieldFlag = flagBribe;
+        let optionList = Utils.getListFromDict(filterBribes); // .sort((a, b) => a[flagName].localeCompare(b[flagName]))
+        let cellSelector = idTableAssessmentCommandModalityLinks + ' td.' + flagBribe;
+        this.hookupTableCellDdlPreviews(
+            fieldFlag
+            , optionList
+            , cellSelector
+        );
+    }
+    hookupTableAssessmentCommandModalityLinksFieldsDistanceFromHandler() {
+        this.hookupChangeHandlerTableCells(idTableAssessmentCommandModalityLinks + ' td.' + flagDistanceFromHandler + ' .' + flagDistanceFromHandler);
+    }
+    hookupTableAssessmentCommandModalityLinksFieldsIsInHearingRangeOfHandler() {
+        this.hookupChangeHandlerTableCells(idTableAssessmentCommandModalityLinks + ' td.' + flagIsInHearingRangeOfHandler + ' .' + flagIsInHearingRangeOfHandler);
+    }
+    hookupTableAssessmentCommandModalityLinksFieldsIsInScentRangeOfHandler() {
+        this.hookupChangeHandlerTableCells(idTableAssessmentCommandModalityLinks + ' td.' + flagIsInScentRangeOfHandler + ' .' + flagIsInScentRangeOfHandler);
+    }
+    hookupTableAssessmentCommandModalityLinksFieldsIsInSightOfHandler() {
+        this.hookupChangeHandlerTableCells(idTableAssessmentCommandModalityLinks + ' td.' + flagIsInSightOfHandler + ' .' + flagIsInSightOfHandler);
+    }
+    hookupTableAssessmentCommandModalityLinksFieldsIsOnLead() {
+        this.hookupChangeHandlerTableCells(idTableAssessmentCommandModalityLinks + ' td.' + flagIsOnLead + ' .' + flagIsOnLead);
+    }
+    hookupTableAssessmentCommandModalityLinksFieldsTrialCount() {
+        // this.hookupChangeHandlerTableCells(idTableAssessmentCommandModalityLinks + ' td.' + flagTrialCount + ' .' + flagTrialCount);
+    }
+    hookupTableAssessmentCommandModalityLinksFieldsNotes() {
+        this.hookupChangeHandlerTableCells(idTableAssessmentCommandModalityLinks + ' > tbody > tr > td.' + flagNotes + ' .' + flagNotes);
+    }
+    hookupTableAssessmentCommandModalityLinksFieldsResponses() {
+        let eventType = "click";
+        let selector = idTableAssessmentCommandModalityLinks + ' td.' + flagAssessmentResponse + ' div.' + flagAssessmentResponse;
+        let handler = (event, element) => {
+            let parentTd = DOM.getCellFromElement(element);
+            let responsesTable = document.createElement("table");
+            responsesTable.id = idTableAssessmentResponses.replace("#", "");
+            responsesTable.classList.add(flagTableMain, flagAssessmentResponse);
+
+            let head = document.createElement("thead");
+            let headRow = document.createElement("tr");
+            let thResponseQualityMetric = document.createElement("th");
+            thResponseQualityMetric.classList.add(flagResponseQualityMetric);
+            thResponseQualityMetric.innerText = 'Response Quality Metric';
+            headRow.appendChild(thResponseQualityMetric);
+            let thObedienceLevel = document.createElement("th");
+            thObedienceLevel.classList.add(flagObedienceLevel);
+            thObedienceLevel.innerText = 'Obedience Level';
+            headRow.appendChild(thObedienceLevel);
+            let thValueMeasured = document.createElement("th");
+            thValueMeasured.classList.add(flagValueMeasured);
+            thValueMeasured.innerText = 'Value Measured';
+            headRow.appendChild(thValueMeasured);
+            let thNotes = document.createElement("th");
+            thNotes.classList.add(flagNotes);
+            thNotes.innerText = 'Notes';
+            headRow.appendChild(thNotes);
+            let thActive = document.createElement("th");
+            thActive.classList.add(flagActive);
+            let templateAddIcon = document.querySelector(idContainerTemplateElements + ' .' + flagButton + '.' + flagIcon + '.' + flagActive + '.' + flagAdd);
+            thActive.appendChild(templateAddIcon.cloneNode(true));
+            headRow.appendChild(thActive);
+            head.appendChild(headRow);
+            responsesTable.appendChild(head);
+
+            let body = document.createElement("tbody");
+            
+            let assessmentCommandModalityLink = assessment[flagAssessmentCommandModalityLink];
+            let responses = (assessmentCommandModalityLink == null) ? null : assessmentCommandModalityLink[flagAssessmentResponse];
+            
+            if (responses != null && responses.length > 0) {
+                for (let response in responses) {
+                    let row = PageDogAssessment.createNewRowTableAssessmentResponses(response);
+                    body.appendChild(row);
+                }
+            }
+            responsesTable.appendChild(body);
+
+            parentTd.innerHTML = responsesTable.outerHTML;
+
+            this.hookupTablesAssessmentResponses();
+        };
+        Events.hookupEventHandler(
+            eventType
+            , selector
+            , handler
+        );
+        this.hookupTablesAssessmentResponses();
+    }
+    static createNewRowTableAssessmentResponses(response) {
+        if (response == null) response = {
+            [attrIdAssessmentResponse]: null
+            , [flagResponseQualityMetric]: 0
+            , [flagObedienceLevel]: 0
+            , [flagValueMeasured]: ''
+            , [flagNotes]: ''
+            , [flagActive]: true
+        };
+        let isNew = (response[attrIdAssessmentResponse] == null || response[attrIdAssessmentResponse] < 1);
+        let row = document.createElement("tr");
+        row.classList.add(flagAssessmentResponse);
+        if (isNew) row.classList.add(flagRowNew);
+        row.setAttribute(attrIdAssessmentResponse, response[attrIdAssessmentResponse]);
+
+        let tdResponseQualityMetric = document.createElement("td");
+        tdResponseQualityMetric.classList.add(flagResponseQualityMetric, flagDdlPreview);
+        let divResponseQualityMetric = document.createElement("div");
+        divResponseQualityMetric.classList.add(flagResponseQualityMetric);
+        DOM.setElementAttributesValuesCurrentAndPrevious(divResponseQualityMetric, response[flagResponseQualityMetric]);
+        divResponseQualityMetric.innerText = response[flagResponseQualityMetric];
+        tdResponseQualityMetric.appendChild(divResponseQualityMetric);
+        row.appendChild(tdResponseQualityMetric);
+
+        let tdObedienceLevel = document.createElement("td");
+        tdObedienceLevel.classList.add(flagObedienceLevel, flagDdlPreview);
+        let divObedienceLevel = document.createElement("div");
+        divObedienceLevel.classList.add(flagObedienceLevel);
+        DOM.setElementAttributesValuesCurrentAndPrevious(divObedienceLevel, response[flagObedienceLevel]);
+        divObedienceLevel.innerText = response[flagObedienceLevel];
+        tdObedienceLevel.appendChild(divObedienceLevel);
+        row.appendChild(tdObedienceLevel);
+
+        let tdValueMeasured = document.createElement("td");
+        tdValueMeasured.classList.add(flagValueMeasured, flagDdlPreview);
+        let inputValueMeasured = document.createElement("input");
+        inputValueMeasured.type = "number";
+        inputValueMeasured.classList.add(flagValueMeasured);
+        DOM.setElementAttributesValuesCurrentAndPrevious(inputValueMeasured, response[flagValueMeasured]);
+        inputValueMeasured.value = response[flagValueMeasured];
+        tdValueMeasured.appendChild(inputValueMeasured);
+        row.appendChild(tdValueMeasured);
+
+        let tdNotes = document.createElement("td");
+        tdNotes.classList.add(flagNotes, flagDdlPreview);
+        let inputNotes = document.createElement("textarea");
+        inputNotes.classList.add(flagNotes);
+        DOM.setElementAttributesValuesCurrentAndPrevious(inputNotes, response[flagNotes]);
+        inputNotes.value = response[flagNotes];
+        tdNotes.appendChild(inputNotes);
+        row.appendChild(tdNotes);
+
+        let tdActive = document.createElement("td");
+        tdActive.classList.add(flagActive, flagDdlPreview);
+        let templateAddIcon = document.querySelector(idContainerTemplateElements + ' .' + flagButton + '.' + flagIcon + '.' + flagActive + '.' + flagAdd);
+        let templateDeleteIcon = document.querySelector(idContainerTemplateElements + ' .' + flagButton + '.' + flagIcon + '.' + flagActive + '.' + flagDelete);
+        let buttonActive = (response[flagActive]) ? templateDeleteIcon.cloneNode(true) : templateAddIcon.cloneNode(true);
+        tdActive.appendChild(buttonActive);
+        row.appendChild(tdActive);
+
+        return row;
+    }
+    hookupTablesAssessmentResponses() {
+        this.hookupTableAssessmentResponsesFieldsResponseQualityMetric();
+        this.hookupTableAssessmentResponsesFieldsObedienceLevel();
+        this.hookupTableAssessmentResponsesFieldsValueMeasured();
+        this.hookupTableAssessmentResponsesFieldsNotes();
+        this.hookupTableAssessmentResponsesFieldsActive();
+    }
+    hookupTableAssessmentResponsesFieldsResponseQualityMetric() {
+        let fieldFlag = flagResponseQualityMetric;
+        let optionList = Utils.getListFromDict(filterResponseQualityMetrics); // .sort((a, b) => a[flagName].localeCompare(b[flagName]))
+        let cellSelector = idTableAssessmentResponses + ' td.' + flagResponseQualityMetric;
+        this.hookupTableCellDdlPreviews(
+            fieldFlag
+            , optionList
+            , cellSelector
+        );
+    }
+    hookupTableAssessmentResponsesFieldsObedienceLevel() {
+        let fieldFlag = flagObedienceLevel;
+        let optionList = Utils.getListFromDict(filterObedienceLevels); // .sort((a, b) => a[flagName].localeCompare(b[flagName]))
+        let cellSelector = idTableAssessmentResponses + ' td.' + flagObedienceLevel;
+        this.hookupTableCellDdlPreviews(
+            fieldFlag
+            , optionList
+            , cellSelector
+        );
+    }
+    hookupTableAssessmentResponsesFieldsValueMeasured() {
+        this.hookupChangeHandlerTableCells(idTableAssessmentResponses + ' td.' + flagValueMeasured + ' .' + flagValueMeasured);
+    }
+    hookupTableAssessmentResponsesFieldsNotes() {
+        this.hookupChangeHandlerTableCells(idTableAssessmentResponses + ' td.' + flagNotes + ' .' + flagNotes);
+    }
+    hookupTableAssessmentResponsesFieldsActive() {
+        this.hookupFieldsActive(flagAssessmentResponse, (event, element) => { this.handleClickAddRowTableAssessmentResponses(event, element); });
+    }
+    handleClickAddRowTableAssessmentResponses(event, button) {
+        event.stopPropagation();
+        let tableResponses = DOM.getClosestParent(button, "table");
+        let tbody = tableResponses.querySelector(":scope > tbody");
+        let row = PageDogAssessment.createNewRowTableAssessmentResponses(null);
+        if (tbody.classList.contains(flagIsCollapsed)) return;
+        row.classList.remove(flagInitialised);
+        row.querySelectorAll('.' + flagInitialised).forEach(function(element) {
+            element.classList.remove(flagInitialised);
+        });
+        let countRows = document.querySelectorAll(attrIdAssessmentResponse + ' > tbody > tr').length;
+        row.setAttribute(attrIdAssessmentResponse, -1 - countRows);
+        tbody.prepend(row);
+        tbody.scrollTop = 0;
+        this.hookupTablesAssessmentResponses();
+        this.postInitialiseAssessmentResponseRowNewCallback(tbody);
+    }
+    postInitialiseAssessmentResponseRowNewCallback(tbody) {
+        let newRows = tbody.querySelectorAll('tr.' + flagRowNew);
+        let newestRow = newRows[0];
+        let clickableElementsSelector = [
+            'td.' + flagResponseQualityMetric + ' div.' + flagResponseQualityMetric
+            , ',td.' + flagObedienceLevel + ' div.' + flagObedienceLevel
+            , ',td.' + flagValueMeasured + ' div.' + flagValueMeasured
+            , ',td.' + flagNotes + ' div.' + flagNotes
+        ].join('');
+        newestRow.querySelectorAll(clickableElementsSelector).forEach((clickableElement) => {
+            clickableElement.click();
+        });
+        let countActiveRows = tbody.querySelectorAll('td.' + flagActive + ' .' + flagButton + '.' + flagIcon + '.' + flagActive + '.' + flagDelete).length;
+        /*
+        newRows.filter(row => {
+            let activeButton = row.querySelector('td.' + flagActive + ' .' + flagButton + '.' + flagIcon + '.' + flagActive);
+            return activeButton.classList.contains(flagDelete);
+        }).length;
+        */
+        let rowAssessmentCommandModalityLink = DOM.getRowFromElement(tbody);
+        let divTrialCount = rowAssessmentCommandModalityLink.querySelector('td.' + flagTrialCount + ' div.' + flagTrialCount);
+        divTrialCount.innerText = countActiveRows;
+    }
+
+    hookupTableAssessmentCommandModalityLinksFieldsActive() {
+        this.hookupFieldsActive(flagAssessmentCommandModalityLink, (event, element) => { this.handleClickAddRowTableAssessmentCommandModalityLinks(event, element); });
+    }
+    handleClickAddRowTableAssessmentCommandModalityLinks(event, button) {
+        event.stopPropagation();
+        _rowBlankAssessmentCommandModalityLink.setAttribute(attrIdAssessmentCommandModalityLink, -1 - _rowBlankAssessmentCommandModalityLink.getAttribute(attrIdAssessmentCommandModalityLink));
+        let tbody = document.querySelector(idTableAssessmentCommandModalityLinks + ' tbody');
+        if (tbody.classList.contains(flagIsCollapsed)) return;
+        let row = _rowBlankAssessmentCommandModalityLink.cloneNode(true);
+        row.classList.remove(flagInitialised);
+        row.querySelectorAll('.' + flagInitialised).forEach(function(element) {
+            element.classList.remove(flagInitialised);
+        });
+        let countRows = document.querySelectorAll(idTableAssessmentCommandModalityLinks + ' > tbody > tr').length;
+        row.setAttribute(attrIdAssessmentCommandModalityLink, -1 - countRows);
+        tbody.prepend(row);
+        tbody.scrollTop = 0;
+        this.hookupTableAssessmentCommandModalityLinks();
+        this.postInitialiseAssessmentCommandModalityLinkRowNewCallback(tbody);
+    }
+    postInitialiseAssessmentCommandModalityLinkRowNewCallback(tbody) {
+        let newRows = tbody.querySelectorAll('tr.' + flagRowNew);
+        let newestRow = newRows[0];
+        let clickableElementsSelector = [
+            'td.' + flagCommandCategory + ' div.' + flagCommandCategory
+            , ',td.' + flagCommand + ' div.' + flagCommand
+            , ',td.' + flagCommandModality + ' div.' + flagCommandModality
+            , ',td.' + flagBribe + ' div.' + flagBribe
+        ].join('');
+        newestRow.querySelectorAll(clickableElementsSelector).forEach((clickableElement) => {
+            clickableElement.click();
+        });
+    }
+
+    leave() {
+        super.leave();
+    }
+}
+
--- a/static/js/pages/dog/assessments.js
+++ b/static/js/pages/dog/assessments.js
@@ -0,0 +1,169 @@
+
+import API from "../../api.js";
+import BusinessObjects from "../../lib/business_objects/business_objects.js";
+import DOM from "../../dom.js";
+import Events from "../../lib/events.js";
+import TableBasePage from "../base_table.js";
+import Utils from "../../lib/utils.js";
+import Validation from "../../lib/validation.js";
+import DogTableMixinPage from "./mixin_table.js";
+
+export default class PageDogAssessments extends TableBasePage {
+    static hash = hashPageDogAssessments;
+    static attrIdRowObject = attrIdAssessment;
+    callSaveTableContent = API.saveAssessments;
+
+    constructor(router) {
+        super(router);
+        this.dogMixin = new DogTableMixinPage(this);
+    }
+
+    initialize() {
+        this.sharedInitialize();
+    }
+
+    hookupFilters() {
+        this.sharedHookupFilters();
+        this.hookupFilterWeather();
+        this.hookupFilterLightingLevel();
+        this.hookupFilterLocation();
+        this.hookupFilterHandler();
+        this.hookupFilterActive();
+    }
+    hookupFilterWeather() {
+        this.hookupFilter(attrIdWeather);
+    }
+    hookupFilterLightingLevel() {
+        this.hookupFilter(attrIdLightingLevel);
+    }
+    hookupFilterHandler() {
+        this.hookupFilter(flagUserHandler);
+    }
+
+    loadRowTable(rowJson) {
+        if (rowJson == null) return;
+        if (_verbose) { Utils.consoleLogIfNotProductionEnvironment("applying data row: ", rowJson); }
+    }
+    getJsonRow(row) {
+        if (row == null) return;
+        let inputTemperatureCelcius = row.querySelector('td.' + flagTemperatureCelcius + ' input');
+        let inputNotes = row.querySelector('td.' + flagNotes + ' textarea');
+        let buttonActive = row.querySelector('td.' + flagActive + ' .' + flagActive);
+
+        let jsonRow = {};
+        jsonRow[attrIdAssessment] = row.getAttribute(attrIdAssessment);
+        jsonRow[attrIdWeather] = this.getIdWeatherRow(row);
+        jsonRow[attrIdLightingLevel] = this.getIdLightingLevelRow(row);
+        jsonRow[flagTemperatureCelcius] = DOM.getElementAttributeValueCurrent(inputTemperatureCelcius);
+        jsonRow[attrIdLocation] = this.getIdLocationRow(row);
+        jsonRow[flagUserHandler] = this.getIdUserHandlerRow(row);
+        jsonRow[flagNotes] = DOM.getElementAttributeValueCurrent(inputNotes);
+        jsonRow[flagActive] = buttonActive.classList.contains(flagDelete);
+        return jsonRow;
+    }
+    getIdWeatherRow(tr) {
+        let elementWeather = tr.querySelector('td.' + flagWeather + ' .' + flagWeather);
+        return DOM.getElementAttributeValueCurrent(elementWeather);
+    }
+    getIdLightingLevelRow(tr) {
+        let elementLightingLevel = tr.querySelector('td.' + flagLightingLevel + ' .' + flagLightingLevel);
+        return DOM.getElementAttributeValueCurrent(elementLightingLevel);
+    }
+    getIdLocationRow(tr) {
+        let elementLocation = tr.querySelector('td.' + flagLocation + ' .' + flagLocation);
+        return DOM.getElementAttributeValueCurrent(elementLocation);
+    }
+    getIdUserHandlerRow(tr) {
+        let elementUserHandler = tr.querySelector('td.' + flagUserHandler + ' .' + flagUserHandler);
+        return DOM.getElementAttributeValueCurrent(elementUserHandler);
+    }
+    initialiseRowNew(tbody, row) {
+        
+    }
+    postInitialiseRowNewCallback(tbody) {
+        let newRows = tbody.querySelectorAll('tr.' + flagRowNew);
+        let newestRow = newRows[0];
+        let clickableElementsSelector = [
+            'td.' + flagWeather + ' div.' + flagWeather
+            , ',td.' + flagLightingLevel + ' div.' + flagLightingLevel
+            , ',td.' + flagLocation + ' div.' + flagLocation
+            , ',td.' + flagUserHandler + ' div.' + flagUserHandler
+        ].join('');
+        newestRow.querySelectorAll(clickableElementsSelector).forEach((clickableElement) => {
+            clickableElement.click();
+        });
+    }
+
+    hookupTableMain() {
+        super.hookupTableMain();
+        this.hookupFieldsDetail();
+        this.hookupFieldsWeather();
+        this.hookupFieldsLightingLevel();
+        this.hookupFieldsTemperature();
+        this.dogMixin.hookupFieldsLocation();
+        this.hookupFieldsHandler();
+        this.hookupFieldsNotesTable();
+        this.hookupFieldsActive();
+    }
+    hookupFieldsDetail() {
+        Events.hookupEventHandler(
+            "click" // eventType
+            , idTableMain + ' td.' + flagDetail + ' button.' + flagDetail // selector
+            , (event, element) => {
+                let parentTr = DOM.getRowFromElement(element);
+                let idAssessment = parentTr.getAttribute(attrIdAssessment);
+                /*
+                console.log("click detail");
+                console.log({ element, parentTr, idAssessment });
+                const data = {};
+                const params = {
+                    [attrIdAssessment]: idAssessment
+                };
+                API.request(
+                    hashPageDogAssessment // hashEndpoint
+                    , 'GET' // method
+                    , data
+                    , params
+                );
+                */
+
+                let formFilters = TableBasePage.getFormFilters();
+                let filtersJson = DOM.convertForm2JSON(formFilters);
+                filtersJson[attrIdAssessment] = idAssessment;
+                Utils.consoleLogIfNotProductionEnvironment("hookupFieldsDetail");
+                Utils.consoleLogIfNotProductionEnvironment("formFilters");
+                Utils.consoleLogIfNotProductionEnvironment(formFilters);
+                Utils.consoleLogIfNotProductionEnvironment("filtersJson");
+                Utils.consoleLogIfNotProductionEnvironment(filtersJson);
+                this.leave();
+                API.goToHash(hashPageDogAssessment, filtersJson);
+            }
+        );
+    }
+    hookupFieldsWeather() {
+        this.hookupTableCellDdlPreviews(
+            flagWeather
+            , Utils.getListFromDict(filterWeathers) // .sort((a, b) => a[flagName].localeCompare(b[flagName]))
+        );
+    }
+    hookupFieldsLightingLevel() {
+        this.hookupTableCellDdlPreviews(
+            flagLightingLevel
+            , Utils.getListFromDict(filterLightingLevels) // .sort((a, b) => a[flagName].localeCompare(b[flagName]))
+        );
+    }
+    hookupFieldsTemperature() {
+        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagTemperatureCelcius + ' input.' + flagTemperatureCelcius);
+    }
+    hookupFieldsHandler() {
+        this.hookupTableCellDdlPreviews(
+            flagUserHandler
+            , Utils.getListFromDict(filterUserHandlers) // .sort((a, b) => a[flagName].localeCompare(b[flagName]))
+        );
+    }
+
+    leave() {
+        super.leave();
+    }
+}
+
--- a/static/js/pages/dog/command_button_links.js
+++ b/static/js/pages/dog/command_button_links.js
@@ -41,9 +41,6 @@ export default class PageDogCommandButtonLinks extends TableBasePage {
    hookupFilterButtonIcon() {
        this.hookupFilter(attrIdButtonIcon);
    }
-    hookupFilterLocation() {
-        this.hookupFilter(attrIdLocation);
-    }

    loadRowTable(rowJson) {
        if (rowJson == null) return;
@@ -69,7 +66,7 @@ export default class PageDogCommandButtonLinks extends TableBasePage {
    }
    postInitialiseRowNewCallback(tbody) {
        let newRows = tbody.querySelectorAll('tr.' + flagRowNew);
-        let newestRow = newRows[newRows.length - 1];
+        let newestRow = newRows[0];
        let clickableElementsSelector = [
            'td.' + flagDog + ' div.' + flagDog
            , ',td.' + flagCommandCategory + ' div.' + flagCommandCategory
@@ -87,7 +84,7 @@ export default class PageDogCommandButtonLinks extends TableBasePage {
        this.hookupFieldsButtonShape();
        this.hookupFieldsColour();
        this.hookupFieldsButtonIcon();
-        this.hookupFieldsLocation();
+        this.dogMixin.hookupFieldsLocation();
        this.hookupFieldsActive();
    }
    hookupFieldsButtonShape() {
@@ -108,12 +105,6 @@ export default class PageDogCommandButtonLinks extends TableBasePage {
            , Utils.getListFromDict(filterButtonIcons) // .sort((a, b) => a[flagName].localeCompare(b[flagName]))
        );
    }
-    hookupFieldsLocation() {
-        this.hookupTableCellDdlPreviews(
-            flagLocation
-            , Utils.getListFromDict(filterLocations) // .sort((a, b) => a[flagName].localeCompare(b[flagName]))
-        );
-    }

    leave() {
        super.leave();
--- a/static/js/pages/dog/dog_command_links.js
+++ b/static/js/pages/dog/dog_command_links.js
@@ -54,7 +54,7 @@ export default class PageDogDogCommandLinks extends TableBasePage {
    }
    postInitialiseRowNewCallback(tbody) {
        let newRows = tbody.querySelectorAll('tr.' + flagRowNew);
-        let newestRow = newRows[newRows.length - 1];
+        let newestRow = newRows[0];
        let clickableElementsSelector = [
            'td.' + flagDog + ' div.' + flagDog
            , ',td.' + flagCommandCategory + ' div.' + flagCommandCategory
--- a/static/js/pages/dog/locations.js
+++ b/static/js/pages/dog/locations.js
@@ -95,7 +95,7 @@ export default class PageDogLocations extends TableBasePage {

        */
        let cellSelector = idTableMain + ' > tbody > tr > td.' + flagLocationParent;
-        this.hookupEventHandler("click", cellSelector + ' div.' + flagLocationParent, (event, div) => {
+        Events.hookupEventHandler("click", cellSelector + ' div.' + flagLocationParent, (event, div) => {
            let row = DOM.getRowFromElement(div);
            let idLocationRow = Number(row.getAttribute(attrIdLocation));
            Utils.consoleLogIfNotProductionEnvironment({ idLocationRow });
--- a/static/js/pages/dog/mixin_table.js
+++ b/static/js/pages/dog/mixin_table.js
@@ -6,6 +6,7 @@ import Validation from "../../lib/validation.js";
 import DOM from "../../dom.js";
 import { isEmpty } from "../../lib/utils.js";
 import DogMixinPage from "./mixin.js";
+import Utils from "../../lib/utils.js";

 export default class DogTableMixinPage extends DogMixinPage {
    constructor(pageCurrent) {
@@ -22,4 +23,10 @@ export default class DogTableMixinPage extends DogMixinPage {
    hookupTable() {
        // Implement table-specific functionality here
    }
+    hookupFieldsLocation() {
+        this.page.hookupTableCellDdlPreviews(
+            flagLocation
+            , Utils.getListFromDict(filterLocations) // .sort((a, b) => a[flagName].localeCompare(b[flagName]))
+        );
+    }
 }
--- a/static/js/router.js
+++ b/static/js/router.js
@@ -11,6 +11,8 @@ import PageDogDogCommandLinks from './pages/dog/dog_command_links.js';
 import PageDogLocations from './pages/dog/locations.js';
 import PageDogButtonIcons from './pages/dog/button_icons.js';
 import PageDogCommandButtonLinks from './pages/dog/command_button_links.js';
+import PageDogAssessment from './pages/dog/assessment.js';
+import PageDogAssessments from './pages/dog/assessments.js';
 // Legal
 import PageAccessibilityReport from './pages/legal/accessibility_report.js';
 import PageAccessibilityStatement from './pages/legal/accessibility_statement.js';
@@ -42,6 +44,8 @@ export default class Router {
        this.pages[hashPageDogLocations] = { name: 'PageDogLocations', module: PageDogLocations };
        this.pages[hashPageDogButtonIcons] = { name: 'PageDogButtonIcons', module: PageDogButtonIcons };
        this.pages[hashPageDogCommandButtonLinks] = { name: 'PageDogCommandButtonLinks', module: PageDogCommandButtonLinks };
+        this.pages[hashPageDogAssessment] = { name: 'PageDogAssessment', module: PageDogAssessment };
+        this.pages[hashPageDogAssessments] = { name: 'PageDogAssessments', module: PageDogAssessments };
        // Legal
        this.pages[hashPageAccessibilityStatement] = { name: 'PageAccessibilityStatement', module: PageAccessibilityStatement };
        this.pages[hashPageDataRetentionSchedule] = { name: 'PageDataRetentionSchedule', module: PageRetentionSchedule };
@@ -64,6 +68,8 @@ export default class Router {
        this.routes[hashPageDogLocations] = (isPopState = false) => this.navigateToHash(hashPageDogLocations, isPopState);
        this.routes[hashPageDogButtonIcons] = (isPopState = false) => this.navigateToHash(hashPageDogButtonIcons, isPopState);
        this.routes[hashPageDogCommandButtonLinks] = (isPopState = false) => this.navigateToHash(hashPageDogCommandButtonLinks, isPopState);
+        this.routes[hashPageDogAssessment] = (isPopState = false) => this.navigateToHash(hashPageDogAssessment, isPopState);
+        this.routes[hashPageDogAssessments] = (isPopState = false) => this.navigateToHash(hashPageDogAssessments, isPopState);
        // Legal
        this.routes[hashPageAccessibilityStatement] = (isPopState = false) => this.navigateToHash(hashPageAccessibilityStatement, isPopState);
        this.routes[hashPageDataRetentionSchedule] = (isPopState = false) => this.navigateToHash(hashPageDataRetentionSchedule, isPopState);