attempt to reduce complexity

starting with lotOccupancyEdit.ts
- split panel javascript into separate files
- combine with gulp-include
- comments now removed during gulp-minify

.codeclimate.yml

@@ -15,3 +15,4 @@ exclude_patterns:
 - "temp/"
 - "test/"
 - "**/*.d.ts"
+- "**/*.js"

gulpfile.js

@@ -1,6 +1,7 @@
 import gulp from "gulp";
 import changed from "gulp-changed";
 import minify from "gulp-minify";
+import include from "gulp-include";
 import dartSass from "sass";
 import gulpSass from "gulp-sass";
 const sass = gulpSass(dartSass);
@@ -22,13 +23,21 @@ const publicJavascriptsMinFunction = () => {
         .pipe(minify({ noSource: true, ext: { min: ".min.js" } }))
         .pipe(gulp.dest(publicJavascriptsDestination));
 };
+const publicJavascriptsLotOccupancyEditFunction = () => {
+    return gulp.src("public-typescript/lotOccupancyEdit/lotOccupancyEdit.js")
+        .pipe(include())
+        .pipe(gulp.dest("public-typescript"));
+};
+gulp.task("public-javascript-lotOccupancyEdit", publicJavascriptsLotOccupancyEditFunction);
 gulp.task("public-javascript-min", publicJavascriptsMinFunction);
 const watchFunction = () => {
     gulp.watch("public-scss/*.scss", publicSCSSFunction);
+    gulp.watch("public-typescript/lotOccupancyEdit/*.js", publicJavascriptsLotOccupancyEditFunction);
     gulp.watch("public-typescript/*.js", publicJavascriptsMinFunction);
 };
 gulp.task("watch", watchFunction);
 gulp.task("default", () => {
+    publicJavascriptsLotOccupancyEditFunction();
     publicJavascriptsMinFunction();
     publicSCSSFunction();
     watchFunction();

gulpfile.ts

@@ -3,6 +3,7 @@
 import gulp from "gulp";
 import changed from "gulp-changed";
 import minify from "gulp-minify";
+import include from "gulp-include";
 
 import dartSass from "sass";
 import gulpSass from "gulp-sass";
@@ -46,6 +47,13 @@ const publicJavascriptsMinFunction = () => {
         .pipe(gulp.dest(publicJavascriptsDestination));
 };
 
+const publicJavascriptsLotOccupancyEditFunction = () => {
+    return gulp.src("public-typescript/lotOccupancyEdit/lotOccupancyEdit.js")
+    .pipe(include())
+    .pipe(gulp.dest("public-typescript"));
+};
+
+gulp.task("public-javascript-lotOccupancyEdit", publicJavascriptsLotOccupancyEditFunction);
 gulp.task("public-javascript-min", publicJavascriptsMinFunction);
 
 /*
@@ -54,6 +62,7 @@ gulp.task("public-javascript-min", publicJavascriptsMinFunction);
 
 const watchFunction = () => {
     gulp.watch("public-scss/*.scss", publicSCSSFunction);
+    gulp.watch("public-typescript/lotOccupancyEdit/*.js", publicJavascriptsLotOccupancyEditFunction);
     gulp.watch("public-typescript/*.js", publicJavascriptsMinFunction);
 };
 
@@ -64,6 +73,7 @@ gulp.task("watch", watchFunction);
  */
 
 gulp.task("default", () => {
+    publicJavascriptsLotOccupancyEditFunction();
     publicJavascriptsMinFunction();
     publicSCSSFunction();
     watchFunction();

package-lock.json

@@ -84,6 +84,7 @@
                 "eslint-plugin-unicorn": "^45.0.2",
                 "gulp": "^4.0.2",
                 "gulp-changed": "^4.0.3",
+                "gulp-include": "^2.4.1",
                 "gulp-minify": "^3.1.0",
                 "gulp-sass": "^5.1.0",
                 "nodemon": "^2.0.20",
@@ -3691,6 +3692,12 @@
                 "node": ">=6.0.0"
             }
         },
+        "node_modules/duplexer": {
+            "version": "0.1.2",
+            "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
+            "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
+            "dev": true
+        },
         "node_modules/duplexify": {
             "version": "3.7.1",
             "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz",
@@ -4487,6 +4494,21 @@
                 "node": ">= 0.6"
             }
         },
+        "node_modules/event-stream": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-4.0.1.tgz",
+            "integrity": "sha512-qACXdu/9VHPBzcyhdOWR5/IahhGMf0roTeZJfzz077GwylcDd90yOHLouhmv7GJ5XzPi6ekaQWd8AvPP2nOvpA==",
+            "dev": true,
+            "dependencies": {
+                "duplexer": "^0.1.1",
+                "from": "^0.1.7",
+                "map-stream": "0.0.7",
+                "pause-stream": "^0.0.11",
+                "split": "^1.0.1",
+                "stream-combiner": "^0.2.2",
+                "through": "^2.3.8"
+            }
+        },
         "node_modules/eventemitter2": {
             "version": "6.4.7",
             "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.7.tgz",
@@ -5482,6 +5504,12 @@
                 "node": ">= 0.6"
             }
         },
+        "node_modules/from": {
+            "version": "0.1.7",
+            "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
+            "integrity": "sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g==",
+            "dev": true
+        },
         "node_modules/fs-constants": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
@@ -6268,6 +6296,52 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/gulp-include": {
+            "version": "2.4.1",
+            "resolved": "https://registry.npmjs.org/gulp-include/-/gulp-include-2.4.1.tgz",
+            "integrity": "sha512-ARF7H6CD/CCavOcvlLhs6sAY+turxI72Gwp+5X/sMNUha8eJXFloDaZ93nnSKIh0K8VR7b7PURHdXrIhFhQ9gg==",
+            "dev": true,
+            "dependencies": {
+                "ansi-colors": "^3.2.4",
+                "event-stream": "^4.0.1",
+                "glob": "^7.1.3",
+                "plugin-error": "^1.0.1",
+                "source-map": "^0.7.3",
+                "strip-bom": "^2.0.0",
+                "vinyl": "^2.2.0",
+                "vinyl-sourcemaps-apply": "^0.2.1"
+            }
+        },
+        "node_modules/gulp-include/node_modules/ansi-colors": {
+            "version": "3.2.4",
+            "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
+            "integrity": "sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==",
+            "dev": true,
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/gulp-include/node_modules/source-map": {
+            "version": "0.7.4",
+            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+            "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+            "dev": true,
+            "engines": {
+                "node": ">= 8"
+            }
+        },
+        "node_modules/gulp-include/node_modules/strip-bom": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
+            "integrity": "sha512-kwrX1y7czp1E69n2ajbG65mIo9dqvJ+8aBQXOGVxqwvNbsXdFM6Lq37dLAY3mknUwru8CfcCbfOLL/gMo+fi3g==",
+            "dev": true,
+            "dependencies": {
+                "is-utf8": "^0.2.0"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/gulp-minify": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/gulp-minify/-/gulp-minify-3.1.0.tgz",
@@ -8087,6 +8161,12 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/map-stream": {
+            "version": "0.0.7",
+            "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.0.7.tgz",
+            "integrity": "sha512-C0X0KQmGm3N2ftbTGBhSyuydQ+vV1LC3f3zPvT3RXHXNZrvfPZcoXp/N5DOa8vedX/rTMm2CjTtivFg2STJMRQ==",
+            "dev": true
+        },
         "node_modules/map-visit": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
@@ -9290,6 +9370,15 @@
                 "node": ">=8"
             }
         },
+        "node_modules/pause-stream": {
+            "version": "0.0.11",
+            "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
+            "integrity": "sha512-e3FBlXLmN/D1S+zHzanP4E/4Z60oFAa3O051qt1pxa7DEJWKAyil6upYVXCWadEnuoqa4Pkc9oUx9zsxYeRv8A==",
+            "dev": true,
+            "dependencies": {
+                "through": "~2.3"
+            }
+        },
         "node_modules/pend": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
@@ -10844,6 +10933,18 @@
             "integrity": "sha512-Ctl2BrFiM0X3MANYgj3CkygxhRmr9mi6xhejbdO960nF6EDJApTYpn0BQnDKlnNBULKiCN1n3w9EBkHK8ZWg+g==",
             "dev": true
         },
+        "node_modules/split": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz",
+            "integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==",
+            "dev": true,
+            "dependencies": {
+                "through": "2"
+            },
+            "engines": {
+                "node": "*"
+            }
+        },
         "node_modules/split-string": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
@@ -11001,6 +11102,16 @@
                 "npm": ">=6"
             }
         },
+        "node_modules/stream-combiner": {
+            "version": "0.2.2",
+            "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.2.2.tgz",
+            "integrity": "sha512-6yHMqgLYDzQDcAkL+tjJDC5nSNuNIx0vZtRZeiPh7Saef7VHX9H5Ijn9l2VIol2zaNYlYEX6KyuT/237A58qEQ==",
+            "dev": true,
+            "dependencies": {
+                "duplexer": "~0.1.1",
+                "through": "~2.3.4"
+            }
+        },
         "node_modules/stream-exhaust": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/stream-exhaust/-/stream-exhaust-1.0.2.tgz",
@@ -15302,6 +15413,12 @@
                 "esutils": "^2.0.2"
             }
         },
+        "duplexer": {
+            "version": "0.1.2",
+            "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
+            "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
+            "dev": true
+        },
         "duplexify": {
             "version": "3.7.1",
             "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz",
@@ -15923,6 +16040,21 @@
             "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
             "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg=="
         },
+        "event-stream": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-4.0.1.tgz",
+            "integrity": "sha512-qACXdu/9VHPBzcyhdOWR5/IahhGMf0roTeZJfzz077GwylcDd90yOHLouhmv7GJ5XzPi6ekaQWd8AvPP2nOvpA==",
+            "dev": true,
+            "requires": {
+                "duplexer": "^0.1.1",
+                "from": "^0.1.7",
+                "map-stream": "0.0.7",
+                "pause-stream": "^0.0.11",
+                "split": "^1.0.1",
+                "stream-combiner": "^0.2.2",
+                "through": "^2.3.8"
+            }
+        },
         "eventemitter2": {
             "version": "6.4.7",
             "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.7.tgz",
@@ -16714,6 +16846,12 @@
             "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
             "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q=="
         },
+        "from": {
+            "version": "0.1.7",
+            "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
+            "integrity": "sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g==",
+            "dev": true
+        },
         "fs-constants": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
@@ -17334,6 +17472,45 @@
                 }
             }
         },
+        "gulp-include": {
+            "version": "2.4.1",
+            "resolved": "https://registry.npmjs.org/gulp-include/-/gulp-include-2.4.1.tgz",
+            "integrity": "sha512-ARF7H6CD/CCavOcvlLhs6sAY+turxI72Gwp+5X/sMNUha8eJXFloDaZ93nnSKIh0K8VR7b7PURHdXrIhFhQ9gg==",
+            "dev": true,
+            "requires": {
+                "ansi-colors": "^3.2.4",
+                "event-stream": "^4.0.1",
+                "glob": "^7.1.3",
+                "plugin-error": "^1.0.1",
+                "source-map": "^0.7.3",
+                "strip-bom": "^2.0.0",
+                "vinyl": "^2.2.0",
+                "vinyl-sourcemaps-apply": "^0.2.1"
+            },
+            "dependencies": {
+                "ansi-colors": {
+                    "version": "3.2.4",
+                    "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
+                    "integrity": "sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==",
+                    "dev": true
+                },
+                "source-map": {
+                    "version": "0.7.4",
+                    "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+                    "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+                    "dev": true
+                },
+                "strip-bom": {
+                    "version": "2.0.0",
+                    "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
+                    "integrity": "sha512-kwrX1y7czp1E69n2ajbG65mIo9dqvJ+8aBQXOGVxqwvNbsXdFM6Lq37dLAY3mknUwru8CfcCbfOLL/gMo+fi3g==",
+                    "dev": true,
+                    "requires": {
+                        "is-utf8": "^0.2.0"
+                    }
+                }
+            }
+        },
         "gulp-minify": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/gulp-minify/-/gulp-minify-3.1.0.tgz",
@@ -18696,6 +18873,12 @@
             "integrity": "sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==",
             "dev": true
         },
+        "map-stream": {
+            "version": "0.0.7",
+            "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.0.7.tgz",
+            "integrity": "sha512-C0X0KQmGm3N2ftbTGBhSyuydQ+vV1LC3f3zPvT3RXHXNZrvfPZcoXp/N5DOa8vedX/rTMm2CjTtivFg2STJMRQ==",
+            "dev": true
+        },
         "map-visit": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
@@ -19597,6 +19780,15 @@
             "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
             "dev": true
         },
+        "pause-stream": {
+            "version": "0.0.11",
+            "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
+            "integrity": "sha512-e3FBlXLmN/D1S+zHzanP4E/4Z60oFAa3O051qt1pxa7DEJWKAyil6upYVXCWadEnuoqa4Pkc9oUx9zsxYeRv8A==",
+            "dev": true,
+            "requires": {
+                "through": "~2.3"
+            }
+        },
         "pend": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
@@ -20799,6 +20991,15 @@
             "integrity": "sha512-Ctl2BrFiM0X3MANYgj3CkygxhRmr9mi6xhejbdO960nF6EDJApTYpn0BQnDKlnNBULKiCN1n3w9EBkHK8ZWg+g==",
             "dev": true
         },
+        "split": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz",
+            "integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==",
+            "dev": true,
+            "requires": {
+                "through": "2"
+            }
+        },
         "split-string": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
@@ -20920,6 +21121,16 @@
             "integrity": "sha512-KXDYZ9dszj6bzvnEMRYvxgeTHU74QBFL54XKtP3nyMuJ81CFYtABZ3bAzL2EdFUaEwJOBOgENyFj3R7oTzDyyw==",
             "dev": true
         },
+        "stream-combiner": {
+            "version": "0.2.2",
+            "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.2.2.tgz",
+            "integrity": "sha512-6yHMqgLYDzQDcAkL+tjJDC5nSNuNIx0vZtRZeiPh7Saef7VHX9H5Ijn9l2VIol2zaNYlYEX6KyuT/237A58qEQ==",
+            "dev": true,
+            "requires": {
+                "duplexer": "~0.1.1",
+                "through": "~2.3.4"
+            }
+        },
         "stream-exhaust": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/stream-exhaust/-/stream-exhaust-1.0.2.tgz",

package.json

@@ -108,6 +108,7 @@
         "eslint-plugin-unicorn": "^45.0.2",
         "gulp": "^4.0.2",
         "gulp-changed": "^4.0.3",
+        "gulp-include": "^2.4.1",
         "gulp-minify": "^3.1.0",
         "gulp-sass": "^5.1.0",
         "nodemon": "^2.0.20",

public-typescript/adminCleanup.js

@@ -1,4 +1,5 @@
 "use strict";
+/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
 Object.defineProperty(exports, "__esModule", { value: true });
 (() => {
     const los = exports.los;

public-typescript/adminFees.js

@@ -1,4 +1,5 @@
 "use strict";
+/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
 Object.defineProperty(exports, "__esModule", { value: true });
 (() => {
     const los = exports.los;
@@ -80,6 +81,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
                     const panelBlockElement = document.createElement("div");
                     panelBlockElement.className = "panel-block is-block container--fee";
                     panelBlockElement.dataset.feeId = fee.feeId.toString();
+                    const hasTagsBlock = fee.isRequired || fee.occupancyTypeId || fee.lotTypeId;
                     panelBlockElement.innerHTML =
                         '<div class="columns">' +
                             ('<div class="column is-half">' +
@@ -91,23 +93,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
                                 cityssm.escapeHTML(fee.feeDescription || "").replace(/\n/g, "<br />") +
                                 "</small>" +
                                 "</p>" +
-                                '<p class="tags">' +
+                                (hasTagsBlock
-                                (fee.isRequired ? '<span class="tag is-warning">Required</span>' : "") +
+                                    ? '<p class="tags">' +
-                                (fee.occupancyTypeId
+                                        (fee.isRequired
-                                    ? ' <span class="tag has-tooltip-bottom" data-tooltip="' +
+                                            ? '<span class="tag is-warning">Required</span>'
-                                        cityssm.escapeHTML(exports.aliases.occupancy) +
+                                            : "") +
-                                        ' Type Filter">' +
+                                        (fee.occupancyTypeId
-                                        cityssm.escapeHTML(fee.occupancyType || "") +
+                                            ? ' <span class="tag has-tooltip-bottom" data-tooltip="' +
-                                        "</span>"
+                                                cityssm.escapeHTML(exports.aliases.occupancy) +
+                                                ' Type Filter">' +
+                                                cityssm.escapeHTML(fee.occupancyType || "") +
+                                                "</span>"
+                                            : "") +
+                                        (fee.lotTypeId
+                                            ? ' <span class="tag has-tooltip-bottom" data-tooltip="' +
+                                                cityssm.escapeHTML(exports.aliases.lot) +
+                                                ' Type Filter">' +
+                                                cityssm.escapeHTML(fee.lotType || "") +
+                                                "</span>"
+                                            : "") +
+                                        "</p>"
                                     : "") +
-                                (fee.lotTypeId
-                                    ? ' <span class="tag has-tooltip-bottom" data-tooltip="' +
-                                        cityssm.escapeHTML(exports.aliases.lot) +
-                                        ' Type Filter">' +
-                                        cityssm.escapeHTML(fee.lotType || "") +
-                                        "</span>"
-                                    : "") +
-                                "</p>" +
                                 "</div>") +
                             ('<div class="column">' +
                                 '<div class="columns is-mobile">' +
@@ -167,6 +173,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
             feeCategoriesContainerElement.append(feeCategoryContainerElement);
         }
     };
+    /*
+     * Fee Categories
+     */
     document.querySelector("#button--addFeeCategory").addEventListener("click", () => {
         let addCloseModalFunction;
         const doAddFeeCategory = (submitEvent) => {
@@ -306,6 +315,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
             }
         });
     };
+    /*
+     * Fees
+     */
     const openAddFee = (clickEvent) => {
         const feeCategoryId = Number.parseInt(clickEvent.currentTarget.closest(".container--feeCategory").dataset.feeCategoryId, 10);
         let addCloseModalFunction;
@@ -605,5 +617,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
             }
         });
     };
+    /*
+     * Initialize
+     */
     renderFeeCategories();
 })();

public-typescript/adminFees.ts

@@ -102,9 +102,12 @@ declare const bulmaJS: BulmaJS;
             } else {
                 for (const fee of feeCategory.fees!) {
                     const panelBlockElement = document.createElement("div");
+
                     panelBlockElement.className = "panel-block is-block container--fee";
                     panelBlockElement.dataset.feeId = fee.feeId!.toString();
 
+                    const hasTagsBlock = fee.isRequired || fee.occupancyTypeId || fee.lotTypeId;
+
                     panelBlockElement.innerHTML =
                         '<div class="columns">' +
                         ('<div class="column is-half">' +
@@ -116,23 +119,27 @@ declare const bulmaJS: BulmaJS;
                             cityssm.escapeHTML(fee.feeDescription || "").replace(/\n/g, "<br />") +
                             "</small>" +
                             "</p>" +
-                            '<p class="tags">' +
+                            (hasTagsBlock
-                            (fee.isRequired ? '<span class="tag is-warning">Required</span>' : "") +
+                                ? '<p class="tags">' +
-                            (fee.occupancyTypeId
+                                  (fee.isRequired
-                                ? ' <span class="tag has-tooltip-bottom" data-tooltip="' +
+                                      ? '<span class="tag is-warning">Required</span>'
-                                  cityssm.escapeHTML(exports.aliases.occupancy) +
+                                      : "") +
-                                  ' Type Filter">' +
+                                  (fee.occupancyTypeId
-                                  cityssm.escapeHTML(fee.occupancyType || "") +
+                                      ? ' <span class="tag has-tooltip-bottom" data-tooltip="' +
-                                  "</span>"
+                                        cityssm.escapeHTML(exports.aliases.occupancy) +
+                                        ' Type Filter">' +
+                                        cityssm.escapeHTML(fee.occupancyType || "") +
+                                        "</span>"
+                                      : "") +
+                                  (fee.lotTypeId
+                                      ? ' <span class="tag has-tooltip-bottom" data-tooltip="' +
+                                        cityssm.escapeHTML(exports.aliases.lot) +
+                                        ' Type Filter">' +
+                                        cityssm.escapeHTML(fee.lotType || "") +
+                                        "</span>"
+                                      : "") +
+                                  "</p>"
                                 : "") +
-                            (fee.lotTypeId
-                                ? ' <span class="tag has-tooltip-bottom" data-tooltip="' +
-                                  cityssm.escapeHTML(exports.aliases.lot) +
-                                  ' Type Filter">' +
-                                  cityssm.escapeHTML(fee.lotType || "") +
-                                  "</span>"
-                                : "") +
-                            "</p>" +
                             "</div>") +
                         ('<div class="column">' +
                             '<div class="columns is-mobile">' +

public-typescript/adminLotTypes.js

@@ -1,4 +1,5 @@
 "use strict";
+/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
 Object.defineProperty(exports, "__esModule", { value: true });
 (() => {
     const los = exports.los;

public-typescript/adminOccupancyTypes.js

@@ -1,4 +1,5 @@
 "use strict";
+/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
 Object.defineProperty(exports, "__esModule", { value: true });
 (() => {
     const los = exports.los;
@@ -486,6 +487,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
             return;
         }
         for (const occupancyType of occupancyTypes) {
+            // Types and Fields
             {
                 const occupancyTypeContainer = document.createElement("div");
                 occupancyTypeContainer.className = "panel container--occupancyType";
@@ -555,6 +557,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 occupancyTypeContainer.querySelector(".button--moveOccupancyTypeDown").addEventListener("click", moveOccupancyTypeDown);
                 occupancyTypesContainerElement.append(occupancyTypeContainer);
             }
+            // Prints
             {
                 const occupancyTypePrintContainer = document.createElement("div");
                 occupancyTypePrintContainer.className = "panel container--occupancyTypePrintList";

public-typescript/adminTables.js

@@ -1,4 +1,5 @@
 "use strict";
+/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
 Object.defineProperty(exports, "__esModule", { value: true });
 (() => {
     const los = exports.los;
@@ -8,6 +9,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
         inputElement.closest(".field").querySelectorAll(".button.is-static")[1].innerHTML =
             '<i class="fas fa-fw fa-' + fontAwesomeIconClass + '" aria-hidden="true"></i>';
     };
+    /*
+     * Work Order Types
+     */
     let workOrderTypes = exports.workOrderTypes;
     delete exports.workOrderTypes;
     const updateWorkOrderType = (submitEvent) => {
@@ -191,6 +195,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
         });
     });
     renderWorkOrderTypes();
+    /*
+     * Work Order Milestone Types
+     */
     let workOrderMilestoneTypes = exports.workOrderMilestoneTypes;
     delete exports.workOrderMilestoneTypes;
     const updateWorkOrderMilestoneType = (submitEvent) => {
@@ -375,6 +382,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
         });
     });
     renderWorkOrderMilestoneTypes();
+    /*
+     * Lot Statuses
+     */
     let lotStatuses = exports.lotStatuses;
     delete exports.lotStatuses;
     const updateLotStatus = (submitEvent) => {
@@ -563,6 +573,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
         });
     });
     renderLotStatuses();
+    /*
+     * Lot Occupant Types
+     */
     let lotOccupantTypes = exports.lotOccupantTypes;
     delete exports.lotOccupantTypes;
     const updateLotOccupantType = (submitEvent) => {

public-typescript/dashboard.js

@@ -1,4 +1,5 @@
 "use strict";
+/* eslint-disable unicorn/prefer-module */
 Object.defineProperty(exports, "__esModule", { value: true });
 (() => {
     const los = exports.los;

public-typescript/lotEdit.js

@@ -1,9 +1,11 @@
 "use strict";
+/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
 Object.defineProperty(exports, "__esModule", { value: true });
 (() => {
     const los = exports.los;
     const lotId = document.querySelector("#lot--lotId").value;
     const isCreate = lotId === "";
+    // Main form
     let hasUnsavedChanges = false;
     let refreshAfterSave = isCreate;
     const setUnsavedChanges = () => {
@@ -81,6 +83,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
             });
         });
     }
+    // Lot Type
     const lotTypeIdElement = document.querySelector("#lot--lotTypeId");
     if (isCreate) {
         const lotFieldsContainerElement = document.querySelector("#container--lotFields");
@@ -189,6 +192,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
             }
         });
     }
