Feat: Assessment page completed with save method combining Assessment, Distraction, Assessment Command Modality Link, and Assessment Response save for creating new complete Assessnent.

2025-07-28 22:41:38 +01:00
parent 1bbe6f0040
commit 574d60442a
122 changed files with 3261 additions and 1057 deletions
--- a/static/js/pages/dog/assessment.js
+++ b/static/js/pages/dog/assessment.js
@@ -14,7 +14,7 @@ var _rowBlankAssessmentCommandModalityLink;
 export default class PageDogAssessment extends TableBasePage {
    static hash = hashPageDogAssessment;
    static attrIdRowObject = attrIdAssessment;
-    callSaveTableContent = API.saveAssessments;
+    callSaveTableContent = API.saveAssessmentsDistractionsAndResponses;

    constructor(router) {
        super(router);
@@ -32,16 +32,189 @@ export default class PageDogAssessment extends TableBasePage {
        if (rowJson == null) return;
        if (_verbose) { Utils.consoleLogIfNotProductionEnvironment("applying data row: ", rowJson); }
    }
+    getTableRecords(dirtyOnly = false) {
+        dirtyOnly = true;
+        let row = document.querySelector(idTableAssessment + ' tbody tr.' + flagAssessment);
+        return [this.getJsonRow(row)];
+    }
    getJsonRow(row) {
+        console.log("getJsonRow: ", row);
        if (row == null) return;
-        /*
-        let inputTemperatureCelcius = row.querySelector('td.' + flagTemperatureCelcius + ' input');
-        let buttonActive = row.querySelector('td.' + flagActive + ' .' + flagActive);
-        */
+        let inputWeather = row.querySelector(idTableAssessment + ' td.' + flagWeather + ' .' + flagWeather);
+        let inputLightingLevel = row.querySelector(idTableAssessment + ' td.' + flagLightingLevel + ' .' + flagLightingLevel);
+        let inputTemeratureCelcius = row.querySelector(idTableAssessment + ' td.' + flagTemperatureCelcius + ' .' + flagTemperatureCelcius);
+        let inputLocation = row.querySelector(idTableAssessment + ' td.' + flagLocation + ' .' + flagLocation);
+        let inputUserHandler = row.querySelector(idTableAssessment + ' td.' + flagUserHandler + ' .' + flagUserHandler);
+        let inputNotes = row.querySelector(idTableAssessment + ' td.' + flagNotes + ' .' + flagNotes);
+        // let buttonActive = row.querySelector(idTableAssessment + ' td.' + flagActive + ' .' + flagButton + '.' + flagIcon + '.' + flagActive);
+        let idAssessment = row.getAttribute(attrIdAssessment);
        let jsonRow = {};
-        jsonRow[attrIdAssessment] = row.getAttribute(attrIdAssessment);
+        jsonRow[attrIdAssessment] = idAssessment;
+        jsonRow[attrIdWeather] = DOM.getElementAttributeValueCurrent(inputWeather);
+        jsonRow[attrIdLightingLevel] = DOM.getElementAttributeValueCurrent(inputLightingLevel);
+        jsonRow[flagTemperatureCelcius] = DOM.getElementAttributeValueCurrent(inputTemeratureCelcius);
+        jsonRow[attrIdLocation] = DOM.getElementAttributeValueCurrent(inputLocation);
+        jsonRow[flagUserHandler] = DOM.getElementAttributeValueCurrent(inputUserHandler);
+        jsonRow[flagNotes] = DOM.getElementAttributeValueCurrent(inputNotes);
+        jsonRow[flagActive] = true; // buttonActive.classList.contains(flagDelete);
+        jsonRow[flagDistraction] = this.getDirtyDistractions(idAssessment);
+        jsonRow[flagAssessmentCommandModalityLink] = this.getDirtyAssessmentCommandModalityLinks(idAssessment);
+        console.log({ jsonRow });
        return jsonRow;
    }
+    getDirtyDistractions(idAssessment) {
+        let dirtyRows = document.querySelectorAll(idTableDistractions + ' tbody tr.' + flagDistraction + '.' + flagDirty);
+        if (dirtyRows == null || dirtyRows.length == 0) return [];
+        // dirtyRows = Array.from(dirtyRows);
+        let dirtyRow,
+            inputDistractionType, distractionType,
+            inputIntensityLevelEmotional, intensityLevelEmotional,
+            inputIntensityLevelScent, intensityLevelScent,
+            inputIntensityLevelSight, intensityLevelSight,
+            inputIntensityLevelSound, intensityLevelSound,
+            inputIntensityLevelTouch, intensityLevelTouch,
+            inputQuantity, quantity,
+            inputProximityMetres, proximityMetres,
+            inputNotes, notes,
+            buttonActive, active;
+        console.log('getDirtyDistractions');
+        console.log({ dirtyRows });
+        let dirtyDistractions = [];
+        for(let indexRow = 0; indexRow < dirtyRows.length; indexRow++) {
+            dirtyRow = dirtyRows[indexRow];
+            inputDistractionType = dirtyRow.querySelector('td.' + flagDistractionType + ' .' + flagDistractionType);
+            distractionType = DOM.getElementAttributeValueCurrent(inputDistractionType);
+            inputIntensityLevelEmotional = dirtyRow.querySelector('td.' + flagDistractionIntensityLevelEmotional + ' .' + flagDistractionIntensityLevelEmotional);
+            intensityLevelEmotional = DOM.getElementAttributeValueCurrent(inputIntensityLevelEmotional);
+            inputIntensityLevelScent = dirtyRow.querySelector('td.' + flagDistractionIntensityLevelScent + ' .' + flagDistractionIntensityLevelScent);
+            intensityLevelScent = DOM.getElementAttributeValueCurrent(inputIntensityLevelScent);
+            inputIntensityLevelSight = dirtyRow.querySelector('td.' + flagDistractionIntensityLevelSight + ' .' + flagDistractionIntensityLevelSight);
+            intensityLevelSight = DOM.getElementAttributeValueCurrent(inputIntensityLevelSight);
+            inputIntensityLevelSound = dirtyRow.querySelector('td.' + flagDistractionIntensityLevelSound + ' .' + flagDistractionIntensityLevelSound);
+            intensityLevelSound = DOM.getElementAttributeValueCurrent(inputIntensityLevelSound);
+            inputIntensityLevelTouch = dirtyRow.querySelector('td.' + flagDistractionIntensityLevelTouch + ' .' + flagDistractionIntensityLevelTouch);
+            intensityLevelTouch = DOM.getElementAttributeValueCurrent(inputIntensityLevelTouch);
+            inputQuantity = dirtyRow.querySelector('td.' + flagQuantity + ' .' + flagQuantity);
+            quantity = DOM.getElementAttributeValueCurrent(inputQuantity);
+            inputProximityMetres = dirtyRow.querySelector('td.' + flagProximityMetres + ' .' + flagProximityMetres);
+            proximityMetres = DOM.getElementAttributeValueCurrent(inputProximityMetres);
+            inputNotes = dirtyRow.querySelector('td.' + flagNotes + ' .' + flagNotes);
+            notes = DOM.getElementAttributeValueCurrent(inputNotes);
+            buttonActive = dirtyRow.querySelector(idTableDistractions + ' td.' + flagActive + ' .' + flagButton + '.' + flagIcon + '.' + flagActive);
+            active = buttonActive.classList.contains(flagDelete);
+            dirtyDistractions.push({
+                [attrIdDistraction]: dirtyRow.getAttribute(attrIdDistraction)
+                , [attrIdAssessment]: idAssessment
+                , [attrIdDistractionType]: distractionType
+                , [flagDistractionIntensityLevelEmotional]: intensityLevelEmotional
+                , [flagDistractionIntensityLevelScent]: intensityLevelScent
+                , [flagDistractionIntensityLevelSight]: intensityLevelSight
+                , [flagDistractionIntensityLevelSound]: intensityLevelSound
+                , [flagDistractionIntensityLevelTouch]: intensityLevelTouch
+                , [flagQuantity]: quantity
+                , [flagProximityMetres]: proximityMetres
+                , [flagNotes]: notes
+                , [flagActive]: active
+            });
+        };
+        return dirtyDistractions;
+    }
+    getDirtyAssessmentCommandModalityLinks(idAssessment) {
+        let dirtyRows = document.querySelectorAll(idTableAssessmentCommandModalityLinks + ' > tbody > tr.' + flagAssessmentCommandModalityLink + '.' + flagDirty);
+        if (dirtyRows == null || dirtyRows.length == 0) return [];
+        dirtyRows = Array.from(dirtyRows);
+        let dirtyRow, idAssessmentCommandModalityLink,
+            inputCommand, command,
+            inputCommandModality, commandModality,
+            inputBribe, bribe,
+            inputDistanceFromHandler, distanceFromhandler,
+            inputIsInHearingRangeOfHandler, isInHearingRangeOfHandler,
+            inputIsInScentRangeOfHandler, isInScentRangeOfHandler,
+            inputIsInSightOfHandler, isInSightOfHandler,
+            inputIsOnLead, isOnLead,
+            inputNotes, notes,
+            buttonActive, active;
+        console.log('getDirtyAssessmentCommandModalityLinks');
+        console.log({ dirtyRows });
+        let dirtyLinks = [];
+        for(let indexRow = 0; indexRow < dirtyRows.length; indexRow++) {
+            dirtyRow = dirtyRows[indexRow];
+            idAssessmentCommandModalityLink = dirtyRow.getAttribute(attrIdAssessmentCommandModalityLink);
+            inputCommand = dirtyRow.querySelector('td.' + flagCommand + ' .' + flagCommand);
+            command = DOM.getElementAttributeValueCurrent(inputCommand);
+            inputCommandModality = dirtyRow.querySelector('td.' + flagCommandModality + ' .' + flagCommandModality);
+            commandModality = DOM.getElementAttributeValueCurrent(inputCommandModality);
+            inputBribe = dirtyRow.querySelector('td.' + flagBribe + ' .' + flagBribe);
+            bribe = DOM.getElementAttributeValueCurrent(inputBribe);
+            inputDistanceFromHandler = dirtyRow.querySelector('td.' + flagDistanceFromHandlerMetres + ' .' + flagDistanceFromHandlerMetres);
+            distanceFromhandler = DOM.getElementAttributeValueCurrent(inputDistanceFromHandler);
+            inputIsInHearingRangeOfHandler = dirtyRow.querySelector('td.' + flagIsInHearingRangeOfHandler + ' .' + flagIsInHearingRangeOfHandler);
+            isInHearingRangeOfHandler = DOM.getElementAttributeValueCurrent(inputIsInHearingRangeOfHandler);
+            inputIsInScentRangeOfHandler = dirtyRow.querySelector('td.' + flagIsInScentRangeOfHandler + ' .' + flagIsInScentRangeOfHandler);
+            isInScentRangeOfHandler = DOM.getElementAttributeValueCurrent(inputIsInScentRangeOfHandler);
+            inputIsInSightOfHandler = dirtyRow.querySelector('td.' + flagIsInSightOfHandler + ' .' + flagIsInSightOfHandler);
+            isInSightOfHandler = DOM.getElementAttributeValueCurrent(inputIsInSightOfHandler);
+            inputIsOnLead = dirtyRow.querySelector('td.' + flagIsOnLead + ' .' + flagIsOnLead);
+            isOnLead = DOM.getElementAttributeValueCurrent(inputIsOnLead);
+            inputNotes = dirtyRow.querySelector('td.' + flagNotes + ' .' + flagNotes);
+            notes = DOM.getElementAttributeValueCurrent(inputNotes);
+            buttonActive = dirtyRow.querySelector(idTableAssessmentCommandModalityLinks + ' td.' + flagActive + ' .' + flagButton + '.' + flagIcon + '.' + flagActive);
+            active = buttonActive.classList.contains(flagDelete);
+            dirtyLinks.push({
+                [attrIdAssessmentCommandModalityLink]: idAssessmentCommandModalityLink
+                , [attrIdAssessment]: idAssessment
+                , [attrIdCommand]: command
+                , [attrIdCommandModality]: commandModality
+                , [attrIdBribe]: bribe
+                , [flagDistanceFromHandlerMetres]: distanceFromhandler
+                , [flagIsInHearingRangeOfHandler]: isInHearingRangeOfHandler
+                , [flagIsInScentRangeOfHandler]: isInScentRangeOfHandler
+                , [flagIsInSightOfHandler]: isInSightOfHandler
+                , [flagIsOnLead]: isOnLead
+                , [flagNotes]: notes
+                , [flagActive]: active
+                , [flagAssessmentResponse]: this.getDirtyAssessmentResponses(dirtyRow, idAssessmentCommandModalityLink)
+            });
+        }
+        return dirtyLinks;
+    }
+    getDirtyAssessmentResponses(rowAssessmentCommandModalityLink, idAssessmentCommandModalityLink) {
+        let dirtyRows = rowAssessmentCommandModalityLink.querySelectorAll(idTableAssessmentResponses + ' tbody tr.' + flagAssessmentResponse + '.' + flagDirty);
+        if (dirtyRows == null || dirtyRows.length == 0) return [];
+        dirtyRows = Array.from(dirtyRows);
+        let dirtyRow,
+            inputResponseQualityMetric, responseQualityMetric,
+            inputObedienceLevel, obedienceLevel,
+            inputValueMeasured, valueMeasured,
+            inputNotes, notes,
+            buttonActive, active;
+        console.log('getDirtyAssessmentResponses');
+        console.log({ dirtyRows });
+        let dirtyResponses = [];
+        for(let indexRow = 0; indexRow < dirtyRows.length; indexRow++) {
+            dirtyRow = dirtyRows[indexRow];
+            inputResponseQualityMetric = dirtyRow.querySelector('td.' + flagResponseQualityMetric + ' .' + flagResponseQualityMetric);
+            responseQualityMetric = DOM.getElementAttributeValueCurrent(inputResponseQualityMetric);
+            inputObedienceLevel = dirtyRow.querySelector('td.' + flagObedienceLevel + ' .' + flagObedienceLevel);
+            obedienceLevel = DOM.getElementAttributeValueCurrent(inputObedienceLevel);
+            inputValueMeasured = dirtyRow.querySelector('td.' + flagValueMeasured + ' .' + flagValueMeasured);
+            valueMeasured = DOM.getElementAttributeValueCurrent(inputValueMeasured);
+            inputNotes = dirtyRow.querySelector('td.' + flagNotes + ' .' + flagNotes);
+            notes = DOM.getElementAttributeValueCurrent(inputNotes);
+            buttonActive = dirtyRow.querySelector(idTableAssessmentResponses + ' td.' + flagActive + ' .' + flagButton + '.' + flagIcon + '.' + flagActive);
+            active = buttonActive.classList.contains(flagDelete);
+            dirtyResponses.push({
+                [attrIdAssessmentResponse]: dirtyRow.getAttribute(attrIdAssessmentResponse)
+                , [attrIdAssessmentCommandModalityLink]: idAssessmentCommandModalityLink
+                , [attrIdResponseQualityMetric]: responseQualityMetric
+                , [attrIdObedienceLevel]: obedienceLevel
+                , [flagValueMeasured]: valueMeasured
+                , [flagNotes]: notes
+                , [flagActive]: active
+            });
+        }
+        return dirtyResponses;
+    }
    initialiseRowNew(tbody, row) {
        
    }
@@ -58,6 +231,14 @@ export default class PageDogAssessment extends TableBasePage {
            clickableElement.click();
        });
    }
