development

helpers/lotOccupancyDB/addLotComment.d.ts

@@ -0,0 +1,7 @@
+import type * as recordTypes from "../../types/recordTypes";
+interface AddLotCommentForm {
+    lotId: string;
+    lotComment: string;
+}
+export declare const addLotComment: (lotCommentForm: AddLotCommentForm, requestSession: recordTypes.PartialSession) => number;
+export default addLotComment;

helpers/lotOccupancyDB/addLotComment.js

@@ -0,0 +1,17 @@
+import sqlite from "better-sqlite3";
+import { lotOccupancyDB as databasePath } from "../../data/databasePaths.js";
+import * as dateTimeFunctions from "@cityssm/expressjs-server-js/dateTimeFns.js";
+export const addLotComment = (lotCommentForm, requestSession) => {
+    const database = sqlite(databasePath);
+    const rightNow = new Date();
+    const result = database
+        .prepare("insert into LotComments (" +
+        "lotId, lotCommentDate, lotCommentTime, lotComment," +
+        " recordCreate_userName, recordCreate_timeMillis," +
+        " recordUpdate_userName, recordUpdate_timeMillis)" +
+        " values (?, ?, ?, ?, ?, ?, ?, ?)")
+        .run(lotCommentForm.lotId, dateTimeFunctions.dateToInteger(rightNow), dateTimeFunctions.dateToTimeInteger(rightNow), lotCommentForm.lotComment, requestSession.user.userName, rightNow.getTime(), requestSession.user.userName, rightNow.getTime());
+    database.close();
+    return result.lastInsertRowid;
+};
+export default addLotComment;

helpers/lotOccupancyDB/addLotComment.ts

@@ -0,0 +1,43 @@
+import sqlite from "better-sqlite3";
+import { lotOccupancyDB as databasePath } from "../../data/databasePaths.js";
+
+import * as dateTimeFunctions from "@cityssm/expressjs-server-js/dateTimeFns.js";
+
+import type * as recordTypes from "../../types/recordTypes";
+
+
+interface AddLotCommentForm {
+    lotId: string;
+    lotComment: string;
+}
+
+
+export const addLotComment =
+  (lotCommentForm: AddLotCommentForm, requestSession: recordTypes.PartialSession): number => {
+
+    const database = sqlite(databasePath);
+
+    const rightNow = new Date();
+
+    const result = database
+      .prepare("insert into LotComments (" +
+        "lotId, lotCommentDate, lotCommentTime, lotComment," +
+        " recordCreate_userName, recordCreate_timeMillis," +
+        " recordUpdate_userName, recordUpdate_timeMillis)" +
+        " values (?, ?, ?, ?, ?, ?, ?, ?)")
+      .run(lotCommentForm.lotId,
+        dateTimeFunctions.dateToInteger(rightNow),
+        dateTimeFunctions.dateToTimeInteger(rightNow),
+        lotCommentForm.lotComment,
+        requestSession.user.userName,
+        rightNow.getTime(),
+        requestSession.user.userName,
+        rightNow.getTime());
+
+    database.close();
+
+    return result.lastInsertRowid as number;
+  };
+
+
+export default addLotComment;

public-typescript/lotEdit.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 (() => {
+    const los = exports.los;
     const urlPrefix = document.querySelector("main").dataset.urlPrefix;
     const lotId = document.querySelector("#lot--lotId").value;
     const isCreate = (lotId === "");
@@ -29,5 +30,42 @@ Object.defineProperty(exports, "__esModule", { value: true });
         });
     };
     formElement.addEventListener("submit", updateLot);