+    // Comments
     let lotComments = exports.lotComments;
     delete exports.lotComments;
     const openEditLotComment = (clickEvent) => {
@@ -234,6 +238,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
             onshown: (modalElement, closeModalFunction) => {
                 bulmaJS.toggleHtmlClipped();
                 los.initializeDatePickers(modalElement);
+                // los.initializeTimePickers(modalElement);
                 modalElement.querySelector("#lotCommentEdit--lotComment").focus();
                 editFormElement = modalElement.querySelector("form");
                 editFormElement.addEventListener("submit", editComment);

public-typescript/lotOccupancyEdit.js

@@ -1,10 +1,14 @@
 "use strict";
+/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
 Object.defineProperty(exports, "__esModule", { value: true });
 (() => {
     var _a, _b, _c;
     const los = exports.los;
     const lotOccupancyId = document.querySelector("#lotOccupancy--lotOccupancyId").value;
     const isCreate = lotOccupancyId === "";
+    /*
+     * Main form
+     */
     let hasUnsavedChanges = false;
     let refreshAfterSave = isCreate;
     const setUnsavedChanges = () => {
@@ -187,6 +191,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
             });
         });
     }
+    // Occupancy Type
     const occupancyTypeIdElement = document.querySelector("#lotOccupancy--occupancyTypeId");
     if (isCreate) {
         const lotOccupancyFieldsContainerElement = document.querySelector("#container--lotOccupancyFields");
@@ -295,6 +300,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
             }
         });
     }
+    // Lot Selector
     const lotNameElement = document.querySelector("#lotOccupancy--lotName");
     lotNameElement.addEventListener("click", (clickEvent) => {
         const currentLotName = clickEvent.currentTarget.value;
@@ -387,6 +393,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 lotSelectModalElement = modalElement;
                 lotSelectCloseModalFunction = closeModalFunction;
                 bulmaJS.init(modalElement);
+                // search Tab
                 const lotNameFilterElement = modalElement.querySelector("#lotSelect--lotName");
                 if (document.querySelector("#lotOccupancy--lotId").value !==
                     "") {
@@ -405,6 +412,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
                     submitEvent.preventDefault();
                 });
                 searchLots();
+                // Create Tab
                 if (exports.lotNamePattern) {
                     const regex = exports.lotNamePattern;
                     modalElement.querySelector("#lotCreate--lotName").pattern = regex.source;
@@ -463,6 +471,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
             setUnsavedChanges();
         }
     });
+    // Start Date
     los.initializeDatePickers(formElement);
     document.querySelector("#lotOccupancy--occupancyStartDateString").addEventListener("change", () => {
         const endDatePicker = document.querySelector("#lotOccupancy--occupancyEndDateString").bulmaCalendar.datePicker;
@@ -470,6 +479,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
         endDatePicker.refresh();
     });
     los.initializeUnlockFieldButtons(formElement);
+    /*
+     * Occupants
+     */
     if (isCreate) {
         const lotOccupantTypeIdElement = document.querySelector("#lotOccupancy--lotOccupantTypeId");
         lotOccupantTypeIdElement.addEventListener("change", () => {
@@ -807,12 +819,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
         });
         renderLotOccupancyOccupants();
     }
