' +
'
' +
('
' +
'
' +
cityssm.escapeHTML(feeCategory.feeCategory || "") +
"
" +
"") +
('
' +
'
' +
(feeCategory.fees!.length === 0
? '
' +
'" +
"
"
: "") +
('
' +
'" +
"
") +
('
' +
'" +
"
") +
('
' +
'
' +
'
' +
'" +
"
" +
'
' +
'" +
"
" +
"
" +
"
") +
"
") +
"
" +
"
";
if (feeCategory.fees!.length === 0) {
feeCategoryContainerElement.insertAdjacentHTML(
"beforeend",
'
' +
'
' +
'
There are no fees in the "' +
cityssm.escapeHTML(feeCategory.feeCategory || "") +
'" category.
' +
"
" +
"
"
);
} else {
for (const fee of feeCategory.fees!) {
const panelBlockElement = document.createElement("div");
panelBlockElement.className = "panel-block is-block container--fee";
panelBlockElement.dataset.feeId = fee.feeId!.toString();
panelBlockElement.innerHTML =
'
' +
('
' +
"
" +
'' +
cityssm.escapeHTML(fee.feeName || "") +
"
" +
"" +
cityssm.escapeHTML(fee.feeDescription || "").replace(/\n/g, "
") +
"" +
"
" +
'
' +
(fee.isRequired ? 'Required' : "") +
(fee.occupancyTypeId
? ' ' +
cityssm.escapeHTML(fee.occupancyType || "") +
""
: "") +
(fee.lotTypeId
? ' ' +
cityssm.escapeHTML(fee.lotType || "") +
""
: "") +
"
" +
"
") +
('
' +
'
' +
('
' +
(fee.feeFunction
? cityssm.escapeHTML(fee.feeFunction) +
"
" +
"Fee Function"
: "$" +
fee.feeAmount!.toFixed(2) +
"
" +
"Fee") +
"
") +
('
' +
(fee.taxPercentage
? fee.taxPercentage + "%"
: "$" + fee.taxAmount!.toFixed(2)) +
"
Tax" +
"
") +
('
' +
(fee.includeQuantity
? cityssm.escapeHTML(fee.quantityUnit || "") +
"
" +
"Quantity"
: "") +
"
") +
"
" +
"
") +
('
' +
'
' +
'
' +
'" +
"
" +
'
' +
'" +
"
" +
"
" +
"
") +
"
";
panelBlockElement.querySelector("a")!.addEventListener("click", openEditFee);
(
panelBlockElement.querySelector(".button--moveFeeUp") as HTMLButtonElement
).addEventListener("click", moveFeeUp);
(
panelBlockElement.querySelector(".button--moveFeeDown") as HTMLButtonElement
).addEventListener("click", moveFeeDown);
feeCategoryContainerElement.append(panelBlockElement);
}
}
if (feeCategory.fees!.length === 0) {
(
feeCategoryContainerElement.querySelector(
".button--deleteFeeCategory"
) as HTMLButtonElement
).addEventListener("click", confirmDeleteFeeCategory);
}
(
feeCategoryContainerElement.querySelector(
".button--editFeeCategory"
) as HTMLButtonElement
).addEventListener("click", openEditFeeCategory);
(
feeCategoryContainerElement.querySelector(".button--addFee") as HTMLButtonElement
).addEventListener("click", openAddFee);
(
feeCategoryContainerElement.querySelector(
".button--moveFeeCategoryUp"
) as HTMLButtonElement
).addEventListener("click", moveFeeCategoryUp);
(
feeCategoryContainerElement.querySelector(
".button--moveFeeCategoryDown"
) as HTMLButtonElement
).addEventListener("click", moveFeeCategoryDown);
feeCategoriesContainerElement.append(feeCategoryContainerElement);
}
};
/*
* Fee Categories
*/
(document.querySelector("#button--addFeeCategory") as HTMLButtonElement).addEventListener(
"click",
() => {
let addCloseModalFunction: () => void;
const doAddFeeCategory = (submitEvent: SubmitEvent) => {
submitEvent.preventDefault();
cityssm.postJSON(
los.urlPrefix + "/admin/doAddFeeCategory",
submitEvent.currentTarget,
(responseJSON: {
success: boolean;
errorMessage?: string;
feeCategories: recordTypes.FeeCategory[];
}) => {
if (responseJSON.success) {
feeCategories = responseJSON.feeCategories;
addCloseModalFunction();
renderFeeCategories();
} else {
bulmaJS.alert({
title: "Error Creating Fee Category",
message: responseJSON.errorMessage || "",
contextualColorName: "danger"
});
}
}
);
};
cityssm.openHtmlModal("adminFees-addFeeCategory", {
onshown: (modalElement, closeModalFunction) => {
bulmaJS.toggleHtmlClipped();
(
modalElement.querySelector(
"#feeCategoryAdd--feeCategory"
) as HTMLInputElement
).focus();
addCloseModalFunction = closeModalFunction;
modalElement
.querySelector("form")!
.addEventListener("submit", doAddFeeCategory);
},
onremoved: () => {
bulmaJS.toggleHtmlClipped();
}
});
}
);
const openEditFeeCategory = (clickEvent: Event) => {
const feeCategoryId = Number.parseInt(
(
(clickEvent.currentTarget as HTMLElement).closest(
".container--feeCategory"
) as HTMLElement
).dataset.feeCategoryId!,
10
);
const feeCategory = feeCategories.find((currentFeeCategory) => {
return currentFeeCategory.feeCategoryId === feeCategoryId;
})!;
let editCloseModalFunction: () => void;
const doUpdateFeeCategory = (submitEvent: SubmitEvent) => {
submitEvent.preventDefault();
cityssm.postJSON(
los.urlPrefix + "/admin/doUpdateFeeCategory",
submitEvent.currentTarget,
(responseJSON: {
success: boolean;
errorMessage?: string;
feeCategories: recordTypes.FeeCategory[];
}) => {
if (responseJSON.success) {
feeCategories = responseJSON.feeCategories;
editCloseModalFunction();
renderFeeCategories();
} else {
bulmaJS.alert({
title: "Error Updating Fee Category",
message: responseJSON.errorMessage || "",
contextualColorName: "danger"
});
}
}
);
};
cityssm.openHtmlModal("adminFees-editFeeCategory", {
onshow: (modalElement) => {
(
modalElement.querySelector(
"#feeCategoryEdit--feeCategoryId"
) as HTMLInputElement
).value = feeCategory.feeCategoryId!.toString();
(
modalElement.querySelector("#feeCategoryEdit--feeCategory") as HTMLInputElement
).value = feeCategory.feeCategory!;
},
onshown: (modalElement, closeModalFunction) => {
bulmaJS.toggleHtmlClipped();
editCloseModalFunction = closeModalFunction;
modalElement.querySelector("form")!.addEventListener("submit", doUpdateFeeCategory);
(
modalElement.querySelector("#feeCategoryEdit--feeCategory") as HTMLInputElement
).focus();
},
onremoved: () => {
bulmaJS.toggleHtmlClipped();
}
});
};
const confirmDeleteFeeCategory = (clickEvent: Event) => {
const feeCategoryId = Number.parseInt(
(
(clickEvent.currentTarget as HTMLElement).closest(
".container--feeCategory"
) as HTMLElement
).dataset.feeCategoryId!,
10
);
const doDelete = () => {
cityssm.postJSON(
los.urlPrefix + "/admin/doDeleteFeeCategory",
{
feeCategoryId
},
(responseJSON: {
success: boolean;
errorMessage?: string;
feeCategories?: recordTypes.FeeCategory[];
}) => {
if (responseJSON.success) {
feeCategories = responseJSON.feeCategories!;
renderFeeCategories();
} else {
bulmaJS.alert({
title: "Error Updating Fee Category",
message: responseJSON.errorMessage || "",
contextualColorName: "danger"
});
}
}
);
};
bulmaJS.confirm({
title: "Delete Fee Category?",
message: "Are you sure you want to delete this fee category?",
contextualColorName: "warning",
okButton: {
text: "Yes, Delete the Fee Category",
callbackFunction: doDelete
}
});
};
const moveFeeCategoryUp = (clickEvent: MouseEvent) => {
const feeCategoryId = Number.parseInt(
(
(clickEvent.currentTarget as HTMLElement).closest(
".container--feeCategory"
) as HTMLElement
).dataset.feeCategoryId!,
10
);
cityssm.postJSON(
los.urlPrefix + "/admin/doMoveFeeCategoryUp",
{
feeCategoryId,
moveToTop: clickEvent.shiftKey ? "1" : "0"
},
(responseJSON: {
success: boolean;
errorMessage?: string;
feeCategories?: recordTypes.FeeCategory[];
}) => {
if (responseJSON.success) {
feeCategories = responseJSON.feeCategories!;
renderFeeCategories();
} else {
bulmaJS.alert({
title: "Error Moving Fee Category",
message: responseJSON.errorMessage || "",
contextualColorName: "danger"
});
}
}
);
};
const moveFeeCategoryDown = (clickEvent: MouseEvent) => {
const feeCategoryId = Number.parseInt(
(
(clickEvent.currentTarget as HTMLElement).closest(
".container--feeCategory"
) as HTMLElement
).dataset.feeCategoryId!,
10
);
cityssm.postJSON(
los.urlPrefix + "/admin/doMoveFeeCategoryDown",
{
feeCategoryId,
moveToBottom: clickEvent.shiftKey ? "1" : "0"
},
(responseJSON: {
success: boolean;
errorMessage?: string;
feeCategories?: recordTypes.FeeCategory[];
}) => {
if (responseJSON.success) {
feeCategories = responseJSON.feeCategories!;
renderFeeCategories();
} else {
bulmaJS.alert({
title: "Error Moving Fee Category",
message: responseJSON.errorMessage || "",
contextualColorName: "danger"
});
}
}
);
};
/*
* Fees
*/
const openAddFee = (clickEvent: Event) => {
const feeCategoryId = Number.parseInt(
(
(clickEvent.currentTarget as HTMLElement).closest(
".container--feeCategory"
) as HTMLElement
).dataset.feeCategoryId!,
10
);
let addCloseModalFunction: () => void;
const doAddFee = (submitEvent: SubmitEvent) => {
submitEvent.preventDefault();
cityssm.postJSON(
los.urlPrefix + "/admin/doAddFee",
submitEvent.currentTarget,
(responseJSON: {
success: boolean;
errorMessage?: string;
feeCategories: recordTypes.FeeCategory[];
}) => {
if (responseJSON.success) {
feeCategories = responseJSON.feeCategories;
addCloseModalFunction();
renderFeeCategories();
} else {
bulmaJS.alert({
title: "Error Adding Fee",
message: responseJSON.errorMessage || "",
contextualColorName: "danger"
});
}
}
);
};
cityssm.openHtmlModal("adminFees-addFee", {
onshow: (modalElement) => {
const feeCategoryElement = modalElement.querySelector(
"#feeAdd--feeCategoryId"
) as HTMLSelectElement;
for (const feeCategory of feeCategories) {
const optionElement = document.createElement("option");
optionElement.value = feeCategory.feeCategoryId!.toString();
optionElement.textContent = feeCategory.feeCategory!;
if (feeCategory.feeCategoryId === feeCategoryId) {
optionElement.selected = true;
}
feeCategoryElement.append(optionElement);
}
const occupancyTypeElement = modalElement.querySelector(
"#feeAdd--occupancyTypeId"
) as HTMLSelectElement;
for (const occupancyType of exports.occupancyTypes as recordTypes.OccupancyType[]) {
const optionElement = document.createElement("option");
optionElement.value = occupancyType.occupancyTypeId.toString();
optionElement.textContent = occupancyType.occupancyType;
occupancyTypeElement.append(optionElement);
}
const lotTypeElement = modalElement.querySelector(
"#feeAdd--lotTypeId"
) as HTMLSelectElement;
for (const lotType of exports.lotTypes as recordTypes.LotType[]) {
const optionElement = document.createElement("option");
optionElement.value = lotType.lotTypeId.toString();
optionElement.textContent = lotType.lotType;
lotTypeElement.append(optionElement);
}
(modalElement.querySelector("#feeAdd--taxPercentage") as HTMLInputElement).value = (
exports.taxPercentageDefault as number
).toString();
los.populateAliases(modalElement);
},
onshown: (modalElement, closeModalFunction) => {
bulmaJS.toggleHtmlClipped();
addCloseModalFunction = closeModalFunction;
modalElement.querySelector("form")!.addEventListener("submit", doAddFee);
(modalElement.querySelector("#feeAdd--feeName") as HTMLInputElement).focus();
(
modalElement.querySelector("#feeAdd--feeFunction") as HTMLInputElement
).addEventListener("change", () => {
const feeAmountElement = modalElement.querySelector(
"#feeAdd--feeAmount"
) as HTMLInputElement;
const feeFunctionElement = modalElement.querySelector(
"#feeAdd--feeFunction"
) as HTMLSelectElement;
if (feeFunctionElement.value === "") {
feeFunctionElement.closest(".select")!.classList.remove("is-success");
feeAmountElement.classList.add("is-success");
feeAmountElement.disabled = false;
} else {
feeFunctionElement.closest(".select")!.classList.add("is-success");
feeAmountElement.classList.remove("is-success");
feeAmountElement.disabled = true;
}
});
(
modalElement.querySelector("#feeAdd--taxPercentage") as HTMLInputElement
).addEventListener("keyup", () => {
const taxAmountElement = modalElement.querySelector(
"#feeAdd--taxAmount"
) as HTMLInputElement;
const taxPercentageElement = modalElement.querySelector(
"#feeAdd--taxPercentage"
) as HTMLInputElement;
if (taxPercentageElement.value === "") {
taxPercentageElement.classList.remove("is-success");
taxAmountElement.classList.add("is-success");
taxAmountElement.disabled = false;
} else {
taxPercentageElement.classList.add("is-success");
taxAmountElement.classList.remove("is-success");
taxAmountElement.disabled = true;
}
});
(
modalElement.querySelector("#feeAdd--includeQuantity") as HTMLSelectElement
).addEventListener("change", () => {
(
modalElement.querySelector("#feeAdd--quantityUnit") as HTMLInputElement
).disabled =
(
modalElement.querySelector(
"#feeAdd--includeQuantity"
) as HTMLSelectElement
).value === "";
});
},
onremoved: () => {
bulmaJS.toggleHtmlClipped();
}
});
};
const openEditFee = (clickEvent: Event) => {
clickEvent.preventDefault();
const feeContainerElement = (clickEvent.currentTarget as HTMLElement).closest(
".container--fee"
) as HTMLElement;
const feeId = Number.parseInt(feeContainerElement.dataset.feeId!, 10);
const feeCategoryId = Number.parseInt(
(feeContainerElement.closest(".container--feeCategory") as HTMLElement).dataset
.feeCategoryId!
);
const feeCategory = feeCategories.find((currentFeeCategory) => {
return currentFeeCategory.feeCategoryId === feeCategoryId;
})!;
const fee = feeCategory.fees!.find((currentFee) => {
return currentFee.feeId === feeId;
})!;
let editCloseModalFunction: () => void;
let editModalElement: HTMLElement;
const doUpdateFee = (submitEvent: SubmitEvent) => {
submitEvent.preventDefault();
cityssm.postJSON(
los.urlPrefix + "/admin/doUpdateFee",
submitEvent.currentTarget,
(responseJSON: {
success: boolean;
errorMessage?: string;
feeCategories?: recordTypes.FeeCategory[];
}) => {
if (responseJSON.success) {
feeCategories = responseJSON.feeCategories!;
editCloseModalFunction();
renderFeeCategories();
} else {
bulmaJS.alert({
title: "Error Updating Fee",
message: responseJSON.errorMessage || "",
contextualColorName: "danger"
});
}
}
);
};
const confirmDeleteFee = (clickEvent: Event) => {
clickEvent.preventDefault();
const doDelete = () => {
cityssm.postJSON(
los.urlPrefix + "/admin/doDeleteFee",
{
feeId
},
(responseJSON: {
success: boolean;
errorMessage?: string;
feeCategories?: recordTypes.FeeCategory[];
}) => {
if (responseJSON.success) {
feeCategories = responseJSON.feeCategories!;
editCloseModalFunction();
renderFeeCategories();
} else {
bulmaJS.alert({
title: "Error Deleting Fee",
message: responseJSON.errorMessage || "",
contextualColorName: "danger"
});
}
}
);
};
bulmaJS.confirm({
title: "Delete Fee?",
message: "Are you sure you want to delete this fee?",
contextualColorName: "warning",
okButton: {
text: "Yes, Delete the Fee",
callbackFunction: doDelete
}
});
};
const toggleFeeFields = () => {
const feeAmountElement = editModalElement.querySelector(
"#feeEdit--feeAmount"
) as HTMLInputElement;
const feeFunctionElement = editModalElement.querySelector(
"#feeEdit--feeFunction"
) as HTMLSelectElement;
if (feeFunctionElement.value === "") {
feeFunctionElement.closest(".select")!.classList.remove("is-success");
feeAmountElement.classList.add("is-success");
feeAmountElement.disabled = false;
} else {
feeFunctionElement.closest(".select")!.classList.add("is-success");
feeAmountElement.classList.remove("is-success");
feeAmountElement.disabled = true;
}
};
const toggleTaxFields = () => {
const taxAmountElement = editModalElement.querySelector(
"#feeEdit--taxAmount"
) as HTMLInputElement;
const taxPercentageElement = editModalElement.querySelector(
"#feeEdit--taxPercentage"
) as HTMLInputElement;
if (taxPercentageElement.value === "") {
taxPercentageElement.classList.remove("is-success");
taxAmountElement.classList.add("is-success");
taxAmountElement.disabled = false;
} else {
taxPercentageElement.classList.add("is-success");
taxAmountElement.classList.remove("is-success");
taxAmountElement.disabled = true;
}
};
const toggleQuantityFields = () => {
(
editModalElement.querySelector("#feeEdit--quantityUnit") as HTMLInputElement
).disabled =
(editModalElement.querySelector("#feeEdit--includeQuantity") as HTMLSelectElement)
.value === "";
};
cityssm.openHtmlModal("adminFees-editFee", {
onshow: (modalElement) => {
editModalElement = modalElement;
(modalElement.querySelector("#feeEdit--feeId") as HTMLInputElement).value =
fee.feeId!.toString();
const feeCategoryElement = modalElement.querySelector(
"#feeEdit--feeCategoryId"
) as HTMLSelectElement;
for (const feeCategory of feeCategories) {
const optionElement = document.createElement("option");
optionElement.value = feeCategory.feeCategoryId!.toString();
optionElement.textContent = feeCategory.feeCategory!;
if (feeCategory.feeCategoryId === feeCategoryId) {
optionElement.selected = true;
}
feeCategoryElement.append(optionElement);
}
(modalElement.querySelector("#feeEdit--feeName") as HTMLInputElement).value =
fee.feeName!;
(
modalElement.querySelector("#feeEdit--feeDescription") as HTMLTextAreaElement
).value = fee.feeDescription!;
const occupancyTypeElement = modalElement.querySelector(
"#feeEdit--occupancyTypeId"
) as HTMLSelectElement;
for (const occupancyType of exports.occupancyTypes as recordTypes.OccupancyType[]) {
const optionElement = document.createElement("option");
optionElement.value = occupancyType.occupancyTypeId.toString();
optionElement.textContent = occupancyType.occupancyType;
if (occupancyType.occupancyTypeId === fee.occupancyTypeId) {
optionElement.selected = true;
}
occupancyTypeElement.append(optionElement);
}
const lotTypeElement = modalElement.querySelector(
"#feeEdit--lotTypeId"
) as HTMLSelectElement;
for (const lotType of exports.lotTypes as recordTypes.LotType[]) {
const optionElement = document.createElement("option");
optionElement.value = lotType.lotTypeId.toString();
optionElement.textContent = lotType.lotType;
if (lotType.lotTypeId === fee.lotTypeId) {
optionElement.selected = true;
}
lotTypeElement.append(optionElement);
}
(modalElement.querySelector("#feeEdit--feeAmount") as HTMLInputElement).value =
fee.feeAmount ? fee.feeAmount.toFixed(2) : "";
(
modalElement.querySelector("#feeEdit--feeFunction") as HTMLSelectElement
).addEventListener("change", toggleFeeFields);
toggleFeeFields();
(modalElement.querySelector("#feeEdit--taxAmount") as HTMLInputElement).value =
fee.taxAmount ? fee.taxAmount.toFixed(2) : "";
const taxPercentageElement = modalElement.querySelector(
"#feeEdit--taxPercentage"
) as HTMLInputElement;
taxPercentageElement.value = fee.taxPercentage ? fee.taxPercentage.toString() : "";
taxPercentageElement.addEventListener("keyup", toggleTaxFields);
toggleTaxFields();
const includeQuantityElement = modalElement.querySelector(
"#feeEdit--includeQuantity"
) as HTMLSelectElement;
if (fee.includeQuantity) {
includeQuantityElement.value = "1";
}
includeQuantityElement.addEventListener("change", toggleQuantityFields);
(modalElement.querySelector("#feeEdit--quantityUnit") as HTMLInputElement).value =
fee.quantityUnit || "";
toggleQuantityFields();
if (fee.isRequired) {
(
modalElement.querySelector("#feeEdit--isRequired") as HTMLSelectElement
).value = "1";
}
los.populateAliases(modalElement);
},
onshown: (modalElement, closeModalFunction) => {
bulmaJS.toggleHtmlClipped();
editCloseModalFunction = closeModalFunction;
modalElement.querySelector("form")!.addEventListener("submit", doUpdateFee);
bulmaJS.init(modalElement);
(
modalElement.querySelector(".button--deleteFee") as HTMLButtonElement
).addEventListener("click", confirmDeleteFee);
},
onremoved: () => {
bulmaJS.toggleHtmlClipped();
}
});
};
const moveFeeUp = (clickEvent: MouseEvent) => {
const feeContainerElement = (clickEvent.currentTarget as HTMLElement).closest(
".container--fee"
) as HTMLElement;
const feeId = Number.parseInt(feeContainerElement.dataset.feeId!, 10);
cityssm.postJSON(
los.urlPrefix + "/admin/doMoveFeeUp",
{
feeId,
moveToTop: clickEvent.shiftKey ? "1" : "0"
},
(responseJSON: {
success: boolean;
errorMessage?: string;
feeCategories?: recordTypes.FeeCategory[];
}) => {
if (responseJSON.success) {
feeCategories = responseJSON.feeCategories!;
renderFeeCategories();
} else {
bulmaJS.alert({
title: "Error Moving Fee",
message: responseJSON.errorMessage || "",
contextualColorName: "danger"
});
}
}
);
};
const moveFeeDown = (clickEvent: MouseEvent) => {
const feeContainerElement = (clickEvent.currentTarget as HTMLElement).closest(
".container--fee"
) as HTMLElement;
const feeId = Number.parseInt(feeContainerElement.dataset.feeId!, 10);
cityssm.postJSON(
los.urlPrefix + "/admin/doMoveFeeDown",
{
feeId,
moveToBottom: clickEvent.shiftKey ? "1" : "0"
},
(responseJSON: {
success: boolean;
errorMessage?: string;
feeCategories?: recordTypes.FeeCategory[];
}) => {
if (responseJSON.success) {
feeCategories = responseJSON.feeCategories!;
renderFeeCategories();
} else {
bulmaJS.alert({
title: "Error Moving Fee",
message: responseJSON.errorMessage || "",
contextualColorName: "danger"
});
}
}
);
};
/*
* Initialize
*/
renderFeeCategories();
})();