lot occupancy occupant management

handlers/lotOccupancies-post/doAddLotOccupancyOccupant.d.ts

@@ -0,0 +1,3 @@
+import type { RequestHandler } from "express";
+export declare const handler: RequestHandler;
+export default handler;

handlers/lotOccupancies-post/doAddLotOccupancyOccupant.js

@@ -0,0 +1,11 @@
+import { addLotOccupancyOccupant } from "../../helpers/lotOccupancyDB/addLotOccupancyOccupant.js";
+import { getLotOccupancyOccupants } from "../../helpers/lotOccupancyDB/getLotOccupancyOccupants.js";
+export const handler = async (request, response) => {
+    addLotOccupancyOccupant(request.body, request.session);
+    const lotOccupancyOccupants = getLotOccupancyOccupants(request.body.lotOccupancyId);
+    response.json({
+        success: true,
+        lotOccupancyOccupants
+    });
+};
+export default handler;

handlers/lotOccupancies-post/doAddLotOccupancyOccupant.ts

@@ -0,0 +1,27 @@
+import type {
+    RequestHandler
+} from "express";
+
+import {
+    addLotOccupancyOccupant
+} from "../../helpers/lotOccupancyDB/addLotOccupancyOccupant.js";
+
+import {
+    getLotOccupancyOccupants
+} from "../../helpers/lotOccupancyDB/getLotOccupancyOccupants.js";
+
+
+export const handler: RequestHandler = async (request, response) => {
+
+    addLotOccupancyOccupant(request.body, request.session);
+
+    const lotOccupancyOccupants = getLotOccupancyOccupants(request.body.lotOccupancyId);
+
+    response.json({
+        success: true,
+        lotOccupancyOccupants
+    });
+};
+
+
+export default handler;

handlers/lotOccupancies-post/doDeleteLotOccupancyOccupant.d.ts

@@ -0,0 +1,3 @@
+import type { RequestHandler } from "express";
+export declare const handler: RequestHandler;
+export default handler;

handlers/lotOccupancies-post/doDeleteLotOccupancyOccupant.js

@@ -0,0 +1,11 @@
+import { deleteLotOccupancyOccupant } from "../../helpers/lotOccupancyDB/deleteLotOccupancyOccupant.js";
+import { getLotOccupancyOccupants } from "../../helpers/lotOccupancyDB/getLotOccupancyOccupants.js";
+export const handler = async (request, response) => {
+    deleteLotOccupancyOccupant(request.body.lotOccupancyId, request.body.lotOccupantIndex, request.session);
+    const lotOccupancyOccupants = getLotOccupancyOccupants(request.body.lotOccupancyId);
+    response.json({
+        success: true,
+        lotOccupancyOccupants
+    });
+};
+export default handler;

handlers/lotOccupancies-post/doDeleteLotOccupancyOccupant.ts

@@ -0,0 +1,27 @@
+import type {
+    RequestHandler
+} from "express";
+
+import {
+    deleteLotOccupancyOccupant
+} from "../../helpers/lotOccupancyDB/deleteLotOccupancyOccupant.js";
+
+import {
+    getLotOccupancyOccupants
+} from "../../helpers/lotOccupancyDB/getLotOccupancyOccupants.js";
+
+
+export const handler: RequestHandler = async (request, response) => {
+
+    deleteLotOccupancyOccupant(request.body.lotOccupancyId, request.body.lotOccupantIndex, request.session);
+
+    const lotOccupancyOccupants = getLotOccupancyOccupants(request.body.lotOccupancyId);
+
+    response.json({
+        success: true,
+        lotOccupancyOccupants
+    });
+};
+
+
+export default handler;

handlers/lotOccupancies-post/doSearchLotOccupancies.ts

@@ -1,20 +1,24 @@
-import type { RequestHandler } from "express";
+import type {
+    RequestHandler
+} from "express";
 
-import { getLotOccupancies } from "../../helpers/lotOccupancyDB/getLotOccupancies.js";
+import {
+    getLotOccupancies
+} from "../../helpers/lotOccupancyDB/getLotOccupancies.js";
 
 
 export const handler: RequestHandler = async (request, response) => {
 
-  const result = getLotOccupancies(request.body, {
+    const result = getLotOccupancies(request.body, {
-    limit: request.body.limit,
+        limit: request.body.limit,
-    offset: request.body.offset,
+        offset: request.body.offset,
-    includeOccupants: true
+        includeOccupants: true
-  });
+    });
 
-  response.json({
+    response.json({
-    count: result.count,
+        count: result.count,
-    lotOccupancies: result.lotOccupancies
+        lotOccupancies: result.lotOccupancies
-  });
+    });
 };
 
 

handlers/lotOccupancies-post/doUpdateLotOccupancy.ts

@@ -1,16 +1,20 @@
-import type { RequestHandler } from "express";
+import type {
+    RequestHandler
+} from "express";
 
-import { updateLotOccupancy } from "../../helpers/lotOccupancyDB/updateLotOccupancy.js";
+import {
+    updateLotOccupancy
+} from "../../helpers/lotOccupancyDB/updateLotOccupancy.js";
 
 
 export const handler: RequestHandler = async (request, response) => {
 
-  const success = updateLotOccupancy(request.body, request.session);
+    const success = updateLotOccupancy(request.body, request.session);
 
-  response.json({
+    response.json({
-    success,
+        success,
-    lotOccupancyId: request.body.lotOccupancyId
+        lotOccupancyId: request.body.lotOccupancyId
-  });
+    });
 };
 
 

handlers/lotOccupancies-post/doUpdateLotOccupancyOccupant.d.ts

