admin/dog_training
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat(SQL, UI): Button Icons page, Command Button Links page created with get and set functionality.

Browse Source
This commit is contained in:
Teddy Middleton-Smith
2025-07-17 18:58:06 +01:00
parent e0805ec2ed
commit 4e214c3bde
151 changed files with 12224 additions and 463 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
static/js/api.js
View File

@@ -107,4 +107,22 @@ export default class API {
return await API.request(hashSaveDogLocation, 'POST', dataRequest);
}
// Button Icons
static async saveButtonIcons(buttonIcons, formFilters, comment) {
let dataRequest = {};
dataRequest[flagFormFilters] = DOM.convertForm2JSON(formFilters);
dataRequest[flagButtonIcon] = buttonIcons;
dataRequest[flagComment] = comment;
return await API.request(hashSaveDogButtonIcon, 'POST', dataRequest);
}
// Command Button Links
static async saveCommandButtonLinks(links, formFilters, comment) {
let dataRequest = {};
dataRequest[flagFormFilters] = DOM.convertForm2JSON(formFilters);
dataRequest[flagCommandButtonLink] = links;
dataRequest[flagComment] = comment;
return await API.request(hashSaveDogCommandButtonLink, 'POST', dataRequest);
}
}

12
static/js/pages/base.js
View File