+    /*
+     * Comments
+     */
     if (!isCreate) {
+        "use strict";
+        /* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
+        Object.defineProperty(exports, "__esModule", { value: true });
         let lotOccupancyComments = exports.lotOccupancyComments;
         delete exports.lotOccupancyComments;
         const openEditLotOccupancyComment = (clickEvent) => {
-            const lotOccupancyCommentId = Number.parseInt(clickEvent.currentTarget.closest("tr").dataset
+            const lotOccupancyCommentId = Number.parseInt(clickEvent.currentTarget.closest("tr").dataset.lotOccupancyCommentId, 10);
-                .lotOccupancyCommentId, 10);
             const lotOccupancyComment = lotOccupancyComments.find((currentLotOccupancyComment) => {
                 return currentLotOccupancyComment.lotOccupancyCommentId === lotOccupancyCommentId;
             });
@@ -854,6 +871,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 onshown: (modalElement, closeModalFunction) => {
                     bulmaJS.toggleHtmlClipped();
                     los.initializeDatePickers(modalElement);
+                    // los.initializeTimePickers(modalElement);
                     modalElement.querySelector("#lotOccupancyCommentEdit--lotOccupancyComment").focus();
                     editFormElement = modalElement.querySelector("form");
                     editFormElement.addEventListener("submit", editComment);
@@ -865,8 +883,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
             });
         };
         const deleteLotOccupancyComment = (clickEvent) => {
-            const lotOccupancyCommentId = Number.parseInt(clickEvent.currentTarget.closest("tr").dataset
+            const lotOccupancyCommentId = Number.parseInt(clickEvent.currentTarget.closest("tr").dataset.lotOccupancyCommentId, 10);
-                .lotOccupancyCommentId, 10);
             const doDelete = () => {
                 cityssm.postJSON(los.urlPrefix + "/lotOccupancies/doDeleteLotOccupancyComment", {
                     lotOccupancyId,
@@ -987,8 +1004,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
             });
         });
         renderLotOccupancyComments();
+        
     }
+    /*
+    * Fees / Transactions
+    */
     if (!isCreate) {
+        "use strict";
+        /* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
+        Object.defineProperty(exports, "__esModule", { value: true });
         let lotOccupancyFees = exports.lotOccupancyFees;
         delete exports.lotOccupancyFees;
         const lotOccupancyFeesContainerElement = document.querySelector("#container--lotOccupancyFees");
@@ -996,8 +1020,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
             let feeGrandTotal = 0;
             for (const lotOccupancyFee of lotOccupancyFees) {
                 feeGrandTotal +=
-                    (lotOccupancyFee.feeAmount + lotOccupancyFee.taxAmount) *
+                    (lotOccupancyFee.feeAmount + lotOccupancyFee.taxAmount) * lotOccupancyFee.quantity;
-                        lotOccupancyFee.quantity;
             }
             return feeGrandTotal;
         };
@@ -1064,9 +1087,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 const tableRowElement = document.createElement("tr");
                 tableRowElement.className = "container--lotOccupancyFee";
                 tableRowElement.dataset.feeId = lotOccupancyFee.feeId.toString();
-                tableRowElement.dataset.includeQuantity = lotOccupancyFee.includeQuantity
+                tableRowElement.dataset.includeQuantity = lotOccupancyFee.includeQuantity ? "1" : "0";
-                    ? "1"
-                    : "0";
                 tableRowElement.innerHTML =
                     '<td colspan="' +
                         (lotOccupancyFee.quantity === 1 ? "5" : "1") +
@@ -1091,9 +1112,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
                             '<i class="fas fa-trash" aria-hidden="true"></i>' +
                             "</button>" +
                             "</td>");
-                tableRowElement
+                tableRowElement.querySelector("button").addEventListener("click", deleteLotOccupancyFee);
-                    .querySelector("button")
-                    .addEventListener("click", deleteLotOccupancyFee);
                 lotOccupancyFeesContainerElement.querySelector("tbody").append(tableRowElement);
                 feeAmountTotal += lotOccupancyFee.feeAmount * lotOccupancyFee.quantity;
                 taxAmountTotal += lotOccupancyFee.taxAmount * lotOccupancyFee.quantity;
@@ -1149,9 +1168,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
                     onshown: (modalElement, closeModalFunction) => {
                         quantityCloseModalFunction = closeModalFunction;
                         quantityElement = modalElement.querySelector("#lotOccupancyFeeQuantity--quantity");
-                        modalElement
+                        modalElement.querySelector("form").addEventListener("submit", doSetQuantity);
-                            .querySelector("form")
-                            .addEventListener("submit", doSetQuantity);
                     }
                 });
             };
@@ -1173,16 +1190,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 }
             };
             const filterFees = () => {
-                const filterStringPieces = feeFilterElement.value
+                const filterStringPieces = feeFilterElement.value.trim().toLowerCase().split(" ");
-                    .trim()
-                    .toLowerCase()
-                    .split(" ");
                 feeFilterResultsElement.innerHTML = "";
                 for (const feeCategory of feeCategories) {
                     const categoryContainerElement = document.createElement("div");
                     categoryContainerElement.className = "container--feeCategory";
-                    categoryContainerElement.dataset.feeCategoryId =
+                    categoryContainerElement.dataset.feeCategoryId = feeCategory.feeCategoryId.toString();
-                        feeCategory.feeCategoryId.toString();
                     categoryContainerElement.innerHTML =
                         '<h4 class="title is-5 mt-2">' +
                             cityssm.escapeHTML(feeCategory.feeCategory || "") +
@@ -1215,9 +1228,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
                                 cityssm.escapeHTML(fee.feeName || "") +
                                 "</strong><br />" +
                                 "<small>" +
-                                cityssm
+                                cityssm.escapeHTML(fee.feeDescription || "").replace(/\n/g, "<br />") +
-                                    .escapeHTML(fee.feeDescription || "")
-                                    .replace(/\n/g, "<br />") +
                                 "</small>";
                         panelBlockElement.addEventListener("click", tryAddFee);
                         categoryContainerElement.querySelector(".panel").append(panelBlockElement);
@@ -1348,9 +1359,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 tableRowElement
                     .querySelector("button")
                     .addEventListener("click", deleteLotOccupancyTransaction);
-                lotOccupancyTransactionsContainerElement
+                lotOccupancyTransactionsContainerElement.querySelector("tbody").append(tableRowElement);
-                    .querySelector("tbody")
-                    .append(tableRowElement);
             }
             lotOccupancyTransactionsContainerElement.querySelector("#lotOccupancyTransactions--grandTotal").textContent = "$" + transactionGrandTotal.toFixed(2);
             const feeGrandTotal = getFeeGrandTotal();
@@ -1400,9 +1409,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 onshown: (modalElement, closeModalFunction) => {
                     bulmaJS.toggleHtmlClipped();
                     addCloseModalFunction = closeModalFunction;
-                    modalElement
+                    modalElement.querySelector("form").addEventListener("submit", doAddTransaction);
-                        .querySelector("form")
-                        .addEventListener("submit", doAddTransaction);
                 },
                 onremoved: () => {
                     bulmaJS.toggleHtmlClipped();
@@ -1410,5 +1417,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
             });
         });
         renderLotOccupancyFees();
+        
     }
 })();

public-typescript/lotOccupancyEdit/lotOccupancyEdit.js

@@ -0,0 +1,834 @@
+"use strict";
+/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
+Object.defineProperty(exports, "__esModule", { value: true });
+(() => {
+    var _a, _b, _c;
+    const los = exports.los;
+    const lotOccupancyId = document.querySelector("#lotOccupancy--lotOccupancyId").value;
+    const isCreate = lotOccupancyId === "";
+    /*
+     * Main form
+     */
+    let hasUnsavedChanges = false;
+    let refreshAfterSave = isCreate;
+    const setUnsavedChanges = () => {
+        if (!hasUnsavedChanges) {
+            hasUnsavedChanges = true;
+            cityssm.enableNavBlocker();
+        }
+    };
+    const clearUnsavedChanges = () => {
+        hasUnsavedChanges = false;
+        cityssm.disableNavBlocker();
+    };
+    const formElement = document.querySelector("#form--lotOccupancy");
+    formElement.addEventListener("submit", (formEvent) => {
+        formEvent.preventDefault();
+        cityssm.postJSON(los.urlPrefix +
+            "/lotOccupancies/" +
+            (isCreate ? "doCreateLotOccupancy" : "doUpdateLotOccupancy"), formElement, (responseJSON) => {
+            if (responseJSON.success) {
+                clearUnsavedChanges();
+                if (isCreate || refreshAfterSave) {
+                    window.location.href =
+                        los.urlPrefix +
+                            "/lotOccupancies/" +
+                            responseJSON.lotOccupancyId +
+                            "/edit?t=" +
+                            Date.now();
+                }
+                else {
+                    bulmaJS.alert({
+                        message: exports.aliases.occupancy + " Updated Successfully",
+                        contextualColorName: "success"
+                    });
+                }
+            }
+            else {
+                bulmaJS.alert({
+                    title: "Error Saving " + exports.aliases.occupancy,
+                    message: responseJSON.errorMessage || "",
+                    contextualColorName: "danger"
+                });
+            }
+        });
+    });
+    const formInputElements = formElement.querySelectorAll("input, select");
+    for (const formInputElement of formInputElements) {
+        formInputElement.addEventListener("change", setUnsavedChanges);
+    }
+    if (!isCreate) {
+        const doCopy = () => {
+            cityssm.postJSON(los.urlPrefix + "/lotOccupancies/doCopyLotOccupancy", {
+                lotOccupancyId
+            }, (responseJSON) => {
+                var _a;
+                if (responseJSON.success) {
+                    cityssm.disableNavBlocker();
+                    window.location.href =
+                        los.urlPrefix +
+                            "/lotOccupancies/" +
+                            ((_a = responseJSON.lotOccupancyId) === null || _a === void 0 ? void 0 : _a.toString()) +
+                            "/edit";
+                }
+                else {
+                    bulmaJS.alert({
+                        title: "Error Copying Record",
+                        message: responseJSON.errorMessage || "",
+                        contextualColorName: "danger"
+                    });
+                }
+            });
+        };
+        (_a = document
+            .querySelector("#button--copyLotOccupancy")) === null || _a === void 0 ? void 0 : _a.addEventListener("click", (clickEvent) => {
+            clickEvent.preventDefault();
+            if (hasUnsavedChanges) {
+                bulmaJS.alert({
+                    title: "Unsaved Changes",
+                    message: "Please save all unsaved changes before continuing.",
+                    contextualColorName: "warning"
+                });
+            }
+            else {
+                bulmaJS.confirm({
+                    title: "Copy " + exports.aliases.occupancy + " Record as New",
+                    message: "Are you sure you want to copy this record to a new record?",
+                    contextualColorName: "info",
+                    okButton: {
+                        text: "Yes, Copy",
+                        callbackFunction: doCopy
+                    }
+                });
+            }
+        });
+        (_b = document
+            .querySelector("#button--deleteLotOccupancy")) === null || _b === void 0 ? void 0 : _b.addEventListener("click", (clickEvent) => {
+            clickEvent.preventDefault();
+            const doDelete = () => {
+                cityssm.postJSON(los.urlPrefix + "/lotOccupancies/doDeleteLotOccupancy", {
+                    lotOccupancyId
+                }, (responseJSON) => {
+                    if (responseJSON.success) {
+                        cityssm.disableNavBlocker();
+                        window.location.href =
+                            los.urlPrefix + "/lotOccupancies?t=" + Date.now();
+                    }
+                    else {
+                        bulmaJS.alert({
+                            title: "Error Deleting Record",
+                            message: responseJSON.errorMessage || "",
+                            contextualColorName: "danger"
+                        });
+                    }
+                });
+            };
+            bulmaJS.confirm({
+                title: "Delete " + exports.aliases.occupancy + " Record",
+                message: "Are you sure you want to delete this record?",
+                contextualColorName: "warning",
+                okButton: {
+                    text: "Yes, Delete",
+                    callbackFunction: doDelete
+                }
+            });
+        });
+        (_c = document
+            .querySelector("#button--createWorkOrder")) === null || _c === void 0 ? void 0 : _c.addEventListener("click", (clickEvent) => {
+            clickEvent.preventDefault();
+            let createCloseModalFunction;
+            const doCreate = (formEvent) => {
+                formEvent.preventDefault();
+                cityssm.postJSON(los.urlPrefix + "/workOrders/doCreateWorkOrder", formEvent.currentTarget, (responseJSON) => {
+                    if (responseJSON.success) {
+                        createCloseModalFunction();
+                        bulmaJS.confirm({
+                            title: "Work Order Created Successfully",
+                            message: "Would you like to open the work order now?",
+                            contextualColorName: "success",
+                            okButton: {
+                                text: "Yes, Open the Work Order",
+                                callbackFunction: () => {
+                                    window.location.href =
+                                        los.urlPrefix +
+                                            "/workOrders/" +
+                                            responseJSON.workOrderId +
+                                            "/edit";
+                                }
+                            }
+                        });
+                    }
+                    else {
+                        bulmaJS.alert({
+                            title: "Error Creating Work Order",
+                            message: responseJSON.errorMessage,
+                            contextualColorName: "danger"
+                        });
+                    }
+                });
+            };
+            cityssm.openHtmlModal("lotOccupancy-createWorkOrder", {
+                onshow: (modalElement) => {
+                    modalElement.querySelector("#workOrderCreate--lotOccupancyId").value = lotOccupancyId;
+                    modalElement.querySelector("#workOrderCreate--workOrderOpenDateString").value = cityssm.dateToString(new Date());
+                    const workOrderTypeSelectElement = modalElement.querySelector("#workOrderCreate--workOrderTypeId");
+                    const workOrderTypes = exports.workOrderTypes;
+                    if (workOrderTypes.length === 1) {
+                        workOrderTypeSelectElement.innerHTML = "";
+                    }
+                    for (const workOrderType of workOrderTypes) {
+                        const optionElement = document.createElement("option");
+                        optionElement.value = workOrderType.workOrderTypeId.toString();
+                        optionElement.textContent = workOrderType.workOrderType;
+                        workOrderTypeSelectElement.append(optionElement);
+                    }
+                },
+                onshown: (modalElement, closeModalFunction) => {
+                    var _a;
+                    createCloseModalFunction = closeModalFunction;
+                    (_a = modalElement.querySelector("form")) === null || _a === void 0 ? void 0 : _a.addEventListener("submit", doCreate);
+                }
+            });
+        });
+    }
+    // Occupancy Type
+    const occupancyTypeIdElement = document.querySelector("#lotOccupancy--occupancyTypeId");
+    if (isCreate) {
+        const lotOccupancyFieldsContainerElement = document.querySelector("#container--lotOccupancyFields");
+        occupancyTypeIdElement.addEventListener("change", () => {
+            if (occupancyTypeIdElement.value === "") {
+                lotOccupancyFieldsContainerElement.innerHTML =
+                    '<div class="message is-info">' +
+                        '<p class="message-body">Select the ' +
+                        exports.aliases.occupancy.toLowerCase() +
+                        " type to load the available fields.</p>" +
+                        "</div>";
+                return;
+            }
+            cityssm.postJSON(los.urlPrefix + "/lotOccupancies/doGetOccupancyTypeFields", {
+                occupancyTypeId: occupancyTypeIdElement.value
+            }, (responseJSON) => {
+                if (responseJSON.occupancyTypeFields.length === 0) {
+                    lotOccupancyFieldsContainerElement.innerHTML =
+                        '<div class="message is-info">' +
+                            '<p class="message-body">There are no additional fields for this ' +
+                            exports.aliases.occupancy.toLowerCase() +
+                            " type.</p>" +
+                            "</div>";
+                    return;
+                }
+                lotOccupancyFieldsContainerElement.innerHTML = "";
+                let occupancyTypeFieldIds = "";
+                for (const occupancyTypeField of responseJSON.occupancyTypeFields) {
+                    occupancyTypeFieldIds += "," + occupancyTypeField.occupancyTypeFieldId;
+                    const fieldName = "lotOccupancyFieldValue_" + occupancyTypeField.occupancyTypeFieldId;
+                    const fieldId = "lotOccupancy--" + fieldName;
+                    const fieldElement = document.createElement("div");
+                    fieldElement.className = "field";
+                    fieldElement.innerHTML =
+                        '<label class="label" for="' +
+                            fieldId +
+                            '"></label>' +
+                            '<div class="control"></div>';
+                    fieldElement.querySelector("label").textContent =
+                        occupancyTypeField.occupancyTypeField;
+                    if (occupancyTypeField.occupancyTypeFieldValues === "") {
+                        const inputElement = document.createElement("input");
+                        inputElement.className = "input";
+                        inputElement.id = fieldId;
+                        inputElement.name = fieldName;
+                        inputElement.type = "text";
+                        inputElement.required = occupancyTypeField.isRequired;
+                        inputElement.minLength = occupancyTypeField.minimumLength;
+                        inputElement.maxLength = occupancyTypeField.maximumLength;
+                        if (occupancyTypeField.pattern && occupancyTypeField.pattern !== "") {
+                            inputElement.pattern = occupancyTypeField.pattern;
+                        }
+                        fieldElement.querySelector(".control").append(inputElement);
+                    }
+                    else {
+                        fieldElement.querySelector(".control").innerHTML =
+                            '<div class="select is-fullwidth"><select id="' +
+                                fieldId +
+                                '" name="' +
+                                fieldName +
+                                '">' +
+                                '<option value="">(Not Set)</option>' +
+                                "</select></div>";
+                        const selectElement = fieldElement.querySelector("select");
+                        selectElement.required = occupancyTypeField.isRequired;
+                        const optionValues = occupancyTypeField.occupancyTypeFieldValues.split("\n");
+                        for (const optionValue of optionValues) {
+                            const optionElement = document.createElement("option");
+                            optionElement.value = optionValue;
+                            optionElement.textContent = optionValue;
+                            selectElement.append(optionElement);
+                        }
+                    }
+                    lotOccupancyFieldsContainerElement.append(fieldElement);
+                }
+                lotOccupancyFieldsContainerElement.insertAdjacentHTML("beforeend", '<input name="occupancyTypeFieldIds" type="hidden" value="' +
+                    occupancyTypeFieldIds.slice(1) +
+                    '" />');
+            });
+        });
+    }
+    else {
+        const originalOccupancyTypeId = occupancyTypeIdElement.value;
+        occupancyTypeIdElement.addEventListener("change", () => {
+            if (occupancyTypeIdElement.value !== originalOccupancyTypeId) {
+                bulmaJS.confirm({
+                    title: "Confirm Change",
+                    message: "Are you sure you want to change the " +
+                        exports.aliases.occupancy.toLowerCase() +
+                        " type?\n" +
+                        "This change affects the additional fields associated with this record, and may also affect the available fees.",
+                    contextualColorName: "warning",
+                    okButton: {
+                        text: "Yes, Keep the Change",
+                        callbackFunction: () => {
+                            refreshAfterSave = true;
+                        }
+                    },
+                    cancelButton: {
+                        text: "Revert the Change",
+                        callbackFunction: () => {
+                            occupancyTypeIdElement.value = originalOccupancyTypeId;
+                        }
+                    }
+                });
+            }
+        });
+    }
+    // Lot Selector
+    const lotNameElement = document.querySelector("#lotOccupancy--lotName");
+    lotNameElement.addEventListener("click", (clickEvent) => {
+        const currentLotName = clickEvent.currentTarget.value;
+        let lotSelectCloseModalFunction;
+        let lotSelectModalElement;
+        let lotSelectFormElement;
+        let lotSelectResultsElement;
+        const renderSelectedLotAndClose = (lotId, lotName) => {
+            document.querySelector("#lotOccupancy--lotId").value =
+                lotId.toString();
+            document.querySelector("#lotOccupancy--lotName").value = lotName;
+            setUnsavedChanges();
+            lotSelectCloseModalFunction();
+        };
+        const selectExistingLot = (clickEvent) => {
+            clickEvent.preventDefault();
+            const selectedLotElement = clickEvent.currentTarget;
+            renderSelectedLotAndClose(selectedLotElement.dataset.lotId, selectedLotElement.dataset.lotName);
+        };
+        const searchLots = () => {
+            lotSelectResultsElement.innerHTML =
+                '<p class="has-text-centered">' +
+                    '<i class="fas fa-3x fa-pulse fa-spinner" aria-hidden="true"></i><br />' +
+                    "Searching..." +
+                    "</p>";
+            cityssm.postJSON(los.urlPrefix + "/lots/doSearchLots", lotSelectFormElement, (responseJSON) => {
+                if (responseJSON.count === 0) {
+                    lotSelectResultsElement.innerHTML =
+                        '<div class="message is-info">' +
+                            '<p class="message-body">' +
+                            "No results." +
+                            "</p>" +
+                            "</div>";
+                    return;
+                }
+                const panelElement = document.createElement("div");
+                panelElement.className = "panel";
+                for (const lot of responseJSON.lots) {
+                    const panelBlockElement = document.createElement("a");
+                    panelBlockElement.className = "panel-block is-block";
+                    panelBlockElement.href = "#";
+                    panelBlockElement.dataset.lotId = lot.lotId.toString();
+                    panelBlockElement.dataset.lotName = lot.lotName;
+                    panelBlockElement.innerHTML =
+                        '<div class="columns">' +
+                            ('<div class="column">' +
+                                cityssm.escapeHTML(lot.lotName || "") +
+                                "<br />" +
+                                '<span class="is-size-7">' +
+                                cityssm.escapeHTML(lot.mapName || "") +
+                                "</span>" +
+                                "</div>") +
+                            ('<div class="column">' +
+                                cityssm.escapeHTML(lot.lotStatus) +
+                                "<br />" +
+                                '<span class="is-size-7">' +
+                                (lot.lotOccupancyCount > 0 ? "Currently Occupied" : "") +
+                                "</span>" +
+                                "</div>") +
+                            "</div>";
+                    panelBlockElement.addEventListener("click", selectExistingLot);
+                    panelElement.append(panelBlockElement);
+                }
+                lotSelectResultsElement.innerHTML = "";
+                lotSelectResultsElement.append(panelElement);
+            });
+        };
+        const createLotAndSelect = (submitEvent) => {
+            submitEvent.preventDefault();
+            const lotName = lotSelectModalElement.querySelector("#lotCreate--lotName").value;
+            cityssm.postJSON(los.urlPrefix + "/lots/doCreateLot", submitEvent.currentTarget, (responseJSON) => {
+                if (responseJSON.success) {
+                    renderSelectedLotAndClose(responseJSON.lotId, lotName);
+                }
+                else {
+                    bulmaJS.alert({
+                        title: "Error Creating " + exports.aliases.lot,
+                        message: responseJSON.errorMessage || "",
+                        contextualColorName: "danger"
+                    });
+                }
+            });
+        };
+        cityssm.openHtmlModal("lotOccupancy-selectLot", {
+            onshow: (modalElement) => {
+                los.populateAliases(modalElement);
+            },
+            onshown: (modalElement, closeModalFunction) => {
+                bulmaJS.toggleHtmlClipped();
+                lotSelectModalElement = modalElement;
+                lotSelectCloseModalFunction = closeModalFunction;
+                bulmaJS.init(modalElement);
+                // search Tab
+                const lotNameFilterElement = modalElement.querySelector("#lotSelect--lotName");
+                if (document.querySelector("#lotOccupancy--lotId").value !==
+                    "") {
+                    lotNameFilterElement.value = currentLotName;
+                }
+                lotNameFilterElement.focus();
+                lotNameFilterElement.addEventListener("change", searchLots);
+                const occupancyStatusFilterElement = modalElement.querySelector("#lotSelect--occupancyStatus");
+                occupancyStatusFilterElement.addEventListener("change", searchLots);
+                if (currentLotName !== "") {
+                    occupancyStatusFilterElement.value = "";
+                }
+                lotSelectFormElement = modalElement.querySelector("#form--lotSelect");
+                lotSelectResultsElement = modalElement.querySelector("#resultsContainer--lotSelect");
+                lotSelectFormElement.addEventListener("submit", (submitEvent) => {
+                    submitEvent.preventDefault();
+                });
+                searchLots();
+                // Create Tab
+                if (exports.lotNamePattern) {
+                    const regex = exports.lotNamePattern;
+                    modalElement.querySelector("#lotCreate--lotName").pattern = regex.source;
+                }
+                const lotTypeElement = modalElement.querySelector("#lotCreate--lotTypeId");
+                for (const lotType of exports.lotTypes) {
+                    const optionElement = document.createElement("option");
+                    optionElement.value = lotType.lotTypeId.toString();
+                    optionElement.textContent = lotType.lotType;
+                    lotTypeElement.append(optionElement);
+                }
+                const lotStatusElement = modalElement.querySelector("#lotCreate--lotStatusId");
+                for (const lotStatus of exports.lotStatuses) {
+                    const optionElement = document.createElement("option");
+                    optionElement.value = lotStatus.lotStatusId.toString();
+                    optionElement.textContent = lotStatus.lotStatus;
+                    lotStatusElement.append(optionElement);
+                }
+                const mapElement = modalElement.querySelector("#lotCreate--mapId");
+                for (const map of exports.maps) {
+                    const optionElement = document.createElement("option");
+                    optionElement.value = map.mapId.toString();
+                    optionElement.textContent = map.mapName || "(No Name)";
+                    mapElement.append(optionElement);
+                }
+                modalElement.querySelector("#form--lotCreate").addEventListener("submit", createLotAndSelect);
+            },
+            onremoved: () => {
+                bulmaJS.toggleHtmlClipped();
+            }
+        });
+    });
+    document.querySelector(".is-lot-view-button").addEventListener("click", () => {
+        const lotId = document.querySelector("#lotOccupancy--lotId")
+            .value;
+        if (lotId) {
+            window.open(los.urlPrefix + "/lots/" + lotId);
+        }
+        else {
+            bulmaJS.alert({
+                message: "No " + exports.aliases.lot.toLowerCase() + " selected.",
+                contextualColorName: "info"
+            });
+        }
+    });
+    document.querySelector(".is-clear-lot-button").addEventListener("click", () => {
+        if (lotNameElement.disabled) {
+            bulmaJS.alert({
+                message: "You need to unlock the field before clearing it.",
+                contextualColorName: "info"
+            });
+        }
+        else {
+            lotNameElement.value = "(No " + exports.aliases.lot + ")";
+            document.querySelector("#lotOccupancy--lotId").value = "";
+            setUnsavedChanges();
+        }
+    });
+    // Start Date
+    los.initializeDatePickers(formElement);
+    document.querySelector("#lotOccupancy--occupancyStartDateString").addEventListener("change", () => {
+        const endDatePicker = document.querySelector("#lotOccupancy--occupancyEndDateString").bulmaCalendar.datePicker;
+        endDatePicker.min = document.querySelector("#lotOccupancy--occupancyStartDateString").value;
+        endDatePicker.refresh();
+    });
+    los.initializeUnlockFieldButtons(formElement);
+    /*
+     * Occupants
+     */
+    if (isCreate) {
+        const lotOccupantTypeIdElement = document.querySelector("#lotOccupancy--lotOccupantTypeId");
+        lotOccupantTypeIdElement.addEventListener("change", () => {
+            const occupantFields = formElement.querySelectorAll("[data-table='LotOccupancyOccupant']");
+            for (const occupantField of occupantFields) {
+                occupantField.disabled = (lotOccupantTypeIdElement.value === "");
+            }
+        });
+    }
+    else {
+        let lotOccupancyOccupants = exports.lotOccupancyOccupants;
+        delete 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(los.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;
+                    modalElement.querySelector("#lotOccupancyOccupantEdit--occupantEmailAddress").value = lotOccupancyOccupant.occupantEmailAddress;
+                    modalElement.querySelector("#lotOccupancyOccupantEdit--occupantComment").value = lotOccupancyOccupant.occupantComment;
+                },
+                onshown: (modalElement, closeModalFunction) => {
+                    bulmaJS.toggleHtmlClipped();
+                    modalElement.querySelector("#lotOccupancyOccupantEdit--lotOccupantTypeId").focus();
+                    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(los.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);
+            if (lotOccupancyOccupants.length === 0) {
+                occupantsContainer.innerHTML =
+                    '<div class="message is-warning">' +
+                        '<p class="message-body">There are no ' +
+                        exports.aliases.occupants.toLowerCase() +
+                        " associated with this record.</p>" +
+                        "</div>";
+                return;
+            }
+            const tableElement = document.createElement("table");
+            tableElement.className = "table is-fullwidth is-striped is-hoverable";
+            tableElement.innerHTML =
+                "<thead><tr>" +
+                    ("<th>" + exports.aliases.occupant + "</th>") +
+                    "<th>Address</th>" +
+                    "<th>Other Contact</th>" +
+                    "<th>Comment</th>" +
+                    '<th class="is-hidden-print"><span class="is-sr-only">Options</span></th>' +
+                    "</tr></thead>" +
+                    "<tbody></tbody>";
+            for (const lotOccupancyOccupant of lotOccupancyOccupants) {
+                const tableRowElement = document.createElement("tr");
+                tableRowElement.dataset.lotOccupantIndex =
+                    lotOccupancyOccupant.lotOccupantIndex.toString();
+                tableRowElement.innerHTML =
+                    "<td>" +
+                        cityssm.escapeHTML(lotOccupancyOccupant.occupantName || "(No Name)") +
+                        "<br />" +
+                        ('<span class="tag">' +
+                            "<i class=\"fas fa-fw fa-" + cityssm.escapeHTML(lotOccupancyOccupant.fontAwesomeIconClass) + "\" aria-hidden=\"true\"></i>" +
+                            " <span class=\"ml-1\">" + cityssm.escapeHTML(lotOccupancyOccupant.lotOccupantType) + "</span>" +
+                            "</span>") +
+                        "</td>" +
+                        ("<td>" +
+                            (lotOccupancyOccupant.occupantAddress1
+                                ? cityssm.escapeHTML(lotOccupancyOccupant.occupantAddress1) + "<br />"
+                                : "") +
+                            (lotOccupancyOccupant.occupantAddress2
+                                ? cityssm.escapeHTML(lotOccupancyOccupant.occupantAddress2) + "<br />"
+                                : "") +
+                            (lotOccupancyOccupant.occupantCity
+                                ? cityssm.escapeHTML(lotOccupancyOccupant.occupantCity) + ", "
+                                : "") +
+                            cityssm.escapeHTML(lotOccupancyOccupant.occupantProvince || "") +
+                            "<br />" +
+                            cityssm.escapeHTML(lotOccupancyOccupant.occupantPostalCode || "") +
+                            "</td>") +
+                        ("<td>" +
+                            (lotOccupancyOccupant.occupantPhoneNumber
+                                ? cityssm.escapeHTML(lotOccupancyOccupant.occupantPhoneNumber) +
+                                    "<br />"
+                                : "") +
+                            (lotOccupancyOccupant.occupantEmailAddress
+                                ? cityssm.escapeHTML(lotOccupancyOccupant.occupantEmailAddress)
+                                : "") +
+                            "</td>") +
+                        ("<td>" + cityssm.escapeHTML(lotOccupancyOccupant.occupantComment) + "</td>") +
+                        ('<td class="is-hidden-print">' +
+                            '<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>Edit</span>" +
+                                "</button>") +
+                            ('<button class="button is-light is-danger button--delete" data-tooltip="Delete ' +
+                                cityssm.escapeHTML(exports.aliases.occupant) +
+                                '" type="button" aria-label="Delete">' +
+                                '<i class="fas fa-trash" aria-hidden="true"></i>' +
+                                "</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 addCloseModalFunction;
+            let addFormElement;
+            let searchFormElement;
+            let searchResultsElement;
+            const addOccupant = (formOrObject) => {
+                cityssm.postJSON(los.urlPrefix + "/lotOccupancies/doAddLotOccupancyOccupant", formOrObject, (responseJSON) => {
+                    if (responseJSON.success) {
+                        lotOccupancyOccupants = responseJSON.lotOccupancyOccupants;
+                        addCloseModalFunction();
+                        renderLotOccupancyOccupants();
+                    }
+                    else {
+                        bulmaJS.alert({
+                            title: "Error Adding " + exports.aliases.occupant,
+                            message: responseJSON.errorMessage || "",
+                            contextualColorName: "danger"
+                        });
+                    }
+                });
+            };
+            const addOccupantFromForm = (submitEvent) => {
+                submitEvent.preventDefault();
+                addOccupant(addFormElement);
+            };
+            let pastOccupantSearchResults = [];
+            const addOccupantFromCopy = (clickEvent) => {
+                clickEvent.preventDefault();
+                const panelBlockElement = clickEvent.currentTarget;
+                const occupant = pastOccupantSearchResults[Number.parseInt(panelBlockElement.dataset.index, 10)];
+                const lotOccupantTypeId = panelBlockElement
+                    .closest(".modal")
+                    .querySelector("#lotOccupancyOccupantCopy--lotOccupantTypeId").value;
+                if (lotOccupantTypeId === "") {
+                    bulmaJS.alert({
+                        title: "No " + exports.aliases.occupant + " Type Selected",
+                        message: "Select a type to apply to the newly added " +
+                            exports.aliases.occupant.toLowerCase() +
+                            ".",
+                        contextualColorName: "warning"
+                    });
+                }
+                else {
+                    occupant.lotOccupantTypeId = Number.parseInt(lotOccupantTypeId, 10);
+                    occupant.lotOccupancyId = Number.parseInt(lotOccupancyId, 10);
+                    addOccupant(occupant);
+                }
+            };
+            const searchOccupants = (event) => {
+                event.preventDefault();
+                if (searchFormElement.querySelector("#lotOccupancyOccupantCopy--searchFilter").value === "") {
+                    searchResultsElement.innerHTML =
+                        '<div class="message is-info">' +
+                            '<p class="message-body">Enter a partial name or address in the search field above.</p>' +
+                            "</div>";
+                    return;
+                }
+                searchResultsElement.innerHTML =
+                    '<div class="has-text-grey has-text-centered">' +
+                        '<i class="fas fa-5x fa-circle-notch fa-spin" aria-hidden="true"></i><br />' +
+                        "Searching..." +
+                        "</div>";
+                cityssm.postJSON(los.urlPrefix + "/lotOccupancies/doSearchPastOccupants", searchFormElement, (responseJSON) => {
+                    pastOccupantSearchResults = responseJSON.occupants;
+                    const panelElement = document.createElement("div");
+                    panelElement.className = "panel";
+                    for (const [index, occupant] of pastOccupantSearchResults.entries()) {
+                        const panelBlockElement = document.createElement("a");
+                        panelBlockElement.className = "panel-block is-block";
+                        panelBlockElement.dataset.index = index.toString();
+                        panelBlockElement.innerHTML =
+                            "<strong>" +
+                                cityssm.escapeHTML(occupant.occupantName || "") +
+                                "</strong>" +
+                                "<br />" +
+                                '<div class="columns">' +
+                                ('<div class="column">' +
+                                    cityssm.escapeHTML(occupant.occupantAddress1 || "") +
+                                    "<br />" +
+                                    (occupant.occupantAddress2
+                                        ? cityssm.escapeHTML(occupant.occupantAddress2) +
+                                            "<br />"
+                                        : "") +
+                                    cityssm.escapeHTML(occupant.occupantCity || "") +
+                                    ", " +
+                                    cityssm.escapeHTML(occupant.occupantProvince || "") +
+                                    "<br />" +
+                                    cityssm.escapeHTML(occupant.occupantPostalCode || "") +
+                                    "</div>") +
+                                ('<div class="column">' +
+                                    (occupant.occupantPhoneNumber
+                                        ? cityssm.escapeHTML(occupant.occupantPhoneNumber) +
+                                            "<br />"
+                                        : "") +
+                                    cityssm.escapeHTML(occupant.occupantEmailAddress || "") +
+                                    "<br />" +
+                                    "</div>") +
+                                "</div>";
+                        panelBlockElement.addEventListener("click", addOccupantFromCopy);
+                        panelElement.append(panelBlockElement);
+                    }
+                    searchResultsElement.innerHTML = "";
+                    searchResultsElement.append(panelElement);
+                });
+            };
+            cityssm.openHtmlModal("lotOccupancy-addOccupant", {
+                onshow: (modalElement) => {
+                    los.populateAliases(modalElement);
+                    modalElement.querySelector("#lotOccupancyOccupantAdd--lotOccupancyId").value = lotOccupancyId;
+                    const lotOccupantTypeSelectElement = modalElement.querySelector("#lotOccupancyOccupantAdd--lotOccupantTypeId");
+                    const lotOccupantTypeCopySelectElement = modalElement.querySelector("#lotOccupancyOccupantCopy--lotOccupantTypeId");
+                    for (const lotOccupantType of exports.lotOccupantTypes) {
+                        const optionElement = document.createElement("option");
+                        optionElement.value = lotOccupantType.lotOccupantTypeId.toString();
+                        optionElement.textContent = lotOccupantType.lotOccupantType;
+                        lotOccupantTypeSelectElement.append(optionElement);
+                        lotOccupantTypeCopySelectElement.append(optionElement.cloneNode(true));
+                    }
+                    modalElement.querySelector("#lotOccupancyOccupantAdd--occupantCity").value = exports.occupantCityDefault;
+                    modalElement.querySelector("#lotOccupancyOccupantAdd--occupantProvince").value = exports.occupantProvinceDefault;
+                },
+                onshown: (modalElement, closeModalFunction) => {
+                    bulmaJS.toggleHtmlClipped();
+                    bulmaJS.init(modalElement);
+                    modalElement.querySelector("#lotOccupancyOccupantAdd--lotOccupantTypeId").focus();
+                    addFormElement = modalElement.querySelector("#form--lotOccupancyOccupantAdd");
+                    addFormElement.addEventListener("submit", addOccupantFromForm);
+                    searchResultsElement = modalElement.querySelector("#lotOccupancyOccupantCopy--searchResults");
+                    searchFormElement = modalElement.querySelector("#form--lotOccupancyOccupantCopy");
+                    searchFormElement.addEventListener("submit", (formEvent) => {
+                        formEvent.preventDefault();
+                    });
+                    modalElement.querySelector("#lotOccupancyOccupantCopy--searchFilter").addEventListener("change", searchOccupants);
+                    addCloseModalFunction = closeModalFunction;
+                },
+                onremoved: () => {
+                    bulmaJS.toggleHtmlClipped();
+                }
+            });
+        });
+        renderLotOccupancyOccupants();
+    }
+    /*
+     * Comments
+     */
+    if (!isCreate) {
+        //=include lotOccupancyEditComments.js
+    }
+    /*
+    * Fees / Transactions
+    */
+    if (!isCreate) {
+        //=include lotOccupancyEditFees.js
+    }
+})();

public-typescript/lotOccupancyEdit/lotOccupancyEdit.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
 
-import type * as globalTypes from "../types/globalTypes";
+import type * as globalTypes from "../../types/globalTypes";
-import type * as recordTypes from "../types/recordTypes";
+import type * as recordTypes from "../../types/recordTypes";
 
 import type { cityssmGlobal } from "@cityssm/bulma-webapp-js/src/types";
 
@@ -1262,907 +1262,14 @@ declare const bulmaJS: BulmaJS;
      */
 
     if (!isCreate) {
-        let lotOccupancyComments: recordTypes.LotOccupancyComment[] = exports.lotOccupancyComments;
+        //=include lotOccupancyEditComments.js
-        delete exports.lotOccupancyComments;
-
-        const openEditLotOccupancyComment = (clickEvent: Event) => {
-            const lotOccupancyCommentId = Number.parseInt(
-                (clickEvent.currentTarget as HTMLElement).closest("tr")!.dataset
-                    .lotOccupancyCommentId!,
-                10
-            );
-
-            const lotOccupancyComment = lotOccupancyComments.find((currentLotOccupancyComment) => {
-                return currentLotOccupancyComment.lotOccupancyCommentId === lotOccupancyCommentId;
-            })!;
-
-            let editFormElement: HTMLFormElement;
-            let editCloseModalFunction: () => void;
-
-            const editComment = (submitEvent: SubmitEvent) => {
-                submitEvent.preventDefault();
-
-                cityssm.postJSON(
-                    los.urlPrefix + "/lotOccupancies/doUpdateLotOccupancyComment",
-                    editFormElement,
-                    (responseJSON: {
-                        success: boolean;
-                        errorMessage?: string;
-                        lotOccupancyComments?: recordTypes.LotOccupancyComment[];
-                    }) => {
-                        if (responseJSON.success) {
-                            lotOccupancyComments = responseJSON.lotOccupancyComments!;
-                            editCloseModalFunction();
-                            renderLotOccupancyComments();
-                        } else {
-                            bulmaJS.alert({
-                                title: "Error Updating Comment",
-                                message: responseJSON.errorMessage || "",
-                                contextualColorName: "danger"
-                            });
-                        }
-                    }
-                );
-            };
-
-            cityssm.openHtmlModal("lotOccupancy-editComment", {
-                onshow: (modalElement) => {
-                    los.populateAliases(modalElement);
-
-                    (
-                        modalElement.querySelector(
-                            "#lotOccupancyCommentEdit--lotOccupancyId"
-                        ) as HTMLInputElement
-                    ).value = lotOccupancyId;
-                    (
-                        modalElement.querySelector(
-                            "#lotOccupancyCommentEdit--lotOccupancyCommentId"
-                        ) as HTMLInputElement
-                    ).value = lotOccupancyCommentId.toString();
-
-                    (
-                        modalElement.querySelector(
-                            "#lotOccupancyCommentEdit--lotOccupancyComment"
-                        ) as HTMLInputElement
-                    ).value = lotOccupancyComment.lotOccupancyComment!;
-
-                    const lotOccupancyCommentDateStringElement = modalElement.querySelector(
-                        "#lotOccupancyCommentEdit--lotOccupancyCommentDateString"
-                    ) as HTMLInputElement;
-
-                    lotOccupancyCommentDateStringElement.value =
-                        lotOccupancyComment.lotOccupancyCommentDateString!;
-
-                    const currentDateString = cityssm.dateToString(new Date());
-
-                    lotOccupancyCommentDateStringElement.max =
-                        lotOccupancyComment.lotOccupancyCommentDateString! <= currentDateString
-                            ? currentDateString
-                            : lotOccupancyComment.lotOccupancyCommentDateString!;
-
-                    (
-                        modalElement.querySelector(
-                            "#lotOccupancyCommentEdit--lotOccupancyCommentTimeString"
-                        ) as HTMLInputElement
-                    ).value = lotOccupancyComment.lotOccupancyCommentTimeString!;
-                },
-                onshown: (modalElement, closeModalFunction) => {
-                    bulmaJS.toggleHtmlClipped();
-
-                    los.initializeDatePickers(modalElement);
-                    // los.initializeTimePickers(modalElement);
-
-                    (
-                        modalElement.querySelector(
-                            "#lotOccupancyCommentEdit--lotOccupancyComment"
-                        ) as HTMLTextAreaElement
-                    ).focus();
-
-                    editFormElement = modalElement.querySelector("form")!;
-                    editFormElement.addEventListener("submit", editComment);
-
-                    editCloseModalFunction = closeModalFunction;
-                },
-                onremoved: () => {
-                    bulmaJS.toggleHtmlClipped();
-                }
-            });
-        };
-
-        const deleteLotOccupancyComment = (clickEvent: Event) => {
-            const lotOccupancyCommentId = Number.parseInt(
-                (clickEvent.currentTarget as HTMLElement).closest("tr")!.dataset
-                    .lotOccupancyCommentId!,
-                10
-            );
-
-            const doDelete = () => {
-                cityssm.postJSON(
-                    los.urlPrefix + "/lotOccupancies/doDeleteLotOccupancyComment",
-                    {
-                        lotOccupancyId,
-                        lotOccupancyCommentId
-                    },
-                    (responseJSON: {
-                        success: boolean;
-                        errorMessage?: string;
-                        lotOccupancyComments: recordTypes.LotOccupancyComment[];
-                    }) => {
-                        if (responseJSON.success) {
-                            lotOccupancyComments = responseJSON.lotOccupancyComments;
-                            renderLotOccupancyComments();
-                        } else {
-                            bulmaJS.alert({
-                                title: "Error Removing Comment",
-                                message: responseJSON.errorMessage || "",
-                                contextualColorName: "danger"
-                            });
-                        }
-                    }
-                );
-            };
-
-            bulmaJS.confirm({
-                title: "Remove Comment?",
-                message: "Are you sure you want to remove this comment?",
-                okButton: {
-                    text: "Yes, Remove Comment",
-                    callbackFunction: doDelete
-                },
-                contextualColorName: "warning"
-            });
-        };
-
-        const renderLotOccupancyComments = () => {
-            const containerElement = document.querySelector(
-                "#container--lotOccupancyComments"
-            ) as HTMLElement;
-
-            if (lotOccupancyComments.length === 0) {
-                containerElement.innerHTML =
-                    '<div class="message is-info">' +
-                    '<p class="message-body">There are no comments associated with this record.</p>' +
-                    "</div>";
-                return;
-            }
-
-            const tableElement = document.createElement("table");
-            tableElement.className = "table is-fullwidth is-striped is-hoverable";
-            tableElement.innerHTML =
-                "<thead><tr>" +
-                "<th>Commentor</th>" +
-                "<th>Comment Date</th>" +
-                "<th>Comment</th>" +
-                '<th class="is-hidden-print"><span class="is-sr-only">Options</span></th>' +
-                "</tr></thead>" +
-                "<tbody></tbody>";
-
-            for (const lotOccupancyComment of lotOccupancyComments) {
-                const tableRowElement = document.createElement("tr");
-                tableRowElement.dataset.lotOccupancyCommentId =
-                    lotOccupancyComment.lotOccupancyCommentId!.toString();
-
-                tableRowElement.innerHTML =
-                    "<td>" +
-                    cityssm.escapeHTML(lotOccupancyComment.recordCreate_userName || "") +
-                    "</td>" +
-                    "<td>" +
-                    lotOccupancyComment.lotOccupancyCommentDateString +
-                    (lotOccupancyComment.lotOccupancyCommentTime === 0
-                        ? ""
-                        : " " + lotOccupancyComment.lotOccupancyCommentTimeString) +
-                    "</td>" +
-                    "<td>" +
-                    cityssm.escapeHTML(lotOccupancyComment.lotOccupancyComment || "") +
-                    "</td>" +
-                    ('<td class="is-hidden-print">' +
-                        '<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>Edit</span>" +
-                            "</button>") +
-                        ('<button class="button is-light is-danger button--delete" data-tooltip="Delete Comment" type="button" aria-label="Delete">' +
-                            '<i class="fas fa-trash" aria-hidden="true"></i>' +
-                            "</button>") +
-                        "</div>" +
-                        "</td>");
-
-                (
-                    tableRowElement.querySelector(".button--edit") as HTMLButtonElement
-                ).addEventListener("click", openEditLotOccupancyComment);
-
-                (
-                    tableRowElement.querySelector(".button--delete") as HTMLButtonElement
-                ).addEventListener("click", deleteLotOccupancyComment);
-
-                tableElement.querySelector("tbody")!.append(tableRowElement);
-            }
-
-            containerElement.innerHTML = "";
-            containerElement.append(tableElement);
-        };
-
-        (document.querySelector("#button--addComment") as HTMLButtonElement).addEventListener(
-            "click",
-            () => {
-                let addFormElement: HTMLFormElement;
-                let addCloseModalFunction: () => void;
-
-                const addComment = (submitEvent: SubmitEvent) => {
-                    submitEvent.preventDefault();
-
-                    cityssm.postJSON(
-                        los.urlPrefix + "/lotOccupancies/doAddLotOccupancyComment",
-                        addFormElement,
-                        (responseJSON: {
-                            success: boolean;
-                            errorMessage?: string;
-                            lotOccupancyComments?: recordTypes.LotOccupancyComment[];
-                        }) => {
-                            if (responseJSON.success) {
-                                lotOccupancyComments = responseJSON.lotOccupancyComments!;
-                                addCloseModalFunction();
-                                renderLotOccupancyComments();
-                            } else {
-                                bulmaJS.alert({
-                                    title: "Error Adding Comment",
-                                    message: responseJSON.errorMessage || "",
-                                    contextualColorName: "danger"
-                                });
-                            }
-                        }
-                    );
-                };
-
-                cityssm.openHtmlModal("lotOccupancy-addComment", {
-                    onshow: (modalElement) => {
-                        los.populateAliases(modalElement);
-
-                        (
-                            modalElement.querySelector(
-                                "#lotOccupancyCommentAdd--lotOccupancyId"
-                            ) as HTMLInputElement
-                        ).value = lotOccupancyId;
-                    },
-                    onshown: (modalElement, closeModalFunction) => {
-                        bulmaJS.toggleHtmlClipped();
-
-                        (
-                            modalElement.querySelector(
-                                "#lotOccupancyCommentAdd--lotOccupancyComment"
-                            ) as HTMLTextAreaElement
-                        ).focus();
-
-                        addFormElement = modalElement.querySelector("form")!;
-                        addFormElement.addEventListener("submit", addComment);
-
-                        addCloseModalFunction = closeModalFunction;
-                    },
-                    onremoved: () => {
-                        bulmaJS.toggleHtmlClipped();
-                    }
-                });
-            }
-        );
-
-        renderLotOccupancyComments();
     }
     
     /*
-     * Fees / Transactions
+    * Fees / Transactions
-     */
+    */
    