@@ -0,0 +1,3 @@
+import type { RequestHandler } from "express";
+export declare const handler: RequestHandler;
+export default handler;

handlers/lotOccupancies-post/doUpdateLotOccupancyOccupant.js

@@ -0,0 +1,11 @@
+import { updateLotOccupancyOccupant } from "../../helpers/lotOccupancyDB/updateLotOccupancyOccupant.js";
+import { getLotOccupancyOccupants } from "../../helpers/lotOccupancyDB/getLotOccupancyOccupants.js";
+export const handler = async (request, response) => {
+    updateLotOccupancyOccupant(request.body, request.session);
+    const lotOccupancyOccupants = getLotOccupancyOccupants(request.body.lotOccupancyId);
+    response.json({
+        success: true,
+        lotOccupancyOccupants
+    });
+};
+export default handler;

handlers/lotOccupancies-post/doUpdateLotOccupancyOccupant.ts

@@ -0,0 +1,27 @@
+import type {
+    RequestHandler
+} from "express";
+
+import {
+    updateLotOccupancyOccupant
+} from "../../helpers/lotOccupancyDB/updateLotOccupancyOccupant.js";
+
+import {
+    getLotOccupancyOccupants
+} from "../../helpers/lotOccupancyDB/getLotOccupancyOccupants.js";
+
+
+export const handler: RequestHandler = async (request, response) => {
+
+    updateLotOccupancyOccupant(request.body, request.session);
+
+    const lotOccupancyOccupants = getLotOccupancyOccupants(request.body.lotOccupancyId);
+
+    response.json({
+        success: true,
+        lotOccupancyOccupants
+    });
+};
+
+
+export default handler;

helpers/lotOccupancyDB/deleteLotOccupancyOccupant.d.ts

@@ -0,0 +1,3 @@
+import type * as recordTypes from "../../types/recordTypes";
+export declare const deleteLotOccupancyOccupant: (lotOccupancyId: number | string, lotOccupantIndex: number | string, requestSession: recordTypes.PartialSession) => boolean;
+export default deleteLotOccupancyOccupant;

helpers/lotOccupancyDB/deleteLotOccupancyOccupant.js

@@ -0,0 +1,16 @@
+import sqlite from "better-sqlite3";
+import { lotOccupancyDB as databasePath } from "../../data/databasePaths.js";
+export const deleteLotOccupancyOccupant = (lotOccupancyId, lotOccupantIndex, requestSession) => {
+    const database = sqlite(databasePath);
+    const rightNowMillis = Date.now();
+    const result = database
+        .prepare("update LotOccupancyOccupants" +
+        " set recordDelete_userName = ?," +
+        " recordDelete_timeMillis = ?" +
+        " where lotOccupancyId = ?" +
+        " and lotOccupantIndex = ?")
+        .run(requestSession.user.userName, rightNowMillis, lotOccupancyId, lotOccupantIndex);
+    database.close();
+    return (result.changes > 0);
+};
+export default deleteLotOccupancyOccupant;

helpers/lotOccupancyDB/deleteLotOccupancyOccupant.ts

@@ -0,0 +1,36 @@
+import sqlite from "better-sqlite3";
+
+import {
+    lotOccupancyDB as databasePath
+} from "../../data/databasePaths.js";
+
+import type * as recordTypes from "../../types/recordTypes";
+
+
+export const deleteLotOccupancyOccupant =
+    (lotOccupancyId: number | string,
+        lotOccupantIndex: number | string,
+        requestSession: recordTypes.PartialSession): boolean => {
+
+        const database = sqlite(databasePath);
+
+        const rightNowMillis = Date.now();
+
+        const result = database
+            .prepare("update LotOccupancyOccupants" +
+                " set recordDelete_userName = ?," +
+                " recordDelete_timeMillis = ?" +
+                " where lotOccupancyId = ?" +
+                " and lotOccupantIndex = ?")
+            .run(requestSession.user.userName,
+                rightNowMillis,
+                lotOccupancyId,
+                lotOccupantIndex);
+
+        database.close();
+
+        return (result.changes > 0);
+    };
+
+
+export default deleteLotOccupancyOccupant;

helpers/lotOccupancyDB/updateLotOccupancyOccupant.d.ts

@@ -0,0 +1,15 @@
+import type * as recordTypes from "../../types/recordTypes";
+interface UpdateLotOccupancyOccupantForm {
+    lotOccupancyId: string | number;
+    lotOccupantIndex: string | number;
+    lotOccupantTypeId: string | number;
+    occupantName: string;
+    occupantAddress1: string;
+    occupantAddress2: string;
+    occupantCity: string;
+    occupantProvince: string;
+    occupantPostalCode: string;
+    occupantPhoneNumber: string;
+}
+export declare const updateLotOccupancyOccupant: (lotOccupancyOccupantForm: UpdateLotOccupancyOccupantForm, requestSession: recordTypes.PartialSession) => boolean;
+export default updateLotOccupancyOccupant;

helpers/lotOccupancyDB/updateLotOccupancyOccupant.js