-    exports.los.initializeUnlockFieldButtons(formElement);
+    los.initializeUnlockFieldButtons(formElement);
+    let lotComments = exports.lotComments;
+    const renderLotComments = () => {
+        const lotCommentsContainerElement = document.querySelector("#container--lotComments");
+    };
+    const openAddCommentModal = () => {
+        let addCommentCloseModalFunction;
+        const doAddComment = (formEvent) => {
+            formEvent.preventDefault();
+            cityssm.postJSON(urlPrefix + "/lots/doAddLotComment", formEvent.currentTarget, (responseJSON) => {
+                if (responseJSON.success) {
+                    lotComments = responseJSON.lotComments;
+                    renderLotComments();
+                    addCommentCloseModalFunction();
+                }
+            });
+        };
+        cityssm.openHtmlModal("lotComment-add", {
+            onshow(modalElement) {
+                los.populateAliases(modalElement);
+                modalElement.querySelector("#lotCommentAdd--lotId").value = lotId;
+                modalElement.querySelector("form").addEventListener("submit", doAddComment);
+            },
+            onshown(modalElement, closeModalFunction) {
+                bulmaJS.toggleHtmlClipped();
+                addCommentCloseModalFunction = closeModalFunction;
+                modalElement.querySelector("#lotCommentAdd--lotComment").focus();
+            },
+            onremoved() {
+                bulmaJS.toggleHtmlClipped();
+                document.querySelector("#lotComments--add").focus();
+            }
+        });
+    };
+    if (!isCreate) {
+        document.querySelector("#lotComments--add").addEventListener("click", openAddCommentModal);
+        renderLotComments();
+    }
 })();

public-typescript/lotEdit.ts