-    if (!isCreate) {
+   if (!isCreate) {
-        let lotOccupancyFees: recordTypes.LotOccupancyFee[] = exports.lotOccupancyFees;
+        //=include lotOccupancyEditFees.js
-        delete exports.lotOccupancyFees;
-
-        const lotOccupancyFeesContainerElement = document.querySelector(
-            "#container--lotOccupancyFees"
-        ) as HTMLElement;
-
-        const getFeeGrandTotal = (): number => {
-            let feeGrandTotal = 0;
-
-            for (const lotOccupancyFee of lotOccupancyFees) {
-                feeGrandTotal +=
-                    (lotOccupancyFee.feeAmount! + lotOccupancyFee.taxAmount!) *
-                    lotOccupancyFee.quantity!;
-            }
-
-            return feeGrandTotal;
-        };
-
-        const deleteLotOccupancyFee = (clickEvent: Event) => {
-            const feeId = (
-                (clickEvent.currentTarget as HTMLElement).closest(
-                    ".container--lotOccupancyFee"
-                ) as HTMLElement
-            ).dataset.feeId;
-
-            const doDelete = () => {
-                cityssm.postJSON(
-                    los.urlPrefix + "/lotOccupancies/doDeleteLotOccupancyFee",
-                    {
-                        lotOccupancyId,
-                        feeId
-                    },
-                    (responseJSON: {
-                        success: boolean;
-                        errorMessage?: string;
-                        lotOccupancyFees?: recordTypes.LotOccupancyFee[];
-                    }) => {
-                        if (responseJSON.success) {
-                            lotOccupancyFees = responseJSON.lotOccupancyFees!;
-                            renderLotOccupancyFees();
-                        } else {
-                            bulmaJS.alert({
-                                title: "Error Deleting Fee",
-                                message: responseJSON.errorMessage || "",
-                                contextualColorName: "danger"
-                            });
-                        }
-                    }
-                );
-            };
-
-            bulmaJS.confirm({
-                title: "Delete Fee",
-                message: "Are you sure you want to delete this fee?",
-                contextualColorName: "warning",
-                okButton: {
-                    text: "Yes, Delete Fee",
-                    callbackFunction: doDelete
-                }
-            });
-        };
-
-        const renderLotOccupancyFees = () => {
-            if (lotOccupancyFees.length === 0) {
-                lotOccupancyFeesContainerElement.innerHTML =
-                    '<div class="message is-info">' +
-                    '<p class="message-body">There are no fees associated with this record.</p>' +
-                    "</div>";
-
-                renderLotOccupancyTransactions();
-
-                return;
-            }
-
-            lotOccupancyFeesContainerElement.innerHTML =
-                '<table class="table is-fullwidth is-striped is-hoverable">' +
-                ("<thead><tr>" +
-                    "<th>Fee</th>" +
-                    '<th><span class="is-sr-only">Unit Cost</span></th>' +
-                    '<th class="has-width-1"><span class="is-sr-only">&times;</span></th>' +
-                    '<th class="has-width-1"><span class="is-sr-only">Quantity</span></th>' +
-                    '<th class="has-width-1"><span class="is-sr-only">equals</span></th>' +
-                    '<th class="has-width-1 has-text-right">Total</th>' +
-                    '<th class="has-width-1 is-hidden-print"><span class="is-sr-only">Options</span></th>' +
-                    "</tr></thead>") +
-                "<tbody></tbody>" +
-                ("<tfoot>" +
-                    '<tr><th colspan="5">Subtotal</th><td class="has-text-weight-bold has-text-right" id="lotOccupancyFees--feeAmountTotal"></td><td class="is-hidden-print"></td></tr>' +
-                    '<tr><th colspan="5">Tax</th><td class="has-text-right" id="lotOccupancyFees--taxAmountTotal"></td><td class="is-hidden-print"></td></tr>' +
-                    '<tr><th colspan="5">Grand Total</th><td class="has-text-weight-bold has-text-right" id="lotOccupancyFees--grandTotal"></td><td class="is-hidden-print"></td></tr>' +
-                    "</tfoot>") +
-                "</table>";
-
-            let feeAmountTotal = 0;
-            let taxAmountTotal = 0;
-
-            for (const lotOccupancyFee of lotOccupancyFees) {
-                const tableRowElement = document.createElement("tr");
-                tableRowElement.className = "container--lotOccupancyFee";
-                tableRowElement.dataset.feeId = lotOccupancyFee.feeId!.toString();
-                tableRowElement.dataset.includeQuantity = lotOccupancyFee.includeQuantity
-                    ? "1"
-                    : "0";
-
-                tableRowElement.innerHTML =
-                    '<td colspan="' +
-                    (lotOccupancyFee.quantity === 1 ? "5" : "1") +
-                    '">' +
-                    cityssm.escapeHTML(lotOccupancyFee.feeName || "") +
-                    "</td>" +
-                    (lotOccupancyFee.quantity === 1
-                        ? ""
-                        : '<td class="has-text-right">$' +
-                          lotOccupancyFee.feeAmount!.toFixed(2) +
-                          "</td>" +
-                          "<td>&times;</td>" +
-                          '<td class="has-text-right">' +
-                          lotOccupancyFee.quantity +
-                          "</td>" +
-                          "<td>=</td>") +
-                    '<td class="has-text-right">$' +
-                    (lotOccupancyFee.feeAmount! * lotOccupancyFee.quantity!).toFixed(2) +
-                    "</td>" +
-                    ('<td class="is-hidden-print">' +
-                        '<button class="button is-small is-danger is-light" data-tooltip="Delete Fee" type="button">' +
-                        '<i class="fas fa-trash" aria-hidden="true"></i>' +
-                        "</button>" +
-                        "</td>");
-
-                tableRowElement
-                    .querySelector("button")!
-                    .addEventListener("click", deleteLotOccupancyFee);
-
-                lotOccupancyFeesContainerElement.querySelector("tbody")!.append(tableRowElement);
-
-                feeAmountTotal += lotOccupancyFee.feeAmount! * lotOccupancyFee.quantity!;
-                taxAmountTotal += lotOccupancyFee.taxAmount! * lotOccupancyFee.quantity!;
-            }
-
-            (
-                lotOccupancyFeesContainerElement.querySelector(
-                    "#lotOccupancyFees--feeAmountTotal"
-                ) as HTMLElement
-            ).textContent = "$" + feeAmountTotal.toFixed(2);
-            (
-                lotOccupancyFeesContainerElement.querySelector(
-                    "#lotOccupancyFees--taxAmountTotal"
-                ) as HTMLElement
-            ).textContent = "$" + taxAmountTotal.toFixed(2);
-            (
-                lotOccupancyFeesContainerElement.querySelector(
-                    "#lotOccupancyFees--grandTotal"
-                ) as HTMLElement
-            ).textContent = "$" + (feeAmountTotal + taxAmountTotal).toFixed(2);
-
-            renderLotOccupancyTransactions();
-        };
-
-        (document.querySelector("#button--addFee") as HTMLButtonElement).addEventListener(
-            "click",
-            () => {
-                if (hasUnsavedChanges) {
-                    bulmaJS.alert({
-                        message: "Please save all unsaved changes before adding fees.",
-                        contextualColorName: "warning"
-                    });
-                    return;
-                }
-
-                let feeCategories: recordTypes.FeeCategory[];
-
-                let feeFilterElement: HTMLInputElement;
-                let feeFilterResultsElement: HTMLElement;
-
-                const doAddFee = (feeId: number, quantity: number | string = 1) => {
-                    cityssm.postJSON(
-                        los.urlPrefix + "/lotOccupancies/doAddLotOccupancyFee",
-                        {
-                            lotOccupancyId,
-                            feeId,
-                            quantity
-                        },
-                        (responseJSON: {
-                            success: boolean;
-                            errorMessage?: string;
-                            lotOccupancyFees?: recordTypes.LotOccupancyFee[];
-                        }) => {
-                            if (responseJSON.success) {
-                                lotOccupancyFees = responseJSON.lotOccupancyFees!;
-                                renderLotOccupancyFees();
-                                filterFees();
-                            } else {
-                                bulmaJS.alert({
-                                    title: "Error Adding Fee",
-                                    message: responseJSON.errorMessage || "",
-                                    contextualColorName: "danger"
-                                });
-                            }
-                        }
-                    );
-                };
-
-                const doSetQuantityAndAddFee = (fee: recordTypes.Fee) => {
-                    let quantityElement: HTMLInputElement;
-                    let quantityCloseModalFunction: () => void;
-
-                    const doSetQuantity = (submitEvent: SubmitEvent) => {
-                        submitEvent.preventDefault();
-                        doAddFee(fee.feeId!, quantityElement.value);
-                        quantityCloseModalFunction();
-                    };
-
-                    cityssm.openHtmlModal("lotOccupancy-setFeeQuantity", {
-                        onshow: (modalElement) => {
-                            (
-                                modalElement.querySelector(
-                                    "#lotOccupancyFeeQuantity--quantityUnit"
-                                ) as HTMLElement
-                            ).textContent = fee.quantityUnit!;
-                        },
-                        onshown: (modalElement, closeModalFunction) => {
-                            quantityCloseModalFunction = closeModalFunction;
-
-                            quantityElement = modalElement.querySelector(
-                                "#lotOccupancyFeeQuantity--quantity"
-                            ) as HTMLInputElement;
-
-                            modalElement
-                                .querySelector("form")!
-                                .addEventListener("submit", doSetQuantity);
-                        }
-                    });
-                };
-
-                const tryAddFee = (clickEvent: Event) => {
-                    clickEvent.preventDefault();
-
-                    const feeId = Number.parseInt(
-                        (clickEvent.currentTarget as HTMLElement).dataset.feeId!,
-                        10
-                    );
-                    const feeCategoryId = Number.parseInt(
-                        (
-                            (clickEvent.currentTarget as HTMLElement).closest(
-                                ".container--feeCategory"
-                            ) as HTMLElement
-                        ).dataset.feeCategoryId!,
-                        10
-                    );
-
-                    const feeCategory = feeCategories.find((currentFeeCategory) => {
-                        return currentFeeCategory.feeCategoryId === feeCategoryId;
-                    })!;
-
-                    const fee = feeCategory.fees!.find((currentFee) => {
-                        return currentFee.feeId === feeId;
-                    })!;
-
-                    if (fee.includeQuantity) {
-                        doSetQuantityAndAddFee(fee);
-                    } else {
-                        doAddFee(feeId);
-                    }
-                };
-
-                const filterFees = () => {
-                    const filterStringPieces = feeFilterElement.value
-                        .trim()
-                        .toLowerCase()
-                        .split(" ");
-
-                    feeFilterResultsElement.innerHTML = "";
-
-                    for (const feeCategory of feeCategories) {
-                        const categoryContainerElement = document.createElement("div");
-                        categoryContainerElement.className = "container--feeCategory";
-                        categoryContainerElement.dataset.feeCategoryId =
-                            feeCategory.feeCategoryId!.toString();
-                        categoryContainerElement.innerHTML =
-                            '<h4 class="title is-5 mt-2">' +
-                            cityssm.escapeHTML(feeCategory.feeCategory || "") +
-                            "</h4>" +
-                            '<div class="panel mb-5"></div>';
-
-                        let hasFees = false;
-
-                        for (const fee of feeCategory.fees!) {
-                            if (
-                                lotOccupancyFeesContainerElement.querySelector(
-                                    ".container--lotOccupancyFee[data-fee-id='" +
-                                        fee.feeId +
-                                        "'][data-include-quantity='0']"
-                                )
-                            ) {
-                                continue;
-                            }
-
-                            let includeFee = true;
-
-                            for (const filterStringPiece of filterStringPieces) {
-                                if (!fee.feeName!.toLowerCase().includes(filterStringPiece)) {
-                                    includeFee = false;
-                                    break;
-                                }
-                            }
-
-                            if (!includeFee) {
-                                continue;
-                            }
-
-                            hasFees = true;
-
-                            const panelBlockElement = document.createElement("a");
-                            panelBlockElement.className = "panel-block is-block container--fee";
-                            panelBlockElement.dataset.feeId = fee.feeId!.toString();
-                            panelBlockElement.href = "#";
-
-                            panelBlockElement.innerHTML =
-                                "<strong>" +
-                                cityssm.escapeHTML(fee.feeName || "") +
-                                "</strong><br />" +
-                                "<small>" +
-                                cityssm
-                                    .escapeHTML(fee.feeDescription || "")
-                                    .replace(/\n/g, "<br />") +
-                                "</small>";
-
-                            panelBlockElement.addEventListener("click", tryAddFee);
-
-                            (
-                                categoryContainerElement.querySelector(".panel") as HTMLElement
-                            ).append(panelBlockElement);
-                        }
-
-                        if (hasFees) {
-                            feeFilterResultsElement.append(categoryContainerElement);
-                        }
-                    }
-                };
-
-                cityssm.openHtmlModal("lotOccupancy-addFee", {
-                    onshow: (modalElement) => {
-                        feeFilterElement = modalElement.querySelector(
-                            "#feeSelect--feeName"
-                        ) as HTMLInputElement;
-
-                        feeFilterResultsElement = modalElement.querySelector(
-                            "#resultsContainer--feeSelect"
-                        ) as HTMLElement;
-
-                        cityssm.postJSON(
-                            los.urlPrefix + "/lotOccupancies/doGetFees",
-                            {
-                                lotOccupancyId
-                            },
-                            (responseJSON: { feeCategories: recordTypes.FeeCategory[] }) => {
-                                feeCategories = responseJSON.feeCategories;
-
-                                feeFilterElement.disabled = false;
-                                feeFilterElement.addEventListener("keyup", filterFees);
-                                feeFilterElement.focus();
-
-                                filterFees();
-                            }
-                        );
-                    },
-                    onshown: () => {
-                        bulmaJS.toggleHtmlClipped();
-                    },
-                    onhidden: () => {
-                        renderLotOccupancyFees();
-                    },
-                    onremoved: () => {
-                        bulmaJS.toggleHtmlClipped();
-                    }
-                });
-            }
-        );
-
-        let lotOccupancyTransactions: recordTypes.LotOccupancyTransaction[] =
-            exports.lotOccupancyTransactions;
-        delete exports.lotOccupancyTransactions;
-
-        const lotOccupancyTransactionsContainerElement = document.querySelector(
-            "#container--lotOccupancyTransactions"
-        ) as HTMLElement;
-
-        const getTransactionGrandTotal = (): number => {
-            let transactionGrandTotal = 0;
-
-            for (const lotOccupancyTransaction of lotOccupancyTransactions) {
-                transactionGrandTotal += lotOccupancyTransaction.transactionAmount;
-            }
-
-            return transactionGrandTotal;
-        };
-
-        const deleteLotOccupancyTransaction = (clickEvent: Event) => {
-            const transactionIndex = (
-                (clickEvent.currentTarget as HTMLElement).closest(
-                    ".container--lotOccupancyTransaction"
-                ) as HTMLElement
-            ).dataset.transactionIndex;
-
-            const doDelete = () => {
-                cityssm.postJSON(
-                    los.urlPrefix + "/lotOccupancies/doDeleteLotOccupancyTransaction",
-                    {
-                        lotOccupancyId,
-                        transactionIndex
-                    },
-                    (responseJSON: {
-                        success: boolean;
-                        errorMessage?: string;
-                        lotOccupancyTransactions?: recordTypes.LotOccupancyTransaction[];
-                    }) => {
-                        if (responseJSON.success) {
-                            lotOccupancyTransactions = responseJSON.lotOccupancyTransactions!;
-                            renderLotOccupancyTransactions();
-                        } else {
-                            bulmaJS.alert({
-                                title: "Error Deleting Transaction",
-                                message: responseJSON.errorMessage || "",
-                                contextualColorName: "danger"
-                            });
-                        }
-                    }
-                );
-            };
-
-            bulmaJS.confirm({
-                title: "Delete Trasnaction",
-                message: "Are you sure you want to delete this transaction?",
-                contextualColorName: "warning",
-                okButton: {
-                    text: "Yes, Delete Transaction",
-                    callbackFunction: doDelete
-                }
-            });
-        };
-
-        const renderLotOccupancyTransactions = () => {
-            if (lotOccupancyTransactions.length === 0) {
-                lotOccupancyTransactionsContainerElement.innerHTML =
-                    '<div class="message ' +
-                    (lotOccupancyFees.length === 0 ? "is-info" : "is-warning") +
-                    '">' +
-                    '<p class="message-body">There are no transactions associated with this record.</p>' +
-                    "</div>";
-
-                return;
-            }
-
-            lotOccupancyTransactionsContainerElement.innerHTML =
-                '<table class="table is-fullwidth is-striped is-hoverable">' +
-                "<thead><tr>" +
-                '<th class="has-width-1">Date</th>' +
-                "<th>" +
-                cityssm.escapeHTML(exports.aliases.externalReceiptNumber) +
-                "</th>" +
-                '<th class="has-text-right has-width-1">Amount</th>' +
-                '<th class="has-width-1 is-hidden-print"><span class="is-sr-only">Options</span></th>' +
-                "</tr></thead>" +
-                "<tbody></tbody>" +
-                ("<tfoot><tr>" +
-                    '<th colspan="2">Transaction Total</th>' +
-                    '<td class="has-text-weight-bold has-text-right" id="lotOccupancyTransactions--grandTotal"></td>' +
-                    '<td class="is-hidden-print"></td>' +
-                    "</tr></tfoot>") +
-                "</table>";
-
-            let transactionGrandTotal = 0;
-
-            for (const lotOccupancyTransaction of lotOccupancyTransactions) {
-                transactionGrandTotal += lotOccupancyTransaction.transactionAmount;
-
-                const tableRowElement = document.createElement("tr");
-                tableRowElement.className = "container--lotOccupancyTransaction";
-                tableRowElement.dataset.transactionIndex =
-                    lotOccupancyTransaction.transactionIndex!.toString();
-
-                tableRowElement.innerHTML =
-                    "<td>" +
-                    lotOccupancyTransaction.transactionDateString +
-                    "</td>" +
-                    ("<td>" +
-                        cityssm.escapeHTML(lotOccupancyTransaction.externalReceiptNumber || "") +
-                        "<br />" +
-                        "<small>" +
-                        cityssm.escapeHTML(lotOccupancyTransaction.transactionNote || "") +
-                        "</small>" +
-                        "</td>") +
-                    ('<td class="has-text-right">$' +
-                        lotOccupancyTransaction.transactionAmount.toFixed(2) +
-                        "</td>") +
-                    ('<td class="is-hidden-print">' +
-                        '<button class="button is-small is-danger is-light" data-tooltip="Delete Transaction" type="button">' +
-                        '<i class="fas fa-trash" aria-hidden="true"></i>' +
-                        "</button>" +
-                        "</td>");
-
-                tableRowElement
-                    .querySelector("button")!
-                    .addEventListener("click", deleteLotOccupancyTransaction);
-
-                lotOccupancyTransactionsContainerElement
-                    .querySelector("tbody")!
-                    .append(tableRowElement);
-            }
-
-            (
-                lotOccupancyTransactionsContainerElement.querySelector(
-                    "#lotOccupancyTransactions--grandTotal"
-                ) as HTMLElement
-            ).textContent = "$" + transactionGrandTotal.toFixed(2);
-
-            const feeGrandTotal = getFeeGrandTotal();
-
-            if (feeGrandTotal > transactionGrandTotal) {
-                lotOccupancyTransactionsContainerElement.insertAdjacentHTML(
-                    "afterbegin",
-                    '<div class="message is-warning">' +
-                        '<div class="message-body">' +
-                        '<div class="level">' +
-                        '<div class="level-left"><div class="level-item">Outstanding Balance</div></div>' +
-                        '<div class="level-right"><div class="level-item">$' +
-                        (feeGrandTotal - transactionGrandTotal).toFixed(2) +
-                        "</div></div>" +
-                        "</div>" +
-                        "</div>" +
-                        "</div>"
-                );
-            }
-        };
-
-        (document.querySelector("#button--addTransaction") as HTMLButtonElement).addEventListener(
-            "click",
-            () => {
-                let addCloseModalFunction: () => void;
-
-                const doAddTransaction = (submitEvent: SubmitEvent) => {
-                    submitEvent.preventDefault();
-
-                    cityssm.postJSON(
-                        los.urlPrefix + "/lotOccupancies/doAddLotOccupancyTransaction",
-                        submitEvent.currentTarget,
-                        (responseJSON: {
-                            success: boolean;
-                            errorMessage?: string;
-                            lotOccupancyTransactions?: recordTypes.LotOccupancyTransaction[];
-                        }) => {
-                            if (responseJSON.success) {
-                                lotOccupancyTransactions = responseJSON.lotOccupancyTransactions!;
-                                addCloseModalFunction();
-                                renderLotOccupancyTransactions();
-                            } else {
-                                bulmaJS.confirm({
-                                    title: "Error Adding Transaction",
-                                    message: responseJSON.errorMessage || "",
-                                    contextualColorName: "danger"
-                                });
-                            }
-                        }
-                    );
-                };
-
-                cityssm.openHtmlModal("lotOccupancy-addTransaction", {
-                    onshow: (modalElement) => {
-                        los.populateAliases(modalElement);
-
-                        (
-                            modalElement.querySelector(
-                                "#lotOccupancyTransactionAdd--lotOccupancyId"
-                            ) as HTMLInputElement
-                        ).value = lotOccupancyId.toString();
-
-                        const feeGrandTotal = getFeeGrandTotal();
-                        const transactionGrandTotal = getTransactionGrandTotal();
-
-                        const transactionAmountElement = modalElement.querySelector(
-                            "#lotOccupancyTransactionAdd--transactionAmount"
-                        ) as HTMLInputElement;
-
-                        transactionAmountElement.min = (-1 * transactionGrandTotal).toFixed(2);
-                        transactionAmountElement.max = Math.max(
-                            feeGrandTotal - transactionGrandTotal,
-                            0
-                        ).toFixed(2);
-                        transactionAmountElement.value = Math.max(
-                            feeGrandTotal - transactionGrandTotal,
-                            0
-                        ).toFixed(2);
-                    },
-                    onshown: (modalElement, closeModalFunction) => {
-                        bulmaJS.toggleHtmlClipped();
-
-                        addCloseModalFunction = closeModalFunction;
-
-                        modalElement
-                            .querySelector("form")!
-                            .addEventListener("submit", doAddTransaction);
-                    },
-                    onremoved: () => {
-                        bulmaJS.toggleHtmlClipped();
-                    }
-                });
-            }
-        );
-
-        renderLotOccupancyFees();
     }
 })();