@@ -0,0 +1,25 @@
+import sqlite from "better-sqlite3";
+import { lotOccupancyDB as databasePath } from "../../data/databasePaths.js";
+export const updateLotOccupancyOccupant = (lotOccupancyOccupantForm, requestSession) => {
+    const database = sqlite(databasePath);
+    const rightNowMillis = Date.now();
+    const results = database
+        .prepare("update LotOccupancyOccupants" +
+        " set occupantName = ?," +
+        " occupantAddress1 = ?," +
+        " occupantAddress2 = ?," +
+        " occupantCity = ?," +
+        " occupantProvince = ?," +
+        " occupantPostalCode = ?," +
+        " occupantPhoneNumber = ?," +
+        " lotOccupantTypeId = ?," +
+        " recordUpdate_userName = ?," +
+        " recordUpdate_timeMillis = ?" +
+        " where recordDelete_timeMillis is null" +
+        " and lotOccupancyId = ?" +
+        " and lotOccupantIndex = ?")
+        .run(lotOccupancyOccupantForm.occupantName, lotOccupancyOccupantForm.occupantAddress1, lotOccupancyOccupantForm.occupantAddress2, lotOccupancyOccupantForm.occupantCity, lotOccupancyOccupantForm.occupantProvince, lotOccupancyOccupantForm.occupantPostalCode, lotOccupancyOccupantForm.occupantPhoneNumber, lotOccupancyOccupantForm.lotOccupantTypeId, requestSession.user.userName, rightNowMillis, lotOccupancyOccupantForm.lotOccupancyId, lotOccupancyOccupantForm.lotOccupantIndex);
+    database.close();
+    return results.changes > 0;
+};
+export default updateLotOccupancyOccupant;

helpers/lotOccupancyDB/updateLotOccupancyOccupant.ts

@@ -0,0 +1,65 @@
+import sqlite from "better-sqlite3";
+
+import {
+    lotOccupancyDB as databasePath
+} from "../../data/databasePaths.js";
+
+import type * as recordTypes from "../../types/recordTypes";
+
+
+interface UpdateLotOccupancyOccupantForm {
+    lotOccupancyId: string | number;
+    lotOccupantIndex: string | number;
+    lotOccupantTypeId: string | number;
+    occupantName: string;
+    occupantAddress1: string;
+    occupantAddress2: string;
+    occupantCity: string;
+    occupantProvince: string;
+    occupantPostalCode: string;
+    occupantPhoneNumber: string;
+}
+
+
+export const updateLotOccupancyOccupant =
+    (lotOccupancyOccupantForm: UpdateLotOccupancyOccupantForm, requestSession: recordTypes.PartialSession): boolean => {
+
+        const database = sqlite(databasePath);
+
+        const rightNowMillis = Date.now();
+
+        const results = database
+            .prepare("update LotOccupancyOccupants" +
+            " set occupantName = ?," +
+            " occupantAddress1 = ?," +
+            " occupantAddress2 = ?," +
+            " occupantCity = ?," +
+            " occupantProvince = ?," +
+            " occupantPostalCode = ?," +
+            " occupantPhoneNumber = ?," +
+            " lotOccupantTypeId = ?," +
+            " recordUpdate_userName = ?," +
+            " recordUpdate_timeMillis = ?" +
+            " where recordDelete_timeMillis is null" +
+            " and lotOccupancyId = ?" +
+            " and lotOccupantIndex = ?")
+            .run(lotOccupancyOccupantForm.occupantName,
+                lotOccupancyOccupantForm.occupantAddress1,
+                lotOccupancyOccupantForm.occupantAddress2,
+                lotOccupancyOccupantForm.occupantCity,
+                lotOccupancyOccupantForm.occupantProvince,
+                lotOccupancyOccupantForm.occupantPostalCode,
+                lotOccupancyOccupantForm.occupantPhoneNumber,
+                lotOccupancyOccupantForm.lotOccupantTypeId,
+                requestSession.user.userName,
+                rightNowMillis,
+                lotOccupancyOccupantForm.lotOccupancyId,
+                lotOccupancyOccupantForm.lotOccupantIndex);
+
+        database.close();
+
+        return results.changes > 0;
+    };
+
+
+export default updateLotOccupancyOccupant;

public-typescript/lotOccupancyEdit.js

