From 693a71fc729da44a7b63d58e5e7967aefc08ba18 Mon Sep 17 00:00:00 2001
From: Dan Gowans <d.gowans@cityssm.on.ca>
Date: Thu, 29 Dec 2022 13:23:18 -0500
Subject: [PATCH] reduce nesting

---
 .../doSearchLotOccupancies.js                 |   1 +
 .../doSearchLotOccupancies.ts                 |   1 +
 public-typescript/lotOccupancySearch.js       | 336 +++++++--------
 public-typescript/lotOccupancySearch.ts       | 386 +++++++++---------
 public/javascripts/lotOccupancySearch.min.js  |   2 +-
 5 files changed, 366 insertions(+), 360 deletions(-)

diff --git a/handlers/lotOccupancies-post/doSearchLotOccupancies.js b/handlers/lotOccupancies-post/doSearchLotOccupancies.js
index f93ddf61..d7db2a47 100644
--- a/handlers/lotOccupancies-post/doSearchLotOccupancies.js
+++ b/handlers/lotOccupancies-post/doSearchLotOccupancies.js
@@ -7,6 +7,7 @@ export const handler = async (request, response) => {
     });
     response.json({
         count: result.count,
+        offset: Number.parseInt(request.body.offset, 10),
         lotOccupancies: result.lotOccupancies
     });
 };
diff --git a/handlers/lotOccupancies-post/doSearchLotOccupancies.ts b/handlers/lotOccupancies-post/doSearchLotOccupancies.ts
index eb21bc88..a80f1579 100644
--- a/handlers/lotOccupancies-post/doSearchLotOccupancies.ts
+++ b/handlers/lotOccupancies-post/doSearchLotOccupancies.ts
@@ -11,6 +11,7 @@ export const handler: RequestHandler = async (request, response) => {
 
     response.json({
         count: result.count,
+        offset: Number.parseInt(request.body.offset, 10),
         lotOccupancies: result.lotOccupancies
     });
 };
diff --git a/public-typescript/lotOccupancySearch.js b/public-typescript/lotOccupancySearch.js
index 0ddf4020..1d04b8b9 100644
--- a/public-typescript/lotOccupancySearch.js
+++ b/public-typescript/lotOccupancySearch.js
@@ -7,8 +7,166 @@ Object.defineProperty(exports, "__esModule", { value: true });
     const searchResultsContainerElement = document.querySelector("#container--searchResults");
     const limit = Number.parseInt(document.querySelector("#searchFilter--limit").value, 10);
     const offsetElement = document.querySelector("#searchFilter--offset");
