1109 lines
42 KiB
TypeScript
1109 lines
42 KiB
TypeScript
/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
|
|
|
|
import type * as globalTypes from "../types/globalTypes";
|
|
import type * as recordTypes from "../types/recordTypes";
|
|
|
|
import type { cityssmGlobal } from "@cityssm/bulma-webapp-js/src/types";
|
|
|
|
import type { BulmaJS } from "@cityssm/bulma-js/types";
|
|
|
|
declare const cityssm: cityssmGlobal;
|
|
declare const bulmaJS: BulmaJS;
|
|
|
|
(() => {
|
|
const los = exports.los as globalTypes.LOS;
|
|
|
|
const occupancyTypesContainerElement = document.querySelector(
|
|
"#container--occupancyTypes"
|
|
) as HTMLElement;
|
|
const occupancyTypePrintsContainerElement = document.querySelector(
|
|
"#container--occupancyTypePrints"
|
|
) as HTMLElement;
|
|
|
|
let occupancyTypes: recordTypes.OccupancyType[] = exports.occupancyTypes;
|
|
delete exports.occupancyTypes;
|
|
|
|
let allOccupancyTypeFields: recordTypes.OccupancyTypeField[] = exports.allOccupancyTypeFields;
|
|
delete exports.allOccupancyTypeFields;
|
|
|
|
const expandedOccupancyTypes = new Set<number>();
|
|
|
|
function toggleOccupancyTypeFields(clickEvent: Event): void {
|
|
const toggleButtonElement = clickEvent.currentTarget as HTMLButtonElement;
|
|
|
|
const occupancyTypeElement = toggleButtonElement.closest(
|
|
".container--occupancyType"
|
|
) as HTMLElement;
|
|
|
|
const occupancyTypeId = Number.parseInt(occupancyTypeElement.dataset.occupancyTypeId!, 10);
|
|
|
|
if (expandedOccupancyTypes.has(occupancyTypeId)) {
|
|
expandedOccupancyTypes.delete(occupancyTypeId);
|
|
} else {
|
|
expandedOccupancyTypes.add(occupancyTypeId);
|
|
}
|
|
|
|
toggleButtonElement.innerHTML = expandedOccupancyTypes.has(occupancyTypeId)
|
|
? '<i class="fas fa-fw fa-minus" aria-hidden="true"></i>'
|
|
: '<i class="fas fa-fw fa-plus" aria-hidden="true"></i>';
|
|
|
|
const panelBlockElements = occupancyTypeElement.querySelectorAll(".panel-block");
|
|
|
|
for (const panelBlockElement of panelBlockElements) {
|
|
panelBlockElement.classList.toggle("is-hidden");
|
|
}
|
|
}
|
|
|
|
function occupancyTypeResponseHandler(responseJSON: {
|
|
success: boolean;
|
|
errorMessage?: string;
|
|
occupancyTypes?: recordTypes.OccupancyType[];
|
|
allOccupancyTypeFields?: recordTypes.OccupancyTypeField[];
|
|
}) {
|
|
if (responseJSON.success) {
|
|
occupancyTypes = responseJSON.occupancyTypes!;
|
|
allOccupancyTypeFields = responseJSON.allOccupancyTypeFields!;
|
|
renderOccupancyTypes();
|
|
} else {
|
|
bulmaJS.alert({
|
|
title: "Error Updating " + exports.aliases.occupancy + " Type",
|
|
message: responseJSON.errorMessage || "",
|
|
contextualColorName: "danger"
|
|
});
|
|
}
|
|
}
|
|
|
|
function deleteOccupancyType(clickEvent: Event) {
|
|
const occupancyTypeId = Number.parseInt(
|
|
(
|
|
(clickEvent.currentTarget as HTMLElement).closest(
|
|
".container--occupancyType"
|
|
) as HTMLElement
|
|
).dataset.occupancyTypeId!,
|
|
10
|
|
);
|
|
|
|
function doDelete(): void {
|
|
cityssm.postJSON(
|
|
los.urlPrefix + "/admin/doDeleteOccupancyType",
|
|
{
|
|
occupancyTypeId
|
|
},
|
|
occupancyTypeResponseHandler
|
|
);
|
|
}
|
|
|
|
bulmaJS.confirm({
|
|
title: `Delete ${exports.aliases.occupancy} Type`,
|
|
message: `Are you sure you want to delete this ${exports.aliases.occupancy.toLowerCase()} type?`,
|
|
contextualColorName: "warning",
|
|
okButton: {
|
|
text: `Yes, Delete ${exports.aliases.occupancy} Type`,
|
|
callbackFunction: doDelete
|
|
}
|
|
});
|
|
}
|
|
|
|
function openEditOccupancyType(clickEvent: Event): void {
|
|
const occupancyTypeId = Number.parseInt(
|
|
(
|
|
(clickEvent.currentTarget as HTMLElement).closest(
|
|
".container--occupancyType"
|
|
) as HTMLElement
|
|
).dataset.occupancyTypeId!,
|
|
10
|
|
);
|
|
|
|
const occupancyType = occupancyTypes.find((currentOccupancyType) => {
|
|
return occupancyTypeId === currentOccupancyType.occupancyTypeId;
|
|
})!;
|
|
|
|
let editCloseModalFunction: () => void;
|
|
|
|
function doEdit(submitEvent: SubmitEvent): void {
|
|
submitEvent.preventDefault();
|
|
|
|
cityssm.postJSON(
|
|
los.urlPrefix + "/admin/doUpdateOccupancyType",
|
|
submitEvent.currentTarget,
|
|
(responseJSON: {
|
|
success: boolean;
|
|
errorMessage?: string;
|
|
occupancyTypes?: recordTypes.OccupancyType[];
|
|
allOccupancyTypeFields?: recordTypes.OccupancyTypeField[];
|
|
}) => {
|
|
occupancyTypeResponseHandler(responseJSON);
|
|
if (responseJSON.success) {
|
|
editCloseModalFunction();
|
|
}
|
|
}
|
|
);
|
|
}
|
|
|
|
cityssm.openHtmlModal("adminOccupancyTypes-editOccupancyType", {
|
|
onshow(modalElement): void {
|
|
los.populateAliases(modalElement);
|
|
|
|
(
|
|
modalElement.querySelector(
|
|
"#occupancyTypeEdit--occupancyTypeId"
|
|
) as HTMLInputElement
|
|
).value = occupancyTypeId.toString();
|
|
|
|
(
|
|
modalElement.querySelector(
|
|
"#occupancyTypeEdit--occupancyType"
|
|
) as HTMLInputElement
|
|
).value = occupancyType.occupancyType;
|
|
},
|
|
onshown(modalElement, closeModalFunction) {
|
|
editCloseModalFunction = closeModalFunction;
|
|
|
|
(
|
|
modalElement.querySelector(
|
|
"#occupancyTypeEdit--occupancyType"
|
|
) as HTMLInputElement
|
|
).focus();
|
|
|
|
modalElement.querySelector("form")!.addEventListener("submit", doEdit);
|
|
|
|
bulmaJS.toggleHtmlClipped();
|
|
},
|
|
onremoved() {
|
|
bulmaJS.toggleHtmlClipped();
|
|
}
|
|
});
|
|
}
|
|
|
|
function openAddOccupancyTypeField(clickEvent: Event) {
|
|
const occupancyTypeId = Number.parseInt(
|
|
(
|
|
(clickEvent.currentTarget as HTMLElement).closest(
|
|
".container--occupancyType"
|
|
) as HTMLElement
|
|
).dataset.occupancyTypeId!,
|
|
10
|
|
);
|
|
|
|
let addCloseModalFunction: () => void;
|
|
|
|
function doAdd(submitEvent: SubmitEvent) {
|
|
submitEvent.preventDefault();
|
|
|
|
cityssm.postJSON(
|
|
los.urlPrefix + "/admin/doAddOccupancyTypeField",
|
|
submitEvent.currentTarget,
|
|
(responseJSON: {
|
|
success: boolean;
|
|
errorMessage?: string;
|
|
occupancyTypes?: recordTypes.OccupancyType[];
|
|
allOccupancyTypeFields?: recordTypes.OccupancyTypeField[];
|
|
occupancyTypeFieldId?: number;
|
|
}) => {
|
|
expandedOccupancyTypes.add(occupancyTypeId);
|
|
occupancyTypeResponseHandler(responseJSON);
|
|
|
|
if (responseJSON.success) {
|
|
addCloseModalFunction();
|
|
openEditOccupancyTypeField(
|
|
occupancyTypeId,
|
|
responseJSON.occupancyTypeFieldId!
|
|
);
|
|
}
|
|
}
|
|
);
|
|
}
|
|
|
|
cityssm.openHtmlModal("adminOccupancyTypes-addOccupancyTypeField", {
|
|
onshow(modalElement) {
|
|
los.populateAliases(modalElement);
|
|
|
|
if (occupancyTypeId) {
|
|
(
|
|
modalElement.querySelector(
|
|
"#occupancyTypeFieldAdd--occupancyTypeId"
|
|
) as HTMLInputElement
|
|
).value = occupancyTypeId.toString();
|
|
}
|
|
},
|
|
onshown(modalElement, closeModalFunction) {
|
|
addCloseModalFunction = closeModalFunction;
|
|
|
|
(
|
|
modalElement.querySelector(
|
|
"#occupancyTypeFieldAdd--occupancyTypeField"
|
|
) as HTMLInputElement
|
|
).focus();
|
|
|
|
modalElement.querySelector("form")!.addEventListener("submit", doAdd);
|
|
|
|
bulmaJS.toggleHtmlClipped();
|
|
},
|
|
onremoved() {
|
|
bulmaJS.toggleHtmlClipped();
|
|
}
|
|
});
|
|
}
|
|
|
|
function moveOccupancyTypeUp(clickEvent: MouseEvent) {
|
|
clickEvent.preventDefault();
|
|
|
|
const occupancyTypeId = (
|
|
(clickEvent.currentTarget as HTMLElement).closest(
|
|
".container--occupancyType"
|
|
) as HTMLElement
|
|
).dataset.occupancyTypeId;
|
|
|
|
cityssm.postJSON(
|
|
los.urlPrefix + "/admin/doMoveOccupancyTypeUp",
|
|
{
|
|
occupancyTypeId,
|
|
moveToTop: clickEvent.shiftKey ? "1" : "0"
|
|
},
|
|
occupancyTypeResponseHandler
|
|
);
|
|
}
|
|
|
|
function moveOccupancyTypeDown(clickEvent: MouseEvent) {
|
|
clickEvent.preventDefault();
|
|
|
|
const occupancyTypeId = (
|
|
(clickEvent.currentTarget as HTMLElement).closest(
|
|
".container--occupancyType"
|
|
) as HTMLElement
|
|
).dataset.occupancyTypeId;
|
|
|
|
cityssm.postJSON(
|
|
los.urlPrefix + "/admin/doMoveOccupancyTypeDown",
|
|
{
|
|
occupancyTypeId,
|
|
moveToBottom: clickEvent.shiftKey ? "1" : "0"
|
|
},
|
|
occupancyTypeResponseHandler
|
|
);
|
|
}
|
|
|
|
function openEditOccupancyTypeField(occupancyTypeId: number, occupancyTypeFieldId: number) {
|
|
let occupancyType: recordTypes.OccupancyType | undefined;
|
|
|
|
if (occupancyTypeId) {
|
|
occupancyType = occupancyTypes.find((currentOccupancyType) => {
|
|
return currentOccupancyType.occupancyTypeId === occupancyTypeId;
|
|
});
|
|
}
|
|
|
|
const occupancyTypeField = (
|
|
occupancyType ? occupancyType.occupancyTypeFields! : allOccupancyTypeFields
|
|
).find((currentOccupancyTypeField) => {
|
|
return currentOccupancyTypeField.occupancyTypeFieldId === occupancyTypeFieldId;
|
|
})!;
|
|
|
|
let minimumLengthElement: HTMLInputElement;
|
|
let maximumLengthElement: HTMLInputElement;
|
|
let patternElement: HTMLInputElement;
|
|
let occupancyTypeFieldValuesElement: HTMLTextAreaElement;
|
|
|
|
let editCloseModalFunction: () => void;
|
|
|
|
function updateMaximumLengthMin(): void {
|
|
maximumLengthElement.min = minimumLengthElement.value;
|
|
}
|
|
|
|
function toggleInputFields(): void {
|
|
if (occupancyTypeFieldValuesElement.value === "") {
|
|
minimumLengthElement.disabled = false;
|
|
maximumLengthElement.disabled = false;
|
|
patternElement.disabled = false;
|
|
} else {
|
|
minimumLengthElement.disabled = true;
|
|
maximumLengthElement.disabled = true;
|
|
patternElement.disabled = true;
|
|
}
|
|
}
|
|
|
|
function doUpdate(submitEvent: SubmitEvent): void {
|
|
submitEvent.preventDefault();
|
|
|
|
cityssm.postJSON(
|
|
los.urlPrefix + "/admin/doUpdateOccupancyTypeField",
|
|
submitEvent.currentTarget,
|
|
(responseJSON: {
|
|
success: boolean;
|
|
errorMessage?: string;
|
|
occupancyTypes?: recordTypes.OccupancyType[];
|
|
}) => {
|
|
occupancyTypeResponseHandler(responseJSON);
|
|
if (responseJSON.success) {
|
|
editCloseModalFunction();
|
|
}
|
|
}
|
|
);
|
|
}
|
|
|
|
function doDelete() {
|
|
cityssm.postJSON(
|
|
los.urlPrefix + "/admin/doDeleteOccupancyTypeField",
|
|
{
|
|
occupancyTypeFieldId
|
|
},
|
|
(responseJSON: {
|
|
success: boolean;
|
|
errorMessage?: string;
|
|
occupancyTypes?: recordTypes.OccupancyType[];
|
|
}) => {
|
|
occupancyTypeResponseHandler(responseJSON);
|
|
if (responseJSON.success) {
|
|
editCloseModalFunction();
|
|
}
|
|
}
|
|
);
|
|
}
|
|
|
|
function confirmDoDelete() {
|
|
bulmaJS.confirm({
|
|
title: "Delete Field",
|
|
message:
|
|
"Are you sure you want to delete this field? Note that historical records that make use of this field will not be affected.",
|
|
contextualColorName: "warning",
|
|
okButton: {
|
|
text: "Yes, Delete Field",
|
|
callbackFunction: doDelete
|
|
}
|
|
});
|
|
}
|
|
|
|
cityssm.openHtmlModal("adminOccupancyTypes-editOccupancyTypeField", {
|
|
onshow: (modalElement) => {
|
|
los.populateAliases(modalElement);
|
|
|
|
(
|
|
modalElement.querySelector(
|
|
"#occupancyTypeFieldEdit--occupancyTypeFieldId"
|
|
) as HTMLInputElement
|
|
).value = occupancyTypeField.occupancyTypeFieldId!.toString();
|
|
|
|
(
|
|
modalElement.querySelector(
|
|
"#occupancyTypeFieldEdit--occupancyTypeField"
|
|
) as HTMLInputElement
|
|
).value = occupancyTypeField.occupancyTypeField!;
|
|
|
|
(
|
|
modalElement.querySelector(
|
|
"#occupancyTypeFieldEdit--isRequired"
|
|
) as HTMLSelectElement
|
|
).value = occupancyTypeField.isRequired ? "1" : "0";
|
|
|
|
minimumLengthElement = modalElement.querySelector(
|
|
"#occupancyTypeFieldEdit--minimumLength"
|
|
) as HTMLInputElement;
|
|
|
|
minimumLengthElement.value = occupancyTypeField.minimumLength!.toString();
|
|
|
|
maximumLengthElement = modalElement.querySelector(
|
|
"#occupancyTypeFieldEdit--maximumLength"
|
|
) as HTMLInputElement;
|
|
|
|
maximumLengthElement.value = occupancyTypeField.maximumLength!.toString();
|
|
|
|
patternElement = modalElement.querySelector(
|
|
"#occupancyTypeFieldEdit--pattern"
|
|
) as HTMLInputElement;
|
|
|
|
patternElement.value = occupancyTypeField.pattern!;
|
|
|
|
occupancyTypeFieldValuesElement = modalElement.querySelector(
|
|
"#occupancyTypeFieldEdit--occupancyTypeFieldValues"
|
|
) as HTMLTextAreaElement;
|
|
|
|
occupancyTypeFieldValuesElement.value =
|
|
occupancyTypeField.occupancyTypeFieldValues!;
|
|
|
|
toggleInputFields();
|
|
},
|
|
onshown: (modalElement, closeModalFunction) => {
|
|
editCloseModalFunction = closeModalFunction;
|
|
|
|
bulmaJS.init(modalElement);
|
|
bulmaJS.toggleHtmlClipped();
|
|
cityssm.enableNavBlocker();
|
|
|
|
modalElement.querySelector("form")!.addEventListener("submit", doUpdate);
|
|
|
|
minimumLengthElement.addEventListener("keyup", updateMaximumLengthMin);
|
|
updateMaximumLengthMin();
|
|
|
|
occupancyTypeFieldValuesElement.addEventListener("keyup", toggleInputFields);
|
|
|
|
(
|
|
modalElement.querySelector(
|
|
"#button--deleteOccupancyTypeField"
|
|
) as HTMLButtonElement
|
|
).addEventListener("click", confirmDoDelete);
|
|
},
|
|
onremoved: () => {
|
|
bulmaJS.toggleHtmlClipped();
|
|
cityssm.disableNavBlocker();
|
|
}
|
|
});
|
|
}
|
|
|
|
function openEditOccupancyTypeFieldByClick(clickEvent: Event) {
|
|
clickEvent.preventDefault();
|
|
|
|
const occupancyTypeFieldId = Number.parseInt(
|
|
(
|
|
(clickEvent.currentTarget as HTMLElement).closest(
|
|
".container--occupancyTypeField"
|
|
) as HTMLElement
|
|
).dataset.occupancyTypeFieldId!,
|
|
10
|
|
);
|
|
|
|
const occupancyTypeId = Number.parseInt(
|
|
(
|
|
(clickEvent.currentTarget as HTMLElement).closest(
|
|
".container--occupancyType"
|
|
) as HTMLElement
|
|
).dataset.occupancyTypeId!,
|
|
10
|
|
);
|
|
|
|
openEditOccupancyTypeField(occupancyTypeId, occupancyTypeFieldId);
|
|
}
|
|
|
|
function moveOccupancyTypeFieldUp(clickEvent: MouseEvent) {
|
|
clickEvent.preventDefault();
|
|
|
|
const occupancyTypeFieldId = (
|
|
(clickEvent.currentTarget as HTMLElement).closest(
|
|
".container--occupancyTypeField"
|
|
) as HTMLElement
|
|
).dataset.occupancyTypeFieldId;
|
|
|
|
cityssm.postJSON(
|
|
los.urlPrefix + "/admin/doMoveOccupancyTypeFieldUp",
|
|
{
|
|
occupancyTypeFieldId,
|
|
moveToTop: clickEvent.shiftKey ? "1" : "0"
|
|
},
|
|
occupancyTypeResponseHandler
|
|
);
|
|
}
|
|
|
|
function moveOccupancyTypeFieldDown(clickEvent: MouseEvent) {
|
|
clickEvent.preventDefault();
|
|
|
|
const occupancyTypeFieldId = (
|
|
(clickEvent.currentTarget as HTMLElement).closest(
|
|
".container--occupancyTypeField"
|
|
) as HTMLElement
|
|
).dataset.occupancyTypeFieldId;
|
|
|
|
cityssm.postJSON(
|
|
los.urlPrefix + "/admin/doMoveOccupancyTypeFieldDown",
|
|
{
|
|
occupancyTypeFieldId,
|
|
moveToBottom: clickEvent.shiftKey ? "1" : "0"
|
|
},
|
|
occupancyTypeResponseHandler
|
|
);
|
|
}
|
|
|
|
function renderOccupancyTypeFields(
|
|
panelElement: HTMLElement,
|
|
occupancyTypeId: number | undefined,
|
|
occupancyTypeFields: recordTypes.OccupancyTypeField[]
|
|
) {
|
|
if (occupancyTypeFields.length === 0) {
|
|
panelElement.insertAdjacentHTML(
|
|
"beforeend",
|
|
'<div class="panel-block is-block' +
|
|
(!occupancyTypeId || expandedOccupancyTypes.has(occupancyTypeId)
|
|
? ""
|
|
: " is-hidden") +
|
|
'">' +
|
|
'<div class="message is-info">' +
|
|
'<p class="message-body">There are no additional fields.</p>' +
|
|
"</div>" +
|
|
"</div>"
|
|
);
|
|
} else {
|
|
for (const occupancyTypeField of occupancyTypeFields) {
|
|
const panelBlockElement = document.createElement("div");
|
|
panelBlockElement.className = "panel-block is-block container--occupancyTypeField";
|
|
|
|
if (occupancyTypeId && !expandedOccupancyTypes.has(occupancyTypeId)) {
|
|
panelBlockElement.classList.add("is-hidden");
|
|
}
|
|
|
|
panelBlockElement.dataset.occupancyTypeFieldId =
|
|
occupancyTypeField.occupancyTypeFieldId!.toString();
|
|
|
|
panelBlockElement.innerHTML =
|
|
'<div class="level is-mobile">' +
|
|
'<div class="level-left">' +
|
|
('<div class="level-item">' +
|
|
'<a class="has-text-weight-bold button--editOccupancyTypeField" href="#">' +
|
|
cityssm.escapeHTML(occupancyTypeField.occupancyTypeField || "") +
|
|
"</a>" +
|
|
"</div>") +
|
|
"</div>" +
|
|
'<div class="level-right">' +
|
|
('<div class="level-item">' +
|
|
'<div class="field has-addons">' +
|
|
'<div class="control">' +
|
|
'<button class="button is-small button--moveOccupancyTypeFieldUp" data-tooltip="Move Up" type="button" aria-label="Move Up">' +
|
|
'<i class="fas fa-arrow-up" aria-hidden="true"></i>' +
|
|
"</button>" +
|
|
"</div>" +
|
|
'<div class="control">' +
|
|
'<button class="button is-small button--moveOccupancyTypeFieldDown" data-tooltip="Move Down" type="button" aria-label="Move Down">' +
|
|
'<i class="fas fa-arrow-down" aria-hidden="true"></i>' +
|
|
"</button>" +
|
|
"</div>" +
|
|
"</div>" +
|
|
"</div>") +
|
|
"</div>" +
|
|
"</div>";
|
|
|
|
(
|
|
panelBlockElement.querySelector(
|
|
".button--editOccupancyTypeField"
|
|
) as HTMLButtonElement
|
|
).addEventListener("click", openEditOccupancyTypeFieldByClick);
|
|
|
|
(
|
|
panelBlockElement.querySelector(
|
|
".button--moveOccupancyTypeFieldUp"
|
|
) as HTMLButtonElement
|
|
).addEventListener("click", moveOccupancyTypeFieldUp);
|
|
|
|
(
|
|
panelBlockElement.querySelector(
|
|
".button--moveOccupancyTypeFieldDown"
|
|
) as HTMLButtonElement
|
|
).addEventListener("click", moveOccupancyTypeFieldDown);
|
|
|
|
panelElement.append(panelBlockElement);
|
|
}
|
|
}
|
|
}
|
|
|
|
function openAddOccupancyTypePrint(clickEvent: MouseEvent): void {
|
|
const occupancyTypeId = (
|
|
(clickEvent.currentTarget as HTMLElement).closest(
|
|
".container--occupancyTypePrintList"
|
|
) as HTMLElement
|
|
).dataset.occupancyTypeId!;
|
|
|
|
let closeAddModalFunction: () => void;
|
|
|
|
function doAdd(formEvent: SubmitEvent) {
|
|
formEvent.preventDefault();
|
|
|
|
cityssm.postJSON(
|
|
los.urlPrefix + "/admin/doAddOccupancyTypePrint",
|
|
formEvent.currentTarget,
|
|
(responseJSON: {
|
|
success: boolean;
|
|
errorMessage?: string;
|
|
occupancyTypes?: recordTypes.OccupancyType[];
|
|
allOccupancyTypeFields?: recordTypes.OccupancyTypeField[];
|
|
}) => {
|
|
if (responseJSON.success) {
|
|
closeAddModalFunction();
|
|
}
|
|
|
|
occupancyTypeResponseHandler(responseJSON);
|
|
}
|
|
);
|
|
}
|
|
|
|
cityssm.openHtmlModal("adminOccupancyTypes-addOccupancyTypePrint", {
|
|
onshow(modalElement) {
|
|
los.populateAliases(modalElement);
|
|
|
|
(
|
|
modalElement.querySelector(
|
|
"#occupancyTypePrintAdd--occupancyTypeId"
|
|
) as HTMLInputElement
|
|
).value = occupancyTypeId;
|
|
|
|
const printSelectElement = modalElement.querySelector(
|
|
"#occupancyTypePrintAdd--printEJS"
|
|
) as HTMLSelectElement;
|
|
|
|
for (const [printEJS, printTitle] of Object.entries(
|
|
exports.occupancyTypePrintTitles
|
|
)) {
|
|
const optionElement = document.createElement("option");
|
|
optionElement.value = printEJS;
|
|
optionElement.textContent = printTitle as string;
|
|
printSelectElement.append(optionElement);
|
|
}
|
|
},
|
|
onshown(modalElement, closeModalFunction) {
|
|
closeAddModalFunction = closeModalFunction;
|
|
|
|
modalElement.querySelector("form")?.addEventListener("submit", doAdd);
|
|
}
|
|
});
|
|
}
|
|
|
|
function moveOccupancyTypePrintUp(clickEvent: MouseEvent): void {
|
|
clickEvent.preventDefault();
|
|
|
|
const printEJS = (
|
|
(clickEvent.currentTarget as HTMLElement).closest(
|
|
".container--occupancyTypePrint"
|
|
) as HTMLElement
|
|
).dataset.printEJS;
|
|
|
|
const occupancyTypeId = (
|
|
(clickEvent.currentTarget as HTMLElement).closest(
|
|
".container--occupancyTypePrintList"
|
|
) as HTMLElement
|
|
).dataset.occupancyTypeId;
|
|
|
|
cityssm.postJSON(
|
|
los.urlPrefix + "/admin/doMoveOccupancyTypePrintUp",
|
|
{
|
|
occupancyTypeId,
|
|
printEJS,
|
|
moveToTop: clickEvent.shiftKey ? "1" : "0"
|
|
},
|
|
occupancyTypeResponseHandler
|
|
);
|
|
}
|
|
|
|
function moveOccupancyTypePrintDown(clickEvent: MouseEvent): void {
|
|
clickEvent.preventDefault();
|
|
|
|
const printEJS = (
|
|
(clickEvent.currentTarget as HTMLElement).closest(
|
|
".container--occupancyTypePrint"
|
|
) as HTMLElement
|
|
).dataset.printEJS;
|
|
|
|
const occupancyTypeId = (
|
|
(clickEvent.currentTarget as HTMLElement).closest(
|
|
".container--occupancyTypePrintList"
|
|
) as HTMLElement
|
|
).dataset.occupancyTypeId;
|
|
|
|
cityssm.postJSON(
|
|
los.urlPrefix + "/admin/doMoveOccupancyTypePrintDown",
|
|
{
|
|
occupancyTypeId,
|
|
printEJS,
|
|
moveToBottom: clickEvent.shiftKey ? "1" : "0"
|
|
},
|
|
occupancyTypeResponseHandler
|
|
);
|
|
}
|
|
|
|
function deleteOccupancyTypePrint(clickEvent: MouseEvent): void {
|
|
clickEvent.preventDefault();
|
|
|
|
const printEJS = (
|
|
(clickEvent.currentTarget as HTMLElement).closest(
|
|
".container--occupancyTypePrint"
|
|
) as HTMLElement
|
|
).dataset.printEJS;
|
|
|
|
const occupancyTypeId = (
|
|
(clickEvent.currentTarget as HTMLElement).closest(
|
|
".container--occupancyTypePrintList"
|
|
) as HTMLElement
|
|
).dataset.occupancyTypeId;
|
|
|
|
function doDelete() {
|
|
cityssm.postJSON(
|
|
los.urlPrefix + "/admin/doDeleteOccupancyTypePrint",
|
|
{
|
|
occupancyTypeId,
|
|
printEJS
|
|
},
|
|
occupancyTypeResponseHandler
|
|
);
|
|
}
|
|
|
|
bulmaJS.confirm({
|
|
title: "Delete Print",
|
|
message: "Are you sure you want to remove this print option?",
|
|
contextualColorName: "warning",
|
|
okButton: {
|
|
text: "Yes, Remove Print",
|
|
callbackFunction: doDelete
|
|
}
|
|
});
|
|
}
|
|
|
|
function renderOccupancyTypePrints(
|
|
panelElement: HTMLElement,
|
|
occupancyTypeId: number,
|
|
occupancyTypePrints: string[]
|
|
): void {
|
|
if (occupancyTypePrints.length === 0) {
|
|
panelElement.insertAdjacentHTML(
|
|
"beforeend",
|
|
`<div class="panel-block is-block">
|
|
<div class="message is-info">
|
|
<p class="message-body">There are no prints associated with this record.</p>
|
|
</div>
|
|
</div>`
|
|
);
|
|
} else {
|
|
for (const printEJS of occupancyTypePrints) {
|
|
const panelBlockElement = document.createElement("div");
|
|
panelBlockElement.className = "panel-block is-block container--occupancyTypePrint";
|
|
|
|
panelBlockElement.dataset.printEJS = printEJS;
|
|
|
|
const printTitle =
|
|
printEJS === "*"
|
|
? "(All Available Prints)"
|
|
: (exports.occupancyTypePrintTitles[printEJS] as string);
|
|
|
|
let printIconClass = "fa-star";
|
|
|
|
if (printEJS.startsWith("pdf/")) {
|
|
printIconClass = "fa-file-pdf";
|
|
} else if (printEJS.startsWith("screen/")) {
|
|
printIconClass = "fa-file";
|
|
}
|
|
|
|
panelBlockElement.innerHTML =
|
|
'<div class="level is-mobile">' +
|
|
'<div class="level-left">' +
|
|
('<div class="level-item">' +
|
|
'<i class="fas fa-fw ' +
|
|
printIconClass +
|
|
'" aria-hidden="true"></i>' +
|
|
"</div>") +
|
|
('<div class="level-item">' +
|
|
cityssm.escapeHTML(printTitle || printEJS) +
|
|
"</div>") +
|
|
"</div>" +
|
|
'<div class="level-right">' +
|
|
('<div class="level-item">' +
|
|
'<div class="field has-addons">' +
|
|
'<div class="control">' +
|
|
'<button class="button is-small button--moveOccupancyTypePrintUp" data-tooltip="Move Up" type="button" aria-label="Move Up">' +
|
|
'<i class="fas fa-arrow-up" aria-hidden="true"></i>' +
|
|
"</button>" +
|
|
"</div>" +
|
|
'<div class="control">' +
|
|
'<button class="button is-small button--moveOccupancyTypePrintDown" data-tooltip="Move Down" type="button" aria-label="Move Down">' +
|
|
'<i class="fas fa-arrow-down" aria-hidden="true"></i>' +
|
|
"</button>" +
|
|
"</div>" +
|
|
"</div>" +
|
|
"</div>") +
|
|
('<div class="level-item">' +
|
|
'<button class="button is-small is-danger button--deleteOccupancyTypePrint" data-tooltip="Delete" type="button" aria-label="Delete Print">' +
|
|
'<i class="fas fa-trash" aria-hidden="true"></i>' +
|
|
"</button>" +
|
|
"</div>" +
|
|
"</div>") +
|
|
"</div>" +
|
|
"</div>";
|
|
|
|
(
|
|
panelBlockElement.querySelector(
|
|
".button--moveOccupancyTypePrintUp"
|
|
) as HTMLButtonElement
|
|
).addEventListener("click", moveOccupancyTypePrintUp);
|
|
|
|
(
|
|
panelBlockElement.querySelector(
|
|
".button--moveOccupancyTypePrintDown"
|
|
) as HTMLButtonElement
|
|
).addEventListener("click", moveOccupancyTypePrintDown);
|
|
|
|
(
|
|
panelBlockElement.querySelector(
|
|
".button--deleteOccupancyTypePrint"
|
|
) as HTMLButtonElement
|
|
).addEventListener("click", deleteOccupancyTypePrint);
|
|
|
|
panelElement.append(panelBlockElement);
|
|
}
|
|
}
|
|
}
|
|
|
|
function renderOccupancyTypes(): void {
|
|
occupancyTypesContainerElement.innerHTML =
|
|
'<div class="panel container--occupancyType" id="container--allOccupancyTypeFields" data-occupancy-type-id="">' +
|
|
'<div class="panel-heading">' +
|
|
('<div class="level is-mobile">' +
|
|
('<div class="level-left">' +
|
|
'<div class="level-item">' +
|
|
('<h2 class="title is-4">(All ' +
|
|
cityssm.escapeHTML(exports.aliases.occupancy) +
|
|
" Types)</h2>") +
|
|
"</div>" +
|
|
"</div>") +
|
|
('<div class="level-right">' +
|
|
('<div class="level-item">' +
|
|
'<button class="button is-success is-small button--addOccupancyTypeField" type="button">' +
|
|
'<span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>' +
|
|
"<span>Add Field</span>" +
|
|
"</button>" +
|
|
"</div>") +
|
|
"</div>") +
|
|
"</div>") +
|
|
"</div>" +
|
|
"</div>";
|
|
|
|
occupancyTypePrintsContainerElement.innerHTML = "";
|
|
|
|
renderOccupancyTypeFields(
|
|
occupancyTypesContainerElement.querySelector(
|
|
"#container--allOccupancyTypeFields"
|
|
) as HTMLElement,
|
|
undefined,
|
|
allOccupancyTypeFields
|
|
);
|
|
|
|
(
|
|
occupancyTypesContainerElement.querySelector(
|
|
".button--addOccupancyTypeField"
|
|
) as HTMLButtonElement
|
|
).addEventListener("click", openAddOccupancyTypeField);
|
|
|
|
if (occupancyTypes.length === 0) {
|
|
occupancyTypesContainerElement.insertAdjacentHTML(
|
|
"afterbegin",
|
|
`<div class="message is-warning>
|
|
<p class="message-body">There are no active ${los.escapedAliases.occupancy} types.</p>
|
|
</div>`
|
|
);
|
|
|
|
occupancyTypePrintsContainerElement.insertAdjacentHTML(
|
|
"afterbegin",
|
|
`<div class="message is-warning>
|
|
<p class="message-body">There are no active ${los.escapedAliases.occupancy} types.</p>
|
|
</div>`
|
|
);
|
|
|
|
return;
|
|
}
|
|
|
|
for (const occupancyType of occupancyTypes) {
|
|
// Types and Fields
|
|
{
|
|
const occupancyTypeContainer = document.createElement("div");
|
|
|
|
occupancyTypeContainer.className = "panel container--occupancyType";
|
|
|
|
occupancyTypeContainer.dataset.occupancyTypeId =
|
|
occupancyType.occupancyTypeId.toString();
|
|
|
|
occupancyTypeContainer.innerHTML =
|
|
'<div class="panel-heading">' +
|
|
'<div class="level is-mobile">' +
|
|
('<div class="level-left">' +
|
|
'<div class="level-item">' +
|
|
'<button class="button is-small button--toggleOccupancyTypeFields" data-tooltip="Toggle Fields" type="button" aria-label="Toggle Fields">' +
|
|
(expandedOccupancyTypes.has(occupancyType.occupancyTypeId)
|
|
? '<i class="fas fa-fw fa-minus" aria-hidden="true"></i>'
|
|
: '<i class="fas fa-fw fa-plus" aria-hidden="true"></i>') +
|
|
"</button>" +
|
|
"</div>" +
|
|
'<div class="level-item">' +
|
|
'<h2 class="title is-4">' +
|
|
cityssm.escapeHTML(occupancyType.occupancyType) +
|
|
"</h2>" +
|
|
"</div>" +
|
|
"</div>") +
|
|
('<div class="level-right">' +
|
|
('<div class="level-item">' +
|
|
'<button class="button is-danger is-small button--deleteOccupancyType" type="button">' +
|
|
'<span class="icon is-small"><i class="fas fa-trash" aria-hidden="true"></i></span>' +
|
|
"<span>Delete</span>" +
|
|
"</button>" +
|
|
"</div>") +
|
|
('<div class="level-item">' +
|
|
'<button class="button is-primary is-small button--editOccupancyType" type="button">' +
|
|
'<span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' +
|
|
"<span>Edit " +
|
|
exports.aliases.occupancy +
|
|
" Type</span>" +
|
|
"</button>" +
|
|
"</div>") +
|
|
('<div class="level-item">' +
|
|
'<button class="button is-success is-small button--addOccupancyTypeField" type="button">' +
|
|
'<span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>' +
|
|
"<span>Add Field</span>" +
|
|
"</button>" +
|
|
"</div>") +
|
|
('<div class="level-item">' +
|
|
'<div class="field has-addons">' +
|
|
'<div class="control">' +
|
|
'<button class="button is-small button--moveOccupancyTypeUp" data-tooltip="Move Up" type="button" aria-label="Move Up">' +
|
|
'<i class="fas fa-arrow-up" aria-hidden="true"></i>' +
|
|
"</button>" +
|
|
"</div>" +
|
|
'<div class="control">' +
|
|
'<button class="button is-small button--moveOccupancyTypeDown" data-tooltip="Move Down" type="button" aria-label="Move Down">' +
|
|
'<i class="fas fa-arrow-down" aria-hidden="true"></i>' +
|
|
"</button>" +
|
|
"</div>" +
|
|
"</div>" +
|
|
"</div>") +
|
|
"</div>") +
|
|
"</div>" +
|
|
"</div>";
|
|
|
|
renderOccupancyTypeFields(
|
|
occupancyTypeContainer,
|
|
occupancyType.occupancyTypeId,
|
|
occupancyType.occupancyTypeFields!
|
|
);
|
|
|
|
(
|
|
occupancyTypeContainer.querySelector(
|
|
".button--toggleOccupancyTypeFields"
|
|
) as HTMLButtonElement
|
|
).addEventListener("click", toggleOccupancyTypeFields);
|
|
|
|
(
|
|
occupancyTypeContainer.querySelector(
|
|
".button--deleteOccupancyType"
|
|
) as HTMLButtonElement
|
|
).addEventListener("click", deleteOccupancyType);
|
|
|
|
(
|
|
occupancyTypeContainer.querySelector(
|
|
".button--editOccupancyType"
|
|
) as HTMLButtonElement
|
|
).addEventListener("click", openEditOccupancyType);
|
|
|
|
(
|
|
occupancyTypeContainer.querySelector(
|
|
".button--addOccupancyTypeField"
|
|
) as HTMLButtonElement
|
|
).addEventListener("click", openAddOccupancyTypeField);
|
|
|
|
(
|
|
occupancyTypeContainer.querySelector(
|
|
".button--moveOccupancyTypeUp"
|
|
) as HTMLButtonElement
|
|
).addEventListener("click", moveOccupancyTypeUp);
|
|
|
|
(
|
|
occupancyTypeContainer.querySelector(
|
|
".button--moveOccupancyTypeDown"
|
|
) as HTMLButtonElement
|
|
).addEventListener("click", moveOccupancyTypeDown);
|
|
|
|
occupancyTypesContainerElement.append(occupancyTypeContainer);
|
|
}
|
|
|
|
// Prints
|
|
{
|
|
const occupancyTypePrintContainer = document.createElement("div");
|
|
|
|
occupancyTypePrintContainer.className = "panel container--occupancyTypePrintList";
|
|
|
|
occupancyTypePrintContainer.dataset.occupancyTypeId =
|
|
occupancyType.occupancyTypeId.toString();
|
|
|
|
occupancyTypePrintContainer.innerHTML =
|
|
'<div class="panel-heading">' +
|
|
'<div class="level is-mobile">' +
|
|
('<div class="level-left">' +
|
|
'<div class="level-item">' +
|
|
'<h2 class="title is-4">' +
|
|
cityssm.escapeHTML(occupancyType.occupancyType) +
|
|
"</h2>" +
|
|
"</div>" +
|
|
"</div>") +
|
|
('<div class="level-right">' +
|
|
('<div class="level-item">' +
|
|
'<button class="button is-success is-small button--addOccupancyTypePrint" type="button">' +
|
|
'<span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>' +
|
|
"<span>Add Print</span>" +
|
|
"</button>" +
|
|
"</div>") +
|
|
"</div>") +
|
|
"</div>" +
|
|
"</div>";
|
|
|
|
renderOccupancyTypePrints(
|
|
occupancyTypePrintContainer,
|
|
occupancyType.occupancyTypeId,
|
|
occupancyType.occupancyTypePrints!
|
|
);
|
|
|
|
(
|
|
occupancyTypePrintContainer.querySelector(
|
|
".button--addOccupancyTypePrint"
|
|
) as HTMLButtonElement
|
|
).addEventListener("click", openAddOccupancyTypePrint);
|
|
|
|
occupancyTypePrintsContainerElement.append(occupancyTypePrintContainer);
|
|
}
|
|
}
|
|
}
|
|
|
|
(document.querySelector("#button--addOccupancyType") as HTMLButtonElement).addEventListener(
|
|
"click",
|
|
() => {
|
|
let addCloseModalFunction: () => void;
|
|
|
|
const doAdd = (submitEvent: SubmitEvent) => {
|
|
submitEvent.preventDefault();
|
|
|
|
cityssm.postJSON(
|
|
los.urlPrefix + "/admin/doAddOccupancyType",
|
|
submitEvent.currentTarget,
|
|
(responseJSON: {
|
|
success: boolean;
|
|
errorMessage?: string;
|
|
occupancyTypes?: recordTypes.OccupancyType[];
|
|
}) => {
|
|
if (responseJSON.success) {
|
|
addCloseModalFunction();
|
|
occupancyTypes = responseJSON.occupancyTypes!;
|
|
renderOccupancyTypes();
|
|
} else {
|
|
bulmaJS.alert({
|
|
title: "Error Adding " + exports.aliases.occupancy + " Type",
|
|
message: responseJSON.errorMessage || "",
|
|
contextualColorName: "danger"
|
|
});
|
|
}
|
|
}
|
|
);
|
|
};
|
|
|
|
cityssm.openHtmlModal("adminOccupancyTypes-addOccupancyType", {
|
|
onshow: (modalElement) => {
|
|
los.populateAliases(modalElement);
|
|
},
|
|
onshown: (modalElement, closeModalFunction) => {
|
|
addCloseModalFunction = closeModalFunction;
|
|
|
|
(
|
|
modalElement.querySelector(
|
|
"#occupancyTypeAdd--occupancyType"
|
|
) as HTMLInputElement
|
|
).focus();
|
|
|
|
modalElement.querySelector("form")!.addEventListener("submit", doAdd);
|
|
|
|
bulmaJS.toggleHtmlClipped();
|
|
},
|
|
onremoved: () => {
|
|
bulmaJS.toggleHtmlClipped();
|
|
}
|
|
});
|
|
}
|
|
);
|
|
|
|
renderOccupancyTypes();
|
|
})();
|