@@ -158,6 +158,103 @@ Object.defineProperty(exports, "__esModule", { value: true });
     los.initializeUnlockFieldButtons(formElement);
     if (!isCreate) {
         let lotOccupancyOccupants = exports.lotOccupancyOccupants;
+        const openEditLotOccupancyOccupant = (clickEvent) => {
+            const lotOccupantIndex = Number.parseInt(clickEvent.currentTarget.closest("tr").dataset.lotOccupantIndex, 10);
+            const lotOccupancyOccupant = lotOccupancyOccupants.find((currentLotOccupancyOccupant) => {
+                return currentLotOccupancyOccupant.lotOccupantIndex === lotOccupantIndex;
+            });
+            let editFormElement;
+            let editCloseModalFunction;
+            const editOccupant = (submitEvent) => {
+                submitEvent.preventDefault();
+                cityssm.postJSON(urlPrefix + "/lotOccupancies/doUpdateLotOccupancyOccupant", editFormElement, (responseJSON) => {
+                    if (responseJSON.success) {
+                        lotOccupancyOccupants = responseJSON.lotOccupancyOccupants;
+                        editCloseModalFunction();
+                        renderLotOccupancyOccupants();
+                    }
+                    else {
+                        bulmaJS.alert({
+                            title: "Error Updating " + exports.aliases.occupant,
+                            message: responseJSON.errorMessage,
+                            contextualColorName: "danger"
+                        });
+                    }
+                });
+            };
+            cityssm.openHtmlModal("lotOccupancy-editOccupant", {
+                onshow: (modalElement) => {
+                    los.populateAliases(modalElement);
+                    modalElement.querySelector("#lotOccupancyOccupantEdit--lotOccupancyId").value = lotOccupancyId;
+                    modalElement.querySelector("#lotOccupancyOccupantEdit--lotOccupantIndex").value = lotOccupantIndex.toString();
+                    const lotOccupantTypeSelectElement = modalElement.querySelector("#lotOccupancyOccupantEdit--lotOccupantTypeId");
+                    let lotOccupantTypeSelected = false;
+                    for (const lotOccupantType of exports.lotOccupantTypes) {
+                        const optionElement = document.createElement("option");
+                        optionElement.value = lotOccupantType.lotOccupantTypeId.toString();
+                        optionElement.textContent = lotOccupantType.lotOccupantType;
+                        if (lotOccupantType.lotOccupantTypeId === lotOccupancyOccupant.lotOccupantTypeId) {
+                            optionElement.selected = true;
+                            lotOccupantTypeSelected = true;
+                        }
+                        lotOccupantTypeSelectElement.append(optionElement);
+                    }
+                    if (!lotOccupantTypeSelected) {
+                        const optionElement = document.createElement("option");
+                        optionElement.value = lotOccupancyOccupant.lotOccupantTypeId.toString();
+                        optionElement.textContent = lotOccupancyOccupant.lotOccupantType;
+                        optionElement.selected = true;
+                        lotOccupantTypeSelectElement.append(optionElement);
+                    }
+                    modalElement.querySelector("#lotOccupancyOccupantEdit--occupantName").value = lotOccupancyOccupant.occupantName;
+                    modalElement.querySelector("#lotOccupancyOccupantEdit--occupantAddress1").value = lotOccupancyOccupant.occupantAddress1;
+                    modalElement.querySelector("#lotOccupancyOccupantEdit--occupantAddress2").value = lotOccupancyOccupant.occupantAddress2;
+                    modalElement.querySelector("#lotOccupancyOccupantEdit--occupantCity").value = lotOccupancyOccupant.occupantCity;
+                    modalElement.querySelector("#lotOccupancyOccupantEdit--occupantProvince").value = lotOccupancyOccupant.occupantProvince;
+                    modalElement.querySelector("#lotOccupancyOccupantEdit--occupantPostalCode").value = lotOccupancyOccupant.occupantPostalCode;
+                    modalElement.querySelector("#lotOccupancyOccupantEdit--occupantPhoneNumber").value = lotOccupancyOccupant.occupantPhoneNumber;
+                },
+                onshown: (modalElement, closeModalFunction) => {
+                    bulmaJS.toggleHtmlClipped();
+                    editFormElement = modalElement.querySelector("form");
+                    editFormElement.addEventListener("submit", editOccupant);
+                    editCloseModalFunction = closeModalFunction;
+                },
+                onremoved: () => {
+                    bulmaJS.toggleHtmlClipped();
+                }
+            });
+        };
+        const deleteLotOccupancyOccupant = (clickEvent) => {
+            const lotOccupantIndex = clickEvent.currentTarget.closest("tr").dataset.lotOccupantIndex;
+            const doDelete = () => {
+                cityssm.postJSON(urlPrefix + "/lotOccupancies/doDeleteLotOccupancyOccupant", {
+                    lotOccupancyId,
+                    lotOccupantIndex
+                }, (responseJSON) => {
+                    if (responseJSON.success) {
+                        lotOccupancyOccupants = responseJSON.lotOccupancyOccupants;
+                        renderLotOccupancyOccupants();
+                    }
+                    else {
+                        bulmaJS.alert({
+                            title: "Error Removing " + exports.aliases.occupant,
+                            message: responseJSON.errorMessage,
+                            contextualColorName: "danger"
+                        });
+                    }
+                });
+            };
+            bulmaJS.confirm({
+                title: "Remove " + exports.aliases.occupant + "?",
+                message: "Are you sure you want to remove this " + exports.aliases.occupant.toLowerCase() + "?",
+                okButton: {
+                    text: "Yes, Remove " + exports.aliases.occupant,
+                    callbackFunction: doDelete
+                },
+                contextualColorName: "warning"
+            });
+        };
         const renderLotOccupancyOccupants = () => {
             const occupantsContainer = document.querySelector("#container--lotOccupancyOccupants");
             cityssm.clearElement(occupantsContainer);
@@ -200,16 +297,54 @@ Object.defineProperty(exports, "__esModule", { value: true });
                             "</button>") +
                         "</div>" +
                         "</td>");
+                tableRowElement.querySelector(".button--edit").addEventListener("click", openEditLotOccupancyOccupant);
+                tableRowElement.querySelector(".button--delete").addEventListener("click", deleteLotOccupancyOccupant);
                 tableElement.querySelector("tbody").append(tableRowElement);
             }
             occupantsContainer.append(tableElement);
         };
         document.querySelector("#button--addOccupant").addEventListener("click", () => {
+            let addFormElement;
+            let addCloseModalFunction;
+            const addOccupant = (submitEvent) => {
+                submitEvent.preventDefault();
+                cityssm.postJSON(urlPrefix + "/lotOccupancies/doAddLotOccupancyOccupant", addFormElement, (responseJSON) => {
+                    if (responseJSON.success) {
+                        lotOccupancyOccupants = responseJSON.lotOccupancyOccupants;
+                        addCloseModalFunction();
+                        renderLotOccupancyOccupants();
+                    }
+                    else {
+                        bulmaJS.alert({
+                            title: "Error Adding " + exports.aliases.occupant,
+                            message: responseJSON.errorMessage,
+                            contextualColorName: "danger"
+                        });
+                    }
+                });
+            };
             cityssm.openHtmlModal("lotOccupancy-addOccupant", {
                 onshow: (modalElement) => {
                     los.populateAliases(modalElement);
+                    modalElement.querySelector("#lotOccupancyOccupantAdd--lotOccupancyId").value = lotOccupancyId;
+                    const lotOccupantTypeSelectElement = modalElement.querySelector("#lotOccupancyOccupantAdd--lotOccupantTypeId");
+                    for (const lotOccupantType of exports.lotOccupantTypes) {
+                        const optionElement = document.createElement("option");
+                        optionElement.value = lotOccupantType.lotOccupantTypeId.toString();
+                        optionElement.textContent = lotOccupantType.lotOccupantType;
+                        lotOccupantTypeSelectElement.append(optionElement);
+                    }
                     modalElement.querySelector("#lotOccupancyOccupantAdd--occupantCity").value = exports.occupantCityDefault;
                     modalElement.querySelector("#lotOccupancyOccupantAdd--occupantProvince").value = exports.occupantProvinceDefault;
+                },
+                onshown: (modalElement, closeModalFunction) => {
+                    bulmaJS.toggleHtmlClipped();
+                    addFormElement = modalElement.querySelector("form");
+                    addFormElement.addEventListener("submit", addOccupant);
+                    addCloseModalFunction = closeModalFunction;
+                },
+                onremoved: () => {
+                    bulmaJS.toggleHtmlClipped();
                 }
             });
         });

