development

handlers/lotOccupancies-post/doGetFees.d.ts

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

handlers/lotOccupancies-post/doGetFees.js

@@ -0,0 +1,16 @@
+import { getLotOccupancy } from "../../helpers/lotOccupancyDB/getLotOccupancy.js";
+import { getFeeCategories } from "../../helpers/lotOccupancyDB/getFeeCategories.js";
+export const handler = (request, response) => {
+    const lotOccupancyId = request.body.lotOccupancyId;
+    const lotOccupancy = getLotOccupancy(lotOccupancyId);
+    const feeCategories = getFeeCategories({
+        occupancyTypeId: lotOccupancy.occupancyTypeId,
+        lotTypeId: lotOccupancy.lotTypeId
+    }, {
+        includeFees: true
+    });
+    response.json({
+        feeCategories,
+    });
+};
+export default handler;

handlers/lotOccupancies-post/doGetFees.ts

@@ -0,0 +1,33 @@
+import type {
+    RequestHandler
+} from "express";
+
+import {
+    getLotOccupancy
+} from "../../helpers/lotOccupancyDB/getLotOccupancy.js";
+
+import {
+    getFeeCategories
+} from "../../helpers/lotOccupancyDB/getFeeCategories.js";
+
+
+export const handler: RequestHandler = (request, response) => {
+
+    const lotOccupancyId = request.body.lotOccupancyId;
+
+    const lotOccupancy = getLotOccupancy(lotOccupancyId);
+
+    const feeCategories = getFeeCategories({
+        occupancyTypeId: lotOccupancy.occupancyTypeId,
+        lotTypeId: lotOccupancy.lotTypeId
+    }, {
+        includeFees: true
+    });
+
+    response.json({
+        feeCategories,
+    });
+};
+
+
+export default handler;

helpers/lotOccupancyDB/getLotOccupancy.js

@@ -14,7 +14,7 @@ export const getLotOccupancy = (lotOccupancyId) => {
     const lotOccupancy = database
         .prepare("select o.lotOccupancyId," +
         " o.occupancyTypeId, t.occupancyType," +
-        " o.lotId, l.lotName," +
+        " o.lotId, l.lotName, l.lotTypeId," +
         " l.mapId, m.mapName," +
         " o.occupancyStartDate, userFn_dateIntegerToString(o.occupancyStartDate) as occupancyStartDateString," +
         " o.occupancyEndDate,  userFn_dateIntegerToString(o.occupancyEndDate) as occupancyEndDateString" +

helpers/lotOccupancyDB/getLotOccupancy.ts

@@ -42,7 +42,7 @@ export const getLotOccupancy = (lotOccupancyId: number | string): recordTypes.Lo
     const lotOccupancy: recordTypes.LotOccupancy = database
         .prepare("select o.lotOccupancyId," +
             " o.occupancyTypeId, t.occupancyType," +
-            " o.lotId, l.lotName," +
+            " o.lotId, l.lotName, l.lotTypeId," +
             " l.mapId, m.mapName," +
             " o.occupancyStartDate, userFn_dateIntegerToString(o.occupancyStartDate) as occupancyStartDateString," +
             " o.occupancyEndDate,  userFn_dateIntegerToString(o.occupancyEndDate) as occupancyEndDateString" +

public-typescript/lotOccupancyEdit.js

@@ -553,4 +553,48 @@ Object.defineProperty(exports, "__esModule", { value: true });
         });
         renderLotOccupancyComments();
     }
+    if (!isCreate) {
+        let lotOccupancyFees = exports.lotOccupancyFees;
+        const lotOccupancyFeesContainerElement = document.querySelector("#container--lotOccupancyFees");
+        const renderLotOccupancyFees = () => {
+        };
+        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;
+            const filterFees = () => {
+                const filterStringPieces = feeFilterElement.value.trim().toLowerCase().split(" ");
+            };
+            cityssm.openHtmlModal("lotOccupancy-addFee", {
+                onshow: (modalElement) => {
+                    cityssm.postJSON(urlPrefix + "/lotOccupancies/doGetFees", {
+                        lotOccupancyId
+                    }, (responseJSON) => {
+                        feeCategories = responseJSON.feeCategories;
+                        feeFilterElement = modalElement.querySelector("#feeSelect--feeName");
+                        feeFilterElement.disabled = false;
+                        feeFilterElement.addEventListener("keyup", filterFees);
+                        feeFilterElement.focus();
+                        filterFees();
+                    });
+                },
+                onshown: () => {
+                    bulmaJS.toggleHtmlClipped();
+                },
+                onhidden: () => {
+                    renderLotOccupancyFees();
+                },
+                onremoved: () => {
+                    bulmaJS.toggleHtmlClipped();
+                }
+            });
+        });
+        renderLotOccupancyFees();
+    }
 })();

public-typescript/lotOccupancyEdit.ts

@@ -793,6 +793,67 @@ declare const bulmaJS: BulmaJS;
      * Fees
      */
 