-    const getLotOccupancies = () => {
-        const offset = Number.parseInt(offsetElement.value, 10);
+    function renderLotOccupancies(responseJSON) {
+        if (responseJSON.lotOccupancies.length === 0) {
+            searchResultsContainerElement.innerHTML =
+                '<div class="message is-info">' +
+                    '<p class="message-body">There are no ' +
+                    cityssm.escapeHTML(exports.aliases.occupancy.toLowerCase()) +
+                    " records that meet the search criteria.</p>" +
+                    "</div>";
+            return;
+        }
+        const resultsTbodyElement = document.createElement("tbody");
+        const nowDateString = cityssm.dateToString(new Date());
+        for (const lotOccupancy of responseJSON.lotOccupancies) {
+            let occupancyTimeHTML = "";
+            if (lotOccupancy.occupancyStartDateString <= nowDateString &&
+                (lotOccupancy.occupancyEndDateString === "" ||
+                    lotOccupancy.occupancyEndDateString >= nowDateString)) {
+                occupancyTimeHTML =
+                    '<span class="has-tooltip-right" data-tooltip="Current ' +
+                        exports.aliases.occupancy +
+                        '">' +
+                        ('<i class="fas fa-play" aria-label="Current ' +
+                            exports.aliases.occupancy +
+                            '"></i>') +
+                        "</span>";
+            }
+            else if (lotOccupancy.occupancyStartDateString > nowDateString) {
+                occupancyTimeHTML =
+                    '<span class="has-tooltip-right" data-tooltip="Future ' +
+                        exports.aliases.occupancy +
+                        '">' +
+                        ('<i class="fas fa-fast-forward" aria-label="Future ' +
+                            exports.aliases.occupancy +
+                            '"></i>') +
+                        "</span>";
+            }
+            else {
+                occupancyTimeHTML =
+                    '<span class="has-tooltip-right" data-tooltip="Past ' +
+                        exports.aliases.occupancy +
+                        '">' +
+                        ('<i class="fas fa-stop" aria-label="Past ' +
+                            exports.aliases.occupancy +
+                            '"></i>') +
+                        "</span>";
+            }
+            let occupantsHTML = "";
+            for (const occupant of lotOccupancy.lotOccupancyOccupants) {
+                occupantsHTML +=
+                    '<span class="has-tooltip-left" data-tooltip="' +
+                        cityssm.escapeHTML(occupant.lotOccupantType || "") +
+                        '">' +
+                        ('<i class="fas fa-fw fa-' +
+                            cityssm.escapeHTML(occupant.fontAwesomeIconClass || "user") +
+                            '" aria-hidden="true"></i> ') +
+                        cityssm.escapeHTML(occupant.occupantName || "") +
+                        "</span><br />";
+            }
+            resultsTbodyElement.insertAdjacentHTML("beforeend", "<tr>" +
+                ('<td class="has-width-1">' + occupancyTimeHTML + "</td>") +
+                ("<td>" +
+                    '<a class="has-text-weight-bold" href="' +
+                    los.urlPrefix +
+                    "/lotOccupancies/" +
+                    lotOccupancy.lotOccupancyId +
+                    '">' +
+                    cityssm.escapeHTML(lotOccupancy.occupancyType) +
+                    "</a>" +
+                    "</td>") +
+                ("<td>" +
+                    (lotOccupancy.lotName
+                        ? '<a class="has-tooltip-right" data-tooltip="' +
+                            cityssm.escapeHTML(lotOccupancy.lotType || "") +
+                            '" href="' +
+                            los.urlPrefix +
+                            "/lots/" +
+                            lotOccupancy.lotId +
+                            '">' +
+                            cityssm.escapeHTML(lotOccupancy.lotName) +
+                            "</a>"
+                        : '<span class="has-text-grey">(No ' +
+                            cityssm.escapeHTML(exports.aliases.lot) +
+                            ")</span>") +
+                    "<br />" +
+                    ('<span class="is-size-7">' +
+                        cityssm.escapeHTML(lotOccupancy.mapName || "") +
+                        "</span>") +
+                    "</td>") +
+                ("<td>" + lotOccupancy.occupancyStartDateString + "</td>") +
+                ("<td>" +
+                    (lotOccupancy.occupancyEndDate
+                        ? lotOccupancy.occupancyEndDateString
+                        : '<span class="has-text-grey">(No End Date)</span>') +
+                    "</td>") +
+                ("<td>" + occupantsHTML + "</td>") +
+                "<td>" +
+                (lotOccupancy.printEJS
+                    ? '<a class="button is-small" data-tooltip="Print" href="' +
+                        los.urlPrefix +
+                        "/print/" +
+                        lotOccupancy.printEJS +
+                        "/?lotOccupancyId=" +
+                        lotOccupancy.lotOccupancyId +
+                        '" target="_blank">' +
+                        '<i class="fas fa-print" aria-label="Print"></i>' +
+                        "</a>"
+                    : "") +
+                "</td>" +
+                "</tr>");
+        }
+        searchResultsContainerElement.innerHTML =
+            '<table class="table is-fullwidth is-striped is-hoverable has-sticky-header">' +
+                "<thead><tr>" +
+                '<th class="has-width-1"></th>' +
+                ("<th>" + cityssm.escapeHTML(exports.aliases.occupancy) + " Type</th>") +
+                ("<th>" + cityssm.escapeHTML(exports.aliases.lot) + "</th>") +
+                ("<th>" + cityssm.escapeHTML(exports.aliases.occupancyStartDate) + "</th>") +
+                "<th>End Date</th>" +
+                ("<th>" + cityssm.escapeHTML(exports.aliases.occupants) + "</th>") +
+                '<th class="has-width-1"><span class="is-sr-only">Print</span></th>' +
+                "</tr></thead>" +
+                "<table>" +
+                '<div class="level">' +
+                ('<div class="level-left">' +
+                    '<div class="level-item has-text-weight-bold">' +
+                    "Displaying " +
+                    (responseJSON.offset + 1).toString() +
+                    " to " +
+                    Math.min(responseJSON.count, limit + responseJSON.offset) +
+                    " of " +
+                    responseJSON.count +
+                    "</div>" +
+                    "</div>") +
+                ('<div class="level-right">' +
+                    (responseJSON.offset > 0
+                        ? '<div class="level-item">' +
+                            '<button class="button is-rounded is-link is-outlined" data-page="previous" type="button" title="Previous">' +
+                            '<i class="fas fa-arrow-left" aria-hidden="true"></i>' +
+                            "</button>" +
+                            "</div>"
+                        : "") +
+                    (limit + responseJSON.offset < responseJSON.count
+                        ? '<div class="level-item">' +
+                            '<button class="button is-rounded is-link" data-page="next" type="button" title="Next">' +
+                            "<span>Next</span>" +
+                            '<span class="icon"><i class="fas fa-arrow-right" aria-hidden="true"></i></span>' +
+                            "</button>" +
+                            "</div>"
+                        : "") +
+                    "</div>") +
+                "</div>";
+        searchResultsContainerElement.querySelector("table").append(resultsTbodyElement);
+        if (responseJSON.offset > 0) {
+            searchResultsContainerElement.querySelector("button[data-page='previous']").addEventListener("click", previousAndGetLotOccupancies);
+        }
+        if (limit + responseJSON.offset < responseJSON.count) {
+            searchResultsContainerElement.querySelector("button[data-page='next']").addEventListener("click", nextAndGetLotOccupancies);
+        }
+    }
+    function getLotOccupancies() {
         searchResultsContainerElement.innerHTML =
             '<div class="has-text-grey has-text-centered">' +
                 '<i class="fas fa-5x fa-circle-notch fa-spin" aria-hidden="true"></i><br />' +
@@ -16,178 +174,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 exports.aliases.occupancies +
                 "..." +
                 "</div>";
-        cityssm.postJSON(los.urlPrefix + "/lotOccupancies/doSearchLotOccupancies", searchFilterFormElement, (responseJSON) => {
-            if (responseJSON.lotOccupancies.length === 0) {
-                searchResultsContainerElement.innerHTML =
-                    '<div class="message is-info">' +
-                        '<p class="message-body">There are no ' +
-                        cityssm.escapeHTML(exports.aliases.occupancy.toLowerCase()) +
-                        " records that meet the search criteria.</p>" +
-                        "</div>";
-                return;
-            }
-            const resultsTbodyElement = document.createElement("tbody");
-            const nowDateString = cityssm.dateToString(new Date());
-            for (const lotOccupancy of responseJSON.lotOccupancies) {
-                let occupancyTimeHTML = "";
-                if (lotOccupancy.occupancyStartDateString <= nowDateString &&
-                    (lotOccupancy.occupancyEndDateString === "" ||
-                        lotOccupancy.occupancyEndDateString >= nowDateString)) {
-                    occupancyTimeHTML =
-                        '<span class="has-tooltip-right" data-tooltip="Current ' +
-                            exports.aliases.occupancy +
-                            '">' +
-                            ('<i class="fas fa-play" aria-label="Current ' +
-                                exports.aliases.occupancy +
-                                '"></i>') +
-                            "</span>";
-                }
-                else if (lotOccupancy.occupancyStartDateString > nowDateString) {
-                    occupancyTimeHTML =
-                        '<span class="has-tooltip-right" data-tooltip="Future ' +
-                            exports.aliases.occupancy +
-                            '">' +
-                            ('<i class="fas fa-fast-forward" aria-label="Future ' +
-                                exports.aliases.occupancy +
-                                '"></i>') +
-                            "</span>";
-                }
-                else {
-                    occupancyTimeHTML =
-                        '<span class="has-tooltip-right" data-tooltip="Past ' +
-                            exports.aliases.occupancy +
-                            '">' +
-                            ('<i class="fas fa-stop" aria-label="Past ' +
-                                exports.aliases.occupancy +
-                                '"></i>') +
-                            "</span>";
-                }
-                let occupantsHTML = "";
-                for (const occupant of lotOccupancy.lotOccupancyOccupants) {
-                    occupantsHTML +=
-                        '<span class="has-tooltip-left" data-tooltip="' +
-                            cityssm.escapeHTML(occupant.lotOccupantType || "") +
-                            '">' +
-                            ('<i class="fas fa-fw fa-' +
-                                cityssm.escapeHTML(occupant.fontAwesomeIconClass || "user") +
-                                '" aria-hidden="true"></i> ') +
-                            cityssm.escapeHTML(occupant.occupantName || "") +
-                            "</span><br />";
-                }
-                resultsTbodyElement.insertAdjacentHTML("beforeend", "<tr>" +
-                    ('<td class="has-width-1">' + occupancyTimeHTML + "</td>") +
-                    ("<td>" +
-                        '<a class="has-text-weight-bold" href="' +
-                        los.urlPrefix +
-                        "/lotOccupancies/" +
-                        lotOccupancy.lotOccupancyId +
-                        '">' +
-                        cityssm.escapeHTML(lotOccupancy.occupancyType) +
-                        "</a>" +
-                        "</td>") +
-                    ("<td>" +
-                        (lotOccupancy.lotName
-                            ? '<a class="has-tooltip-right" data-tooltip="' +
-                                cityssm.escapeHTML(lotOccupancy.lotType || "") +
-                                '" href="' +
-                                los.urlPrefix +
-                                "/lots/" +
-                                lotOccupancy.lotId +
-                                '">' +
-                                cityssm.escapeHTML(lotOccupancy.lotName) +
-                                "</a>"
-                            : '<span class="has-text-grey">(No ' +
-                                cityssm.escapeHTML(exports.aliases.lot) +
-                                ")</span>") +
-                        "<br />" +
-                        ('<span class="is-size-7">' +
-                            cityssm.escapeHTML(lotOccupancy.mapName || "") +
-                            "</span>") +
-                        "</td>") +
-                    ("<td>" + lotOccupancy.occupancyStartDateString + "</td>") +
-                    ("<td>" +
-                        (lotOccupancy.occupancyEndDate
-                            ? lotOccupancy.occupancyEndDateString
-                            : '<span class="has-text-grey">(No End Date)</span>') +
-                        "</td>") +
-                    ("<td>" + occupantsHTML + "</td>") +
-                    "<td>" +
-                    (lotOccupancy.printEJS
-                        ? '<a class="button is-small" data-tooltip="Print" href="' +
-                            los.urlPrefix +
-                            "/print/" +
-                            lotOccupancy.printEJS +
-                            "/?lotOccupancyId=" +
-                            lotOccupancy.lotOccupancyId +
-                            '" target="_blank">' +
-                            '<i class="fas fa-print" aria-label="Print"></i>' +
-                            "</a>"
-                        : "") +
-                    "</td>" +
-                    "</tr>");
-            }
-            searchResultsContainerElement.innerHTML =
-                '<table class="table is-fullwidth is-striped is-hoverable has-sticky-header">' +
-                    "<thead><tr>" +
-                    '<th class="has-width-1"></th>' +
-                    ("<th>" + cityssm.escapeHTML(exports.aliases.occupancy) + " Type</th>") +
-                    ("<th>" + cityssm.escapeHTML(exports.aliases.lot) + "</th>") +
-                    ("<th>" + cityssm.escapeHTML(exports.aliases.occupancyStartDate) + "</th>") +
-                    "<th>End Date</th>" +
-                    ("<th>" + cityssm.escapeHTML(exports.aliases.occupants) + "</th>") +
-                    '<th class="has-width-1"><span class="is-sr-only">Print</span></th>' +
-                    "</tr></thead>" +
-                    "<table>" +
-                    '<div class="level">' +
-                    ('<div class="level-left">' +
-                        '<div class="level-item has-text-weight-bold">' +
-                        "Displaying " +
-                        (offset + 1).toString() +
-                        " to " +
-                        Math.min(responseJSON.count, limit + offset) +
-                        " of " +
-                        responseJSON.count +
-                        "</div>" +
-                        "</div>") +
-                    ('<div class="level-right">' +
-                        (offset > 0
-                            ? '<div class="level-item">' +
-                                '<button class="button is-rounded is-link is-outlined" data-page="previous" type="button" title="Previous">' +
-                                '<i class="fas fa-arrow-left" aria-hidden="true"></i>' +
-                                "</button>" +
-                                "</div>"
-                            : "") +
-                        (limit + offset < responseJSON.count
-                            ? '<div class="level-item">' +
-                                '<button class="button is-rounded is-link" data-page="next" type="button" title="Next">' +
-                                "<span>Next</span>" +
-                                '<span class="icon"><i class="fas fa-arrow-right" aria-hidden="true"></i></span>' +
-                                "</button>" +
-                                "</div>"
-                            : "") +
-                        "</div>") +
-                    "</div>";
-            searchResultsContainerElement.querySelector("table").append(resultsTbodyElement);
-            if (offset > 0) {
-                searchResultsContainerElement.querySelector("button[data-page='previous']").addEventListener("click", previousAndGetLotOccupancies);
-            }
-            if (limit + offset < responseJSON.count) {
-                searchResultsContainerElement.querySelector("button[data-page='next']").addEventListener("click", nextAndGetLotOccupancies);
-            }
-        });
-    };
-    const resetOffsetAndGetLotOccupancies = () => {
+        cityssm.postJSON(los.urlPrefix + "/lotOccupancies/doSearchLotOccupancies", searchFilterFormElement, renderLotOccupancies);
+    }
+    function resetOffsetAndGetLotOccupancies() {
         offsetElement.value = "0";
         getLotOccupancies();
-    };
-    const previousAndGetLotOccupancies = () => {
+    }
+    function previousAndGetLotOccupancies() {
         offsetElement.value = Math.max(Number.parseInt(offsetElement.value, 10) - limit, 0).toString();
         getLotOccupancies();
-    };
-    const nextAndGetLotOccupancies = () => {
+    }
+    function nextAndGetLotOccupancies() {
         offsetElement.value = (Number.parseInt(offsetElement.value, 10) + limit).toString();
         getLotOccupancies();
-    };
+    }
     const filterElements = searchFilterFormElement.querySelectorAll("input, select");
     for (const filterElement of filterElements) {
         filterElement.addEventListener("change", resetOffsetAndGetLotOccupancies);
diff --git a/public-typescript/lotOccupancySearch.ts b/public-typescript/lotOccupancySearch.ts
index 356cc8df..9311da53 100644
--- a/public-typescript/lotOccupancySearch.ts
+++ b/public-typescript/lotOccupancySearch.ts
@@ -24,9 +24,194 @@ declare const cityssm: cityssmGlobal;
     );
     const offsetElement = document.querySelector("#searchFilter--offset") as HTMLInputElement;
 