public-typescript/lotOccupancyEdit.ts

@@ -8,7 +8,7 @@ import type {
 } from "@cityssm/bulma-webapp-js/src/types";
 
 import type {
-    BulmaJS
+    BulmaJS, StringConfigProperties
 } from "@cityssm/bulma-js/types";
 
 declare const cityssm: cityssmGlobal;
@@ -249,6 +249,129 @@ declare const bulmaJS: BulmaJS;
     if (!isCreate) {
         let lotOccupancyOccupants: recordTypes.LotOccupancyOccupant[] = exports.lotOccupancyOccupants;
 
+        const openEditLotOccupancyOccupant = (clickEvent: Event) => {
+            const lotOccupantIndex = Number.parseInt((clickEvent.currentTarget as HTMLElement).closest("tr").dataset.lotOccupantIndex, 10);
+
+            const lotOccupancyOccupant = lotOccupancyOccupants.find((currentLotOccupancyOccupant) => {
+                return currentLotOccupancyOccupant.lotOccupantIndex === lotOccupantIndex;
+            });
+
+            let editFormElement: HTMLFormElement;
+            let editCloseModalFunction: () => void;
+
+            const editOccupant = (submitEvent: SubmitEvent) => {
+
+                submitEvent.preventDefault();
+
+                cityssm.postJSON(urlPrefix + "/lotOccupancies/doUpdateLotOccupancyOccupant",
+                editFormElement,
+                    (responseJSON: { success: boolean; errorMessage?: string; lotOccupancyOccupants?: recordTypes.LotOccupancyOccupant[]; }) => {
+
+                        if (responseJSON.success) {
+                            lotOccupancyOccupants = responseJSON.lotOccupancyOccupants;
+                            editCloseModalFunction();
+                            renderLotOccupancyOccupants();
+                        } else {
+                            bulmaJS.alert({
+                                title: "Error Updating " + exports.aliases.occupant,
+                                message: responseJSON.errorMessage,
+                                contextualColorName: "danger"
+                            });
+                        }
+                    });
+            };
+
+            cityssm.openHtmlModal("lotOccupancy-editOccupant", {
+                onshow: (modalElement) => {
+                    los.populateAliases(modalElement);
+
+                    (modalElement.querySelector("#lotOccupancyOccupantEdit--lotOccupancyId") as HTMLInputElement).value = lotOccupancyId;
+                    (modalElement.querySelector("#lotOccupancyOccupantEdit--lotOccupantIndex") as HTMLInputElement).value = lotOccupantIndex.toString();
+
+                    const lotOccupantTypeSelectElement = modalElement.querySelector("#lotOccupancyOccupantEdit--lotOccupantTypeId") as HTMLSelectElement;
+
+                    let lotOccupantTypeSelected = false;
+
+                    for (const lotOccupantType of (exports.lotOccupantTypes as recordTypes.LotOccupantType[])) {
+                        const optionElement = document.createElement("option");
+                        optionElement.value = lotOccupantType.lotOccupantTypeId.toString();
+                        optionElement.textContent = lotOccupantType.lotOccupantType;
+
+                        if (lotOccupantType.lotOccupantTypeId === lotOccupancyOccupant.lotOccupantTypeId) {
+                            optionElement.selected = true;
+                            lotOccupantTypeSelected = true;
+                        }
+
+                        lotOccupantTypeSelectElement.append(optionElement);
+                    }
+
+                    if (!lotOccupantTypeSelected) {
+                        const optionElement = document.createElement("option");
+
+                        optionElement.value = lotOccupancyOccupant.lotOccupantTypeId.toString();
+                        optionElement.textContent = lotOccupancyOccupant.lotOccupantType as string;
+                        optionElement.selected = true;
+
+                        lotOccupantTypeSelectElement.append(optionElement);
+                    }
+
+                    (modalElement.querySelector("#lotOccupancyOccupantEdit--occupantName") as HTMLInputElement).value = lotOccupancyOccupant.occupantName;
+                    (modalElement.querySelector("#lotOccupancyOccupantEdit--occupantAddress1") as HTMLInputElement).value = lotOccupancyOccupant.occupantAddress1;
+                    (modalElement.querySelector("#lotOccupancyOccupantEdit--occupantAddress2") as HTMLInputElement).value = lotOccupancyOccupant.occupantAddress2;
+                    (modalElement.querySelector("#lotOccupancyOccupantEdit--occupantCity") as HTMLInputElement).value = lotOccupancyOccupant.occupantCity;
+                    (modalElement.querySelector("#lotOccupancyOccupantEdit--occupantProvince") as HTMLInputElement).value = lotOccupancyOccupant.occupantProvince;
+                    (modalElement.querySelector("#lotOccupancyOccupantEdit--occupantPostalCode") as HTMLInputElement).value = lotOccupancyOccupant.occupantPostalCode;
+                    (modalElement.querySelector("#lotOccupancyOccupantEdit--occupantPhoneNumber") as HTMLInputElement).value = lotOccupancyOccupant.occupantPhoneNumber;
+                },
+                onshown: (modalElement, closeModalFunction) => {
+
+                    bulmaJS.toggleHtmlClipped();
+
+                    editFormElement = modalElement.querySelector("form");
+                    editFormElement.addEventListener("submit", editOccupant);
+
+                    editCloseModalFunction = closeModalFunction;
+                },
+                onremoved: () => {
+                    bulmaJS.toggleHtmlClipped();
+                }
+            });
+        };
+
+        const deleteLotOccupancyOccupant = (clickEvent: Event) => {
+
+            const lotOccupantIndex = (clickEvent.currentTarget as HTMLElement).closest("tr").dataset.lotOccupantIndex;
+
+            const doDelete = () => {
+                cityssm.postJSON(urlPrefix + "/lotOccupancies/doDeleteLotOccupancyOccupant", {
+                    lotOccupancyId,
+                    lotOccupantIndex
+                },
+                (responseJSON: { success: boolean; errorMessage?: string; lotOccupancyOccupants: recordTypes.LotOccupancyOccupant[];}) => {
+                    if (responseJSON.success) {
+                        lotOccupancyOccupants = responseJSON.lotOccupancyOccupants;
+                        renderLotOccupancyOccupants();
+                    } else {
+                        bulmaJS.alert({
+                            title: "Error Removing " + exports.aliases.occupant,
+                            message: responseJSON.errorMessage,
+                            contextualColorName: "danger"
+                        });
+                    }
+                });
+            };
+
+            bulmaJS.confirm({
+                title: "Remove " + exports.aliases.occupant + "?",
+                message: "Are you sure you want to remove this " + exports.aliases.occupant.toLowerCase() + "?",
+                okButton: {
+                    text: "Yes, Remove " + exports.aliases.occupant,
+                    callbackFunction: doDelete
+                },
+                contextualColorName: "warning"
+            });
+        };
+
         const renderLotOccupancyOccupants = () => {
 
             const occupantsContainer = document.querySelector("#container--lotOccupancyOccupants") as HTMLElement;
@@ -290,17 +413,20 @@ declare const bulmaJS: BulmaJS;
                         "</td>") +
                     ("<td>" + cityssm.escapeHTML(lotOccupancyOccupant.occupantPhoneNumber) + "</td>") +
                     ("<td>" +
-                    "<div class=\"buttons are-small is-justify-content-end\">" +
+                        "<div class=\"buttons are-small is-justify-content-end\">" +
                         ("<button class=\"button is-primary button--edit\" type=\"button\">" +
-                        "<span class=\"icon is-small\"><i class=\"fas fa-pencil-alt\" aria-hidden=\"true\"></i></span>" +
+                            "<span class=\"icon is-small\"><i class=\"fas fa-pencil-alt\" aria-hidden=\"true\"></i></span>" +
-                        " <span>Edit</span>" +
+                            " <span>Edit</span>" +
-                        "</button>") +
+                            "</button>") +
                         ("<button class=\"button is-light is-danger button--delete\" type=\"button\" aria-label=\"Delete\">" +
-                        "<i class=\"fas fa-trash\" aria-hidden=\"true\"></i>" +
+                            "<i class=\"fas fa-trash\" aria-hidden=\"true\"></i>" +
-                        "</button>") +
+                            "</button>") +
                         "</div>" +
                         "</td>");
 