+    if (!isCreate) {
+        let lotOccupancyFees: recordTypes.LotOccupancyFee[] = exports.lotOccupancyFees;
+        const lotOccupancyFeesContainerElement = document.querySelector("#container--lotOccupancyFees") as HTMLElement;
+
+        const renderLotOccupancyFees = () => {
+
+        };
+
+        document.querySelector("#button--addFee").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;
+
+            const filterFees = () => {
+
+                const filterStringPieces = feeFilterElement.value.trim().toLowerCase().split(" ");
+
+
+            };
+
+            cityssm.openHtmlModal("lotOccupancy-addFee", {
+                onshow: (modalElement) => {
+                    
+                    cityssm.postJSON(urlPrefix + "/lotOccupancies/doGetFees", {
+                        lotOccupancyId
+                    },
+                    (responseJSON: { feeCategories: recordTypes.FeeCategory[]}) => {
+                        feeCategories = responseJSON.feeCategories;
+
+                        feeFilterElement = modalElement.querySelector("#feeSelect--feeName");
+                        feeFilterElement.disabled = false;
+                        feeFilterElement.addEventListener("keyup", filterFees);
+                        feeFilterElement.focus();
+
+                        filterFees();
+                    });
+                },
+                onshown: () => {
+                    bulmaJS.toggleHtmlClipped();
+                },
+                onhidden: () => {
+                    renderLotOccupancyFees();
+                },
+                onremoved: () => {
+                    bulmaJS.toggleHtmlClipped();
+                }
+            });
+        });
+
+        renderLotOccupancyFees();
+    }
+
     /*
      * Transactions
      */

public/html/lotOccupancy-addFee.html

@@ -0,0 +1,34 @@
+<div class="modal">
+    <div class="modal-background"></div>
+    <div class="modal-card">
+        <header class="modal-card-head">
+            <h3 class="modal-card-title">
+                Add Fee
+            </h3>
+            <button class="delete is-close-modal-button" aria-label="close" type="button"></button>
+        </header>
+        <section class="modal-card-body">
+            <div class="box">
+                <form id="form--feeSelect">
+                    <div class="field">
+                        <div class="control has-icons-left">
+                            <input class="input" id="feeSelect--feeName" name="feeName" type="text" placeholder="Filter Fees" aria-label="Fee Search" disabled />
+                            <span class="icon is-small is-left">
+                                <i class="fas fa-search" aria-hidden="true"></i>
+                            </span>
+                        </div>
+                    </div>
+                </form>
+            </div>
+            <div id="resultsContainer--feeSelect">
+                <p class="has-text-centered">
+                    <i class="fas fa-4x fa-pulse fa-spinner" aria-hidden="true"></i><br />
+                    Loading available fees...
+                </p>
+            </div>
+        </section>
+        <footer class="modal-card-foot justify-right">
+            <button class="button is-close-modal-button" type="button">Close</button>
+        </footer>
+    </div>
+</div>

routes/lotOccupancies.js

@@ -13,6 +13,7 @@ import handler_doDeleteLotOccupancyOccupant from "../handlers/lotOccupancies-pos
 import handler_doAddLotOccupancyComment from "../handlers/lotOccupancies-post/doAddLotOccupancyComment.js";
 import handler_doUpdateLotOccupancyComment from "../handlers/lotOccupancies-post/doUpdateLotOccupancyComment.js";
 import handler_doDeleteLotOccupancyComment from "../handlers/lotOccupancies-post/doDeleteLotOccupancyComment.js";
+import handler_doGetFees from "../handlers/lotOccupancies-post/doGetFees.js";
 import * as permissionHandlers from "../handlers/permissions.js";
 export const router = Router();
 router.get("/", handler_search);
@@ -29,4 +30,5 @@ router.post("/doDeleteLotOccupancyOccupant", permissionHandlers.updatePostHandle
 router.post("/doAddLotOccupancyComment", permissionHandlers.updatePostHandler, handler_doAddLotOccupancyComment);
 router.post("/doUpdateLotOccupancyComment", permissionHandlers.updatePostHandler, handler_doUpdateLotOccupancyComment);
 router.post("/doDeleteLotOccupancyComment", permissionHandlers.updatePostHandler, handler_doDeleteLotOccupancyComment);
+router.post("/doGetFees", permissionHandlers.updatePostHandler, handler_doGetFees);
 export default router;

routes/lotOccupancies.ts

@@ -22,6 +22,8 @@ import handler_doAddLotOccupancyComment from "../handlers/lotOccupancies-post/do
 import handler_doUpdateLotOccupancyComment from "../handlers/lotOccupancies-post/doUpdateLotOccupancyComment.js";
 import handler_doDeleteLotOccupancyComment from "../handlers/lotOccupancies-post/doDeleteLotOccupancyComment.js";
 
+import handler_doGetFees from "../handlers/lotOccupancies-post/doGetFees.js";
+
 import * as permissionHandlers from "../handlers/permissions.js";
 
 
@@ -92,5 +94,11 @@ router.post("/doDeleteLotOccupancyComment",
     permissionHandlers.updatePostHandler,
     handler_doDeleteLotOccupancyComment);
 
+// Fees
+
+router.post("/doGetFees",
+    permissionHandlers.updatePostHandler,
+    handler_doGetFees);
+
 
 export default router;

types/recordTypes.d.ts

@@ -171,6 +171,7 @@ export interface LotOccupancy extends Record {
     occupancyTypeId?: number;
     occupancyType?: string;
     lotId?: number;
+    lotTypeId?: number;
     lotName?: string;
     mapId?: number;
     mapName?: string;

types/recordTypes.ts

@@ -244,6 +244,7 @@ export interface LotOccupancy extends Record {
     occupancyType ? : string;
 
     lotId ? : number;
+    lotTypeId ? : number;
     lotName ? : string;
 
     mapId ? : number;

views/lotOccupancy-edit.ejs

@@ -224,7 +224,22 @@
     
     <div class="columns">
         <div class="column">
-            <h2 class="title is-4">Fees</h2>
+            <div class="level is-mobile">
+                <div class="level-left">
+                    <div class="level-item">
+                        <h2 class="title is-4">Fees</h2>
+                    </div>
+                </div>
+                <div class="level-right">
+                    <div class="level-item">
+                        <button class="button is-small is-success" id="button--addFee" type="button">
+                            <span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>
+                            <span>Add Fee</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div id="container--lotOccupancyFees"></div>
         </div>
         <div class="column">
             <h2 class="title is-4">Transactions</h2>