lot occupant type icons

handlers/admin-get/tables.js

@@ -1,15 +1,18 @@
 import { getLotOccupantTypes, getLotStatuses, getWorkOrderMilestoneTypes, getWorkOrderTypes } from "../../helpers/functions.cache.js";
-export const handler = (_request, response) => {
+import { getSolidIconClasses } from "../../helpers/functions.icons.js";
+export const handler = async (_request, response) => {
     const workOrderTypes = getWorkOrderTypes();
     const workOrderMilestoneTypes = getWorkOrderMilestoneTypes();
     const lotStatuses = getLotStatuses();
     const lotOccupantTypes = getLotOccupantTypes();
+    const fontAwesomeIconClasses = await getSolidIconClasses();
     response.render("admin-tables", {
         headTitle: "Config Table Management",
         workOrderTypes,
         workOrderMilestoneTypes,
         lotStatuses,
-        lotOccupantTypes
+        lotOccupantTypes,
+        fontAwesomeIconClasses
     });
 };
 export default handler;

handlers/admin-get/tables.ts

@@ -7,18 +7,23 @@ import {
     getWorkOrderTypes
 } from "../../helpers/functions.cache.js";
 
-export const handler: RequestHandler = (_request, response) => {
+import { getSolidIconClasses } from "../../helpers/functions.icons.js";
+
+export const handler: RequestHandler = async (_request, response) => {
     const workOrderTypes = getWorkOrderTypes();
     const workOrderMilestoneTypes = getWorkOrderMilestoneTypes();
     const lotStatuses = getLotStatuses();
     const lotOccupantTypes = getLotOccupantTypes();
 
+    const fontAwesomeIconClasses = await getSolidIconClasses();
+
     response.render("admin-tables", {
         headTitle: "Config Table Management",
         workOrderTypes,
         workOrderMilestoneTypes,
         lotStatuses,
-        lotOccupantTypes
+        lotOccupantTypes,
+        fontAwesomeIconClasses
     });
 };
 

helpers/functions.icons.d.ts

@@ -0,0 +1 @@
+export declare const getSolidIconClasses: () => Promise<string[]>;

helpers/functions.icons.js

@@ -0,0 +1,15 @@
+import faIcons from "font-awesome-v5-icons";
+let solidIcons = [];
+export const getSolidIconClasses = async () => {
+    if (solidIcons.length === 0) {
+        const allIcons = await faIcons.getList();
+        const list = [];
+        for (const icon of allIcons) {
+            if (icon.styles.includes("solid")) {
+                list.push(icon.name);
+            }
+        }
+        solidIcons = list;
+    }
+    return solidIcons;
+};

helpers/functions.icons.ts

@@ -0,0 +1,21 @@
+import faIcons from "font-awesome-v5-icons";
+
+let solidIcons: string[] = [];
+
+export const getSolidIconClasses = async () => {
+    if (solidIcons.length === 0) {
+        const allIcons = await faIcons.getList();
+
+        const list: string[] = [];
+
+        for (const icon of allIcons) {
+            if ((icon.styles as string[]).includes("solid")) {
+                list.push(icon.name);
+            }
+        }
+
+        solidIcons = list;
+    }
+
+    return solidIcons;
+};

helpers/initializer.database.js

@@ -155,6 +155,7 @@ export const initializeDatabase = () => {
             .prepare("create table if not exists LotOccupantTypes (" +
             "lotOccupantTypeId integer not null primary key autoincrement," +
             " lotOccupantType varchar(100) not null," +
+            " fontAwesomeIconClass varchar(50) not null default ''," +
             " orderNumber smallint not null default 0," +
             recordColumns +
             ")")

helpers/initializer.database.ts

@@ -213,6 +213,7 @@ export const initializeDatabase = (): boolean => {
                 "create table if not exists LotOccupantTypes (" +
                     "lotOccupantTypeId integer not null primary key autoincrement," +
                     " lotOccupantType varchar(100) not null," +
+                    " fontAwesomeIconClass varchar(50) not null default ''," +
                     " orderNumber smallint not null default 0," +
                     recordColumns +
                     ")"

helpers/lotOccupancyDB/addLotOccupantType.d.ts

@@ -1,6 +1,7 @@
 import type * as recordTypes from "../../types/recordTypes";
 interface AddLotOccupantTypeForm {
     lotOccupantType: string;
+    fontAwesomeIconClass?: string;
     orderNumber?: number;
 }
 export declare const addLotOccupantType: (lotOccupantTypeForm: AddLotOccupantTypeForm, requestSession: recordTypes.PartialSession) => number;

helpers/lotOccupancyDB/addLotOccupantType.js

@@ -6,11 +6,11 @@ export const addLotOccupantType = (lotOccupantTypeForm, requestSession) => {
     const rightNowMillis = Date.now();
     const result = database
         .prepare("insert into LotOccupantTypes (" +
-        "lotOccupantType, orderNumber," +
+        "lotOccupantType, fontAwesomeIconClass, orderNumber," +
         " recordCreate_userName, recordCreate_timeMillis," +
         " recordUpdate_userName, recordUpdate_timeMillis)" +
-        " values (?, ?, ?, ?, ?, ?)")
+        " values (?, ?, ?, ?, ?, ?, ?)")
-        .run(lotOccupantTypeForm.lotOccupantType, lotOccupantTypeForm.orderNumber || -1, requestSession.user.userName, rightNowMillis, requestSession.user.userName, rightNowMillis);
+        .run(lotOccupantTypeForm.lotOccupantType, lotOccupantTypeForm.fontAwesomeIconClass || "", lotOccupantTypeForm.orderNumber || -1, requestSession.user.userName, rightNowMillis, requestSession.user.userName, rightNowMillis);
     database.close();
     clearLotOccupantTypesCache();
     return result.lastInsertRowid;

helpers/lotOccupancyDB/addLotOccupantType.ts

@@ -7,6 +7,7 @@ import { clearLotOccupantTypesCache } from "../functions.cache.js";
 
 interface AddLotOccupantTypeForm {
     lotOccupantType: string;
+    fontAwesomeIconClass?: string;
     orderNumber?: number;
 }
 
@@ -21,13 +22,14 @@ export const addLotOccupantType = (
     const result = database
         .prepare(
             "insert into LotOccupantTypes (" +
-                "lotOccupantType, orderNumber," +
+                "lotOccupantType, fontAwesomeIconClass, orderNumber," +
                 " recordCreate_userName, recordCreate_timeMillis," +
                 " recordUpdate_userName, recordUpdate_timeMillis)" +
-                " values (?, ?, ?, ?, ?, ?)"
+                " values (?, ?, ?, ?, ?, ?, ?)"
         )
         .run(
             lotOccupantTypeForm.lotOccupantType,
+            lotOccupantTypeForm.fontAwesomeIconClass || "",
             lotOccupantTypeForm.orderNumber || -1,
             requestSession.user.userName,
             rightNowMillis,

helpers/lotOccupancyDB/getLotOccupancyOccupants.js

@@ -10,7 +10,7 @@ export const getLotOccupancyOccupants = (lotOccupancyId, connectedDatabase) => {
         " o.occupantName, o.occupantAddress1, o.occupantAddress2," +
         " o.occupantCity, o.occupantProvince, o.occupantPostalCode," +
         " o.occupantPhoneNumber, o.occupantEmailAddress, o.occupantComment," +
-        " o.lotOccupantTypeId, t.lotOccupantType" +
+        " o.lotOccupantTypeId, t.lotOccupantType, t.fontAwesomeIconClass" +
         " from LotOccupancyOccupants o" +
         " left join LotOccupantTypes t on o.lotOccupantTypeId = t.lotOccupantTypeId" +
         " where o.recordDelete_timeMillis is null" +

helpers/lotOccupancyDB/getLotOccupancyOccupants.ts

@@ -20,7 +20,7 @@ export const getLotOccupancyOccupants = (
                 " o.occupantName, o.occupantAddress1, o.occupantAddress2," +
                 " o.occupantCity, o.occupantProvince, o.occupantPostalCode," +
                 " o.occupantPhoneNumber, o.occupantEmailAddress, o.occupantComment," +
-                " o.lotOccupantTypeId, t.lotOccupantType" +
+                " o.lotOccupantTypeId, t.lotOccupantType, t.fontAwesomeIconClass" +
                 " from LotOccupancyOccupants o" +
                 " left join LotOccupantTypes t on o.lotOccupantTypeId = t.lotOccupantTypeId" +
                 " where o.recordDelete_timeMillis is null" +

helpers/lotOccupancyDB/getLotOccupantTypes.js

@@ -3,7 +3,7 @@ import { lotOccupancyDB as databasePath } from "../../data/databasePaths.js";
 export const getLotOccupantTypes = () => {
     const database = sqlite(databasePath);
     const lotOccupantTypes = database
-        .prepare("select lotOccupantTypeId, lotOccupantType" +
+        .prepare("select lotOccupantTypeId, lotOccupantType, fontAwesomeIconClass" +
         " from LotOccupantTypes" +
         " where recordDelete_timeMillis is null" +
         " order by orderNumber, lotOccupantType")

helpers/lotOccupancyDB/getLotOccupantTypes.ts

@@ -9,7 +9,7 @@ export const getLotOccupantTypes = (): recordTypes.LotOccupantType[] => {
 
     const lotOccupantTypes: recordTypes.LotOccupantType[] = database
         .prepare(
-            "select lotOccupantTypeId, lotOccupantType" +
+            "select lotOccupantTypeId, lotOccupantType, fontAwesomeIconClass" +
                 " from LotOccupantTypes" +
                 " where recordDelete_timeMillis is null" +
                 " order by orderNumber, lotOccupantType"

helpers/lotOccupancyDB/updateLotOccupantType.d.ts

@@ -2,6 +2,7 @@ import type * as recordTypes from "../../types/recordTypes";
 interface UpdateLotOccupantTypeForm {
     lotOccupantTypeId: number | string;
     lotOccupantType: string;
+    fontAwesomeIconClass?: string;
 }
 export declare const updateLotOccupantType: (lotOccupantTypeForm: UpdateLotOccupantTypeForm, requestSession: recordTypes.PartialSession) => boolean;
 export default updateLotOccupantType;

helpers/lotOccupancyDB/updateLotOccupantType.js

@@ -7,11 +7,12 @@ export const updateLotOccupantType = (lotOccupantTypeForm, requestSession) => {
     const result = database
         .prepare("update LotOccupantTypes" +
         " set lotOccupantType = ?," +
+        " fontAwesomeIconClass = ?," +
         " recordUpdate_userName = ?," +
         " recordUpdate_timeMillis = ?" +
         " where lotOccupantTypeId = ?" +
         " and recordDelete_timeMillis is null")
-        .run(lotOccupantTypeForm.lotOccupantType, requestSession.user.userName, rightNowMillis, lotOccupantTypeForm.lotOccupantTypeId);
+        .run(lotOccupantTypeForm.lotOccupantType, lotOccupantTypeForm.fontAwesomeIconClass || "", requestSession.user.userName, rightNowMillis, lotOccupantTypeForm.lotOccupantTypeId);
     database.close();
     clearLotOccupantTypesCache();
     return result.changes > 0;

helpers/lotOccupancyDB/updateLotOccupantType.ts

@@ -9,6 +9,7 @@ import type * as recordTypes from "../../types/recordTypes";
 interface UpdateLotOccupantTypeForm {
     lotOccupantTypeId: number | string;
     lotOccupantType: string;
+    fontAwesomeIconClass?: string;
 }
 
 export const updateLotOccupantType = (
@@ -23,6 +24,7 @@ export const updateLotOccupantType = (
         .prepare(
             "update LotOccupantTypes" +
                 " set lotOccupantType = ?," +
+                " fontAwesomeIconClass = ?," +
                 " recordUpdate_userName = ?," +
                 " recordUpdate_timeMillis = ?" +
                 " where lotOccupantTypeId = ?" +
@@ -30,6 +32,7 @@ export const updateLotOccupantType = (
         )
         .run(
             lotOccupantTypeForm.lotOccupantType,
+            lotOccupantTypeForm.fontAwesomeIconClass || "",
             requestSession.user.userName,
             rightNowMillis,
             lotOccupantTypeForm.lotOccupantTypeId

public-typescript/adminTables.js

@@ -2,6 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 (() => {
     const los = exports.los;
+    const refreshFontAwesomeIcon = (changeEvent) => {
+        const inputElement = changeEvent.currentTarget;
+        const fontAwesomeIconClass = inputElement.value;
+        inputElement.closest(".field").querySelectorAll(".button.is-static")[1].innerHTML =
+            "<i class=\"fas fa-fw fa-" + fontAwesomeIconClass + "\" aria-hidden=\"true\"></i>";
+    };
     let workOrderTypes = exports.workOrderTypes;
     delete exports.workOrderTypes;
     const updateWorkOrderType = (submitEvent) => {
@@ -694,7 +700,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
         if (workOrderTypes.length === 0) {
             containerElement.innerHTML =
                 "<tr>" +
-                    '<td colspan="2">' +
+                    '<td colspan="3">' +
                     '<div class="message is-warning">' +
                     '<p class="message-body">There are no active ' +
                     cityssm.escapeHTML(exports.aliases.lot.toLowerCase()) +
@@ -711,27 +717,46 @@ Object.defineProperty(exports, "__esModule", { value: true });
             const tableRowElement = document.createElement("tr");
             tableRowElement.dataset.lotOccupantTypeId =
                 lotOccupantType.lotOccupantTypeId.toString();
+            const formId = "form--lotOccupantType-" + lotOccupantType.lotOccupantTypeId;
             tableRowElement.innerHTML =
                 "<td>" +
-                    "<form>" +
+                    ('<div class="field">' +
-                    '<input name="lotOccupantTypeId" type="hidden" value="' +
-                    lotOccupantType.lotOccupantTypeId.toString() +
-                    '" />' +
-                    ('<div class="field has-addons">' +
                         '<div class="control">' +
                         '<input class="input" name="lotOccupantType" type="text"' +
                         (' value="' + cityssm.escapeHTML(lotOccupantType.lotOccupantType) + '"') +
+                        (' form="' + formId + '"') +
                         (' aria-label="' +
                             cityssm.escapeHTML(exports.aliases.lot + " " + exports.aliases.occupant) +
                             ' Type"') +
                         ' maxlength="100" required />' +
                         "</div>" +
-                        '<div class="control">' +
-                        '<button class="button is-success" type="submit" aria-label="Save"><i class="fas fa-save" aria-hidden="true"></i></button>' +
-                        "</div>" +
                         "</div>") +
-                    "</form>" +
                     "</td>" +
+                    "<td>" +
+                    ('<div class="field has-addons">' +
+                        '<div class="control"><span class="button is-static">fa-</span></div>' +
+                        '<div class="control">' +
+                        '<input class="input" name="fontAwesomeIconClass" type="text"' +
+                        (' value="' + cityssm.escapeHTML(lotOccupantType.fontAwesomeIconClass) + '"') +
+                        (' form="' + formId + '"') +
+                        ' list="datalist--fontAwesomeIconClass"' +
+                        ' aria-label="Icon Name"' +
+                        ' maxlength="50" />' +
+                        "</div>" +
+                        '<div class="control"><span class="button is-static">' +
+                        '<i class="fas fa-fw fa-' +
+                        cityssm.escapeHTML(lotOccupantType.fontAwesomeIconClass) +
+                        '"></i></span></div>' +
+                        "</div>") +
+                    "</td>" +
+                    ("<td>" +
+                        ('<form id="' + formId + '">') +
+                        '<input name="lotOccupantTypeId" type="hidden"' +
+                        (' value="' + lotOccupantType.lotOccupantTypeId.toString() + '"') +
+                        " />" +
+                        '<button class="button is-success" type="submit" aria-label="Save"><i class="fas fa-save" aria-hidden="true"></i></button>' +
+                        "</form>" +
+                        "</td>") +
                     '<td class="is-nowrap">' +
                     '<div class="field is-grouped">' +
                     '<div class="control">' +
@@ -761,6 +786,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
                     "</div>" +
                     "</div>" +
                     "</td>";
+            tableRowElement
+                .querySelector("input[name='fontAwesomeIconClass']")
+                .addEventListener("keyup", refreshFontAwesomeIcon);
             tableRowElement
                 .querySelector("form")
                 .addEventListener("submit", updateLotOccupantType);

public-typescript/adminTables.ts

@@ -13,6 +13,15 @@ declare const bulmaJS: BulmaJS;
 (() => {
     const los = exports.los as globalTypes.LOS;
 
+    const refreshFontAwesomeIcon = (changeEvent: Event) => {
+        const inputElement = changeEvent.currentTarget as HTMLInputElement;
+
+        const fontAwesomeIconClass = inputElement.value;
+
+        inputElement.closest(".field")!.querySelectorAll(".button.is-static")[1].innerHTML =
+            "<i class=\"fas fa-fw fa-" + fontAwesomeIconClass + "\" aria-hidden=\"true\"></i>";
+    };
+
     /*
      * Work Order Types
      */
@@ -1018,7 +1027,7 @@ declare const bulmaJS: BulmaJS;
         if (workOrderTypes.length === 0) {
             containerElement.innerHTML =
                 "<tr>" +
-                '<td colspan="2">' +
+                '<td colspan="3">' +
                 '<div class="message is-warning">' +
                 '<p class="message-body">There are no active ' +
                 cityssm.escapeHTML(exports.aliases.lot.toLowerCase()) +
@@ -1040,27 +1049,47 @@ declare const bulmaJS: BulmaJS;
             tableRowElement.dataset.lotOccupantTypeId =
                 lotOccupantType.lotOccupantTypeId.toString();
 
+            const formId = "form--lotOccupantType-" + lotOccupantType.lotOccupantTypeId;
+
             tableRowElement.innerHTML =
                 "<td>" +
-                "<form>" +
+                ('<div class="field">' +
-                '<input name="lotOccupantTypeId" type="hidden" value="' +
-                lotOccupantType.lotOccupantTypeId.toString() +
-                '" />' +
-                ('<div class="field has-addons">' +
                     '<div class="control">' +
                     '<input class="input" name="lotOccupantType" type="text"' +
                     (' value="' + cityssm.escapeHTML(lotOccupantType.lotOccupantType) + '"') +
+                    (' form="' + formId + '"') +
                     (' aria-label="' +
                         cityssm.escapeHTML(exports.aliases.lot + " " + exports.aliases.occupant) +
                         ' Type"') +
                     ' maxlength="100" required />' +
                     "</div>" +
-                    '<div class="control">' +
-                    '<button class="button is-success" type="submit" aria-label="Save"><i class="fas fa-save" aria-hidden="true"></i></button>' +
-                    "</div>" +
                     "</div>") +
-                "</form>" +
                 "</td>" +
+                "<td>" +
+                ('<div class="field has-addons">' +
+                    '<div class="control"><span class="button is-static">fa-</span></div>' +
+                    '<div class="control">' +
+                    '<input class="input" name="fontAwesomeIconClass" type="text"' +
+                    (' value="' + cityssm.escapeHTML(lotOccupantType.fontAwesomeIconClass) + '"') +
+                    (' form="' + formId + '"') +
+                    ' list="datalist--fontAwesomeIconClass"' +
+                    ' aria-label="Icon Name"' +
+                    ' maxlength="50" />' +
+                    "</div>" +
+                    '<div class="control"><span class="button is-static">' +
+                    '<i class="fas fa-fw fa-' +
+                    cityssm.escapeHTML(lotOccupantType.fontAwesomeIconClass) +
+                    '"></i></span></div>' +
+                    "</div>") +
+                "</td>" +
+                ("<td>" +
+                    ('<form id="' + formId + '">') +
+                    '<input name="lotOccupantTypeId" type="hidden"' +
+                    (' value="' + lotOccupantType.lotOccupantTypeId.toString() + '"') +
+                    " />" +
+                    '<button class="button is-success" type="submit" aria-label="Save"><i class="fas fa-save" aria-hidden="true"></i></button>' +
+                    "</form>" +
+                    "</td>") +
                 '<td class="is-nowrap">' +
                 '<div class="field is-grouped">' +
                 '<div class="control">' +
@@ -1091,6 +1120,10 @@ declare const bulmaJS: BulmaJS;
                 "</div>" +
                 "</td>";
 
+            tableRowElement
+                .querySelector("input[name='fontAwesomeIconClass']")!
+                .addEventListener("keyup", refreshFontAwesomeIcon);
+
             tableRowElement
                 .querySelector("form")!
                 .addEventListener("submit", updateLotOccupantType);

public-typescript/lotOccupancySearch.js

@@ -68,6 +68,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
                         '<span class="has-tooltip-left" data-tooltip="' +
                             cityssm.escapeHTML(occupant.lotOccupantType || "") +
                             '">' +
+                            ('<i class="fas fa-fw fa-' +
+                                cityssm.escapeHTML(occupant.fontAwesomeIconClass || "user") +
+                                '" aria-hidden="true"></i> ') +
                             cityssm.escapeHTML(occupant.occupantName || "") +
                             "</span><br />";
                 }

public-typescript/lotOccupancySearch.ts

@@ -99,6 +99,9 @@ declare const cityssm: cityssmGlobal;
                             '<span class="has-tooltip-left" data-tooltip="' +
                             cityssm.escapeHTML(occupant.lotOccupantType || "") +
                             '">' +
+                            ('<i class="fas fa-fw fa-' +
+                                cityssm.escapeHTML(occupant.fontAwesomeIconClass || "user") +
+                                '" aria-hidden="true"></i> ') +
                             cityssm.escapeHTML(occupant.occupantName || "") +
                             "</span><br />";
                     }

public-typescript/workOrderEdit.js

@@ -303,6 +303,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
                                     '<span class="has-tooltip-left" data-tooltip="' +
                                     cityssm.escapeHTML(occupant.lotOccupantType) +
                                     '">' +
+                                    '<i class="fas fa-fw fa-' +
+                                    cityssm.escapeHTML(occupant.fontAwesomeIconClass || "user") +
+                                    '" aria-label="' +
+                                    cityssm.escapeHTML(exports.aliases.occupant) +
+                                    '"></i> ' +
                                     cityssm.escapeHTML(occupant.occupantName) +
                                     "</span><br />");
                             }, "")) +

public-typescript/workOrderEdit.ts

@@ -426,6 +426,13 @@ declare const bulmaJS: BulmaJS;
                                           '<span class="has-tooltip-left" data-tooltip="' +
                                           cityssm.escapeHTML(occupant.lotOccupantType!) +
                                           '">' +
+                                          '<i class="fas fa-fw fa-' +
+                                          cityssm.escapeHTML(
+                                              occupant.fontAwesomeIconClass || "user"
+                                          ) +
+                                          '" aria-label="' +
+                                          cityssm.escapeHTML(exports.aliases.occupant) +
+                                          '"></i> ' +
                                           cityssm.escapeHTML(occupant.occupantName!) +
                                           "</span><br />"
                                       );

public-typescript/workOrderSearch.js

@@ -43,7 +43,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
                             '<span class="has-tooltip-left" data-tooltip="' +
                                 cityssm.escapeHTML(occupant.lotOccupantType || "") +
                                 '">' +
-                                '<i class="fas fa-user" aria-label="' +
+                                '<i class="fas fa-fw fa-' + cityssm.escapeHTML(occupant.fontAwesomeIconClass || "user") + '" aria-label="' +
                                 cityssm.escapeHTML(exports.aliases.occupant) +
                                 '"></i> ' +
                                 cityssm.escapeHTML(occupant.occupantName || "(No Name)") +

public-typescript/workOrderSearch.ts

@@ -73,7 +73,7 @@ declare const cityssm: cityssmGlobal;
                                 '<span class="has-tooltip-left" data-tooltip="' +
                                 cityssm.escapeHTML(occupant.lotOccupantType || "") +
                                 '">' +
-                                '<i class="fas fa-user" aria-label="' +
+                                '<i class="fas fa-fw fa-' + cityssm.escapeHTML(occupant.fontAwesomeIconClass || "user") + '" aria-label="' +
                                 cityssm.escapeHTML(exports.aliases.occupant) +
                                 '"></i> ' +
                                 cityssm.escapeHTML(occupant.occupantName || "(No Name)") +

public/javascripts/lotOccupancySearch.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),(()=>{const t=exports.los,a=exports.lotOccupancyPrints,e=document.querySelector("#form--searchFilters"),s=document.querySelector("#container--searchResults"),c=Number.parseInt(document.querySelector("#searchFilter--limit").value,10),i=document.querySelector("#searchFilter--offset"),l=()=>{const l=Number.parseInt(i.value,10);s.innerHTML='<div class="has-text-grey has-text-centered"><i class="fas fa-5x fa-circle-notch fa-spin" aria-hidden="true"></i><br />Loading '+exports.aliases.occupancies+"...</div>",cityssm.postJSON(t.urlPrefix+"/lotOccupancies/doSearchLotOccupancies",e,e=>{if(0===e.lotOccupancies.length)return void(s.innerHTML='<div class="message is-info"><p class="message-body">There are no '+cityssm.escapeHTML(exports.aliases.occupancy.toLowerCase())+" records that meet the search criteria.</p></div>");const i=document.createElement("tbody"),o=cityssm.dateToString(new Date);for(const s of e.lotOccupancies){let e="";e=s.occupancyStartDateString<=o&&(""===s.occupancyEndDateString||s.occupancyEndDateString>=o)?'<span class="has-tooltip-right" data-tooltip="Current '+exports.aliases.occupancy+'"><i class="fas fa-play" aria-label="Current '+exports.aliases.occupancy+'"></i></span>':s.occupancyStartDateString>o?'<span class="has-tooltip-right" data-tooltip="Future '+exports.aliases.occupancy+'"><i class="fas fa-fast-forward" aria-label="Future '+exports.aliases.occupancy+'"></i></span>':'<span class="has-tooltip-right" data-tooltip="Past '+exports.aliases.occupancy+'"><i class="fas fa-stop" aria-label="Past '+exports.aliases.occupancy+'"></i></span>';let c="";for(const t of s.lotOccupancyOccupants)c+='<span class="has-tooltip-left" data-tooltip="'+cityssm.escapeHTML(t.lotOccupantType||"")+'">'+cityssm.escapeHTML(t.occupantName||"")+"</span><br />";i.insertAdjacentHTML("beforeend",'<tr><td class="has-width-1">'+e+'</td><td><a class="has-text-weight-bold" href="'+t.urlPrefix+"/lotOccupancies/"+s.lotOccupancyId+'">'+cityssm.escapeHTML(s.occupancyType)+"</a></td><td>"+(s.lotName?'<a class="has-tooltip-right" data-tooltip="'+cityssm.escapeHTML(s.lotType||"")+'" href="'+t.urlPrefix+"/lots/"+s.lotId+'">'+cityssm.escapeHTML(s.lotName)+"</a>":'<span class="has-text-grey">(No '+cityssm.escapeHTML(exports.aliases.lot)+")</span>")+'<br /><span class="is-size-7">'+cityssm.escapeHTML(s.mapName||"")+"</span></td><td>"+s.occupancyStartDateString+"</td><td>"+(s.occupancyEndDate?s.occupancyEndDateString:'<span class="has-text-grey">(No End Date)</span>')+"</td><td>"+c+"</td>"+(a.length>0?'<td><a class="button is-small" data-tooltip="Print" href="'+t.urlPrefix+"/print/"+a[0]+"/?lotOccupancyId="+s.lotOccupancyId+'" target="_blank"><i class="fas fa-print" aria-label="Print"></i></a></td>':"")+"</tr>")}s.innerHTML='<table class="table is-fullwidth is-striped is-hoverable has-sticky-header"><thead><tr><th class="has-width-1"></th><th>'+cityssm.escapeHTML(exports.aliases.occupancy)+" Type</th><th>"+cityssm.escapeHTML(exports.aliases.lot)+"</th><th>"+cityssm.escapeHTML(exports.aliases.occupancyStartDate)+"</th><th>End Date</th><th>"+cityssm.escapeHTML(exports.aliases.occupants)+"</th>"+(a.length>0?'<th class="has-width-1"><span class="is-sr-only">Print</span></th>':"")+'</tr></thead><table><div class="level"><div class="level-left"><div class="level-item has-text-weight-bold">Displaying '+(l+1).toString()+" to "+Math.min(e.count,c+l)+" of "+e.count+'</div></div><div class="level-right">'+(l>0?'<div class="level-item"><button class="button is-rounded is-link is-outlined" data-page="previous" type="button" title="Previous"><i class="fas fa-arrow-left" aria-hidden="true"></i></button></div>':"")+(c+l<e.count?'<div class="level-item"><button class="button is-rounded is-link" data-page="next" type="button" title="Next"><span>Next</span><span class="icon"><i class="fas fa-arrow-right" aria-hidden="true"></i></span></button></div>':"")+"</div></div>",s.querySelector("table").append(i),l>0&&s.querySelector("button[data-page='previous']").addEventListener("click",r),c+l<e.count&&s.querySelector("button[data-page='next']").addEventListener("click",n)})},o=()=>{i.value="0",l()},r=()=>{i.value=Math.max(Number.parseInt(i.value,10)-c,0).toString(),l()},n=()=>{i.value=(Number.parseInt(i.value,10)+c).toString(),l()},p=e.querySelectorAll("input, select");for(const t of p)t.addEventListener("change",o);e.addEventListener("submit",t=>{t.preventDefault(),o()}),l()})();
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),(()=>{const t=exports.los,a=exports.lotOccupancyPrints,e=document.querySelector("#form--searchFilters"),s=document.querySelector("#container--searchResults"),c=Number.parseInt(document.querySelector("#searchFilter--limit").value,10),i=document.querySelector("#searchFilter--offset"),o=()=>{const o=Number.parseInt(i.value,10);s.innerHTML='<div class="has-text-grey has-text-centered"><i class="fas fa-5x fa-circle-notch fa-spin" aria-hidden="true"></i><br />Loading '+exports.aliases.occupancies+"...</div>",cityssm.postJSON(t.urlPrefix+"/lotOccupancies/doSearchLotOccupancies",e,e=>{if(0===e.lotOccupancies.length)return void(s.innerHTML='<div class="message is-info"><p class="message-body">There are no '+cityssm.escapeHTML(exports.aliases.occupancy.toLowerCase())+" records that meet the search criteria.</p></div>");const i=document.createElement("tbody"),r=cityssm.dateToString(new Date);for(const s of e.lotOccupancies){let e="";e=s.occupancyStartDateString<=r&&(""===s.occupancyEndDateString||s.occupancyEndDateString>=r)?'<span class="has-tooltip-right" data-tooltip="Current '+exports.aliases.occupancy+'"><i class="fas fa-play" aria-label="Current '+exports.aliases.occupancy+'"></i></span>':s.occupancyStartDateString>r?'<span class="has-tooltip-right" data-tooltip="Future '+exports.aliases.occupancy+'"><i class="fas fa-fast-forward" aria-label="Future '+exports.aliases.occupancy+'"></i></span>':'<span class="has-tooltip-right" data-tooltip="Past '+exports.aliases.occupancy+'"><i class="fas fa-stop" aria-label="Past '+exports.aliases.occupancy+'"></i></span>';let c="";for(const t of s.lotOccupancyOccupants)c+='<span class="has-tooltip-left" data-tooltip="'+cityssm.escapeHTML(t.lotOccupantType||"")+'"><i class="fas fa-fw fa-'+cityssm.escapeHTML(t.fontAwesomeIconClass||"user")+'" aria-hidden="true"></i> '+cityssm.escapeHTML(t.occupantName||"")+"</span><br />";i.insertAdjacentHTML("beforeend",'<tr><td class="has-width-1">'+e+'</td><td><a class="has-text-weight-bold" href="'+t.urlPrefix+"/lotOccupancies/"+s.lotOccupancyId+'">'+cityssm.escapeHTML(s.occupancyType)+"</a></td><td>"+(s.lotName?'<a class="has-tooltip-right" data-tooltip="'+cityssm.escapeHTML(s.lotType||"")+'" href="'+t.urlPrefix+"/lots/"+s.lotId+'">'+cityssm.escapeHTML(s.lotName)+"</a>":'<span class="has-text-grey">(No '+cityssm.escapeHTML(exports.aliases.lot)+")</span>")+'<br /><span class="is-size-7">'+cityssm.escapeHTML(s.mapName||"")+"</span></td><td>"+s.occupancyStartDateString+"</td><td>"+(s.occupancyEndDate?s.occupancyEndDateString:'<span class="has-text-grey">(No End Date)</span>')+"</td><td>"+c+"</td>"+(a.length>0?'<td><a class="button is-small" data-tooltip="Print" href="'+t.urlPrefix+"/print/"+a[0]+"/?lotOccupancyId="+s.lotOccupancyId+'" target="_blank"><i class="fas fa-print" aria-label="Print"></i></a></td>':"")+"</tr>")}s.innerHTML='<table class="table is-fullwidth is-striped is-hoverable has-sticky-header"><thead><tr><th class="has-width-1"></th><th>'+cityssm.escapeHTML(exports.aliases.occupancy)+" Type</th><th>"+cityssm.escapeHTML(exports.aliases.lot)+"</th><th>"+cityssm.escapeHTML(exports.aliases.occupancyStartDate)+"</th><th>End Date</th><th>"+cityssm.escapeHTML(exports.aliases.occupants)+"</th>"+(a.length>0?'<th class="has-width-1"><span class="is-sr-only">Print</span></th>':"")+'</tr></thead><table><div class="level"><div class="level-left"><div class="level-item has-text-weight-bold">Displaying '+(o+1).toString()+" to "+Math.min(e.count,c+o)+" of "+e.count+'</div></div><div class="level-right">'+(o>0?'<div class="level-item"><button class="button is-rounded is-link is-outlined" data-page="previous" type="button" title="Previous"><i class="fas fa-arrow-left" aria-hidden="true"></i></button></div>':"")+(c+o<e.count?'<div class="level-item"><button class="button is-rounded is-link" data-page="next" type="button" title="Next"><span>Next</span><span class="icon"><i class="fas fa-arrow-right" aria-hidden="true"></i></span></button></div>':"")+"</div></div>",s.querySelector("table").append(i),o>0&&s.querySelector("button[data-page='previous']").addEventListener("click",l),c+o<e.count&&s.querySelector("button[data-page='next']").addEventListener("click",n)})},r=()=>{i.value="0",o()},l=()=>{i.value=Math.max(Number.parseInt(i.value,10)-c,0).toString(),o()},n=()=>{i.value=(Number.parseInt(i.value,10)+c).toString(),o()},p=e.querySelectorAll("input, select");for(const t of p)t.addEventListener("change",r);e.addEventListener("submit",t=>{t.preventDefault(),r()}),o()})();

public/javascripts/workOrderSearch.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),(()=>{const e=exports.los,t=exports.workOrderPrints,s=document.querySelector("#form--searchFilters");e.initializeDatePickers(s);const a=document.querySelector("#container--searchResults"),r=Number.parseInt(document.querySelector("#searchFilter--limit").value,10),o=document.querySelector("#searchFilter--offset"),i=()=>{const i=Number.parseInt(o.value,10);a.innerHTML='<div class="has-text-grey has-text-centered"><i class="fas fa-5x fa-circle-notch fa-spin" aria-hidden="true"></i><br />Loading Work Orders...</div>',cityssm.postJSON(e.urlPrefix+"/workOrders/doSearchWorkOrders",s,s=>{if(0===s.workOrders.length)return void(a.innerHTML='<div class="message is-info"><p class="message-body">There are no work orders that meet the search criteria.</p></div>');const o=document.createElement("tbody");for(const a of s.workOrders){let s="";for(const e of a.workOrderLots)s+='<span class="has-tooltip-left" data-tooltip="'+cityssm.escapeHTML(e.mapName||"")+'"><i class="fas fa-vector-square" aria-label="'+cityssm.escapeHTML(exports.aliases.lot)+'"></i> '+cityssm.escapeHTML(e.lotName||"(No Lot Name)")+"</span><br />";for(const e of a.workOrderLotOccupancies)for(const t of e.lotOccupancyOccupants)s+='<span class="has-tooltip-left" data-tooltip="'+cityssm.escapeHTML(t.lotOccupantType||"")+'"><i class="fas fa-user" aria-label="'+cityssm.escapeHTML(exports.aliases.occupant)+'"></i> '+cityssm.escapeHTML(t.occupantName||"(No Name)")+"</span><br />";o.insertAdjacentHTML("beforeend",'<tr><td><a class="has-text-weight-bold" href="'+e.urlPrefix+"/workOrders/"+a.workOrderId+'">'+(a.workOrderNumber.trim()?cityssm.escapeHTML(a.workOrderNumber||""):"(No Number)")+"</a></td><td>"+cityssm.escapeHTML(a.workOrderType||"")+'<br /><span class="is-size-7">'+cityssm.escapeHTML(a.workOrderDescription||"")+'</span></td><td class="is-nowrap"><span class="is-size-7">'+s+'</span></td><td class="is-nowrap"><span class="has-tooltip-left" data-tooltip="'+cityssm.escapeHTML(exports.aliases.workOrderOpenDate)+'"><i class="fas fa-fw fa-play" aria-label="'+cityssm.escapeHTML(exports.aliases.workOrderOpenDate)+'"></i> '+a.workOrderOpenDateString+'</span><br /><span class="has-tooltip-left" data-tooltip="'+cityssm.escapeHTML(exports.aliases.workOrderCloseDate)+'"><i class="fas fa-fw fa-stop" aria-label="'+cityssm.escapeHTML(exports.aliases.workOrderCloseDate)+'"></i> '+(a.workOrderCloseDate?a.workOrderCloseDateString:'<span class="has-text-grey">(No '+cityssm.escapeHTML(exports.aliases.workOrderCloseDate)+")</span>")+"</span></td><td>"+(0===a.workOrderMilestoneCount?"-":a.workOrderMilestoneCompletionCount+" / "+a.workOrderMilestoneCount)+"</td>"+(t.length>0?'<td><a class="button is-small" data-tooltip="Print" href="'+e.urlPrefix+"/print/"+t[0]+"/?workOrderId="+a.workOrderId+'" target="_blank"><i class="fas fa-print" aria-label="Print"></i></a></td>':"")+"</tr>")}a.innerHTML='<table class="table is-fullwidth is-striped is-hoverable has-sticky-header"><thead><tr><th>Work Order Number</th><th>Description</th><th>Related</th><th>Date</th><th class="has-tooltip-bottom" data-tooltip="Completed / Total Milestones">Progress</th>'+(t.length>0?'<th class="has-width-1"></th>':"")+'</tr></thead><table><div class="level"><div class="level-left"><div class="level-item has-text-weight-bold">Displaying '+(i+1).toString()+" to "+Math.min(s.count,r+i)+" of "+s.count+'</div></div><div class="level-right">'+(i>0?'<div class="level-item"><button class="button is-rounded is-link is-outlined" data-page="previous" type="button" title="Previous"><i class="fas fa-arrow-left" aria-hidden="true"></i></button></div>':"")+(r+i<s.count?'<div class="level-item"><button class="button is-rounded is-link" data-page="next" type="button" title="Next"><span>Next</span><span class="icon"><i class="fas fa-arrow-right" aria-hidden="true"></i></span></button></div>':"")+"</div></div>",a.querySelector("table").append(o),i>0&&a.querySelector("button[data-page='previous']").addEventListener("click",n),r+i<s.count&&a.querySelector("button[data-page='next']").addEventListener("click",c)})},l=()=>{o.value="0",i()},n=()=>{o.value=Math.max(Number.parseInt(o.value,10)-r,0).toString(),i()},c=()=>{o.value=(Number.parseInt(o.value,10)+r).toString(),i()},d=s.querySelectorAll("input, select");for(const e of d)e.addEventListener("change",l);s.addEventListener("submit",e=>{e.preventDefault(),l()}),i()})();
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),(()=>{const e=exports.los,t=exports.workOrderPrints,s=document.querySelector("#form--searchFilters");e.initializeDatePickers(s);const a=document.querySelector("#container--searchResults"),r=Number.parseInt(document.querySelector("#searchFilter--limit").value,10),o=document.querySelector("#searchFilter--offset"),i=()=>{const i=Number.parseInt(o.value,10);a.innerHTML='<div class="has-text-grey has-text-centered"><i class="fas fa-5x fa-circle-notch fa-spin" aria-hidden="true"></i><br />Loading Work Orders...</div>',cityssm.postJSON(e.urlPrefix+"/workOrders/doSearchWorkOrders",s,s=>{if(0===s.workOrders.length)return void(a.innerHTML='<div class="message is-info"><p class="message-body">There are no work orders that meet the search criteria.</p></div>');const o=document.createElement("tbody");for(const a of s.workOrders){let s="";for(const e of a.workOrderLots)s+='<span class="has-tooltip-left" data-tooltip="'+cityssm.escapeHTML(e.mapName||"")+'"><i class="fas fa-vector-square" aria-label="'+cityssm.escapeHTML(exports.aliases.lot)+'"></i> '+cityssm.escapeHTML(e.lotName||"(No Lot Name)")+"</span><br />";for(const e of a.workOrderLotOccupancies)for(const t of e.lotOccupancyOccupants)s+='<span class="has-tooltip-left" data-tooltip="'+cityssm.escapeHTML(t.lotOccupantType||"")+'"><i class="fas fa-fw fa-'+cityssm.escapeHTML(t.fontAwesomeIconClass||"user")+'" aria-label="'+cityssm.escapeHTML(exports.aliases.occupant)+'"></i> '+cityssm.escapeHTML(t.occupantName||"(No Name)")+"</span><br />";o.insertAdjacentHTML("beforeend",'<tr><td><a class="has-text-weight-bold" href="'+e.urlPrefix+"/workOrders/"+a.workOrderId+'">'+(a.workOrderNumber.trim()?cityssm.escapeHTML(a.workOrderNumber||""):"(No Number)")+"</a></td><td>"+cityssm.escapeHTML(a.workOrderType||"")+'<br /><span class="is-size-7">'+cityssm.escapeHTML(a.workOrderDescription||"")+'</span></td><td class="is-nowrap"><span class="is-size-7">'+s+'</span></td><td class="is-nowrap"><span class="has-tooltip-left" data-tooltip="'+cityssm.escapeHTML(exports.aliases.workOrderOpenDate)+'"><i class="fas fa-fw fa-play" aria-label="'+cityssm.escapeHTML(exports.aliases.workOrderOpenDate)+'"></i> '+a.workOrderOpenDateString+'</span><br /><span class="has-tooltip-left" data-tooltip="'+cityssm.escapeHTML(exports.aliases.workOrderCloseDate)+'"><i class="fas fa-fw fa-stop" aria-label="'+cityssm.escapeHTML(exports.aliases.workOrderCloseDate)+'"></i> '+(a.workOrderCloseDate?a.workOrderCloseDateString:'<span class="has-text-grey">(No '+cityssm.escapeHTML(exports.aliases.workOrderCloseDate)+")</span>")+"</span></td><td>"+(0===a.workOrderMilestoneCount?"-":a.workOrderMilestoneCompletionCount+" / "+a.workOrderMilestoneCount)+"</td>"+(t.length>0?'<td><a class="button is-small" data-tooltip="Print" href="'+e.urlPrefix+"/print/"+t[0]+"/?workOrderId="+a.workOrderId+'" target="_blank"><i class="fas fa-print" aria-label="Print"></i></a></td>':"")+"</tr>")}a.innerHTML='<table class="table is-fullwidth is-striped is-hoverable has-sticky-header"><thead><tr><th>Work Order Number</th><th>Description</th><th>Related</th><th>Date</th><th class="has-tooltip-bottom" data-tooltip="Completed / Total Milestones">Progress</th>'+(t.length>0?'<th class="has-width-1"></th>':"")+'</tr></thead><table><div class="level"><div class="level-left"><div class="level-item has-text-weight-bold">Displaying '+(i+1).toString()+" to "+Math.min(s.count,r+i)+" of "+s.count+'</div></div><div class="level-right">'+(i>0?'<div class="level-item"><button class="button is-rounded is-link is-outlined" data-page="previous" type="button" title="Previous"><i class="fas fa-arrow-left" aria-hidden="true"></i></button></div>':"")+(r+i<s.count?'<div class="level-item"><button class="button is-rounded is-link" data-page="next" type="button" title="Next"><span>Next</span><span class="icon"><i class="fas fa-arrow-right" aria-hidden="true"></i></span></button></div>':"")+"</div></div>",a.querySelector("table").append(o),i>0&&a.querySelector("button[data-page='previous']").addEventListener("click",c),r+i<s.count&&a.querySelector("button[data-page='next']").addEventListener("click",n)})},l=()=>{o.value="0",i()},c=()=>{o.value=Math.max(Number.parseInt(o.value,10)-r,0).toString(),i()},n=()=>{o.value=(Number.parseInt(o.value,10)+r).toString(),i()},d=s.querySelectorAll("input, select");for(const e of d)e.addEventListener("change",l);s.addEventListener("submit",e=>{e.preventDefault(),l()}),i()})();

types/recordTypes.d.ts

@@ -95,6 +95,7 @@ export interface OccupancyTypeField {
 export interface LotOccupantType extends Record {
     lotOccupantTypeId: number;
     lotOccupantType: string;
+    fontAwesomeIconClass: string;
     orderNumber?: number;
 }
 export interface FeeCategory extends Record {
@@ -146,6 +147,7 @@ export interface LotOccupancyOccupant extends Record {
     lotOccupantIndex?: number;
     lotOccupantTypeId?: number;
     lotOccupantType?: string;
+    fontAwesomeIconClass?: string;
     occupantName?: string;
     occupantAddress1?: string;
     occupantAddress2?: string;

types/recordTypes.ts

@@ -125,6 +125,7 @@ export interface OccupancyTypeField {
 export interface LotOccupantType extends Record {
     lotOccupantTypeId: number;
     lotOccupantType: string;
+    fontAwesomeIconClass: string;
     orderNumber?: number;
 }
 
@@ -193,7 +194,8 @@ export interface LotOccupancyOccupant extends Record {
 
     lotOccupantTypeId?: number;
     lotOccupantType?: string;
-
+    fontAwesomeIconClass?: string;
+    
     occupantName?: string;
     occupantAddress1?: string;
     occupantAddress2?: string;

views/admin-tables.ejs

@@ -152,13 +152,16 @@
                     <thead>
                         <tr>
                             <th><%= configFunctions.getProperty("aliases.lot") %> <%= configFunctions.getProperty("aliases.occupant") %> Type</th>
+                            <th>Icon Class</th>
+                            <th>&nbsp;</th>
                             <th class="has-text-centered has-width-1">Options</th>
                         </tr>
                     </thead>
                     <tbody>
                         <tr>
-                            <td colspan="2">
+                            <td colspan="4">
                                 <form id="form--addLotOccupantType">
+                                    <input name="fontAwesomeIconClass" type="hidden" value="user" />
                                     <div class="field has-addons">
                                         <div class="control is-expanded">
                                             <input class="input" name="lotOccupantType" type="text" maxlength="100" placeholder="New <%= configFunctions.getProperty("aliases.lot") %> <%= configFunctions.getProperty("aliases.occupant") %> Type" required />
@@ -177,6 +180,11 @@
                 </table>
             </div>
         </div>
+        <datalist id="datalist--fontAwesomeIconClass">
+            <% for (const iconClass of fontAwesomeIconClasses) { %>
+                <option value="<%= iconClass %>"></option>
+            <% } %>
+        </datalist>
     </div>
 </div>
 

views/dashboard.ejs

@@ -62,7 +62,7 @@
                                             for (const lot of milestone.workOrderLots) {
                                     %>
                                     <span class="has-tooltip-right" data-tooltip="<%= lot.mapName %>">
-                                        <i class="fas fa-vector-square" aria-label="<%= configFunctions.getProperty("aliases.lot") %>"></i>
+                                        <i class="fas fa-fw fa-vector-square" aria-label="<%= configFunctions.getProperty("aliases.lot") %>"></i>
                                         <%= lot.lotName %>
                                     </span><br />
                                     <%
@@ -74,7 +74,7 @@
                                                 for (const occupant of occupancy.lotOccupancyOccupants) {
                                     %>
                                     <span class="has-tooltip-right" data-tooltip="<%= occupant.lotOccupantType %>">
-                                        <i class="fas fa-user" aria-label="<%= configFunctions.getProperty("aliases.occupancy") %>"></i>
+                                        <i class="fas fa-fw fa-<%= occupant.fontAwesomeIconClass || 'user' %>" aria-label="<%= configFunctions.getProperty("aliases.occupancy") %>"></i>
                                         <%= occupant.occupantName %>
                                     </span><br />
                                     <%

views/lot-edit.ejs

@@ -353,7 +353,10 @@
                                 <span class="has-text-grey">(No <%= configFunctions.getProperty("aliases.occupants") %>)</span>
                             <% } else { %>
                                 <% for (const occupant of lotOccupancy.lotOccupancyOccupants) { %>
-                                    <span class="has-tooltip-left" data-tooltip="<%= occupant.lotOccupantType %>"><%= occupant.occupantName %></span><br />
+                                    <span class="has-tooltip-left" data-tooltip="<%= occupant.lotOccupantType %>">
+                                        <i class="fas fa-fw fa-<%= occupant.fontAwesomeIconClass || 'user' %>" aria-hidden="true"></i>
+                                        <%= occupant.occupantName %>
+                                    </span><br />
                                 <% } %>
                             <% } %>
                         </td>

views/lot-view.ejs

@@ -175,7 +175,10 @@
                                 <span class="has-text-grey">(No <%= configFunctions.getProperty("aliases.occupants") %>)</span>
                             <% } else { %>
                                 <% for (const occupant of lotOccupancy.lotOccupancyOccupants) { %>
-                                    <span class="has-tooltip-left" data-tooltip="<%= occupant.lotOccupantType %>"><%= occupant.occupantName %></span><br />
+                                    <span class="has-tooltip-left" data-tooltip="<%= occupant.lotOccupantType %>">
+                                        <i class="fas fa-fw fa-<%= occupant.fontAwesomeIconClass || 'user' %>" aria-hidden="true"></i>
+                                        <%= occupant.occupantName %>
+                                    </span><br />
                                 <% } %>
                             <% } %>
                         </td>

views/workOrder-view.ejs

@@ -201,7 +201,10 @@
                                                     <span class="has-text-grey">(No <%= configFunctions.getProperty("aliases.occupants") %>)</span>
                                                 <% } else { %>
                                                     <% for (const occupant of lotOccupancy.lotOccupancyOccupants) { %>
-                                                        <span class="has-tooltip-left" data-tooltip="<%= occupant.lotOccupantType %>"><%= occupant.occupantName %></span><br />
+                                                        <span class="has-tooltip-left" data-tooltip="<%= occupant.lotOccupantType %>">
+                                                            <i class="fas fa-fw fa-<%= occupant.fontAwesomeIconClass || 'user' %>" aria-hidden="true"></i>
+                                                            <%= occupant.occupantName %>
+                                                        </span><br />
                                                     <% } %>
                                                 <% } %>
                                             </td>