+                tableRowElement.querySelector(".button--edit").addEventListener("click", openEditLotOccupancyOccupant);
+                tableRowElement.querySelector(".button--delete").addEventListener("click", deleteLotOccupancyOccupant);
+
                 tableElement.querySelector("tbody").append(tableRowElement);
             }
 
@@ -309,12 +435,60 @@ declare const bulmaJS: BulmaJS;
 
         document.querySelector("#button--addOccupant").addEventListener("click", () => {
 
+            let addFormElement: HTMLFormElement;
+            let addCloseModalFunction: () => void;
+
+            const addOccupant = (submitEvent: SubmitEvent) => {
+
+                submitEvent.preventDefault();
+
+                cityssm.postJSON(urlPrefix + "/lotOccupancies/doAddLotOccupancyOccupant",
+                    addFormElement,
+                    (responseJSON: { success: boolean; errorMessage?: string; lotOccupancyOccupants?: recordTypes.LotOccupancyOccupant[]; }) => {
+
+                        if (responseJSON.success) {
+                            lotOccupancyOccupants = responseJSON.lotOccupancyOccupants;
+                            addCloseModalFunction();
+                            renderLotOccupancyOccupants();
+                        } else {
+                            bulmaJS.alert({
+                                title: "Error Adding " + exports.aliases.occupant,
+                                message: responseJSON.errorMessage,
+                                contextualColorName: "danger"
+                            });
+                        }
+                    });
+            };
+
             cityssm.openHtmlModal("lotOccupancy-addOccupant", {
                 onshow: (modalElement) => {
                     los.populateAliases(modalElement);
 
+                    (modalElement.querySelector("#lotOccupancyOccupantAdd--lotOccupancyId") as HTMLInputElement).value = lotOccupancyId;
+
+                    const lotOccupantTypeSelectElement = modalElement.querySelector("#lotOccupancyOccupantAdd--lotOccupantTypeId") as HTMLSelectElement;
+
+                    for (const lotOccupantType of (exports.lotOccupantTypes as recordTypes.LotOccupantType[])) {
+                        const optionElement = document.createElement("option");
+                        optionElement.value = lotOccupantType.lotOccupantTypeId.toString();
+                        optionElement.textContent = lotOccupantType.lotOccupantType;
+                        lotOccupantTypeSelectElement.append(optionElement);
+                    }
+
                     (modalElement.querySelector("#lotOccupancyOccupantAdd--occupantCity") as HTMLInputElement).value = exports.occupantCityDefault;
                     (modalElement.querySelector("#lotOccupancyOccupantAdd--occupantProvince") as HTMLInputElement).value = exports.occupantProvinceDefault;
+                },
+                onshown: (modalElement, closeModalFunction) => {
+
+                    bulmaJS.toggleHtmlClipped();
+
+                    addFormElement = modalElement.querySelector("form");
+                    addFormElement.addEventListener("submit", addOccupant);
+
+                    addCloseModalFunction = closeModalFunction;
+                },
+                onremoved: () => {
+                    bulmaJS.toggleHtmlClipped();
                 }
             });
         });

