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.

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

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

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();

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

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

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