@@ -82,6 +82,9 @@ export default class BasePage {
this.hookupButtonsNavDogCommands();
this.hookupButtonsNavDogDogCommandLinks();
this.hookupButtonsNavDogDogs();
this.hookupButtonsNavDogLocations();
this.hookupButtonsNavDogButtonIcons();
this.hookupButtonsNavDogCommandButtonLinks();
}
hookupEventHandler(eventType, selector, callback) {
Events.initialiseEventHandler(selector, flagInitialised, (element) => {
@@ -142,6 +145,15 @@ export default class BasePage {
hookupButtonsNavDogDogs() {
this.hookupButtonsNav('.' + flagNavDogDogs, hashPageDogDogs);
}
hookupButtonsNavDogLocations() {
this.hookupButtonsNav('.' + flagNavDogLocations, hashPageDogLocations);
}
hookupButtonsNavDogButtonIcons() {
this.hookupButtonsNav('.' + flagNavDogButtonIcons, hashPageDogButtonIcons);
}
hookupButtonsNavDogCommandButtonLinks() {
this.hookupButtonsNav('.' + flagNavDogCommandButtonLinks, hashPageDogCommandButtonLinks);
}
hookupLogos() {
this.hookupEventHandler("click", "." + flagImageLogo + "," + "." + flagLogo, (event, element) => {

2
static/js/pages/base_table.js
View File

@@ -591,7 +591,7 @@ export default class TableBasePage extends BasePage {
ddlHookup(cellSelector + ' select.' + fieldFlag);
}
hookupTableCellDdls(ddlSelector, changeHandler = (event, element) => { this.handleChangeNestedElementCellTable(event, element); }) {
this.hookupEventHandler("change", ddlSelector, (event, element) => { changeHandler(event, element); });
this.hookupChangeHandlerTableCells(ddlSelector, (event, element) => { changeHandler(event, element); });
}
handleClickTableCellDdlPreview(event, div, fieldFlag, optionObjectList, cellSelector = null, ddlHookup = (cellSelector) => { this.hookupTableCellDdls(cellSelector); }) {
if (Validation.isEmpty(cellSelector)) cellSelector = idTableMain + ' > tbody > tr > td.' + fieldFlag;

85
static/js/pages/dog/button_icons.js Normal file
View File

@@ -0,0 +1,85 @@
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 PageDogButtonIcons extends TableBasePage {
static hash = hashPageDogButtonIcons;
static attrIdRowObject = attrIdButtonIcon;
callSaveTableContent = API.saveButtonIcons;
constructor(router) {
super(router);
this.dogMixin = new DogTableMixinPage(this);
}
initialize() {
this.sharedInitialize();
}
hookupFilters() {
this.sharedHookupFilters();
this.hookupFilterActive();
}
loadRowTable(rowJson) {
if (rowJson == null) return;
if (_verbose) { Utils.consoleLogIfNotProductionEnvironment("applying data row: ", rowJson); }
}
getJsonRow(row) {
if (row == null) return;
let inputName = row.querySelector('td.' + flagName + ' .' + flagName);
let buttonActive = row.querySelector('td.' + flagActive + ' .' + flagActive);
let jsonRow = {};
jsonRow[attrIdButtonIcon] = row.getAttribute(attrIdButtonIcon);
jsonRow[flagImage] = this.getIdImageRow(row);
jsonRow[flagName] = DOM.getElementAttributeValueCurrent(inputName);
jsonRow[flagActive] = buttonActive.classList.contains(flagDelete);
console.log("jsonRow");
console.log(jsonRow);
return jsonRow;
}
getIdImageRow(row) {
let elementImage = row.querySelector('td.' + flagImage + ' .' + flagImage);
return DOM.getElementAttributeValueCurrent(elementImage);
}
initialiseRowNew(tbody, row) {
}
postInitialiseRowNewCallback(tbody) {
let newRows = tbody.querySelectorAll('tr.' + flagRowNew);
let newestRow = newRows[0];
let clickableElementsSelector = [
'td.' + flagImage + ' div.' + flagImage
].join('');
newestRow.querySelectorAll(clickableElementsSelector).forEach((clickableElement) => {
clickableElement.click();
});
}
hookupTableMain() {
super.hookupTableMain();
this.hookupFieldsImage();
this.hookupFieldsNameTable();
this.hookupFieldsActive();
}
hookupFieldsImage() {
this.hookupTableCellDdlPreviews(
flagImage
, Utils.getListFromDict(buttonicons) // .sort((a, b) => a[flagName].localeCompare(b[flagName]))
);
}
leave() {
super.leave();
}
}

122
static/js/pages/dog/command_button_links.js Normal file
View File

@@ -0,0 +1,122 @@
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 PageDogCommandButtonLinks extends TableBasePage {
static hash = hashPageDogCommandButtonLinks;
static attrIdRowObject = attrIdCommandButtonLink;
callSaveTableContent = API.saveCommandButtonLinks;
constructor(router) {
super(router);
this.dogMixin = new DogTableMixinPage(this);
}
initialize() {
this.sharedInitialize();
}
hookupFilters() {
this.sharedHookupFilters();
this.hookupFilterCommandCategory();
this.hookupFilterCommand();
this.hookupFilterButtonShape();
this.hookupFilterColour();
this.hookupFilterButtonIcon();
this.hookupFilterLocation();
this.hookupFilterActive();
}
hookupFilterButtonShape() {
this.hookupFilter(attrIdButtonShape);
}
hookupFilterColour() {
this.hookupFilter(attrIdColour);
}
hookupFilterButtonIcon() {
this.hookupFilter(attrIdButtonIcon);
}
hookupFilterLocation() {
this.hookupFilter(attrIdLocation);
}
loadRowTable(rowJson) {
if (rowJson == null) return;
if (_verbose) { Utils.consoleLogIfNotProductionEnvironment("applying data row: ", rowJson); }
}
getJsonRow(row) {
if (row == null) return;
let inputHandSignalDescription = row.querySelector('td.' + flagHandSignalDescription + ' textarea');
let inputNotes = row.querySelector('td.' + flagNotes + ' textarea');
let buttonActive = row.querySelector('td.' + flagActive + ' .' + flagActive);
let jsonRow = {};
jsonRow[attrIdCommandButtonLink] = row.getAttribute(attrIdCommandButtonLink);
jsonRow[attrIdDog] = this.getIdDogRow(row);
jsonRow[attrIdCommand] = this.getIdCommandRow(row);
jsonRow[flagHandSignalDescription] = DOM.getElementAttributeValueCurrent(inputHandSignalDescription);
jsonRow[flagNotes] = DOM.getElementAttributeValueCurrent(inputNotes);
jsonRow[flagActive] = buttonActive.classList.contains(flagDelete);
return jsonRow;
}
initialiseRowNew(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.hookupFieldsCommandCategory();
this.hookupFieldsCommand();
this.hookupFieldsButtonShape();
this.hookupFieldsColour();
this.hookupFieldsButtonIcon();
this.hookupFieldsLocation();
this.hookupFieldsActive();
}
hookupFieldsButtonShape() {
this.hookupTableCellDdlPreviews(
flagButtonShape
, Utils.getListFromDict(filterButtonShapes) // .sort((a, b) => a[flagName].localeCompare(b[flagName]))
);
}
hookupFieldsColour() {
this.hookupTableCellDdlPreviews(
flagColour
, Utils.getListFromDict(filterColours) // .sort((a, b) => a[flagName].localeCompare(b[flagName]))
);
}
hookupFieldsButtonIcon() {
this.hookupTableCellDdlPreviews(
flagButtonIcon
, 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();
}
}

63
static/js/pages/dog/locations.js
View File

@@ -41,6 +41,10 @@ export default class PageDogLocations extends TableBasePage {
jsonRow[flagLocationParent] = this.getIdLocationParentRow(row);
jsonRow[flagName] = DOM.getElementAttributeValueCurrent(inputName);
jsonRow[flagActive] = buttonActive.classList.contains(flagDelete);
console.log("jsonRow");
console.log(jsonRow);
return jsonRow;
}
getIdLocationParentRow(row) {
@@ -54,9 +58,7 @@ export default class PageDogLocations extends TableBasePage {
let newRows = tbody.querySelectorAll('tr.' + flagRowNew);
let newestRow = newRows[0];
let clickableElementsSelector = [
'td.' + flagDog + ' div.' + flagDog
, ',td.' + flagLocationCategory + ' div.' + flagLocationCategory
, ',td.' + flagLocation + ' div.' + flagLocation
'td.' + flagLocationParent + ' div.' + flagLocationParent
].join('');
newestRow.querySelectorAll(clickableElementsSelector).forEach((clickableElement) => {
clickableElement.click();
@@ -65,17 +67,66 @@ export default class PageDogLocations extends TableBasePage {
hookupTableMain() {
super.hookupTableMain();
this.hookupFieldsLocationCategory();
this.hookupFieldsLocationParent();
this.hookupFieldsNameTable();
this.hookupFieldsActive();
}
hookupFieldsLocationParent() {
/*
this.hookupTableCellDdlPreviews(
flagLocationParent
, Utils.getListFromDict(locations)
, Utils.getListFromDict(locations).filter(location =>
(
location[attrIdLocation] == idLocationRow
|| idLocationRow < 1
)
) // .sort((a, b) => a[flagName].localeCompare(b[flagName]))
, null // cellSelector
, (cellSelector) => { this.hookupLocationParentDdls(cellSelector); }
,
);
fieldFlag
, optionList
, cellSelector = null
, ddlHookup = (ddlSelector) => { this.hookupTableCellDdls(ddlSelector); }
, changeHandler = (event, element) => { this.handleChangeNestedElementCellTable(event, element); }
) {
*/
let cellSelector = idTableMain + ' > tbody > tr > td.' + flagLocationParent;
this.hookupEventHandler("click", cellSelector + ' div.' + flagLocationParent, (event, div) => {
let row = DOM.getRowFromElement(div);
let idLocationRow = Number(row.getAttribute(attrIdLocation));
Utils.consoleLogIfNotProductionEnvironment({ idLocationRow });
this.handleClickTableCellDdlPreview(
event
, div
, flagLocationParent
, Utils.getListFromDict(locations).filter(location =>
(
location[attrIdLocation] != idLocationRow
|| idLocationRow < 1
)
) // .sort((a, b) => a[flagName].localeCompare(b[flagName]))
, cellSelector
, (ddlSelector) => { this.hookupTableCellDdls(
ddlSelector
, (event, element) => { this.handleChangeNestedElementCellTable(event, element); }
); }
);
});
this.hookupTableCellDdls(
cellSelector + ' select.' + flagLocationParent
, (event, element) => { this.handleChangeNestedElementCellTable(event, element); }
);
}
/*
hookupLocationParentDdls(ddlSelector) {
this.hookupChangeHandlerTableCells(ddlSelector, (event, element) => { this.handleChangeNestedElementCellTable(event, element); });
}
*/
leave() {
super.leave();
}

6
static/js/router.js
View File

@@ -9,6 +9,8 @@ import PageDogCommands from './pages/dog/commands.js';
import PageDogDogCommandLinks from './pages/dog/dog_command_links.js';
// import PageDogDogs from './pages/dog/dogs.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';
// Legal
import PageAccessibilityReport from './pages/legal/accessibility_report.js';
import PageAccessibilityStatement from './pages/legal/accessibility_statement.js';
@@ -38,6 +40,8 @@ export default class Router {
this.pages[hashPageDogDogCommandLinks] = { name: 'PageDogDogCommandLinks', module: PageDogDogCommandLinks };
// this.pages[hashPageDogDogs] = { name: 'PageDogDogs', module: PageDogDogs };
this.pages[hashPageDogLocations] = { name: 'PageDogLocations', module: PageDogLocations };
this.pages[hashPageDogButtonIcons] = { name: 'PageDogButtonIcons', module: PageDogButtonIcons };
this.pages[hashPageDogCommandButtonLinks] = { name: 'PageDogCommandButtonLinks', module: PageDogCommandButtonLinks };
// Legal
this.pages[hashPageAccessibilityStatement] = { name: 'PageAccessibilityStatement', module: PageAccessibilityStatement };
this.pages[hashPageDataRetentionSchedule] = { name: 'PageDataRetentionSchedule', module: PageRetentionSchedule };
@@ -58,6 +62,8 @@ export default class Router {
this.routes[hashPageDogDogCommandLinks] = (isPopState = false) => this.navigateToHash(hashPageDogDogCommandLinks, isPopState);
// this.routes[hashPageDogDogs] = (isPopState = false) => this.navigateToHash(hashPageDogDogs, isPopState);
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);
// Legal
this.routes[hashPageAccessibilityStatement] = (isPopState = false) => this.navigateToHash(hashPageAccessibilityStatement, isPopState);
this.routes[hashPageDataRetentionSchedule] = (isPopState = false) => this.navigateToHash(hashPageDataRetentionSchedule, isPopState);