public/html/lotOccupancy-addOccupant.html

@@ -13,7 +13,7 @@
                 <div class="field">
                     <label class="label" for="lotOccupancyOccupantAdd--lotOccupantTypeId"><span class="alias" data-alias="Occupant"></span> Type</label>
                     <div class="control">
-                        <div class="select">
+                        <div class="select is-fullwidth">
                             <select id="lotOccupancyOccupantAdd--lotOccupantTypeId" name="lotOccupantTypeId" required>
                                 <option value="">(Select a Type)</option>
                             </select>
@@ -40,7 +40,7 @@
                 <div class="columns">
                     <div class="column">
                         <div class="field">
-                            <label class="label" for="lotOccupancyOccupant--occupantCity">City</label>
+                            <label class="label" for="lotOccupancyOccupantAdd--occupantCity">City</label>
                             <div class="control">
                                 <input class="input" id="lotOccupancyOccupantAdd--occupantCity" name="occupantCity" maxlength="20" />
                             </div>
@@ -48,7 +48,7 @@
                     </div>
                     <div class="column">
                         <div class="field">
-                            <label class="label" for="lotOccupancyOccupant--occupantProvince">Province</label>
+                            <label class="label" for="lotOccupancyOccupantAdd--occupantProvince">Province</label>
                             <div class="control">
                                 <input class="input" id="lotOccupancyOccupantAdd--occupantProvince" name="occupantProvince" maxlength="2" />
                             </div>
@@ -56,7 +56,7 @@
                     </div>
                     <div class="column">
                         <div class="field">
-                            <label class="label" for="lotOccupancyOccupant--occupantPostalCode">Postal Code</label>
+                            <label class="label" for="lotOccupancyOccupantAdd--occupantPostalCode">Postal Code</label>
                             <div class="control">
                                 <input class="input" id="lotOccupancyOccupantAdd--occupantPostalCode" name="occupantPostalCode" maxlength="7" />
                             </div>
@@ -64,7 +64,7 @@
                     </div>
                 </div>
                 <div class="field">
-                    <label class="label" for="lotOccupancyOccupant--occupantPhoneNumber">Phone Number</label>
+                    <label class="label" for="lotOccupancyOccupantAdd--occupantPhoneNumber">Phone Number</label>
                     <div class="control">
                         <input class="input" id="lotOccupancyOccupantAdd--occupantPhoneNumber" name="occupantPhoneNumber" maxlength="30" />
                     </div>

public/html/lotOccupancy-editOccupant.html