public-typescript/lotOccupancyEdit/lotOccupancyEditComments.d.ts

@@ -0,0 +1 @@
+export {};

public-typescript/lotOccupancyEdit/lotOccupancyEditComments.js

@@ -0,0 +1,181 @@
+"use strict";
+/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
+Object.defineProperty(exports, "__esModule", { value: true });
+let lotOccupancyComments = exports.lotOccupancyComments;
+delete exports.lotOccupancyComments;
+const openEditLotOccupancyComment = (clickEvent) => {
+    const lotOccupancyCommentId = Number.parseInt(clickEvent.currentTarget.closest("tr").dataset.lotOccupancyCommentId, 10);
+    const lotOccupancyComment = lotOccupancyComments.find((currentLotOccupancyComment) => {
+        return currentLotOccupancyComment.lotOccupancyCommentId === lotOccupancyCommentId;
+    });
+    let editFormElement;
+    let editCloseModalFunction;
+    const editComment = (submitEvent) => {
+        submitEvent.preventDefault();
+        cityssm.postJSON(los.urlPrefix + "/lotOccupancies/doUpdateLotOccupancyComment", editFormElement, (responseJSON) => {
+            if (responseJSON.success) {
+                lotOccupancyComments = responseJSON.lotOccupancyComments;
+                editCloseModalFunction();
+                renderLotOccupancyComments();
+            }
+            else {
+                bulmaJS.alert({
+                    title: "Error Updating Comment",
+                    message: responseJSON.errorMessage || "",
+                    contextualColorName: "danger"
+                });
+            }
+        });
+    };
+    cityssm.openHtmlModal("lotOccupancy-editComment", {
+        onshow: (modalElement) => {
+            los.populateAliases(modalElement);
+            modalElement.querySelector("#lotOccupancyCommentEdit--lotOccupancyId").value = lotOccupancyId;
+            modalElement.querySelector("#lotOccupancyCommentEdit--lotOccupancyCommentId").value = lotOccupancyCommentId.toString();
+            modalElement.querySelector("#lotOccupancyCommentEdit--lotOccupancyComment").value = lotOccupancyComment.lotOccupancyComment;
+            const lotOccupancyCommentDateStringElement = modalElement.querySelector("#lotOccupancyCommentEdit--lotOccupancyCommentDateString");
+            lotOccupancyCommentDateStringElement.value =
+                lotOccupancyComment.lotOccupancyCommentDateString;
+            const currentDateString = cityssm.dateToString(new Date());
+            lotOccupancyCommentDateStringElement.max =
+                lotOccupancyComment.lotOccupancyCommentDateString <= currentDateString
+                    ? currentDateString
+                    : lotOccupancyComment.lotOccupancyCommentDateString;
+            modalElement.querySelector("#lotOccupancyCommentEdit--lotOccupancyCommentTimeString").value = lotOccupancyComment.lotOccupancyCommentTimeString;
+        },
+        onshown: (modalElement, closeModalFunction) => {
+            bulmaJS.toggleHtmlClipped();
+            los.initializeDatePickers(modalElement);
+            // los.initializeTimePickers(modalElement);
+            modalElement.querySelector("#lotOccupancyCommentEdit--lotOccupancyComment").focus();
+            editFormElement = modalElement.querySelector("form");
+            editFormElement.addEventListener("submit", editComment);
+            editCloseModalFunction = closeModalFunction;
+        },
+        onremoved: () => {
+            bulmaJS.toggleHtmlClipped();
+        }
+    });
+};
+const deleteLotOccupancyComment = (clickEvent) => {
+    const lotOccupancyCommentId = Number.parseInt(clickEvent.currentTarget.closest("tr").dataset.lotOccupancyCommentId, 10);
+    const doDelete = () => {
+        cityssm.postJSON(los.urlPrefix + "/lotOccupancies/doDeleteLotOccupancyComment", {
+            lotOccupancyId,
+            lotOccupancyCommentId
+        }, (responseJSON) => {
+            if (responseJSON.success) {
+                lotOccupancyComments = responseJSON.lotOccupancyComments;
+                renderLotOccupancyComments();
+            }
+            else {
+                bulmaJS.alert({
+                    title: "Error Removing Comment",
+                    message: responseJSON.errorMessage || "",
+                    contextualColorName: "danger"
+                });
+            }
+        });
+    };
+    bulmaJS.confirm({
+        title: "Remove Comment?",
+        message: "Are you sure you want to remove this comment?",
+        okButton: {
+            text: "Yes, Remove Comment",
+            callbackFunction: doDelete
+        },
+        contextualColorName: "warning"
+    });
+};
+const renderLotOccupancyComments = () => {
+    const containerElement = document.querySelector("#container--lotOccupancyComments");
+    if (lotOccupancyComments.length === 0) {
+        containerElement.innerHTML =
+            '<div class="message is-info">' +
+                '<p class="message-body">There are no comments associated with this record.</p>' +
+                "</div>";
+        return;
+    }
+    const tableElement = document.createElement("table");
+    tableElement.className = "table is-fullwidth is-striped is-hoverable";
+    tableElement.innerHTML =
+        "<thead><tr>" +
+            "<th>Commentor</th>" +
+            "<th>Comment Date</th>" +
+            "<th>Comment</th>" +
+            '<th class="is-hidden-print"><span class="is-sr-only">Options</span></th>' +
+            "</tr></thead>" +
+            "<tbody></tbody>";
+    for (const lotOccupancyComment of lotOccupancyComments) {
+        const tableRowElement = document.createElement("tr");
+        tableRowElement.dataset.lotOccupancyCommentId =
+            lotOccupancyComment.lotOccupancyCommentId.toString();
+        tableRowElement.innerHTML =
+            "<td>" +
+                cityssm.escapeHTML(lotOccupancyComment.recordCreate_userName || "") +
+                "</td>" +
+                "<td>" +
+                lotOccupancyComment.lotOccupancyCommentDateString +
+                (lotOccupancyComment.lotOccupancyCommentTime === 0
+                    ? ""
+                    : " " + lotOccupancyComment.lotOccupancyCommentTimeString) +
+                "</td>" +
+                "<td>" +
+                cityssm.escapeHTML(lotOccupancyComment.lotOccupancyComment || "") +
+                "</td>" +
+                ('<td class="is-hidden-print">' +
+                    '<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>Edit</span>" +
+                        "</button>") +
+                    ('<button class="button is-light is-danger button--delete" data-tooltip="Delete Comment" type="button" aria-label="Delete">' +
+                        '<i class="fas fa-trash" aria-hidden="true"></i>' +
+                        "</button>") +
+                    "</div>" +
+                    "</td>");
+        tableRowElement.querySelector(".button--edit").addEventListener("click", openEditLotOccupancyComment);
+        tableRowElement.querySelector(".button--delete").addEventListener("click", deleteLotOccupancyComment);
+        tableElement.querySelector("tbody").append(tableRowElement);
+    }
+    containerElement.innerHTML = "";
+    containerElement.append(tableElement);
+};
+document.querySelector("#button--addComment").addEventListener("click", () => {
+    let addFormElement;
+    let addCloseModalFunction;
+    const addComment = (submitEvent) => {
+        submitEvent.preventDefault();
+        cityssm.postJSON(los.urlPrefix + "/lotOccupancies/doAddLotOccupancyComment", addFormElement, (responseJSON) => {
+            if (responseJSON.success) {
+                lotOccupancyComments = responseJSON.lotOccupancyComments;
+                addCloseModalFunction();
+                renderLotOccupancyComments();
+            }
+            else {
+                bulmaJS.alert({
+                    title: "Error Adding Comment",
+                    message: responseJSON.errorMessage || "",
+                    contextualColorName: "danger"
+                });
+            }
+        });
+    };
+    cityssm.openHtmlModal("lotOccupancy-addComment", {
+        onshow: (modalElement) => {
+            los.populateAliases(modalElement);
+            modalElement.querySelector("#lotOccupancyCommentAdd--lotOccupancyId").value = lotOccupancyId;
+        },
+        onshown: (modalElement, closeModalFunction) => {
+            bulmaJS.toggleHtmlClipped();
+            modalElement.querySelector("#lotOccupancyCommentAdd--lotOccupancyComment").focus();
+            addFormElement = modalElement.querySelector("form");
+            addFormElement.addEventListener("submit", addComment);
+            addCloseModalFunction = closeModalFunction;
+        },
+        onremoved: () => {
+            bulmaJS.toggleHtmlClipped();
+        }
+    });
+});
+renderLotOccupancyComments();

public-typescript/lotOccupancyEdit/lotOccupancyEditComments.ts

