Feat(SQL, UI): 1. Dog Command Links page completed with get + set functionality. \n 2. Commands page and Command Categories page completed with get + set functionality.

This commit is contained in:
2025-07-09 17:42:43 +01:00
parent 660b15cb8f
commit 28158cb0c4
68 changed files with 3302 additions and 3926 deletions

View File

@@ -1,10 +1,12 @@
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 API from "../../api.js";
import DOM from "../../dom.js";
import DogTableMixinPage from "./mixin_table.js";
import Utils from "../../lib/utils.js";
import Validation from "../../lib/validation.js";
import DogTableMixinPage from "./mixin_table.js";
export default class PageDogCommands extends TableBasePage {
static hash = hashPageDogCommands;
@@ -22,122 +24,75 @@ export default class PageDogCommands extends TableBasePage {
hookupFilters() {
this.sharedHookupFilters();
this.hookupFilterDog();
this.hookupFilterIsNotEmpty();
this.hookupFilterCommandCategory();
this.hookupFilterActive();
}
hookupFilterDog() {
this.hookupFilter(flagDog);
hookupFilterCommandCategory() {
this.hookupFilter(attrIdCommandCategory);
}
loadRowTable(rowJson) {
return;
if (rowJson == null) return;
let row = _rowBlank.cloneNode(true);
row.classList.remove(flagRowNew);
row.classList.remove(flagInitialised);
row.querySelectorAll('.' + flagInitialised).forEach(function(element) {
element.classList.remove(flagInitialised);
});
let sliderDisplayOrder = row.querySelector('td.' + flagDisplayOrder + ' .' + flagSlider);
let tdDog = row.querySelector('td.' + flagDog);
let divDog = tdDog.querySelector('div.' + flagDog);
let textareaName = row.querySelector('td.' + flagName + ' textarea');
let tdAccessLevel = row.querySelector('td.' + flagAccessLevel);
let divAccessLevel = tdAccessLevel.querySelector('div.' + flagAccessLevel);
let inputActive = row.querySelector('td.' + flagActive + ' input[type="checkbox"]');
DOM.setElementValuesCurrentAndPrevious(sliderDisplayOrder, rowJson[flagDisplayOrder]);
DOM.setElementValuesCurrentAndPrevious(textareaCode, rowJson[flagCode]);
DOM.setElementValuesCurrentAndPrevious(textareaName, rowJson[flagName]);
DOM.setElementValuesCurrentAndPrevious(textareaDescription, rowJson[flagDescription]);
tdAccessLevel.setAttribute(attrIdAccessLevel, rowJson[attrIdAccessLevel]);
tdAccessLevel.setAttribute(flagAccessLevelRequired, rowJson[flagAccessLevelRequired]);
divAccessLevel.setAttribute(attrIdAccessLevel, rowJson[attrIdAccessLevel]);
DOM.setElementValuesCurrentAndPrevious(divAccessLevel, rowJson[attrIdAccessLevel]);
divAccessLevel.textContent = rowJson[flagAccessLevelRequired];
DOM.setElementValuesCurrentAndPrevious(inputActive, rowJson[flagActive]);
row.setAttribute(rowJson[flagKeyPrimary], rowJson[rowJson[flagKeyPrimary]]);
let table = TableBasePage.getTableMain();
let bodyTable = table.querySelector('tbody');
bodyTable.appendChild(row);
if (_verbose) { Utils.consoleLogIfNotProductionEnvironment("applying data row: ", rowJson); }
}
getJsonRow(row) {
if (row == null) return;
let sliderDisplayOrder = row.querySelector('td.' + flagDisplayOrder + ' .' + flagSlider);
let tdDog = row.querySelector('td.' + flagDog);
let textareaName = row.querySelector('td.' + flagName + ' textarea');
// let tdCommandVariations = row.querySelector('td.' + flagCommandVariations);
let inputHasVariations = row.querySelector('td.' + flagHasVariations + ' input[type="checkbox"]');
let tdAccessLevel = row.querySelector('td.' + flagAccessLevel);
let buttonActive = row.querySelector(':scope > td.' + flagActive + ' button');
let inputName = row.querySelector('td.' + flagName + ' textarea');
let inputHandSignalDefaultDescription = row.querySelector('td.' + flagHandSignalDefaultDescription + ' textarea');
let inputCanHaveButton = row.querySelector('td.' + flagCanHaveButton + ' input');
let inputNotes = row.querySelector('td.' + flagNotes + ' textarea');
let buttonActive = row.querySelector('td.' + flagActive + ' .' + flagActive);
let jsonCommand = {};
jsonCommand[attrIdCommand] = row.getAttribute(attrIdCommand);
jsonCommand[attrIdDog] = DOM.getElementAttributeValueCurrent(tdDog);
jsonCommand[flagName] = DOM.getElementAttributeValueCurrent(textareaName);
// jsonRow[flagCommandVariations] = DOM.getElementAttributeValueCurrent(tdCommandVariations);
// jsonRow[flagHasVariations] = jsonRow[flagCommandVariations] != '';
jsonCommand[flagHasVariations] = DOM.getElementAttributeValueCurrent(inputHasVariations);
// jsonCommand[flagAccessLevelRequired] = tdAccessLevel.getAttribute(flagAccessLevelRequired);
jsonCommand[attrIdAccessLevel] = DOM.getElementAttributeValueCurrent(tdAccessLevel);
jsonCommand[flagActive] = buttonActive.classList.contains(flagDelete);
jsonCommand[flagDisplayOrder] = DOM.getElementAttributeValueCurrent(sliderDisplayOrder);
return jsonCommand;
let jsonRow = {};
jsonRow[attrIdCommand] = row.getAttribute(attrIdCommand);
jsonRow[attrIdCommandCategory] = this.getIdCommandCategoryRow(row);
jsonRow[flagName] = DOM.getElementAttributeValueCurrent(inputName);
jsonRow[flagHandSignalDefaultDescription] = DOM.getElementAttributeValueCurrent(inputHandSignalDefaultDescription);
jsonRow[flagCanHaveButton] = (DOM.getElementAttributeValueCurrent(inputCanHaveButton) == "true");
jsonRow[flagNotes] = DOM.getElementAttributeValueCurrent(inputNotes);
jsonRow[flagActive] = buttonActive.classList.contains(flagDelete);
return jsonRow;
}
initialiseRowNew(tbody, row) {
if (row == null) return;
this.initialiseSliderDisplayOrderRowNew(tbody, row);
}
postInitialiseRowNewCallback(tbody) {
let newRows = tbody.querySelectorAll('tr.' + flagRowNew);
let newestRow = newRows[newRows.length - 1];
let clickableElementsSelector = [
'td.' + flagDog + ' div.' + flagDog
, ',td.' + flagCommandCategory + ' div.' + flagCommandCategory
, ',td.' + flagCommand + ' div.' + flagCommand
].join('');
newestRow.querySelectorAll(clickableElementsSelector).forEach((clickableElement) => {
clickableElement.click();
});
}
hookupTableMain() {
super.hookupTableMain();
this.hookupSlidersDisplayOrderTable();
this.hookupTdsDog();
this.hookupTextareasNameTable();
this.hookupInputsHasVariationsTable();
this.hookupTdsAccessLevel();
this.hookupFieldsCommandCategory();
this.hookupFieldsNameTable();
this.hookupTextareasHandSignalDefaultDescription();
this.hookupFieldsCanHaveButton();
this.hookupFieldsNotesTable();
this.hookupFieldsActive();
}
hookupTdsDog() {
let cellSelector = idTableMain + ' tbody td.' + flagDog;
this.hookupTableCellDdlPreviews(cellSelector, Utils.getListFromDict(filterDogs));
hookupFieldsCommandCategory() {
this.hookupTableCellDdlPreviews(
flagCommandCategory
, Utils.getListFromDict(filterCommandCategories)
);
}
hookupInputsHasVariationsTable() {
let cellSelector = idTableMain + ' tbody td.' + flagHasVariations + ' input[type="checkbox"]';
this.hookupChangeHandlerTableCells(cellSelector);
hookupTextareasHandSignalDefaultDescription() {
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagHandSignalDefaultDescription + ' textarea');
}
/*
isDirtyRow(row) {
if (row == null) return false;
console.log("Command Command isDirtyRow");
console.log("row: ", row);
let sliderDisplayOrder = row.querySelector('td.' + flagDisplayOrder);
let inputCode = row.querySelector('td.' + flagCode + ' textarea');
let inputName = row.querySelector('td.' + flagName + ' textarea');
let inputDescription = row.querySelector('td.' + flagDescription + ' textarea');
let tdAccessLevel = row.querySelector('td.' + flagAccessLevel);
let inputActive = row.querySelector('td.' + flagActive + ' input[type="checkbox"]');
let isDirty = sliderDisplayOrder.classList.contains(flagDirty) || inputCode.classList.contains(flagDirty) || inputName.classList.contains(flagDirty) ||
inputDescription.classList.contains(flagDirty) || tdAccessLevel.classList.contains(flagDirty) || inputActive.classList.contains(flagDirty);
DOM.handleDirtyElement(row, isDirty);
return isDirty;
hookupFieldsCanHaveButton() {
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagCanHaveButton + ' input');
}
*/
leave() {
super.leave();
}
/*
getFiltersDefaults() {
filters = {};
filters.flagIsNotEmpty = true;
filters.flagActive = true;
return filters;
}
*/
}