@@ -0,0 +1,81 @@
+<div class="modal">
+    <div class="modal-background"></div>
+    <div class="modal-card">
+        <header class="modal-card-head">
+            <h3 class="modal-card-title">
+                Update <span class="alias" data-alias="Occupant"></span>
+            </h3>
+            <button class="delete is-close-modal-button" aria-label="close" type="button"></button>
+        </header>
+        <section class="modal-card-body">
+            <form id="form--lotOccupancyOccupantEdit">
+                <input id="lotOccupancyOccupantEdit--lotOccupancyId" name="lotOccupancyId" type="hidden" value="" />
+                <input id="lotOccupancyOccupantEdit--lotOccupantIndex" name="lotOccupantIndex" type="hidden" value="" />
+                <div class="field">
+                    <label class="label" for="lotOccupancyOccupantEdit--lotOccupantTypeId"><span class="alias" data-alias="Occupant"></span> Type</label>
+                    <div class="control">
+                        <div class="select is-fullwidth">
+                            <select id="lotOccupancyOccupantEdit--lotOccupantTypeId" name="lotOccupantTypeId" required></select>
+                        </div>
+                    </div>
+                </div>
+                <div class="field">
+                    <label class="label" for="lotOccupancyOccupantEdit--occupantName"><span class="alias" data-alias="Occupant"></span> Name</label>
+                    <div class="control">
+                        <input class="input" id="lotOccupancyOccupantEdit--occupantName" name="occupantName" maxlength="200" required />
+                    </div>
+                </div>
+                <div class="field">
+                    <label class="label" for="lotOccupancyOccupantEdit--occupantAddress1">Address</label>
+                    <div class="control">
+                        <input class="input" id="lotOccupancyOccupantEdit--occupantAddress1" name="occupantAddress1" maxlength="50" placeholder="Line 1" />
+                    </div>
+                </div>
+                <div class="field">
+                    <div class="control">
+                        <input class="input" id="lotOccupancyOccupantEdit--occupantAddress2" name="occupantAddress2" maxlength="50" placeholder="Line 2" aria-label="Address Line 2" />
+                    </div>
+                </div>
+                <div class="columns">
+                    <div class="column">
+                        <div class="field">
+                            <label class="label" for="lotOccupancyOccupantEdit--occupantCity">City</label>
+                            <div class="control">
+                                <input class="input" id="lotOccupancyOccupantEdit--occupantCity" name="occupantCity" maxlength="20" />
+                            </div>
+                        </div>
+                    </div>
+                    <div class="column">
+                        <div class="field">
+                            <label class="label" for="lotOccupancyOccupantEdit--occupantProvince">Province</label>
+                            <div class="control">
+                                <input class="input" id="lotOccupancyOccupantEdit--occupantProvince" name="occupantProvince" maxlength="2" />
+                            </div>
+                        </div>
+                    </div>
+                    <div class="column">
+                        <div class="field">
+                            <label class="label" for="lotOccupancyOccupantEdit--occupantPostalCode">Postal Code</label>
+                            <div class="control">
+                                <input class="input" id="lotOccupancyOccupantEdit--occupantPostalCode" name="occupantPostalCode" maxlength="7" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="field">
+                    <label class="label" for="lotOccupancyOccupantEdit--occupantPhoneNumber">Phone Number</label>
+                    <div class="control">
+                        <input class="input" id="lotOccupancyOccupantEdit--occupantPhoneNumber" name="occupantPhoneNumber" maxlength="30" />
+                    </div>
+                </div>
+            </form>
+        </section>
+        <footer class="modal-card-foot justify-right">
+            <button class="button is-success" type="submit" form="form--lotOccupancyOccupantEdit">
+                <span class="icon"><i class="fas fa-plus" aria-hidden="true"></i></span>
+                <span>Update <span class="alias" data-alias="Occupant"></span></span>
+            </button>
+            <button class="button is-close-modal-button" type="button">Cancel</button>
+        </footer>
+    </div>
+</div>

routes/lotOccupancies.js

@@ -4,6 +4,9 @@ import handler_doSearchLotOccupancies from "../handlers/lotOccupancies-post/doSe
 import handler_view from "../handlers/lotOccupancies-get/view.js";
 import handler_edit from "../handlers/lotOccupancies-get/edit.js";
 import handler_doUpdateLotOccupancy from "../handlers/lotOccupancies-post/doUpdateLotOccupancy.js";
+import handler_doAddLotOccupancyOccupant from "../handlers/lotOccupancies-post/doAddLotOccupancyOccupant.js";
+import handler_doUpdateLotOccupancyOccupant from "../handlers/lotOccupancies-post/doUpdateLotOccupancyOccupant.js";
+import handler_doDeleteLotOccupancyOccupant from "../handlers/lotOccupancies-post/doDeleteLotOccupancyOccupant.js";
 import * as permissionHandlers from "../handlers/permissions.js";
 export const router = Router();
 router.get("/", handler_search);
@@ -11,4 +14,7 @@ router.post("/doSearchLotOccupancies", handler_doSearchLotOccupancies);
 router.get("/:lotOccupancyId", handler_view);
 router.get("/:lotOccupancyId/edit", permissionHandlers.updateGetHandler, handler_edit);
 router.post("/doUpdateLotOccupancy", permissionHandlers.updatePostHandler, handler_doUpdateLotOccupancy);
+router.post("/doAddLotOccupancyOccupant", permissionHandlers.updatePostHandler, handler_doAddLotOccupancyOccupant);
+router.post("/doUpdateLotOccupancyOccupant", permissionHandlers.updatePostHandler, handler_doUpdateLotOccupancyOccupant);
+router.post("/doDeleteLotOccupancyOccupant", permissionHandlers.updatePostHandler, handler_doDeleteLotOccupancyOccupant);
 export default router;

routes/lotOccupancies.ts

@@ -10,6 +10,10 @@ import handler_view from "../handlers/lotOccupancies-get/view.js";
 import handler_edit from "../handlers/lotOccupancies-get/edit.js";
 import handler_doUpdateLotOccupancy from "../handlers/lotOccupancies-post/doUpdateLotOccupancy.js";
 
+import handler_doAddLotOccupancyOccupant from "../handlers/lotOccupancies-post/doAddLotOccupancyOccupant.js";
+import handler_doUpdateLotOccupancyOccupant from "../handlers/lotOccupancies-post/doUpdateLotOccupancyOccupant.js";
+import handler_doDeleteLotOccupancyOccupant from "../handlers/lotOccupancies-post/doDeleteLotOccupancyOccupant.js";
+
 import * as permissionHandlers from "../handlers/permissions.js";
 
 
@@ -36,5 +40,17 @@ router.post("/doUpdateLotOccupancy",
     permissionHandlers.updatePostHandler,
     handler_doUpdateLotOccupancy);
 
+router.post("/doAddLotOccupancyOccupant",
+    permissionHandlers.updatePostHandler,
+    handler_doAddLotOccupancyOccupant);
+
+router.post("/doUpdateLotOccupancyOccupant",
+    permissionHandlers.updatePostHandler,
+    handler_doUpdateLotOccupancyOccupant);
+
+router.post("/doDeleteLotOccupancyOccupant",
+    permissionHandlers.updatePostHandler,
+    handler_doDeleteLotOccupancyOccupant);
+
 
 export default router;