@@ -1,22 +1,29 @@
 /* eslint-disable 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";
+import type {
+    BulmaJS
+} from "@cityssm/bulma-js/types";
 
 declare const cityssm: cityssmGlobal;
 declare const bulmaJS: BulmaJS;
 
 
 (() => {
+    const los = (exports.los as globalTypes.LOS);
+
     const urlPrefix = document.querySelector("main").dataset.urlPrefix;
 
     const lotId = (document.querySelector("#lot--lotId") as HTMLInputElement).value;
     const isCreate = (lotId === "");
 
+    // Main form
+
     const formElement = document.querySelector("#form--lot") as HTMLFormElement;
 
     const updateLot = (formEvent: SubmitEvent) => {
@@ -49,5 +56,56 @@ declare const bulmaJS: BulmaJS;
 
     formElement.addEventListener("submit", updateLot);
 
-    (exports.los as globalTypes.LOS).initializeUnlockFieldButtons(formElement);
+    los.initializeUnlockFieldButtons(formElement);
+
+    // Comments
+
+    let lotComments: recordTypes.LotComment[] = exports.lotComments;
+
+    const renderLotComments = () => {
+
+        const lotCommentsContainerElement = document.querySelector("#container--lotComments") as HTMLElement;
+    };
+
+    const openAddCommentModal = () => {
+
+        let addCommentCloseModalFunction: () => void;
+
+        const doAddComment = (formEvent: SubmitEvent) => {
+            formEvent.preventDefault();
+
+            cityssm.postJSON(urlPrefix + "/lots/doAddLotComment",
+            formEvent.currentTarget,
+            (responseJSON: {success: boolean; lotComments?: recordTypes.LotComment[]}) => {
+
+                if (responseJSON.success) {
+                    lotComments = responseJSON.lotComments;
+                    renderLotComments();
+                    addCommentCloseModalFunction();
+                }
+            });
+        };
+
+        cityssm.openHtmlModal("lotComment-add", {
+            onshow(modalElement) {
+                los.populateAliases(modalElement);
+                (modalElement.querySelector("#lotCommentAdd--lotId") as HTMLInputElement).value = lotId;
+                modalElement.querySelector("form").addEventListener("submit", doAddComment);
+            },
+            onshown(modalElement, closeModalFunction) {
+                bulmaJS.toggleHtmlClipped();
+                addCommentCloseModalFunction = closeModalFunction;
+                (modalElement.querySelector("#lotCommentAdd--lotComment") as HTMLTextAreaElement).focus();
+            },
+            onremoved() {
+                bulmaJS.toggleHtmlClipped();
+                (document.querySelector("#lotComments--add") as HTMLButtonElement).focus();
+            }
+        });
+    };
+
+    if (!isCreate) {
+        document.querySelector("#lotComments--add").addEventListener("click", openAddCommentModal);
+        renderLotComments();
+    }
 })();

public-typescript/main.js

@@ -41,9 +41,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
             unlockFieldButtonElement.addEventListener("click", unlockField);
         }
     };
+    const populateAliases = (containerElement) => {
+        const aliasElements = containerElement.querySelectorAll(".alias");
+        for (const aliasElement of aliasElements) {
+            switch (aliasElement.dataset.alias) {
+                case "Lot":
+                    aliasElement.textContent = exports.aliases.lot;
+                    break;
+                case "lot":
+                    aliasElement.textContent = exports.aliases.lot.toLowerCase();
+                    break;
+            }
+        }
+    };
     const los = {
         highlightMap,
-        initializeUnlockFieldButtons
+        initializeUnlockFieldButtons,
+        populateAliases
     };
     exports.los = los;
 })();

public-typescript/main.ts

@@ -68,9 +68,29 @@ import type * as globalTypes from "../types/globalTypes";
         }
     };
 
+    const populateAliases = (containerElement: HTMLElement) => {
+
+        const aliasElements = containerElement.querySelectorAll(".alias") as NodeListOf<HTMLElement>;
+
+        for (const aliasElement of aliasElements) {
+            
+            switch (aliasElement.dataset.alias) {
+
+                case "Lot":
+                    aliasElement.textContent = exports.aliases.lot;
+                    break;
+                    
+                case "lot":
+                    aliasElement.textContent = exports.aliases.lot.toLowerCase();
+                    break;
+            }
+        }
+    };
+
     const los: globalTypes.LOS = {
         highlightMap,
-        initializeUnlockFieldButtons
+        initializeUnlockFieldButtons,
+        populateAliases
     };
 
     exports.los = los;

public/html/lotComment-add.html

@@ -0,0 +1,29 @@
+<div class="modal">
+    <div class="modal-background"></div>
+    <div class="modal-card">
+        <header class="modal-card-head">
+            <h3 class="modal-card-title">
+                Add <span class="alias" data-alias="Lot"></span> Comment
+            </h3>
+            <button class="delete is-close-modal-button" aria-label="close" type="button"></button>
+        </header>
+        <section class="modal-card-body">
+            <form id="form--lotCommentAdd">
+                <input id="lotCommentAdd--lotId" name="lotId" type="hidden" value="" />
+                <div class="field">
+                    <label class="label" for="lotCommentAdd--lotComment">Comment</label>
+                    <div class="control">
+                        <textarea class="textarea" id="lotCommentAdd--lotComment" name="lotComment" required></textarea>
+                    </div>
+                </div>
+            </form>
+        </section>
+        <footer class="modal-card-foot justify-right">
+            <button class="button is-success" type="submit" form="form--ticketTypeAdd">
+                <span class="icon"><i class="fas fa-plus" aria-hidden="true"></i></span>
+                <span>Add Comment</span>
+            </button>
+            <button class="button is-close-modal-button" type="button">Cancel</button>
+        </footer>
+    </div>
+</div>

public/javascripts/lotEdit.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),(()=>{const e=document.querySelector("main").dataset.urlPrefix,t=""===document.querySelector("#lot--lotId").value,o=document.querySelector("#form--lot");o.addEventListener("submit",s=>{s.preventDefault(),cityssm.postJSON(e+"/lots/"+(t?"doCreateLot":"doUpdateLot"),o,o=>{o.success?t?window.location.href=e+"/lots/"+o.lotId+"/edit":bulmaJS.alert({message:exports.aliases.lot+" Updated Successfully",contextualColorName:"success"}):bulmaJS.alert({title:"Error Updating "+exports.aliases.lot,message:o.errorMessage,contextualColorName:"danger"})})}),exports.los.initializeUnlockFieldButtons(o)})();
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),(()=>{const e=exports.los,t=document.querySelector("main").dataset.urlPrefix,o=document.querySelector("#lot--lotId").value,l=""===o,s=document.querySelector("#form--lot");s.addEventListener("submit",e=>{e.preventDefault(),cityssm.postJSON(t+"/lots/"+(l?"doCreateLot":"doUpdateLot"),s,e=>{e.success?l?window.location.href=t+"/lots/"+e.lotId+"/edit":bulmaJS.alert({message:exports.aliases.lot+" Updated Successfully",contextualColorName:"success"}):bulmaJS.alert({title:"Error Updating "+exports.aliases.lot,message:e.errorMessage,contextualColorName:"danger"})})}),e.initializeUnlockFieldButtons(s);let r=exports.lotComments;const m=()=>{document.querySelector("#container--lotComments")},n=()=>{let l;const s=e=>{e.preventDefault(),cityssm.postJSON(t+"/lots/doAddLotComment",e.currentTarget,e=>{e.success&&(r=e.lotComments,m(),l())})};cityssm.openHtmlModal("lotComment-add",{onshow(t){e.populateAliases(t),t.querySelector("#lotCommentAdd--lotId").value=o,t.querySelector("form").addEventListener("submit",s)},onshown(e,t){bulmaJS.toggleHtmlClipped(),l=t,e.querySelector("#lotCommentAdd--lotComment").focus()},onremoved(){bulmaJS.toggleHtmlClipped(),document.querySelector("#lotComments--add").focus()}})};l||(document.querySelector("#lotComments--add").addEventListener("click",n),m())})();

public/javascripts/main.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),(()=>{const e=e=>{const l=e.currentTarget.closest(".field").querySelector("input, select");if("INPUT"===l.tagName)l.disabled=!1;else{const e=l.querySelectorAll("option");for(const l of e)l.disabled=!1}l.focus()},l={highlightMap:(e,l,t)=>{let o,s=l;for(;!(o=e.querySelector("#"+s))&&s.includes("-");)s=s.slice(0,Math.max(0,s.lastIndexOf("-"))),console.log(s);if(o){o.style.fill=null,o.classList.add("highlight","is-"+t);const e=o.querySelectorAll("path");for(const l of e)l.style.fill=null}},initializeUnlockFieldButtons:l=>{const t=l.querySelectorAll(".is-unlock-field-button");for(const l of t)l.addEventListener("click",e)}};exports.los=l})();
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),(()=>{const e=e=>{const t=e.currentTarget.closest(".field").querySelector("input, select");if("INPUT"===t.tagName)t.disabled=!1;else{const e=t.querySelectorAll("option");for(const t of e)t.disabled=!1}t.focus()},t={highlightMap:(e,t,l)=>{let o,s=t;for(;!(o=e.querySelector("#"+s))&&s.includes("-");)s=s.slice(0,Math.max(0,s.lastIndexOf("-"))),console.log(s);if(o){o.style.fill=null,o.classList.add("highlight","is-"+l);const e=o.querySelectorAll("path");for(const t of e)t.style.fill=null}},initializeUnlockFieldButtons:t=>{const l=t.querySelectorAll(".is-unlock-field-button");for(const t of l)t.addEventListener("click",e)},populateAliases:e=>{const t=e.querySelectorAll(".alias");for(const e of t)switch(e.dataset.alias){case"Lot":e.textContent=exports.aliases.lot;break;case"lot":e.textContent=exports.aliases.lot.toLowerCase()}}};exports.los=t})();

types/globalTypes.d.ts

@@ -1,4 +1,5 @@
 export interface LOS {
     highlightMap: (mapContainerElement: HTMLElement, mapKey: string, contextualClass: "success" | "danger") => void;
     initializeUnlockFieldButtons: (containerElement: HTMLElement) => void;
+    populateAliases: (containerElement: HTMLElement) => void;
 }

types/globalTypes.ts

@@ -1,4 +1,5 @@
 export interface LOS {
     highlightMap: (mapContainerElement: HTMLElement, mapKey: string, contextualClass: "success" | "danger") => void;
     initializeUnlockFieldButtons: (containerElement: HTMLElement) => void;
+    populateAliases: (containerElement: HTMLElement) => void;
 }

types/recordTypes.js

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

views/lot-edit.ejs

@@ -93,7 +93,7 @@
             </div>
         </div>
         <div class="column">
-            <label class="label" for="lot--lotTypeId">
+            <label class="label" for="lot--lotStatusId">
                 <%= configFunctions.getProperty("aliases.lot") %> Status
             </label>
             <div class="field">
@@ -211,13 +211,24 @@
         </p>
     </div>
 <% } else { %>
-    <h2 class="title is-4">
-        Comments
-    </h2>
+    <div class="columns is-mobile">
+        <div class="column">
+            <h2 class="title is-4">
+                Comments
+            </h2>
+        </div>
+        <div class="column is-narrow has-text-right">
+            <button class="button is-small is-success" id="lotComments--add" type="button">
+                <span class="icon is-small"><i class="fas fa-plus" aria-hidden="true"></i></span>
+                <span>Add a Comment</span>
+            </button>
+        </div>
+    </div>
+    <div id="container--lotComments"></div>
 
     <h2 class="title is-4">
-    Occupancies
-    <span class="tag"><%= lot.lotOccupancies.length %></span>
+        Occupancies
+        <span class="tag"><%= lot.lotOccupancies.length %></span>
     </h2>
 
     <% if (lot.lotOccupancies.length === 0) { %>