-    const getLotOccupancies = () => {
-        const offset = Number.parseInt(offsetElement.value, 10);
+    function renderLotOccupancies(responseJSON: {
+        count: number;
+        offset: number;
+        lotOccupancies: recordTypes.LotOccupancy[];
+    }) {
+        if (responseJSON.lotOccupancies.length === 0) {
+            searchResultsContainerElement.innerHTML =
+                '<div class="message is-info">' +
+                '<p class="message-body">There are no ' +
+                cityssm.escapeHTML(exports.aliases.occupancy.toLowerCase()) +
+                " records that meet the search criteria.</p>" +
+                "</div>";
 
+            return;
+        }
+
+        const resultsTbodyElement = document.createElement("tbody");
+
+        const nowDateString = cityssm.dateToString(new Date());
+
+        for (const lotOccupancy of responseJSON.lotOccupancies) {
+            let occupancyTimeHTML = "";
+
+            if (
+                lotOccupancy.occupancyStartDateString! <= nowDateString &&
+                (lotOccupancy.occupancyEndDateString === "" ||
+                    lotOccupancy.occupancyEndDateString! >= nowDateString)
+            ) {
+                occupancyTimeHTML =
+                    '<span class="has-tooltip-right" data-tooltip="Current ' +
+                    exports.aliases.occupancy +
+                    '">' +
+                    ('<i class="fas fa-play" aria-label="Current ' +
+                        exports.aliases.occupancy +
+                        '"></i>') +
+                    "</span>";
+            } else if (lotOccupancy.occupancyStartDateString! > nowDateString) {
+                occupancyTimeHTML =
+                    '<span class="has-tooltip-right" data-tooltip="Future ' +
+                    exports.aliases.occupancy +
+                    '">' +
+                    ('<i class="fas fa-fast-forward" aria-label="Future ' +
+                        exports.aliases.occupancy +
+                        '"></i>') +
+                    "</span>";
+            } else {
+                occupancyTimeHTML =
+                    '<span class="has-tooltip-right" data-tooltip="Past ' +
+                    exports.aliases.occupancy +
+                    '">' +
+                    ('<i class="fas fa-stop" aria-label="Past ' +
+                        exports.aliases.occupancy +
+                        '"></i>') +
+                    "</span>";
+            }
+
+            let occupantsHTML = "";
+
+            for (const occupant of lotOccupancy.lotOccupancyOccupants!) {
+                occupantsHTML +=
+                    '<span class="has-tooltip-left" data-tooltip="' +
+                    cityssm.escapeHTML(occupant.lotOccupantType || "") +
+                    '">' +
+                    ('<i class="fas fa-fw fa-' +
+                        cityssm.escapeHTML(occupant.fontAwesomeIconClass || "user") +
+                        '" aria-hidden="true"></i> ') +
+                    cityssm.escapeHTML(occupant.occupantName || "") +
+                    "</span><br />";
+            }
+
+            resultsTbodyElement.insertAdjacentHTML(
+                "beforeend",
+                "<tr>" +
+                    ('<td class="has-width-1">' + occupancyTimeHTML + "</td>") +
+                    ("<td>" +
+                        '<a class="has-text-weight-bold" href="' +
+                        los.urlPrefix +
+                        "/lotOccupancies/" +
+                        lotOccupancy.lotOccupancyId +
+                        '">' +
+                        cityssm.escapeHTML(lotOccupancy.occupancyType as string) +
+                        "</a>" +
+                        "</td>") +
+                    ("<td>" +
+                        (lotOccupancy.lotName
+                            ? '<a class="has-tooltip-right" data-tooltip="' +
+                              cityssm.escapeHTML(lotOccupancy.lotType || "") +
+                              '" href="' +
+                              los.urlPrefix +
+                              "/lots/" +
+                              lotOccupancy.lotId +
+                              '">' +
+                              cityssm.escapeHTML(lotOccupancy.lotName) +
+                              "</a>"
+                            : '<span class="has-text-grey">(No ' +
+                              cityssm.escapeHTML(exports.aliases.lot) +
+                              ")</span>") +
+                        "<br />" +
+                        ('<span class="is-size-7">' +
+                            cityssm.escapeHTML(lotOccupancy.mapName || "") +
+                            "</span>") +
+                        "</td>") +
+                    ("<td>" + lotOccupancy.occupancyStartDateString + "</td>") +
+                    ("<td>" +
+                        (lotOccupancy.occupancyEndDate
+                            ? lotOccupancy.occupancyEndDateString
+                            : '<span class="has-text-grey">(No End Date)</span>') +
+                        "</td>") +
+                    ("<td>" + occupantsHTML + "</td>") +
+                    "<td>" +
+                    (lotOccupancy.printEJS
+                        ? '<a class="button is-small" data-tooltip="Print" href="' +
+                          los.urlPrefix +
+                          "/print/" +
+                          lotOccupancy.printEJS +
+                          "/?lotOccupancyId=" +
+                          lotOccupancy.lotOccupancyId +
+                          '" target="_blank">' +
+                          '<i class="fas fa-print" aria-label="Print"></i>' +
+                          "</a>"
+                        : "") +
+                    "</td>" +
+                    "</tr>"
+            );
+        }
+
+        searchResultsContainerElement.innerHTML =
+            '<table class="table is-fullwidth is-striped is-hoverable has-sticky-header">' +
+            "<thead><tr>" +
+            '<th class="has-width-1"></th>' +
+            ("<th>" + cityssm.escapeHTML(exports.aliases.occupancy) + " Type</th>") +
+            ("<th>" + cityssm.escapeHTML(exports.aliases.lot) + "</th>") +
+            ("<th>" + cityssm.escapeHTML(exports.aliases.occupancyStartDate) + "</th>") +
+            "<th>End Date</th>" +
+            ("<th>" + cityssm.escapeHTML(exports.aliases.occupants) + "</th>") +
+            '<th class="has-width-1"><span class="is-sr-only">Print</span></th>' +
+            "</tr></thead>" +
+            "<table>" +
+            '<div class="level">' +
+            ('<div class="level-left">' +
+                '<div class="level-item has-text-weight-bold">' +
+                "Displaying " +
+                (responseJSON.offset + 1).toString() +
+                " to " +
+                Math.min(responseJSON.count, limit + responseJSON.offset) +
+                " of " +
+                responseJSON.count +
+                "</div>" +
+                "</div>") +
+            ('<div class="level-right">' +
+                (responseJSON.offset > 0
+                    ? '<div class="level-item">' +
+                      '<button class="button is-rounded is-link is-outlined" data-page="previous" type="button" title="Previous">' +
+                      '<i class="fas fa-arrow-left" aria-hidden="true"></i>' +
+                      "</button>" +
+                      "</div>"
+                    : "") +
+                (limit + responseJSON.offset < responseJSON.count
+                    ? '<div class="level-item">' +
+                      '<button class="button is-rounded is-link" data-page="next" type="button" title="Next">' +
+                      "<span>Next</span>" +
+                      '<span class="icon"><i class="fas fa-arrow-right" aria-hidden="true"></i></span>' +
+                      "</button>" +
+                      "</div>"
+                    : "") +
+                "</div>") +
+            "</div>";
+
+        searchResultsContainerElement.querySelector("table")!.append(resultsTbodyElement);
+
+        if (responseJSON.offset > 0) {
+            (
+                searchResultsContainerElement.querySelector(
+                    "button[data-page='previous']"
+                ) as HTMLButtonElement
+            ).addEventListener("click", previousAndGetLotOccupancies);
+        }
+
+        if (limit + responseJSON.offset < responseJSON.count) {
+            (
+                searchResultsContainerElement.querySelector(
+                    "button[data-page='next']"
+                ) as HTMLButtonElement
+            ).addEventListener("click", nextAndGetLotOccupancies);
+        }
+    }
+
+    function getLotOccupancies() {
         searchResultsContainerElement.innerHTML =
             '<div class="has-text-grey has-text-centered">' +
             '<i class="fas fa-5x fa-circle-notch fa-spin" aria-hidden="true"></i><br />' +
@@ -38,208 +223,27 @@ declare const cityssm: cityssmGlobal;
         cityssm.postJSON(
             los.urlPrefix + "/lotOccupancies/doSearchLotOccupancies",
             searchFilterFormElement,
-            (responseJSON: { count: number; lotOccupancies: recordTypes.LotOccupancy[] }) => {
-                if (responseJSON.lotOccupancies.length === 0) {
-                    searchResultsContainerElement.innerHTML =
-                        '<div class="message is-info">' +
-                        '<p class="message-body">There are no ' +
-                        cityssm.escapeHTML(exports.aliases.occupancy.toLowerCase()) +
-                        " records that meet the search criteria.</p>" +
-                        "</div>";
-
-                    return;
-                }
-
-                const resultsTbodyElement = document.createElement("tbody");
-
-                const nowDateString = cityssm.dateToString(new Date());
-
-                for (const lotOccupancy of responseJSON.lotOccupancies) {
-                    let occupancyTimeHTML = "";
-
-                    if (
-                        lotOccupancy.occupancyStartDateString! <= nowDateString &&
-                        (lotOccupancy.occupancyEndDateString === "" ||
-                            lotOccupancy.occupancyEndDateString! >= nowDateString)
-                    ) {
-                        occupancyTimeHTML =
-                            '<span class="has-tooltip-right" data-tooltip="Current ' +
-                            exports.aliases.occupancy +
-                            '">' +
-                            ('<i class="fas fa-play" aria-label="Current ' +
-                                exports.aliases.occupancy +
-                                '"></i>') +
-                            "</span>";
-                    } else if (lotOccupancy.occupancyStartDateString! > nowDateString) {
-                        occupancyTimeHTML =
-                            '<span class="has-tooltip-right" data-tooltip="Future ' +
-                            exports.aliases.occupancy +
-                            '">' +
-                            ('<i class="fas fa-fast-forward" aria-label="Future ' +
-                                exports.aliases.occupancy +
-                                '"></i>') +
-                            "</span>";
-                    } else {
-                        occupancyTimeHTML =
-                            '<span class="has-tooltip-right" data-tooltip="Past ' +
-                            exports.aliases.occupancy +
-                            '">' +
-                            ('<i class="fas fa-stop" aria-label="Past ' +
-                                exports.aliases.occupancy +
-                                '"></i>') +
-                            "</span>";
-                    }
-
-                    let occupantsHTML = "";
-
-                    for (const occupant of lotOccupancy.lotOccupancyOccupants!) {
-                        occupantsHTML +=
-                            '<span class="has-tooltip-left" data-tooltip="' +
-                            cityssm.escapeHTML(occupant.lotOccupantType || "") +
-                            '">' +
-                            ('<i class="fas fa-fw fa-' +
-                                cityssm.escapeHTML(occupant.fontAwesomeIconClass || "user") +
-                                '" aria-hidden="true"></i> ') +
-                            cityssm.escapeHTML(occupant.occupantName || "") +
-                            "</span><br />";
-                    }
-
-                    resultsTbodyElement.insertAdjacentHTML(
-                        "beforeend",
-                        "<tr>" +
-                            ('<td class="has-width-1">' + occupancyTimeHTML + "</td>") +
-                            ("<td>" +
-                                '<a class="has-text-weight-bold" href="' +
-                                los.urlPrefix +
-                                "/lotOccupancies/" +
-                                lotOccupancy.lotOccupancyId +
-                                '">' +
-                                cityssm.escapeHTML(lotOccupancy.occupancyType as string) +
-                                "</a>" +
-                                "</td>") +
-                            ("<td>" +
-                                (lotOccupancy.lotName
-                                    ? '<a class="has-tooltip-right" data-tooltip="' +
-                                      cityssm.escapeHTML(lotOccupancy.lotType || "") +
-                                      '" href="' +
-                                      los.urlPrefix +
-                                      "/lots/" +
-                                      lotOccupancy.lotId +
-                                      '">' +
-                                      cityssm.escapeHTML(lotOccupancy.lotName) +
-                                      "</a>"
-                                    : '<span class="has-text-grey">(No ' +
-                                      cityssm.escapeHTML(exports.aliases.lot) +
-                                      ")</span>") +
-                                "<br />" +
-                                ('<span class="is-size-7">' +
-                                    cityssm.escapeHTML(lotOccupancy.mapName || "") +
-                                    "</span>") +
-                                "</td>") +
-                            ("<td>" + lotOccupancy.occupancyStartDateString + "</td>") +
-                            ("<td>" +
-                                (lotOccupancy.occupancyEndDate
-                                    ? lotOccupancy.occupancyEndDateString
-                                    : '<span class="has-text-grey">(No End Date)</span>') +
-                                "</td>") +
-                            ("<td>" + occupantsHTML + "</td>") +
-                            "<td>" +
-                            (lotOccupancy.printEJS
-                                ? '<a class="button is-small" data-tooltip="Print" href="' +
-                                  los.urlPrefix +
-                                  "/print/" +
-                                  lotOccupancy.printEJS +
-                                  "/?lotOccupancyId=" +
-                                  lotOccupancy.lotOccupancyId +
-                                  '" target="_blank">' +
-                                  '<i class="fas fa-print" aria-label="Print"></i>' +
-                                  "</a>"
-                                : "") +
-                            "</td>" +
-                            "</tr>"
-                    );
-                }
-
-                searchResultsContainerElement.innerHTML =
-                    '<table class="table is-fullwidth is-striped is-hoverable has-sticky-header">' +
-                    "<thead><tr>" +
-                    '<th class="has-width-1"></th>' +
-                    ("<th>" + cityssm.escapeHTML(exports.aliases.occupancy) + " Type</th>") +
-                    ("<th>" + cityssm.escapeHTML(exports.aliases.lot) + "</th>") +
-                    ("<th>" + cityssm.escapeHTML(exports.aliases.occupancyStartDate) + "</th>") +
-                    "<th>End Date</th>" +
-                    ("<th>" + cityssm.escapeHTML(exports.aliases.occupants) + "</th>") +
-                    '<th class="has-width-1"><span class="is-sr-only">Print</span></th>' +
-                    "</tr></thead>" +
-                    "<table>" +
-                    '<div class="level">' +
-                    ('<div class="level-left">' +
-                        '<div class="level-item has-text-weight-bold">' +
-                        "Displaying " +
-                        (offset + 1).toString() +
-                        " to " +
-                        Math.min(responseJSON.count, limit + offset) +
-                        " of " +
-                        responseJSON.count +
-                        "</div>" +
-                        "</div>") +
-                    ('<div class="level-right">' +
-                        (offset > 0
-                            ? '<div class="level-item">' +
-                              '<button class="button is-rounded is-link is-outlined" data-page="previous" type="button" title="Previous">' +
-                              '<i class="fas fa-arrow-left" aria-hidden="true"></i>' +
-                              "</button>" +
-                              "</div>"
-                            : "") +
-                        (limit + offset < responseJSON.count
-                            ? '<div class="level-item">' +
-                              '<button class="button is-rounded is-link" data-page="next" type="button" title="Next">' +
-                              "<span>Next</span>" +
-                              '<span class="icon"><i class="fas fa-arrow-right" aria-hidden="true"></i></span>' +
-                              "</button>" +
-                              "</div>"
-                            : "") +
-                        "</div>") +
-                    "</div>";
-
-                searchResultsContainerElement.querySelector("table")!.append(resultsTbodyElement);
-
-                if (offset > 0) {
-                    (
-                        searchResultsContainerElement.querySelector(
-                            "button[data-page='previous']"
-                        ) as HTMLButtonElement
-                    ).addEventListener("click", previousAndGetLotOccupancies);
-                }
-
-                if (limit + offset < responseJSON.count) {
-                    (
-                        searchResultsContainerElement.querySelector(
-                            "button[data-page='next']"
-                        ) as HTMLButtonElement
-                    ).addEventListener("click", nextAndGetLotOccupancies);
-                }
-            }
+            renderLotOccupancies
         );
-    };
+    }
 