@@ -0,0 +1,300 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
+
+import type * as globalTypes from "../../types/globalTypes";
+import type * as recordTypes from "../../types/recordTypes";
+
+import type { cityssmGlobal } from "@cityssm/bulma-webapp-js/src/types";
+
+import type { BulmaJS } from "@cityssm/bulma-js/types";
+
+declare const cityssm: cityssmGlobal;
+declare const bulmaJS: BulmaJS;
+
+declare const los: globalTypes.LOS;
+
+declare const lotOccupancyId: string;
+
+let lotOccupancyComments: recordTypes.LotOccupancyComment[] = exports.lotOccupancyComments;
+delete exports.lotOccupancyComments;
+
+const openEditLotOccupancyComment = (clickEvent: Event) => {
+    const lotOccupancyCommentId = Number.parseInt(
+        (clickEvent.currentTarget as HTMLElement).closest("tr")!.dataset.lotOccupancyCommentId!,
+        10
+    );
+
+    const lotOccupancyComment = lotOccupancyComments.find((currentLotOccupancyComment) => {
+        return currentLotOccupancyComment.lotOccupancyCommentId === lotOccupancyCommentId;
+    })!;
+
+    let editFormElement: HTMLFormElement;
+    let editCloseModalFunction: () => void;
+
+    const editComment = (submitEvent: SubmitEvent) => {
+        submitEvent.preventDefault();
+
+        cityssm.postJSON(
+            los.urlPrefix + "/lotOccupancies/doUpdateLotOccupancyComment",
+            editFormElement,
+            (responseJSON: {
+                success: boolean;
+                errorMessage?: string;
+                lotOccupancyComments?: recordTypes.LotOccupancyComment[];
+            }) => {
+                if (responseJSON.success) {
+                    lotOccupancyComments = responseJSON.lotOccupancyComments!;
+                    editCloseModalFunction();
+                    renderLotOccupancyComments();
+                } else {
+                    bulmaJS.alert({
+                        title: "Error Updating Comment",
+                        message: responseJSON.errorMessage || "",
+                        contextualColorName: "danger"
+                    });
+                }
+            }
+        );
+    };
+
+    cityssm.openHtmlModal("lotOccupancy-editComment", {
+        onshow: (modalElement) => {
+            los.populateAliases(modalElement);
+
+            (
+                modalElement.querySelector(
+                    "#lotOccupancyCommentEdit--lotOccupancyId"
+                ) as HTMLInputElement
+            ).value = lotOccupancyId;
+            (
+                modalElement.querySelector(
+                    "#lotOccupancyCommentEdit--lotOccupancyCommentId"
+                ) as HTMLInputElement
+            ).value = lotOccupancyCommentId.toString();
+
+            (
+                modalElement.querySelector(
+                    "#lotOccupancyCommentEdit--lotOccupancyComment"
+                ) as HTMLInputElement
+            ).value = lotOccupancyComment.lotOccupancyComment!;
+
+            const lotOccupancyCommentDateStringElement = modalElement.querySelector(
+                "#lotOccupancyCommentEdit--lotOccupancyCommentDateString"
+            ) as HTMLInputElement;
+
+            lotOccupancyCommentDateStringElement.value =
+                lotOccupancyComment.lotOccupancyCommentDateString!;
+
+            const currentDateString = cityssm.dateToString(new Date());
+
+            lotOccupancyCommentDateStringElement.max =
+                lotOccupancyComment.lotOccupancyCommentDateString! <= currentDateString
+                    ? currentDateString
+                    : lotOccupancyComment.lotOccupancyCommentDateString!;
+
+            (
+                modalElement.querySelector(
+                    "#lotOccupancyCommentEdit--lotOccupancyCommentTimeString"
+                ) as HTMLInputElement
+            ).value = lotOccupancyComment.lotOccupancyCommentTimeString!;
+        },
+        onshown: (modalElement, closeModalFunction) => {
+            bulmaJS.toggleHtmlClipped();
+
+            los.initializeDatePickers(modalElement);
+            // los.initializeTimePickers(modalElement);
+
+            (
+                modalElement.querySelector(
+                    "#lotOccupancyCommentEdit--lotOccupancyComment"
+                ) as HTMLTextAreaElement
+            ).focus();
+
+            editFormElement = modalElement.querySelector("form")!;
+            editFormElement.addEventListener("submit", editComment);
+
+            editCloseModalFunction = closeModalFunction;
+        },
+        onremoved: () => {
+            bulmaJS.toggleHtmlClipped();
+        }
+    });
+};
+
+const deleteLotOccupancyComment = (clickEvent: Event) => {
+    const lotOccupancyCommentId = Number.parseInt(
+        (clickEvent.currentTarget as HTMLElement).closest("tr")!.dataset.lotOccupancyCommentId!,
+        10
+    );
+
+    const doDelete = () => {
+        cityssm.postJSON(
+            los.urlPrefix + "/lotOccupancies/doDeleteLotOccupancyComment",
+            {
+                lotOccupancyId,
+                lotOccupancyCommentId
+            },
+            (responseJSON: {
+                success: boolean;
+                errorMessage?: string;
+                lotOccupancyComments: recordTypes.LotOccupancyComment[];
+            }) => {
+                if (responseJSON.success) {
+                    lotOccupancyComments = responseJSON.lotOccupancyComments;
+                    renderLotOccupancyComments();
+                } else {
+                    bulmaJS.alert({
+                        title: "Error Removing Comment",
+                        message: responseJSON.errorMessage || "",
+                        contextualColorName: "danger"
+                    });
+                }
+            }
+        );
+    };
+
+    bulmaJS.confirm({
+        title: "Remove Comment?",
+        message: "Are you sure you want to remove this comment?",
+        okButton: {
+            text: "Yes, Remove Comment",
+            callbackFunction: doDelete
+        },
+        contextualColorName: "warning"
+    });
+};
+
+const renderLotOccupancyComments = () => {
+    const containerElement = document.querySelector(
+        "#container--lotOccupancyComments"
+    ) as HTMLElement;
+
+    if (lotOccupancyComments.length === 0) {
+        containerElement.innerHTML =
+            '<div class="message is-info">' +
+            '<p class="message-body">There are no comments associated with this record.</p>' +
+            "</div>";
+        return;
+    }
+
+    const tableElement = document.createElement("table");
+    tableElement.className = "table is-fullwidth is-striped is-hoverable";
+    tableElement.innerHTML =
+        "<thead><tr>" +
+        "<th>Commentor</th>" +
+        "<th>Comment Date</th>" +
+        "<th>Comment</th>" +
+        '<th class="is-hidden-print"><span class="is-sr-only">Options</span></th>' +
+        "</tr></thead>" +
+        "<tbody></tbody>";
+
+    for (const lotOccupancyComment of lotOccupancyComments) {
+        const tableRowElement = document.createElement("tr");
+        tableRowElement.dataset.lotOccupancyCommentId =
+            lotOccupancyComment.lotOccupancyCommentId!.toString();
+
+        tableRowElement.innerHTML =
+            "<td>" +
+            cityssm.escapeHTML(lotOccupancyComment.recordCreate_userName || "") +
+            "</td>" +
+            "<td>" +
+            lotOccupancyComment.lotOccupancyCommentDateString +
+            (lotOccupancyComment.lotOccupancyCommentTime === 0
+                ? ""
+                : " " + lotOccupancyComment.lotOccupancyCommentTimeString) +
+            "</td>" +
+            "<td>" +
+            cityssm.escapeHTML(lotOccupancyComment.lotOccupancyComment || "") +
+            "</td>" +
+            ('<td class="is-hidden-print">' +
+                '<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>Edit</span>" +
+                    "</button>") +
+                ('<button class="button is-light is-danger button--delete" data-tooltip="Delete Comment" type="button" aria-label="Delete">' +
+                    '<i class="fas fa-trash" aria-hidden="true"></i>' +
+                    "</button>") +
+                "</div>" +
+                "</td>");
+
+        (tableRowElement.querySelector(".button--edit") as HTMLButtonElement).addEventListener(
+            "click",
+            openEditLotOccupancyComment
+        );
+
+        (tableRowElement.querySelector(".button--delete") as HTMLButtonElement).addEventListener(
+            "click",
+            deleteLotOccupancyComment
+        );
+
+        tableElement.querySelector("tbody")!.append(tableRowElement);
+    }
+
+    containerElement.innerHTML = "";
+    containerElement.append(tableElement);
+};
+
+(document.querySelector("#button--addComment") as HTMLButtonElement).addEventListener(
+    "click",
+    () => {
+        let addFormElement: HTMLFormElement;
+        let addCloseModalFunction: () => void;
+
+        const addComment = (submitEvent: SubmitEvent) => {
+            submitEvent.preventDefault();
+
+            cityssm.postJSON(
+                los.urlPrefix + "/lotOccupancies/doAddLotOccupancyComment",
+                addFormElement,
+                (responseJSON: {
+                    success: boolean;
+                    errorMessage?: string;
+                    lotOccupancyComments?: recordTypes.LotOccupancyComment[];
+                }) => {
+                    if (responseJSON.success) {
+                        lotOccupancyComments = responseJSON.lotOccupancyComments!;
+                        addCloseModalFunction();
+                        renderLotOccupancyComments();
+                    } else {
+                        bulmaJS.alert({
+                            title: "Error Adding Comment",
+                            message: responseJSON.errorMessage || "",
+                            contextualColorName: "danger"
+                        });
+                    }
+                }
+            );
+        };
+
+        cityssm.openHtmlModal("lotOccupancy-addComment", {
+            onshow: (modalElement) => {
+                los.populateAliases(modalElement);
+
+                (
+                    modalElement.querySelector(
+                        "#lotOccupancyCommentAdd--lotOccupancyId"
+                    ) as HTMLInputElement
+                ).value = lotOccupancyId;
+            },
+            onshown: (modalElement, closeModalFunction) => {
+                bulmaJS.toggleHtmlClipped();
+
+                (
+                    modalElement.querySelector(
+                        "#lotOccupancyCommentAdd--lotOccupancyComment"
+                    ) as HTMLTextAreaElement
+                ).focus();
+
+                addFormElement = modalElement.querySelector("form")!;
+                addFormElement.addEventListener("submit", addComment);
+
+                addCloseModalFunction = closeModalFunction;
+            },
+            onremoved: () => {
+                bulmaJS.toggleHtmlClipped();
+            }
+        });
+    }
+);
+
+renderLotOccupancyComments();

public-typescript/lotOccupancyEdit/lotOccupancyEditFees.d.ts

@@ -0,0 +1 @@
+export {};

public-typescript/lotOccupancyEdit/lotOccupancyEditFees.js

@@ -0,0 +1,407 @@
+"use strict";
+/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
+Object.defineProperty(exports, "__esModule", { value: true });
+let lotOccupancyFees = exports.lotOccupancyFees;
+delete exports.lotOccupancyFees;
+const lotOccupancyFeesContainerElement = document.querySelector("#container--lotOccupancyFees");
+const getFeeGrandTotal = () => {
+    let feeGrandTotal = 0;
+    for (const lotOccupancyFee of lotOccupancyFees) {
+        feeGrandTotal +=
+            (lotOccupancyFee.feeAmount + lotOccupancyFee.taxAmount) * lotOccupancyFee.quantity;
+    }
+    return feeGrandTotal;
+};
+const deleteLotOccupancyFee = (clickEvent) => {
+    const feeId = clickEvent.currentTarget.closest(".container--lotOccupancyFee").dataset.feeId;
+    const doDelete = () => {
+        cityssm.postJSON(los.urlPrefix + "/lotOccupancies/doDeleteLotOccupancyFee", {
+            lotOccupancyId,
+            feeId
+        }, (responseJSON) => {
+            if (responseJSON.success) {
+                lotOccupancyFees = responseJSON.lotOccupancyFees;
+                renderLotOccupancyFees();
+            }
+            else {
+                bulmaJS.alert({
+                    title: "Error Deleting Fee",
+                    message: responseJSON.errorMessage || "",
+                    contextualColorName: "danger"
+                });
+            }
+        });
+    };
+    bulmaJS.confirm({
+        title: "Delete Fee",
+        message: "Are you sure you want to delete this fee?",
+        contextualColorName: "warning",
+        okButton: {
+            text: "Yes, Delete Fee",
+            callbackFunction: doDelete
+        }
+    });
+};
+const renderLotOccupancyFees = () => {
+    if (lotOccupancyFees.length === 0) {
+        lotOccupancyFeesContainerElement.innerHTML =
+            '<div class="message is-info">' +
+                '<p class="message-body">There are no fees associated with this record.</p>' +
+                "</div>";
+        renderLotOccupancyTransactions();
+        return;
+    }
+    lotOccupancyFeesContainerElement.innerHTML =
+        '<table class="table is-fullwidth is-striped is-hoverable">' +
+            ("<thead><tr>" +
+                "<th>Fee</th>" +
+                '<th><span class="is-sr-only">Unit Cost</span></th>' +
+                '<th class="has-width-1"><span class="is-sr-only">&times;</span></th>' +
+                '<th class="has-width-1"><span class="is-sr-only">Quantity</span></th>' +
+                '<th class="has-width-1"><span class="is-sr-only">equals</span></th>' +
+                '<th class="has-width-1 has-text-right">Total</th>' +
+                '<th class="has-width-1 is-hidden-print"><span class="is-sr-only">Options</span></th>' +
+                "</tr></thead>") +
+            "<tbody></tbody>" +
+            ("<tfoot>" +
+                '<tr><th colspan="5">Subtotal</th><td class="has-text-weight-bold has-text-right" id="lotOccupancyFees--feeAmountTotal"></td><td class="is-hidden-print"></td></tr>' +
+                '<tr><th colspan="5">Tax</th><td class="has-text-right" id="lotOccupancyFees--taxAmountTotal"></td><td class="is-hidden-print"></td></tr>' +
+                '<tr><th colspan="5">Grand Total</th><td class="has-text-weight-bold has-text-right" id="lotOccupancyFees--grandTotal"></td><td class="is-hidden-print"></td></tr>' +
+                "</tfoot>") +
+            "</table>";
+    let feeAmountTotal = 0;
+    let taxAmountTotal = 0;
+    for (const lotOccupancyFee of lotOccupancyFees) {
+        const tableRowElement = document.createElement("tr");
+        tableRowElement.className = "container--lotOccupancyFee";
+        tableRowElement.dataset.feeId = lotOccupancyFee.feeId.toString();
+        tableRowElement.dataset.includeQuantity = lotOccupancyFee.includeQuantity ? "1" : "0";
+        tableRowElement.innerHTML =
+            '<td colspan="' +
+                (lotOccupancyFee.quantity === 1 ? "5" : "1") +
+                '">' +
+                cityssm.escapeHTML(lotOccupancyFee.feeName || "") +
+                "</td>" +
+                (lotOccupancyFee.quantity === 1
+                    ? ""
+                    : '<td class="has-text-right">$' +
+                        lotOccupancyFee.feeAmount.toFixed(2) +
+                        "</td>" +
+                        "<td>&times;</td>" +
+                        '<td class="has-text-right">' +
+                        lotOccupancyFee.quantity +
+                        "</td>" +
+                        "<td>=</td>") +
+                '<td class="has-text-right">$' +
+                (lotOccupancyFee.feeAmount * lotOccupancyFee.quantity).toFixed(2) +
+                "</td>" +
+                ('<td class="is-hidden-print">' +
+                    '<button class="button is-small is-danger is-light" data-tooltip="Delete Fee" type="button">' +
+                    '<i class="fas fa-trash" aria-hidden="true"></i>' +
+                    "</button>" +
+                    "</td>");
+        tableRowElement.querySelector("button").addEventListener("click", deleteLotOccupancyFee);
+        lotOccupancyFeesContainerElement.querySelector("tbody").append(tableRowElement);
+        feeAmountTotal += lotOccupancyFee.feeAmount * lotOccupancyFee.quantity;
+        taxAmountTotal += lotOccupancyFee.taxAmount * lotOccupancyFee.quantity;
+    }
+    lotOccupancyFeesContainerElement.querySelector("#lotOccupancyFees--feeAmountTotal").textContent = "$" + feeAmountTotal.toFixed(2);
+    lotOccupancyFeesContainerElement.querySelector("#lotOccupancyFees--taxAmountTotal").textContent = "$" + taxAmountTotal.toFixed(2);
+    lotOccupancyFeesContainerElement.querySelector("#lotOccupancyFees--grandTotal").textContent = "$" + (feeAmountTotal + taxAmountTotal).toFixed(2);
+    renderLotOccupancyTransactions();
+};
+document.querySelector("#button--addFee").addEventListener("click", () => {
+    if (hasUnsavedChanges) {
+        bulmaJS.alert({
+            message: "Please save all unsaved changes before adding fees.",
+            contextualColorName: "warning"
+        });
+        return;
+    }
+    let feeCategories;
+    let feeFilterElement;
+    let feeFilterResultsElement;
+    const doAddFee = (feeId, quantity = 1) => {
+        cityssm.postJSON(los.urlPrefix + "/lotOccupancies/doAddLotOccupancyFee", {
+            lotOccupancyId,
+            feeId,
+            quantity
+        }, (responseJSON) => {
+            if (responseJSON.success) {
+                lotOccupancyFees = responseJSON.lotOccupancyFees;
+                renderLotOccupancyFees();
+                filterFees();
+            }
+            else {
+                bulmaJS.alert({
+                    title: "Error Adding Fee",
+                    message: responseJSON.errorMessage || "",
+                    contextualColorName: "danger"
+                });
+            }
+        });
+    };
+    const doSetQuantityAndAddFee = (fee) => {
+        let quantityElement;
+        let quantityCloseModalFunction;
+        const doSetQuantity = (submitEvent) => {
+            submitEvent.preventDefault();
+            doAddFee(fee.feeId, quantityElement.value);
+            quantityCloseModalFunction();
+        };
+        cityssm.openHtmlModal("lotOccupancy-setFeeQuantity", {
+            onshow: (modalElement) => {
+                modalElement.querySelector("#lotOccupancyFeeQuantity--quantityUnit").textContent = fee.quantityUnit;
+            },
+            onshown: (modalElement, closeModalFunction) => {
+                quantityCloseModalFunction = closeModalFunction;
+                quantityElement = modalElement.querySelector("#lotOccupancyFeeQuantity--quantity");
+                modalElement.querySelector("form").addEventListener("submit", doSetQuantity);
+            }
+        });
+    };
+    const tryAddFee = (clickEvent) => {
+        clickEvent.preventDefault();
+        const feeId = Number.parseInt(clickEvent.currentTarget.dataset.feeId, 10);
+        const feeCategoryId = Number.parseInt(clickEvent.currentTarget.closest(".container--feeCategory").dataset.feeCategoryId, 10);
+        const feeCategory = feeCategories.find((currentFeeCategory) => {
+            return currentFeeCategory.feeCategoryId === feeCategoryId;
+        });
+        const fee = feeCategory.fees.find((currentFee) => {
+            return currentFee.feeId === feeId;
+        });
+        if (fee.includeQuantity) {
+            doSetQuantityAndAddFee(fee);
+        }
+        else {
+            doAddFee(feeId);
+        }
+    };
+    const filterFees = () => {
+        const filterStringPieces = feeFilterElement.value.trim().toLowerCase().split(" ");
+        feeFilterResultsElement.innerHTML = "";
+        for (const feeCategory of feeCategories) {
+            const categoryContainerElement = document.createElement("div");
+            categoryContainerElement.className = "container--feeCategory";
+            categoryContainerElement.dataset.feeCategoryId = feeCategory.feeCategoryId.toString();
+            categoryContainerElement.innerHTML =
+                '<h4 class="title is-5 mt-2">' +
+                    cityssm.escapeHTML(feeCategory.feeCategory || "") +
+                    "</h4>" +
+                    '<div class="panel mb-5"></div>';
+            let hasFees = false;
+            for (const fee of feeCategory.fees) {
+                if (lotOccupancyFeesContainerElement.querySelector(".container--lotOccupancyFee[data-fee-id='" +
+                    fee.feeId +
+                    "'][data-include-quantity='0']")) {
+                    continue;
+                }
+                let includeFee = true;
+                for (const filterStringPiece of filterStringPieces) {
+                    if (!fee.feeName.toLowerCase().includes(filterStringPiece)) {
+                        includeFee = false;
+                        break;
+                    }
+                }
+                if (!includeFee) {
+                    continue;
+                }
+                hasFees = true;
+                const panelBlockElement = document.createElement("a");
+                panelBlockElement.className = "panel-block is-block container--fee";
+                panelBlockElement.dataset.feeId = fee.feeId.toString();
+                panelBlockElement.href = "#";
+                panelBlockElement.innerHTML =
+                    "<strong>" +
+                        cityssm.escapeHTML(fee.feeName || "") +
+                        "</strong><br />" +
+                        "<small>" +
+                        cityssm.escapeHTML(fee.feeDescription || "").replace(/\n/g, "<br />") +
+                        "</small>";
+                panelBlockElement.addEventListener("click", tryAddFee);
+                categoryContainerElement.querySelector(".panel").append(panelBlockElement);
+            }
+            if (hasFees) {
+                feeFilterResultsElement.append(categoryContainerElement);
+            }
+        }
+    };
+    cityssm.openHtmlModal("lotOccupancy-addFee", {
+        onshow: (modalElement) => {
+            feeFilterElement = modalElement.querySelector("#feeSelect--feeName");
+            feeFilterResultsElement = modalElement.querySelector("#resultsContainer--feeSelect");
+            cityssm.postJSON(los.urlPrefix + "/lotOccupancies/doGetFees", {
+                lotOccupancyId
+            }, (responseJSON) => {
+                feeCategories = responseJSON.feeCategories;
+                feeFilterElement.disabled = false;
+                feeFilterElement.addEventListener("keyup", filterFees);
+                feeFilterElement.focus();
+                filterFees();
+            });
+        },
+        onshown: () => {
+            bulmaJS.toggleHtmlClipped();
+        },
+        onhidden: () => {
+            renderLotOccupancyFees();
+        },
+        onremoved: () => {
+            bulmaJS.toggleHtmlClipped();
+        }
+    });
+});
+let lotOccupancyTransactions = exports.lotOccupancyTransactions;
+delete exports.lotOccupancyTransactions;
+const lotOccupancyTransactionsContainerElement = document.querySelector("#container--lotOccupancyTransactions");
+const getTransactionGrandTotal = () => {
+    let transactionGrandTotal = 0;
+    for (const lotOccupancyTransaction of lotOccupancyTransactions) {
+        transactionGrandTotal += lotOccupancyTransaction.transactionAmount;
+    }
+    return transactionGrandTotal;
+};
+const deleteLotOccupancyTransaction = (clickEvent) => {
+    const transactionIndex = clickEvent.currentTarget.closest(".container--lotOccupancyTransaction").dataset.transactionIndex;
+    const doDelete = () => {
+        cityssm.postJSON(los.urlPrefix + "/lotOccupancies/doDeleteLotOccupancyTransaction", {
+            lotOccupancyId,
+            transactionIndex
+        }, (responseJSON) => {
+            if (responseJSON.success) {
+                lotOccupancyTransactions = responseJSON.lotOccupancyTransactions;
+                renderLotOccupancyTransactions();
+            }
+            else {
+                bulmaJS.alert({
+                    title: "Error Deleting Transaction",
+                    message: responseJSON.errorMessage || "",
+                    contextualColorName: "danger"
+                });
+            }
+        });
+    };
+    bulmaJS.confirm({
+        title: "Delete Trasnaction",
+        message: "Are you sure you want to delete this transaction?",
+        contextualColorName: "warning",
+        okButton: {
+            text: "Yes, Delete Transaction",
+            callbackFunction: doDelete
+        }
+    });
+};
+const renderLotOccupancyTransactions = () => {
+    if (lotOccupancyTransactions.length === 0) {
+        lotOccupancyTransactionsContainerElement.innerHTML =
+            '<div class="message ' +
+                (lotOccupancyFees.length === 0 ? "is-info" : "is-warning") +
+                '">' +
+                '<p class="message-body">There are no transactions associated with this record.</p>' +
+                "</div>";
+        return;
+    }
+    lotOccupancyTransactionsContainerElement.innerHTML =
+        '<table class="table is-fullwidth is-striped is-hoverable">' +
+            "<thead><tr>" +
+            '<th class="has-width-1">Date</th>' +
+            "<th>" +
+            cityssm.escapeHTML(exports.aliases.externalReceiptNumber) +
+            "</th>" +
+            '<th class="has-text-right has-width-1">Amount</th>' +
+            '<th class="has-width-1 is-hidden-print"><span class="is-sr-only">Options</span></th>' +
+            "</tr></thead>" +
+            "<tbody></tbody>" +
+            ("<tfoot><tr>" +
+                '<th colspan="2">Transaction Total</th>' +
+                '<td class="has-text-weight-bold has-text-right" id="lotOccupancyTransactions--grandTotal"></td>' +
+                '<td class="is-hidden-print"></td>' +
+                "</tr></tfoot>") +
+            "</table>";
+    let transactionGrandTotal = 0;
+    for (const lotOccupancyTransaction of lotOccupancyTransactions) {
+        transactionGrandTotal += lotOccupancyTransaction.transactionAmount;
+        const tableRowElement = document.createElement("tr");
+        tableRowElement.className = "container--lotOccupancyTransaction";
+        tableRowElement.dataset.transactionIndex =
+            lotOccupancyTransaction.transactionIndex.toString();
+        tableRowElement.innerHTML =
+            "<td>" +
+                lotOccupancyTransaction.transactionDateString +
+                "</td>" +
+                ("<td>" +
+                    cityssm.escapeHTML(lotOccupancyTransaction.externalReceiptNumber || "") +
+                    "<br />" +
+                    "<small>" +
+                    cityssm.escapeHTML(lotOccupancyTransaction.transactionNote || "") +
+                    "</small>" +
+                    "</td>") +
+                ('<td class="has-text-right">$' +
+                    lotOccupancyTransaction.transactionAmount.toFixed(2) +
+                    "</td>") +
+                ('<td class="is-hidden-print">' +
+                    '<button class="button is-small is-danger is-light" data-tooltip="Delete Transaction" type="button">' +
+                    '<i class="fas fa-trash" aria-hidden="true"></i>' +
+                    "</button>" +
+                    "</td>");
+        tableRowElement
+            .querySelector("button")
+            .addEventListener("click", deleteLotOccupancyTransaction);
+        lotOccupancyTransactionsContainerElement.querySelector("tbody").append(tableRowElement);
+    }
+    lotOccupancyTransactionsContainerElement.querySelector("#lotOccupancyTransactions--grandTotal").textContent = "$" + transactionGrandTotal.toFixed(2);
+    const feeGrandTotal = getFeeGrandTotal();
+    if (feeGrandTotal > transactionGrandTotal) {
+        lotOccupancyTransactionsContainerElement.insertAdjacentHTML("afterbegin", '<div class="message is-warning">' +
+            '<div class="message-body">' +
+            '<div class="level">' +
+            '<div class="level-left"><div class="level-item">Outstanding Balance</div></div>' +
+            '<div class="level-right"><div class="level-item">$' +
+            (feeGrandTotal - transactionGrandTotal).toFixed(2) +
+            "</div></div>" +
+            "</div>" +
+            "</div>" +
+            "</div>");
+    }
+};
+document.querySelector("#button--addTransaction").addEventListener("click", () => {
+    let addCloseModalFunction;
+    const doAddTransaction = (submitEvent) => {
+        submitEvent.preventDefault();
+        cityssm.postJSON(los.urlPrefix + "/lotOccupancies/doAddLotOccupancyTransaction", submitEvent.currentTarget, (responseJSON) => {
+            if (responseJSON.success) {
+                lotOccupancyTransactions = responseJSON.lotOccupancyTransactions;
+                addCloseModalFunction();
+                renderLotOccupancyTransactions();
+            }
+            else {
+                bulmaJS.confirm({
+                    title: "Error Adding Transaction",
+                    message: responseJSON.errorMessage || "",
+                    contextualColorName: "danger"
+                });
+            }
+        });
+    };
+    cityssm.openHtmlModal("lotOccupancy-addTransaction", {
+        onshow: (modalElement) => {
+            los.populateAliases(modalElement);
+            modalElement.querySelector("#lotOccupancyTransactionAdd--lotOccupancyId").value = lotOccupancyId.toString();
+            const feeGrandTotal = getFeeGrandTotal();
+            const transactionGrandTotal = getTransactionGrandTotal();
+            const transactionAmountElement = modalElement.querySelector("#lotOccupancyTransactionAdd--transactionAmount");
+            transactionAmountElement.min = (-1 * transactionGrandTotal).toFixed(2);
+            transactionAmountElement.max = Math.max(feeGrandTotal - transactionGrandTotal, 0).toFixed(2);
+            transactionAmountElement.value = Math.max(feeGrandTotal - transactionGrandTotal, 0).toFixed(2);
+        },
+        onshown: (modalElement, closeModalFunction) => {
+            bulmaJS.toggleHtmlClipped();
+            addCloseModalFunction = closeModalFunction;
+            modalElement.querySelector("form").addEventListener("submit", doAddTransaction);
+        },
+        onremoved: () => {
+            bulmaJS.toggleHtmlClipped();
+        }
+    });
+});
+renderLotOccupancyFees();