+    callFilterTableContent() {
+        if (assessment[attrIdAssessment] < 1) {
+            let formFilters = TableBasePage.getFormFilters();
+            let filterAssessment = formFilters.querySelector('#' + attrIdAssessment);
+            DOM.setElementValueCurrent(filterAssessment, '');
+        }
+        super.callFilterTableContent();
+    }

    hookupTableMain() {
        super.hookupTableMain();
@@ -72,6 +253,12 @@ export default class PageDogAssessment extends TableBasePage {
        this.hookupTableAssessmentFieldLocation();
        this.hookupTableAssessmentFieldUserHandler();
        this.hookupTableAssessmentFieldNotes();
+        if (assessment[attrIdAssessment] < 1) {
+            let tbody = document.querySelector(idTableAssessment + ' tbody');
+            let row = tbody.querySelector('tr');
+            row.classList.add(flagRowNew);
+            this.postInitialiseRowNewCallback(tbody);
+        }
    }
    hookupTableAssessmentFieldWeather() {
        let fieldFlag = flagWeather;
@@ -264,7 +451,7 @@ export default class PageDogAssessment extends TableBasePage {
        this.hookupTableAssessmentCommandModalityLinksFieldsCommand();
        this.hookupTableAssessmentCommandModalityLinksFieldsCommandModality();
        this.hookupTableAssessmentCommandModalityLinksFieldsBribe();
-        this.hookupTableAssessmentCommandModalityLinksFieldsDistanceFromHandler();
+        this.hookupTableAssessmentCommandModalityLinksFieldsDistanceFromHandlerMetres();
        this.hookupTableAssessmentCommandModalityLinksFieldsIsInHearingRangeOfHandler();
        this.hookupTableAssessmentCommandModalityLinksFieldsIsInScentRangeOfHandler();
        this.hookupTableAssessmentCommandModalityLinksFieldsIsInSightOfHandler();
@@ -343,8 +530,8 @@ export default class PageDogAssessment extends TableBasePage {
            , cellSelector
        );
    }
-    hookupTableAssessmentCommandModalityLinksFieldsDistanceFromHandler() {
-        this.hookupChangeHandlerTableCells(idTableAssessmentCommandModalityLinks + ' td.' + flagDistanceFromHandler + ' .' + flagDistanceFromHandler);
+    hookupTableAssessmentCommandModalityLinksFieldsDistanceFromHandlerMetres() {
+        this.hookupChangeHandlerTableCells(idTableAssessmentCommandModalityLinks + ' td.' + flagDistanceFromHandlerMetres + ' .' + flagDistanceFromHandlerMetres);
    }
    hookupTableAssessmentCommandModalityLinksFieldsIsInHearingRangeOfHandler() {
        this.hookupChangeHandlerTableCells(idTableAssessmentCommandModalityLinks + ' td.' + flagIsInHearingRangeOfHandler + ' .' + flagIsInHearingRangeOfHandler);
@@ -369,6 +556,8 @@ export default class PageDogAssessment extends TableBasePage {
        let selector = idTableAssessmentCommandModalityLinks + ' td.' + flagAssessmentResponse + ' div.' + flagAssessmentResponse;
        let handler = (event, element) => {
            let parentTd = DOM.getCellFromElement(element);
+            let rowAssessmentCommandModalityLink = parentTd.closest('tr.' + flagAssessmentCommandModalityLink);
+            let idAssessmentCommandModalityLink = rowAssessmentCommandModalityLink.getAttribute(attrIdAssessmentCommandModalityLink);
            let responsesTable = document.createElement("table");
            responsesTable.id = idTableAssessmentResponses.replace("#", "");
            responsesTable.classList.add(flagTableMain, flagAssessmentResponse);
@@ -401,11 +590,14 @@ export default class PageDogAssessment extends TableBasePage {

            let body = document.createElement("tbody");
            
-            let assessmentCommandModalityLink = assessment[flagAssessmentCommandModalityLink];
+            let assessmentCommandModalityLinks = assessment[flagAssessmentCommandModalityLink].filter(link => link[attrIdAssessmentCommandModalityLink] == idAssessmentCommandModalityLink);
+            let assessmentCommandModalityLink = (assessmentCommandModalityLinks == null || assessmentCommandModalityLinks.length == 0) ? null : assessmentCommandModalityLinks[0];
            let responses = (assessmentCommandModalityLink == null) ? null : assessmentCommandModalityLink[flagAssessmentResponse];
            
+            console.log({ assessmentCommandModalityLinks, responses });
            if (responses != null && responses.length > 0) {
-                for (let response in responses) {
+                for (let responseKey in Object.keys(responses)) {
+                    let response = responses[responseKey];
                    let row = PageDogAssessment.createNewRowTableAssessmentResponses(response);
                    body.appendChild(row);
                }
@@ -414,6 +606,21 @@ export default class PageDogAssessment extends TableBasePage {

            parentTd.innerHTML = responsesTable.outerHTML;

+            let responseRows = parentTd.querySelectorAll('tbody tr.' + flagAssessmentResponse);
+            if (responseRows != null && responseRows.length > 0) {
+                for (let indexRow = 0; indexRow < responseRows.length; indexRow++) {
+                    let row = responseRows[indexRow];
+                    // let idAssessmentResponse = row.getAttribute(attrIdAssessmentResponse);
+                    
+                    let response = responses[indexRow]; // idAssessmentResponse];
+                    console.log({ indexRow, row, response }); // idAssessmentResponse,
+                    let inputValueMeasured = row.querySelector('td.' + flagValueMeasured + ' .' + flagValueMeasured);
+                    DOM.setElementValueCurrent(inputValueMeasured, response[flagValueMeasured]);
+                    let inputNotes = row.querySelector('td.' + flagNotes + ' .' + flagNotes);
+                    DOM.setElementValueCurrent(inputNotes, response[flagNotes]);
+                }
+            }
+
            this.hookupTablesAssessmentResponses();
        };
        Events.hookupEventHandler(
@@ -426,12 +633,17 @@ export default class PageDogAssessment extends TableBasePage {
    static createNewRowTableAssessmentResponses(response) {
        if (response == null) response = {
            [attrIdAssessmentResponse]: null
-            , [flagResponseQualityMetric]: 0
-            , [flagObedienceLevel]: 0
+            , [attrIdResponseQualityMetric]: {
+                [attrIdResponseQualityMetric]: 0
+            }
+            , [attrIdObedienceLevel]: {
+                [attrIdObedienceLevel]: 0
+            }
            , [flagValueMeasured]: ''
            , [flagNotes]: ''
            , [flagActive]: true
        };
+        console.log({ response });
        let isNew = (response[attrIdAssessmentResponse] == null || response[attrIdAssessmentResponse] < 1);
        let row = document.createElement("tr");
        row.classList.add(flagAssessmentResponse);
@@ -442,8 +654,10 @@ export default class PageDogAssessment extends TableBasePage {
        tdResponseQualityMetric.classList.add(flagResponseQualityMetric, flagDdlPreview);
        let divResponseQualityMetric = document.createElement("div");
        divResponseQualityMetric.classList.add(flagResponseQualityMetric);
-        DOM.setElementAttributesValuesCurrentAndPrevious(divResponseQualityMetric, response[flagResponseQualityMetric]);
-        divResponseQualityMetric.innerText = response[flagResponseQualityMetric];
+        let idResponseQualityMetric = response[attrIdResponseQualityMetric][attrIdResponseQualityMetric];
+        let responseQualityMetric = filterResponseQualityMetrics[idResponseQualityMetric];
+        DOM.setElementAttributesValuesCurrentAndPrevious(divResponseQualityMetric, idResponseQualityMetric);
+        divResponseQualityMetric.innerText = (responseQualityMetric == null) ? '' : responseQualityMetric[flagName];
        tdResponseQualityMetric.appendChild(divResponseQualityMetric);
        row.appendChild(tdResponseQualityMetric);

@@ -451,8 +665,10 @@ export default class PageDogAssessment extends TableBasePage {
        tdObedienceLevel.classList.add(flagObedienceLevel, flagDdlPreview);
        let divObedienceLevel = document.createElement("div");
        divObedienceLevel.classList.add(flagObedienceLevel);
-        DOM.setElementAttributesValuesCurrentAndPrevious(divObedienceLevel, response[flagObedienceLevel]);
-        divObedienceLevel.innerText = response[flagObedienceLevel];
+        let idObedienceLevel = response[attrIdObedienceLevel][attrIdObedienceLevel];
+        let obedienceLevel = filterObedienceLevels[idObedienceLevel];
+        DOM.setElementAttributesValuesCurrentAndPrevious(divObedienceLevel, idObedienceLevel);
+        divObedienceLevel.innerText = (obedienceLevel == null) ? '' : obedienceLevel[flagName];
        tdObedienceLevel.appendChild(divObedienceLevel);
        row.appendChild(tdObedienceLevel);

@@ -461,8 +677,9 @@ export default class PageDogAssessment extends TableBasePage {
        let inputValueMeasured = document.createElement("input");
        inputValueMeasured.type = "number";
        inputValueMeasured.classList.add(flagValueMeasured);
-        DOM.setElementAttributesValuesCurrentAndPrevious(inputValueMeasured, response[flagValueMeasured]);
-        inputValueMeasured.value = response[flagValueMeasured];
+        let valueMeasured = response[flagValueMeasured];
+        DOM.setElementValueCurrent(inputValueMeasured, valueMeasured);
+        DOM.setElementAttributeValuePrevious(inputValueMeasured, valueMeasured);
        tdValueMeasured.appendChild(inputValueMeasured);
        row.appendChild(tdValueMeasured);

@@ -470,11 +687,16 @@ export default class PageDogAssessment extends TableBasePage {
        tdNotes.classList.add(flagNotes, flagDdlPreview);
        let inputNotes = document.createElement("textarea");
        inputNotes.classList.add(flagNotes);
-        DOM.setElementAttributesValuesCurrentAndPrevious(inputNotes, response[flagNotes]);
-        inputNotes.value = response[flagNotes];
+        let notes = response[flagNotes];
+        DOM.setElementValueCurrent(inputNotes, notes);
+        DOM.setElementAttributeValuePrevious(inputNotes, notes);
        tdNotes.appendChild(inputNotes);
        row.appendChild(tdNotes);

+        console.log(inputValueMeasured.tagName);
+        console.log(inputNotes.tagName);
+        console.log({ valueMeasured, notes });
+
        let tdActive = document.createElement("td");
        tdActive.classList.add(flagActive, flagDdlPreview);
        let templateAddIcon = document.querySelector(idContainerTemplateElements + ' .' + flagButton + '.' + flagIcon + '.' + flagActive + '.' + flagAdd);
@@ -531,7 +753,7 @@ export default class PageDogAssessment extends TableBasePage {
        row.querySelectorAll('.' + flagInitialised).forEach(function(element) {
            element.classList.remove(flagInitialised);
        });
-        let countRows = document.querySelectorAll(attrIdAssessmentResponse + ' > tbody > tr').length;
+        let countRows = document.querySelectorAll(idTableAssessmentResponses + ' > tbody > tr').length;
        row.setAttribute(attrIdAssessmentResponse, -1 - countRows);
        tbody.prepend(row);
        tbody.scrollTop = 0;
--- a/static/js/pages/dog/assessments.js
+++ b/static/js/pages/dog/assessments.js
@@ -84,14 +84,16 @@ export default class PageDogAssessments extends TableBasePage {
        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
+            'td.' + flagDetail + ' .' + flagDetail
        ].join('');
-        newestRow.querySelectorAll(clickableElementsSelector).forEach((clickableElement) => {
+        let detailButton = newestRow.querySelector('td.' + flagDetail + ' .' + flagDetail); /*.forEach((clickableElement) => {
+            clickableElement.
            clickableElement.click();
        });
+        */
+        newestRow.classList.add(flagIsCollapsed);
+        detailButton.click();
+        // console.log({ newestRow, detailButton });
    }

    hookupTableMain() {