-    const resetOffsetAndGetLotOccupancies = () => {
+    function resetOffsetAndGetLotOccupancies() {
         offsetElement.value = "0";
         getLotOccupancies();
-    };
+    }
 
-    const previousAndGetLotOccupancies = () => {
+    function previousAndGetLotOccupancies() {
         offsetElement.value = Math.max(
             Number.parseInt(offsetElement.value, 10) - limit,
             0
         ).toString();
         getLotOccupancies();
-    };
+    }
 
-    const nextAndGetLotOccupancies = () => {
+    function nextAndGetLotOccupancies() {
         offsetElement.value = (Number.parseInt(offsetElement.value, 10) + limit).toString();
         getLotOccupancies();
-    };
+    }
 
     const filterElements = searchFilterFormElement.querySelectorAll("input, select") as NodeListOf<
         HTMLInputElement | HTMLSelectElement
diff --git a/public/javascripts/lotOccupancySearch.min.js b/public/javascripts/lotOccupancySearch.min.js
index 6564b9b6..85fe67c7 100644
--- a/public/javascripts/lotOccupancySearch.min.js
+++ b/public/javascripts/lotOccupancySearch.min.js
@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),(()=>{const t=exports.los,a=document.querySelector("#form--searchFilters"),e=document.querySelector("#container--searchResults"),s=Number.parseInt(document.querySelector("#searchFilter--limit").value,10),c=document.querySelector("#searchFilter--offset"),i=()=>{const i=Number.parseInt(c.value,10);e.innerHTML='<div class="has-text-grey has-text-centered"><i class="fas fa-5x fa-circle-notch fa-spin" aria-hidden="true"></i><br />Loading '+exports.aliases.occupancies+"...</div>",cityssm.postJSON(t.urlPrefix+"/lotOccupancies/doSearchLotOccupancies",a,a=>{if(0===a.lotOccupancies.length)return void(e.innerHTML='<div class="message is-info"><p class="message-body">There are no '+cityssm.escapeHTML(exports.aliases.occupancy.toLowerCase())+" records that meet the search criteria.</p></div>");const c=document.createElement("tbody"),r=cityssm.dateToString(new Date);for(const e of a.lotOccupancies){let a="";a=e.occupancyStartDateString<=r&&(""===e.occupancyEndDateString||e.occupancyEndDateString>=r)?'<span class="has-tooltip-right" data-tooltip="Current '+exports.aliases.occupancy+'"><i class="fas fa-play" aria-label="Current '+exports.aliases.occupancy+'"></i></span>':e.occupancyStartDateString>r?'<span class="has-tooltip-right" data-tooltip="Future '+exports.aliases.occupancy+'"><i class="fas fa-fast-forward" aria-label="Future '+exports.aliases.occupancy+'"></i></span>':'<span class="has-tooltip-right" data-tooltip="Past '+exports.aliases.occupancy+'"><i class="fas fa-stop" aria-label="Past '+exports.aliases.occupancy+'"></i></span>';let s="";for(const t of e.lotOccupancyOccupants)s+='<span class="has-tooltip-left" data-tooltip="'+cityssm.escapeHTML(t.lotOccupantType||"")+'"><i class="fas fa-fw fa-'+cityssm.escapeHTML(t.fontAwesomeIconClass||"user")+'" aria-hidden="true"></i> '+cityssm.escapeHTML(t.occupantName||"")+"</span><br />";c.insertAdjacentHTML("beforeend",'<tr><td class="has-width-1">'+a+'</td><td><a class="has-text-weight-bold" href="'+t.urlPrefix+"/lotOccupancies/"+e.lotOccupancyId+'">'+cityssm.escapeHTML(e.occupancyType)+"</a></td><td>"+(e.lotName?'<a class="has-tooltip-right" data-tooltip="'+cityssm.escapeHTML(e.lotType||"")+'" href="'+t.urlPrefix+"/lots/"+e.lotId+'">'+cityssm.escapeHTML(e.lotName)+"</a>":'<span class="has-text-grey">(No '+cityssm.escapeHTML(exports.aliases.lot)+")</span>")+'<br /><span class="is-size-7">'+cityssm.escapeHTML(e.mapName||"")+"</span></td><td>"+e.occupancyStartDateString+"</td><td>"+(e.occupancyEndDate?e.occupancyEndDateString:'<span class="has-text-grey">(No End Date)</span>')+"</td><td>"+s+"</td><td>"+(e.printEJS?'<a class="button is-small" data-tooltip="Print" href="'+t.urlPrefix+"/print/"+e.printEJS+"/?lotOccupancyId="+e.lotOccupancyId+'" target="_blank"><i class="fas fa-print" aria-label="Print"></i></a>':"")+"</td></tr>")}e.innerHTML='<table class="table is-fullwidth is-striped is-hoverable has-sticky-header"><thead><tr><th class="has-width-1"></th><th>'+cityssm.escapeHTML(exports.aliases.occupancy)+" Type</th><th>"+cityssm.escapeHTML(exports.aliases.lot)+"</th><th>"+cityssm.escapeHTML(exports.aliases.occupancyStartDate)+"</th><th>End Date</th><th>"+cityssm.escapeHTML(exports.aliases.occupants)+'</th><th class="has-width-1"><span class="is-sr-only">Print</span></th></tr></thead><table><div class="level"><div class="level-left"><div class="level-item has-text-weight-bold">Displaying '+(i+1).toString()+" to "+Math.min(a.count,s+i)+" of "+a.count+'</div></div><div class="level-right">'+(i>0?'<div class="level-item"><button class="button is-rounded is-link is-outlined" data-page="previous" type="button" title="Previous"><i class="fas fa-arrow-left" aria-hidden="true"></i></button></div>':"")+(s+i<a.count?'<div class="level-item"><button class="button is-rounded is-link" data-page="next" type="button" title="Next"><span>Next</span><span class="icon"><i class="fas fa-arrow-right" aria-hidden="true"></i></span></button></div>':"")+"</div></div>",e.querySelector("table").append(c),i>0&&e.querySelector("button[data-page='previous']").addEventListener("click",o),s+i<a.count&&e.querySelector("button[data-page='next']").addEventListener("click",n)})},r=()=>{c.value="0",i()},o=()=>{c.value=Math.max(Number.parseInt(c.value,10)-s,0).toString(),i()},n=()=>{c.value=(Number.parseInt(c.value,10)+s).toString(),i()},l=a.querySelectorAll("input, select");for(const t of l)t.addEventListener("change",r);a.addEventListener("submit",t=>{t.preventDefault(),r()}),i()})();
\ No newline at end of file
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),(()=>{const t=exports.los,e=document.querySelector("#form--searchFilters"),a=document.querySelector("#container--searchResults"),s=Number.parseInt(document.querySelector("#searchFilter--limit").value,10),c=document.querySelector("#searchFilter--offset");function i(e){if(0===e.lotOccupancies.length)return void(a.innerHTML='<div class="message is-info"><p class="message-body">There are no '+cityssm.escapeHTML(exports.aliases.occupancy.toLowerCase())+" records that meet the search criteria.</p></div>");const c=document.createElement("tbody"),i=cityssm.dateToString(new Date);for(const a of e.lotOccupancies){let e="";e=a.occupancyStartDateString<=i&&(""===a.occupancyEndDateString||a.occupancyEndDateString>=i)?'<span class="has-tooltip-right" data-tooltip="Current '+exports.aliases.occupancy+'"><i class="fas fa-play" aria-label="Current '+exports.aliases.occupancy+'"></i></span>':a.occupancyStartDateString>i?'<span class="has-tooltip-right" data-tooltip="Future '+exports.aliases.occupancy+'"><i class="fas fa-fast-forward" aria-label="Future '+exports.aliases.occupancy+'"></i></span>':'<span class="has-tooltip-right" data-tooltip="Past '+exports.aliases.occupancy+'"><i class="fas fa-stop" aria-label="Past '+exports.aliases.occupancy+'"></i></span>';let s="";for(const t of a.lotOccupancyOccupants)s+='<span class="has-tooltip-left" data-tooltip="'+cityssm.escapeHTML(t.lotOccupantType||"")+'"><i class="fas fa-fw fa-'+cityssm.escapeHTML(t.fontAwesomeIconClass||"user")+'" aria-hidden="true"></i> '+cityssm.escapeHTML(t.occupantName||"")+"</span><br />";c.insertAdjacentHTML("beforeend",'<tr><td class="has-width-1">'+e+'</td><td><a class="has-text-weight-bold" href="'+t.urlPrefix+"/lotOccupancies/"+a.lotOccupancyId+'">'+cityssm.escapeHTML(a.occupancyType)+"</a></td><td>"+(a.lotName?'<a class="has-tooltip-right" data-tooltip="'+cityssm.escapeHTML(a.lotType||"")+'" href="'+t.urlPrefix+"/lots/"+a.lotId+'">'+cityssm.escapeHTML(a.lotName)+"</a>":'<span class="has-text-grey">(No '+cityssm.escapeHTML(exports.aliases.lot)+")</span>")+'<br /><span class="is-size-7">'+cityssm.escapeHTML(a.mapName||"")+"</span></td><td>"+a.occupancyStartDateString+"</td><td>"+(a.occupancyEndDate?a.occupancyEndDateString:'<span class="has-text-grey">(No End Date)</span>')+"</td><td>"+s+"</td><td>"+(a.printEJS?'<a class="button is-small" data-tooltip="Print" href="'+t.urlPrefix+"/print/"+a.printEJS+"/?lotOccupancyId="+a.lotOccupancyId+'" target="_blank"><i class="fas fa-print" aria-label="Print"></i></a>':"")+"</td></tr>")}a.innerHTML='<table class="table is-fullwidth is-striped is-hoverable has-sticky-header"><thead><tr><th class="has-width-1"></th><th>'+cityssm.escapeHTML(exports.aliases.occupancy)+" Type</th><th>"+cityssm.escapeHTML(exports.aliases.lot)+"</th><th>"+cityssm.escapeHTML(exports.aliases.occupancyStartDate)+"</th><th>End Date</th><th>"+cityssm.escapeHTML(exports.aliases.occupants)+'</th><th class="has-width-1"><span class="is-sr-only">Print</span></th></tr></thead><table><div class="level"><div class="level-left"><div class="level-item has-text-weight-bold">Displaying '+(e.offset+1).toString()+" to "+Math.min(e.count,s+e.offset)+" of "+e.count+'</div></div><div class="level-right">'+(e.offset>0?'<div class="level-item"><button class="button is-rounded is-link is-outlined" data-page="previous" type="button" title="Previous"><i class="fas fa-arrow-left" aria-hidden="true"></i></button></div>':"")+(s+e.offset<e.count?'<div class="level-item"><button class="button is-rounded is-link" data-page="next" type="button" title="Next"><span>Next</span><span class="icon"><i class="fas fa-arrow-right" aria-hidden="true"></i></span></button></div>':"")+"</div></div>",a.querySelector("table").append(c),e.offset>0&&a.querySelector("button[data-page='previous']").addEventListener("click",r),s+e.offset<e.count&&a.querySelector("button[data-page='next']").addEventListener("click",l)}function o(){a.innerHTML='<div class="has-text-grey has-text-centered"><i class="fas fa-5x fa-circle-notch fa-spin" aria-hidden="true"></i><br />Loading '+exports.aliases.occupancies+"...</div>",cityssm.postJSON(t.urlPrefix+"/lotOccupancies/doSearchLotOccupancies",e,i)}function n(){c.value="0",o()}function r(){c.value=Math.max(Number.parseInt(c.value,10)-s,0).toString(),o()}function l(){c.value=(Number.parseInt(c.value,10)+s).toString(),o()}const p=e.querySelectorAll("input, select");for(const t of p)t.addEventListener("change",n);e.addEventListener("submit",t=>{t.preventDefault(),n()}),o()})();
\ No newline at end of file