public-typescript/lotOccupancyEdit/lotOccupancyEditFees.ts

@@ -0,0 +1,605 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
+
+import type * as globalTypes from "../../types/globalTypes";
+import type * as recordTypes from "../../types/recordTypes";
+
+import type { cityssmGlobal } from "@cityssm/bulma-webapp-js/src/types";
+
+import type { BulmaJS } from "@cityssm/bulma-js/types";
+
+declare const cityssm: cityssmGlobal;
+declare const bulmaJS: BulmaJS;
+
+declare const los: globalTypes.LOS;
+
+declare const lotOccupancyId: string;
+declare const hasUnsavedChanges: boolean;
+
+let lotOccupancyFees: recordTypes.LotOccupancyFee[] = exports.lotOccupancyFees;
+delete exports.lotOccupancyFees;
+
+const lotOccupancyFeesContainerElement = document.querySelector(
+    "#container--lotOccupancyFees"
+) as HTMLElement;
+
+const getFeeGrandTotal = (): number => {
+    let feeGrandTotal = 0;
+
+    for (const lotOccupancyFee of lotOccupancyFees) {
+        feeGrandTotal +=
+            (lotOccupancyFee.feeAmount! + lotOccupancyFee.taxAmount!) * lotOccupancyFee.quantity!;
+    }
+
+    return feeGrandTotal;
+};
+
+const deleteLotOccupancyFee = (clickEvent: Event) => {
+    const feeId = (
+        (clickEvent.currentTarget as HTMLElement).closest(
+            ".container--lotOccupancyFee"
+        ) as HTMLElement
+    ).dataset.feeId;
+
+    const doDelete = () => {
+        cityssm.postJSON(
+            los.urlPrefix + "/lotOccupancies/doDeleteLotOccupancyFee",
+            {
+                lotOccupancyId,
+                feeId
+            },
+            (responseJSON: {
+                success: boolean;
+                errorMessage?: string;
+                lotOccupancyFees?: recordTypes.LotOccupancyFee[];
+            }) => {
+                if (responseJSON.success) {
+                    lotOccupancyFees = responseJSON.lotOccupancyFees!;
+                    renderLotOccupancyFees();
+                } else {
+                    bulmaJS.alert({
+                        title: "Error Deleting Fee",
+                        message: responseJSON.errorMessage || "",
+                        contextualColorName: "danger"
+                    });
+                }
+            }
+        );
+    };
+
+    bulmaJS.confirm({
+        title: "Delete Fee",
+        message: "Are you sure you want to delete this fee?",
+        contextualColorName: "warning",
+        okButton: {
+            text: "Yes, Delete Fee",
+            callbackFunction: doDelete
+        }
+    });
+};
+
+const renderLotOccupancyFees = () => {
+    if (lotOccupancyFees.length === 0) {
+        lotOccupancyFeesContainerElement.innerHTML =
+            '<div class="message is-info">' +
+            '<p class="message-body">There are no fees associated with this record.</p>' +
+            "</div>";
+
+        renderLotOccupancyTransactions();
+
+        return;
+    }
+
+    lotOccupancyFeesContainerElement.innerHTML =
+        '<table class="table is-fullwidth is-striped is-hoverable">' +
+        ("<thead><tr>" +
+            "<th>Fee</th>" +
+            '<th><span class="is-sr-only">Unit Cost</span></th>' +
+            '<th class="has-width-1"><span class="is-sr-only">&times;</span></th>' +
+            '<th class="has-width-1"><span class="is-sr-only">Quantity</span></th>' +
+            '<th class="has-width-1"><span class="is-sr-only">equals</span></th>' +
+            '<th class="has-width-1 has-text-right">Total</th>' +
+            '<th class="has-width-1 is-hidden-print"><span class="is-sr-only">Options</span></th>' +
+            "</tr></thead>") +
+        "<tbody></tbody>" +
+        ("<tfoot>" +
+            '<tr><th colspan="5">Subtotal</th><td class="has-text-weight-bold has-text-right" id="lotOccupancyFees--feeAmountTotal"></td><td class="is-hidden-print"></td></tr>' +
+            '<tr><th colspan="5">Tax</th><td class="has-text-right" id="lotOccupancyFees--taxAmountTotal"></td><td class="is-hidden-print"></td></tr>' +
+            '<tr><th colspan="5">Grand Total</th><td class="has-text-weight-bold has-text-right" id="lotOccupancyFees--grandTotal"></td><td class="is-hidden-print"></td></tr>' +
+            "</tfoot>") +
+        "</table>";
+
+    let feeAmountTotal = 0;
+    let taxAmountTotal = 0;
+
+    for (const lotOccupancyFee of lotOccupancyFees) {
+        const tableRowElement = document.createElement("tr");
+        tableRowElement.className = "container--lotOccupancyFee";
+        tableRowElement.dataset.feeId = lotOccupancyFee.feeId!.toString();
+        tableRowElement.dataset.includeQuantity = lotOccupancyFee.includeQuantity ? "1" : "0";
+
+        tableRowElement.innerHTML =
+            '<td colspan="' +
+            (lotOccupancyFee.quantity === 1 ? "5" : "1") +
+            '">' +
+            cityssm.escapeHTML(lotOccupancyFee.feeName || "") +
+            "</td>" +
+            (lotOccupancyFee.quantity === 1
+                ? ""
+                : '<td class="has-text-right">$' +
+                  lotOccupancyFee.feeAmount!.toFixed(2) +
+                  "</td>" +
+                  "<td>&times;</td>" +
+                  '<td class="has-text-right">' +
+                  lotOccupancyFee.quantity +
+                  "</td>" +
+                  "<td>=</td>") +
+            '<td class="has-text-right">$' +
+            (lotOccupancyFee.feeAmount! * lotOccupancyFee.quantity!).toFixed(2) +
+            "</td>" +
+            ('<td class="is-hidden-print">' +
+                '<button class="button is-small is-danger is-light" data-tooltip="Delete Fee" type="button">' +
+                '<i class="fas fa-trash" aria-hidden="true"></i>' +
+                "</button>" +
+                "</td>");
+
+        tableRowElement.querySelector("button")!.addEventListener("click", deleteLotOccupancyFee);
+
+        lotOccupancyFeesContainerElement.querySelector("tbody")!.append(tableRowElement);
+
+        feeAmountTotal += lotOccupancyFee.feeAmount! * lotOccupancyFee.quantity!;
+        taxAmountTotal += lotOccupancyFee.taxAmount! * lotOccupancyFee.quantity!;
+    }
+
+    (
+        lotOccupancyFeesContainerElement.querySelector(
+            "#lotOccupancyFees--feeAmountTotal"
+        ) as HTMLElement
+    ).textContent = "$" + feeAmountTotal.toFixed(2);
+    (
+        lotOccupancyFeesContainerElement.querySelector(
+            "#lotOccupancyFees--taxAmountTotal"
+        ) as HTMLElement
+    ).textContent = "$" + taxAmountTotal.toFixed(2);
+    (
+        lotOccupancyFeesContainerElement.querySelector(
+            "#lotOccupancyFees--grandTotal"
+        ) as HTMLElement
+    ).textContent = "$" + (feeAmountTotal + taxAmountTotal).toFixed(2);
+
+    renderLotOccupancyTransactions();
+};
+
+(document.querySelector("#button--addFee") as HTMLButtonElement).addEventListener("click", () => {
+    if (hasUnsavedChanges) {
+        bulmaJS.alert({
+            message: "Please save all unsaved changes before adding fees.",
+            contextualColorName: "warning"
+        });
+        return;
+    }
+
+    let feeCategories: recordTypes.FeeCategory[];
+
+    let feeFilterElement: HTMLInputElement;
+    let feeFilterResultsElement: HTMLElement;
+
+    const doAddFee = (feeId: number, quantity: number | string = 1) => {
+        cityssm.postJSON(
+            los.urlPrefix + "/lotOccupancies/doAddLotOccupancyFee",
+            {
+                lotOccupancyId,
+                feeId,
+                quantity
+            },
+            (responseJSON: {
+                success: boolean;
+                errorMessage?: string;
+                lotOccupancyFees?: recordTypes.LotOccupancyFee[];
+            }) => {
+                if (responseJSON.success) {
+                    lotOccupancyFees = responseJSON.lotOccupancyFees!;
+                    renderLotOccupancyFees();
+                    filterFees();
+                } else {
+                    bulmaJS.alert({
+                        title: "Error Adding Fee",
+                        message: responseJSON.errorMessage || "",
+                        contextualColorName: "danger"
+                    });
+                }
+            }
+        );
+    };
+
+    const doSetQuantityAndAddFee = (fee: recordTypes.Fee) => {
+        let quantityElement: HTMLInputElement;
+        let quantityCloseModalFunction: () => void;
+
+        const doSetQuantity = (submitEvent: SubmitEvent) => {
+            submitEvent.preventDefault();
+            doAddFee(fee.feeId!, quantityElement.value);
+            quantityCloseModalFunction();
+        };
+
+        cityssm.openHtmlModal("lotOccupancy-setFeeQuantity", {
+            onshow: (modalElement) => {
+                (
+                    modalElement.querySelector(
+                        "#lotOccupancyFeeQuantity--quantityUnit"
+                    ) as HTMLElement
+                ).textContent = fee.quantityUnit!;
+            },
+            onshown: (modalElement, closeModalFunction) => {
+                quantityCloseModalFunction = closeModalFunction;
+
+                quantityElement = modalElement.querySelector(
+                    "#lotOccupancyFeeQuantity--quantity"
+                ) as HTMLInputElement;
+
+                modalElement.querySelector("form")!.addEventListener("submit", doSetQuantity);
+            }
+        });
+    };
+
+    const tryAddFee = (clickEvent: Event) => {
+        clickEvent.preventDefault();
+
+        const feeId = Number.parseInt((clickEvent.currentTarget as HTMLElement).dataset.feeId!, 10);
+        const feeCategoryId = Number.parseInt(
+            (
+                (clickEvent.currentTarget as HTMLElement).closest(
+                    ".container--feeCategory"
+                ) as HTMLElement
+            ).dataset.feeCategoryId!,
+            10
+        );
+
+        const feeCategory = feeCategories.find((currentFeeCategory) => {
+            return currentFeeCategory.feeCategoryId === feeCategoryId;
+        })!;
+
+        const fee = feeCategory.fees!.find((currentFee) => {
+            return currentFee.feeId === feeId;
+        })!;
+
+        if (fee.includeQuantity) {
+            doSetQuantityAndAddFee(fee);
+        } else {
+            doAddFee(feeId);
+        }
+    };
+
+    const filterFees = () => {
+        const filterStringPieces = feeFilterElement.value.trim().toLowerCase().split(" ");
+
+        feeFilterResultsElement.innerHTML = "";
+
+        for (const feeCategory of feeCategories) {
+            const categoryContainerElement = document.createElement("div");
+            categoryContainerElement.className = "container--feeCategory";
+            categoryContainerElement.dataset.feeCategoryId = feeCategory.feeCategoryId!.toString();
+            categoryContainerElement.innerHTML =
+                '<h4 class="title is-5 mt-2">' +
+                cityssm.escapeHTML(feeCategory.feeCategory || "") +
+                "</h4>" +
+                '<div class="panel mb-5"></div>';
+
+            let hasFees = false;
+
+            for (const fee of feeCategory.fees!) {
+                if (
+                    lotOccupancyFeesContainerElement.querySelector(
+                        ".container--lotOccupancyFee[data-fee-id='" +
+                            fee.feeId +
+                            "'][data-include-quantity='0']"
+                    )
+                ) {
+                    continue;
+                }
+
+                let includeFee = true;
+
+                for (const filterStringPiece of filterStringPieces) {
+                    if (!fee.feeName!.toLowerCase().includes(filterStringPiece)) {
+                        includeFee = false;
+                        break;
+                    }
+                }
+
+                if (!includeFee) {
+                    continue;
+                }
+
+                hasFees = true;
+
+                const panelBlockElement = document.createElement("a");
+                panelBlockElement.className = "panel-block is-block container--fee";
+                panelBlockElement.dataset.feeId = fee.feeId!.toString();
+                panelBlockElement.href = "#";
+
+                panelBlockElement.innerHTML =
+                    "<strong>" +
+                    cityssm.escapeHTML(fee.feeName || "") +
+                    "</strong><br />" +
+                    "<small>" +
+                    cityssm.escapeHTML(fee.feeDescription || "").replace(/\n/g, "<br />") +
+                    "</small>";
+
+                panelBlockElement.addEventListener("click", tryAddFee);
+
+                (categoryContainerElement.querySelector(".panel") as HTMLElement).append(
+                    panelBlockElement
+                );
+            }
+
+            if (hasFees) {
+                feeFilterResultsElement.append(categoryContainerElement);
+            }
+        }
+    };
+
+    cityssm.openHtmlModal("lotOccupancy-addFee", {
+        onshow: (modalElement) => {
+            feeFilterElement = modalElement.querySelector(
+                "#feeSelect--feeName"
+            ) as HTMLInputElement;
+
+            feeFilterResultsElement = modalElement.querySelector(
+                "#resultsContainer--feeSelect"
+            ) as HTMLElement;
+
+            cityssm.postJSON(
+                los.urlPrefix + "/lotOccupancies/doGetFees",
+                {
+                    lotOccupancyId
+                },
+                (responseJSON: { feeCategories: recordTypes.FeeCategory[] }) => {
+                    feeCategories = responseJSON.feeCategories;
+
+                    feeFilterElement.disabled = false;
+                    feeFilterElement.addEventListener("keyup", filterFees);
+                    feeFilterElement.focus();
+
+                    filterFees();
+                }
+            );
+        },
+        onshown: () => {
+            bulmaJS.toggleHtmlClipped();
+        },
+        onhidden: () => {
+            renderLotOccupancyFees();
+        },
+        onremoved: () => {
+            bulmaJS.toggleHtmlClipped();
+        }
+    });
+});
+
+let lotOccupancyTransactions: recordTypes.LotOccupancyTransaction[] =
+    exports.lotOccupancyTransactions;
+delete exports.lotOccupancyTransactions;
+
+const lotOccupancyTransactionsContainerElement = document.querySelector(
+    "#container--lotOccupancyTransactions"
+) as HTMLElement;
+
+const getTransactionGrandTotal = (): number => {
+    let transactionGrandTotal = 0;
+
+    for (const lotOccupancyTransaction of lotOccupancyTransactions) {
+        transactionGrandTotal += lotOccupancyTransaction.transactionAmount;
+    }
+
+    return transactionGrandTotal;
+};
+
+const deleteLotOccupancyTransaction = (clickEvent: Event) => {
+    const transactionIndex = (
+        (clickEvent.currentTarget as HTMLElement).closest(
+            ".container--lotOccupancyTransaction"
+        ) as HTMLElement
+    ).dataset.transactionIndex;
+
+    const doDelete = () => {
+        cityssm.postJSON(
+            los.urlPrefix + "/lotOccupancies/doDeleteLotOccupancyTransaction",
+            {
+                lotOccupancyId,
+                transactionIndex
+            },
+            (responseJSON: {
+                success: boolean;
+                errorMessage?: string;
+                lotOccupancyTransactions?: recordTypes.LotOccupancyTransaction[];
+            }) => {
+                if (responseJSON.success) {
+                    lotOccupancyTransactions = responseJSON.lotOccupancyTransactions!;
+                    renderLotOccupancyTransactions();
+                } else {
+                    bulmaJS.alert({
+                        title: "Error Deleting Transaction",
+                        message: responseJSON.errorMessage || "",
+                        contextualColorName: "danger"
+                    });
+                }
+            }
+        );
+    };
+
+    bulmaJS.confirm({
+        title: "Delete Trasnaction",
+        message: "Are you sure you want to delete this transaction?",
+        contextualColorName: "warning",
+        okButton: {
+            text: "Yes, Delete Transaction",
+            callbackFunction: doDelete
+        }
+    });
+};
+
+const renderLotOccupancyTransactions = () => {
+    if (lotOccupancyTransactions.length === 0) {
+        lotOccupancyTransactionsContainerElement.innerHTML =
+            '<div class="message ' +
+            (lotOccupancyFees.length === 0 ? "is-info" : "is-warning") +
+            '">' +
+            '<p class="message-body">There are no transactions associated with this record.</p>' +
+            "</div>";
+
+        return;
+    }
+
+    lotOccupancyTransactionsContainerElement.innerHTML =
+        '<table class="table is-fullwidth is-striped is-hoverable">' +
+        "<thead><tr>" +
+        '<th class="has-width-1">Date</th>' +
+        "<th>" +
+        cityssm.escapeHTML(exports.aliases.externalReceiptNumber) +
+        "</th>" +
+        '<th class="has-text-right has-width-1">Amount</th>' +
+        '<th class="has-width-1 is-hidden-print"><span class="is-sr-only">Options</span></th>' +
+        "</tr></thead>" +
+        "<tbody></tbody>" +
+        ("<tfoot><tr>" +
+            '<th colspan="2">Transaction Total</th>' +
+            '<td class="has-text-weight-bold has-text-right" id="lotOccupancyTransactions--grandTotal"></td>' +
+            '<td class="is-hidden-print"></td>' +
+            "</tr></tfoot>") +
+        "</table>";
+
+    let transactionGrandTotal = 0;
+
+    for (const lotOccupancyTransaction of lotOccupancyTransactions) {
+        transactionGrandTotal += lotOccupancyTransaction.transactionAmount;
+
+        const tableRowElement = document.createElement("tr");
+        tableRowElement.className = "container--lotOccupancyTransaction";
+        tableRowElement.dataset.transactionIndex =
+            lotOccupancyTransaction.transactionIndex!.toString();
+
+        tableRowElement.innerHTML =
+            "<td>" +
+            lotOccupancyTransaction.transactionDateString +
+            "</td>" +
+            ("<td>" +
+                cityssm.escapeHTML(lotOccupancyTransaction.externalReceiptNumber || "") +
+                "<br />" +
+                "<small>" +
+                cityssm.escapeHTML(lotOccupancyTransaction.transactionNote || "") +
+                "</small>" +
+                "</td>") +
+            ('<td class="has-text-right">$' +
+                lotOccupancyTransaction.transactionAmount.toFixed(2) +
+                "</td>") +
+            ('<td class="is-hidden-print">' +
+                '<button class="button is-small is-danger is-light" data-tooltip="Delete Transaction" type="button">' +
+                '<i class="fas fa-trash" aria-hidden="true"></i>' +
+                "</button>" +
+                "</td>");
+
+        tableRowElement
+            .querySelector("button")!
+            .addEventListener("click", deleteLotOccupancyTransaction);
+
+        lotOccupancyTransactionsContainerElement.querySelector("tbody")!.append(tableRowElement);
+    }
+
+    (
+        lotOccupancyTransactionsContainerElement.querySelector(
+            "#lotOccupancyTransactions--grandTotal"
+        ) as HTMLElement
+    ).textContent = "$" + transactionGrandTotal.toFixed(2);
+
+    const feeGrandTotal = getFeeGrandTotal();
+
+    if (feeGrandTotal > transactionGrandTotal) {
+        lotOccupancyTransactionsContainerElement.insertAdjacentHTML(
+            "afterbegin",
+            '<div class="message is-warning">' +
+                '<div class="message-body">' +
+                '<div class="level">' +
+                '<div class="level-left"><div class="level-item">Outstanding Balance</div></div>' +
+                '<div class="level-right"><div class="level-item">$' +
+                (feeGrandTotal - transactionGrandTotal).toFixed(2) +
+                "</div></div>" +
+                "</div>" +
+                "</div>" +
+                "</div>"
+        );
+    }
+};
+
+(document.querySelector("#button--addTransaction") as HTMLButtonElement).addEventListener(
+    "click",
+    () => {
+        let addCloseModalFunction: () => void;
+
+        const doAddTransaction = (submitEvent: SubmitEvent) => {
+            submitEvent.preventDefault();
+
+            cityssm.postJSON(
+                los.urlPrefix + "/lotOccupancies/doAddLotOccupancyTransaction",
+                submitEvent.currentTarget,
+                (responseJSON: {
+                    success: boolean;
+                    errorMessage?: string;
+                    lotOccupancyTransactions?: recordTypes.LotOccupancyTransaction[];
+                }) => {
+                    if (responseJSON.success) {
+                        lotOccupancyTransactions = responseJSON.lotOccupancyTransactions!;
+                        addCloseModalFunction();
+                        renderLotOccupancyTransactions();
+                    } else {
+                        bulmaJS.confirm({
+                            title: "Error Adding Transaction",
+                            message: responseJSON.errorMessage || "",
+                            contextualColorName: "danger"
+                        });
+                    }
+                }
+            );
+        };
+
+        cityssm.openHtmlModal("lotOccupancy-addTransaction", {
+            onshow: (modalElement) => {
+                los.populateAliases(modalElement);
+
+                (
+                    modalElement.querySelector(
+                        "#lotOccupancyTransactionAdd--lotOccupancyId"
+                    ) as HTMLInputElement
+                ).value = lotOccupancyId.toString();
+
+                const feeGrandTotal = getFeeGrandTotal();
+                const transactionGrandTotal = getTransactionGrandTotal();
+
+                const transactionAmountElement = modalElement.querySelector(
+                    "#lotOccupancyTransactionAdd--transactionAmount"
+                ) as HTMLInputElement;
+
+                transactionAmountElement.min = (-1 * transactionGrandTotal).toFixed(2);
+                transactionAmountElement.max = Math.max(
+                    feeGrandTotal - transactionGrandTotal,
+                    0
+                ).toFixed(2);
+                transactionAmountElement.value = Math.max(
+                    feeGrandTotal - transactionGrandTotal,
+                    0
+                ).toFixed(2);
+            },
+            onshown: (modalElement, closeModalFunction) => {
+                bulmaJS.toggleHtmlClipped();
+
+                addCloseModalFunction = closeModalFunction;
+
+                modalElement.querySelector("form")!.addEventListener("submit", doAddTransaction);
+            },
+            onremoved: () => {
+                bulmaJS.toggleHtmlClipped();
+            }
+        });
+    }
+);
+
+renderLotOccupancyFees();

public-typescript/lotOccupancySearch.js

@@ -1,4 +1,5 @@
 "use strict";
+/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
 Object.defineProperty(exports, "__esModule", { value: true });
 (() => {
     const los = exports.los;

public-typescript/lotSearch.js

@@ -1,4 +1,5 @@
 "use strict";
+/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
 Object.defineProperty(exports, "__esModule", { value: true });
 (() => {
     const los = exports.los;

public-typescript/lotView.js

@@ -1,4 +1,5 @@
 "use strict";
+/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
 Object.defineProperty(exports, "__esModule", { value: true });
 (() => {
     const mapContainerElement = document.querySelector("#lot--map");

public-typescript/main.js

@@ -1,9 +1,12 @@
 "use strict";
+/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
 Object.defineProperty(exports, "__esModule", { value: true });
 (() => {
     const highlightMap = (mapContainerElement, mapKey, contextualClass) => {
+        // Search for ID
         let svgId = mapKey;
         let svgElementToHighlight;
+        // eslint-disable-next-line no-constant-condition
         while (true) {
             svgElementToHighlight = mapContainerElement.querySelector("#" + svgId);
             if (svgElementToHighlight || !svgId.includes("-")) {
@@ -12,10 +15,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
             svgId = svgId.slice(0, Math.max(0, svgId.lastIndexOf("-")));
         }
         if (svgElementToHighlight) {
+            // eslint-disable-next-line unicorn/no-null
             svgElementToHighlight.style.fill = "";
             svgElementToHighlight.classList.add("highlight", "is-" + contextualClass);
             const childPathElements = svgElementToHighlight.querySelectorAll("path");
             for (const pathElement of childPathElements) {
+                // eslint-disable-next-line unicorn/no-null
                 pathElement.style.fill = "";
             }
         }
@@ -56,29 +61,37 @@ Object.defineProperty(exports, "__esModule", { value: true });
             if (dateElement.required) {
                 datePickerOptions.showClearButton = false;
             }
+            // apply min date if set
             if (dateElement.min) {
                 datePickerOptions.minDate = cityssm.dateStringToDate(dateElement.min);
             }
+            // apply max date if set
             if (dateElement.max) {
                 datePickerOptions.maxDate = cityssm.dateStringToDate(dateElement.max);
             }
             const cal = exports.bulmaCalendar.attach(dateElement, datePickerOptions)[0];
+            // trigger change event on original element
             cal.on("save", () => {
                 dateElement.value = cal.value();
                 dateElement.dispatchEvent(new Event("change"));
             });
+            // Disable html scrolling when calendar is open
             cal.on("show", () => {
                 document.querySelector("html").classList.add("is-clipped");
             });
+            // Reenable scrolling, if a modal window is not open
             cal.on("hide", () => {
                 bulmaJS.toggleHtmlClipped();
             });
+            // Get the datepicker container element
             const datepickerElement = containerElement.querySelector("#" + cal._id);
+            // Override the previous and next month button styles
             const datePickerNavButtonElements = datepickerElement.querySelectorAll(".datepicker-nav button.is-text");
             for (const datePickerNavButtonElement of datePickerNavButtonElements) {
                 datePickerNavButtonElement.classList.add("is-" + datePickerBaseOptions.color);
                 datePickerNavButtonElement.classList.remove("is-text");
             }
+            // Override the clear button style
             const clearButtonElement = datepickerElement.querySelector(".datetimepicker-clear-button");
             if (clearButtonElement) {
                 if (dateElement.required) {
@@ -91,12 +104,85 @@ Object.defineProperty(exports, "__esModule", { value: true });
                         '<span class="has-text-weight-bold" aria-hidden="true">&times;</span>';
                 }
             }
+            // Apply a label
             const labelElement = document.querySelector("label[for='" + dateElement.id + "']");
             if (labelElement) {
                 datepickerElement.querySelector(".datetimepicker-dummy-input").ariaLabel = labelElement.textContent;
             }
         }
     };
+    /*
+    const timePickerBaseOptions: BulmaCalendarOptions = {
+        type: "time",
+        timeFormat: "hh:mm",
+        color: "info",
+        displayMode: "dialog",
+        validateLabel: "Set Time",
+        minuteSteps: 1
+    };
+
+    const initializeTimePickers = (containerElement: HTMLElement) => {
+
+        const timeElements = containerElement.querySelectorAll(
+            "input[type='time']"
+        ) as NodeListOf<HTMLInputElement>;
+
+        for (const timeElement of timeElements) {
+            const timePickerOptions = Object.assign({}, timePickerBaseOptions);
+
+            if (timeElement.required) {
+                timePickerOptions.showClearButton = false;
+            }
+
+            const cal = exports.bulmaCalendar.attach(timeElement, timePickerOptions)[0];
+
+            // trigger change event on original element
+            cal.on("save", () => {
+                timeElement.value = cal.value();
+                timeElement.dispatchEvent(new Event("change"));
+            });
+
+            // Disable html scrolling when calendar is open
+            cal.on("show", () => {
+                document.querySelector("html")!.classList.add("is-clipped");
+            });
+
+            // Reenable scrolling, if a modal window is not open
+            cal.on("hide", () => {
+                bulmaJS.toggleHtmlClipped();
+            });
+
+            // Get the datepicker container element
+            const timePickerElement = containerElement.querySelector("#" + cal._id) as HTMLElement;
+
+            // Remove "cancel" button
+
+            const timePickerCancelButtonElement = timePickerElement.querySelector(
+                ".datetimepicker-footer-cancel"
+            );
+
+            if (timePickerCancelButtonElement) {
+                timePickerCancelButtonElement.remove();
+            }
+
+            // Override the clear button style
+
+            const clearButtonElement = timePickerElement.querySelector(
+                ".datetimepicker-clear-button"
+            ) as HTMLElement;
+
+            if (clearButtonElement) {
+                if (timeElement.required) {
+                    clearButtonElement.remove();
+                } else {
+                    clearButtonElement.dataset.tooltip = "Clear";
+                    clearButtonElement.innerHTML =
+                        '<span class="has-text-weight-bold" aria-hidden="true">&times;</span>';
+                }
+            }
+        }
+    };
+    */
     const populateAliases = (containerElement) => {
         const aliasElements = containerElement.querySelectorAll(".alias");
         for (const aliasElement of aliasElements) {
@@ -155,6 +241,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
         highlightMap,
         initializeUnlockFieldButtons,
         initializeDatePickers,
+        // initializeTimePickers,
         populateAliases,
         getRandomColor
     };

public-typescript/mapEdit.js

@@ -1,4 +1,5 @@
 "use strict";
+/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
 Object.defineProperty(exports, "__esModule", { value: true });
 (() => {
     const los = exports.los;

public-typescript/mapSearch.js

@@ -1,4 +1,5 @@
 "use strict";
+/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
 Object.defineProperty(exports, "__esModule", { value: true });
 (() => {
     const los = exports.los;

public-typescript/mapView.js

@@ -1,4 +1,5 @@
 "use strict";
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 Object.defineProperty(exports, "__esModule", { value: true });
 (() => {
     const mapContainerElement = document.querySelector("#map--leaflet");
@@ -6,6 +7,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
         const mapLatitude = Number.parseFloat(mapContainerElement.dataset.mapLatitude);
         const mapLongitude = Number.parseFloat(mapContainerElement.dataset.mapLongitude);
         const mapCoordinates = [mapLatitude, mapLongitude];
+        // eslint-disable-next-line unicorn/no-array-callback-reference
         const map = L.map(mapContainerElement);
         map.setView(mapCoordinates, 15);
         L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {

public-typescript/reportSearch.js

@@ -1,13 +1,17 @@
+/* eslint-disable unicorn/prefer-module */
 (() => {
     const menuTabElements = document.querySelectorAll(".menu a");
     const tabContainerElements = document.querySelectorAll(".tabs-container > div");
     const selectTab = (clickEvent) => {
         clickEvent.preventDefault();
+        // Remove .is-active from all tabs
         for (const menuTabElement of menuTabElements) {
             menuTabElement.classList.remove("is-active");
         }
+        // Set .is-active on clicked tab
         const selectedTabElement = clickEvent.currentTarget;
         selectedTabElement.classList.add("is-active");
+        // Hide all but selected tab
         const selectedTabContainerId = selectedTabElement.href.slice(Math.max(0, selectedTabElement.href.indexOf("#") + 1));
         for (const tabContainerElement of tabContainerElements) {
             if (tabContainerElement.id === selectedTabContainerId) {

public-typescript/workOrderEdit.js

@@ -1,4 +1,5 @@
 "use strict";
+/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
 Object.defineProperty(exports, "__esModule", { value: true });
 (() => {
     const los = exports.los;
@@ -37,6 +38,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
     for (const inputElement of inputElements) {
         inputElement.addEventListener("change", cityssm.enableNavBlocker);
     }
+    /*
+     * Work Order Options
+     */
     let workOrderMilestones;
     if (!isCreate) {
         const doClose = () => {
@@ -67,6 +71,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
                         " Either complete the outstanding milestones, or remove them from the work order.",
                     contextualColorName: "warning"
                 });
+                /*
+                // Disable closing work orders with open milestones
+                bulmaJS.confirm({
+                    title: "Close Work Order with Outstanding Milestones",
+                    message:
+                        "Are you sure you want to close this work order with outstanding milestones?",
+                    contextualColorName: "danger",
+                    okButton: {
+                        text: "Yes, Close Work Order",
+                        callbackFunction: doClose
+                    }
+                });
+                */
             }
             else {
                 bulmaJS.confirm({
@@ -109,6 +126,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
             });
         });
     }
+    /*
+     * Related Lots
+     */
     if (!isCreate) {
         let workOrderLots = exports.workOrderLots;
         delete exports.workOrderLots;
@@ -699,6 +719,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
             });
         });
     }
+    /*
+     * Comments
+     */
     let workOrderComments = exports.workOrderComments;
     delete exports.workOrderComments;
     const openEditWorkOrderComment = (clickEvent) => {
@@ -743,6 +766,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
             onshown: (modalElement, closeModalFunction) => {
                 bulmaJS.toggleHtmlClipped();
                 los.initializeDatePickers(modalElement);
+                // los.initializeTimePickers(modalElement);
                 modalElement.querySelector("#workOrderCommentEdit--workOrderComment").focus();
                 editFormElement = modalElement.querySelector("form");
                 editFormElement.addEventListener("submit", editComment);
@@ -870,6 +894,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
         document.querySelector("#workOrderComments--add").addEventListener("click", openAddCommentModal);
         renderWorkOrderComments();
     }
+    /*
+     * Milestones
+     */
     if (!isCreate) {
         workOrderMilestones = exports.workOrderMilestones;
         delete exports.workOrderMilestones;
@@ -1002,6 +1029,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
                     editCloseModalFunction = closeModalFunction;
                     bulmaJS.toggleHtmlClipped();
                     los.initializeDatePickers(modalElement);
+                    // los.initializeTimePickers(modalElement);
                     modalElement.querySelector("form").addEventListener("submit", doEdit);
                 },
                 onremoved: () => {
@@ -1010,6 +1038,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
             });
         };
         const renderMilestones = () => {
+            // Clear milestones panel
             const milestonesPanelElement = document.querySelector("#panel--milestones");
             const panelBlockElementsToDelete = milestonesPanelElement.querySelectorAll(".panel-block");
             for (const panelBlockToDelete of panelBlockElementsToDelete) {
@@ -1139,6 +1168,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
                     addModalElement = modalElement;
                     addCloseModalFunction = closeModalFunction;
                     los.initializeDatePickers(modalElement);
+                    // los.initializeTimePickers(modalElement);
                     bulmaJS.toggleHtmlClipped();
                     addFormElement = modalElement.querySelector("form");
                     addFormElement.addEventListener("submit", doAdd);

public-typescript/workOrderMilestoneCalendar.js

@@ -1,4 +1,5 @@
 "use strict";
+/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
 Object.defineProperty(exports, "__esModule", { value: true });
 (() => {
     const los = exports.los;

public-typescript/workOrderOutlook.js

@@ -1,4 +1,5 @@
 "use strict";
+/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
 Object.defineProperty(exports, "__esModule", { value: true });
 (() => {
     const los = exports.los;

public-typescript/workOrderSearch.js

@@ -1,4 +1,5 @@
 "use strict";
+/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
 Object.defineProperty(exports, "__esModule", { value: true });
 (() => {
     const los = exports.los;
@@ -185,5 +186,34 @@ Object.defineProperty(exports, "__esModule", { value: true });
         formEvent.preventDefault();
         resetOffsetAndGetWorkOrders();
     });
+    /*
+    const workOrderOpenDateStringElement = document.querySelector("#searchFilter--workOrderOpenDateString") as HTMLInputElement;
+
+    document.querySelector("#button--workOrderOpenDateString-previous").addEventListener("click", () => {
+
+        if (workOrderOpenDateStringElement.value === "") {
+            workOrderOpenDateStringElement.valueAsDate = new Date();
+        } else {
+            const openDate = workOrderOpenDateStringElement.valueAsDate;
+            openDate.setDate(openDate.getDate() - 1);
+            workOrderOpenDateStringElement.valueAsDate = openDate;
+        }
+
+        resetOffsetAndGetWorkOrders();
+    });
+
+    document.querySelector("#button--workOrderOpenDateString-next").addEventListener("click", () => {
+
+        if (workOrderOpenDateStringElement.value === "") {
+            workOrderOpenDateStringElement.valueAsDate = new Date();
+        } else {
+            const openDate = workOrderOpenDateStringElement.valueAsDate;
+            openDate.setDate(openDate.getDate() + 1);
+            workOrderOpenDateStringElement.valueAsDate = openDate;
+        }
+
+        resetOffsetAndGetWorkOrders();
+    });
+    */
     getWorkOrders();
 })();

public-typescript/workOrderView.js

@@ -1,4 +1,5 @@
 "use strict";
+/* eslint-disable unicorn/prefer-module */
 Object.defineProperty(exports, "__esModule", { value: true });
 (() => {
     const los = exports.los;

tsconfig.client.json

@@ -6,7 +6,7 @@
         "isolatedModules": false,
         "declaration": true,
         "noImplicitAny": false,
-        "removeComments": true,
+        "removeComments": false,
         "allowUnreachableCode": false
     },
     "files": [
@@ -17,7 +17,9 @@
         "public-typescript/adminTables.ts",
         "public-typescript/dashboard.ts",
         "public-typescript/lotEdit.ts",
-        "public-typescript/lotOccupancyEdit.ts",
+        "public-typescript/lotOccupancyEdit/lotOccupancyEdit.ts",
+        "public-typescript/lotOccupancyEdit/lotOccupancyEditComments.ts",
+        "public-typescript/lotOccupancyEdit/lotOccupancyEditFees.ts",
         "public-typescript/lotOccupancySearch.ts",
         "public-typescript/lotSearch.ts",
         "public-typescript/lotView.ts",