work order progress

handlers/workOrders-get/edit.d.ts

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

handlers/workOrders-get/edit.js

@@ -0,0 +1,14 @@
+import * as configFunctions from "../../helpers/functions.config.js";
+import { getWorkOrder } from "../../helpers/lotOccupancyDB/getWorkOrder.js";
+export const handler = (request, response) => {
+    const workOrder = getWorkOrder(request.params.workOrderId);
+    if (!workOrder) {
+        return response.redirect(configFunctions.getProperty("reverseProxy.urlPrefix") +
+            "/workOrders/?error=workOrderIdNotFound");
+    }
+    response.render("workOrder-edit", {
+        headTitle: "Work Order #" + workOrder.workOrderNumber,
+        workOrder
+    });
+};
+export default handler;

handlers/workOrders-get/edit.ts

@@ -0,0 +1,23 @@
+import type { RequestHandler } from "express";
+
+import * as configFunctions from "../../helpers/functions.config.js";
+
+import { getWorkOrder } from "../../helpers/lotOccupancyDB/getWorkOrder.js";
+
+export const handler: RequestHandler = (request, response) => {
+    const workOrder = getWorkOrder(request.params.workOrderId);
+
+    if (!workOrder) {
+        return response.redirect(
+            configFunctions.getProperty("reverseProxy.urlPrefix") +
+                "/workOrders/?error=workOrderIdNotFound"
+        );
+    }
+
+    response.render("workOrder-edit", {
+        headTitle: "Work Order #" + workOrder.workOrderNumber,
+        workOrder
+    });
+};
+
+export default handler;

public-typescript/lotOccupancyEdit.js

@@ -64,6 +64,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
                     lotOccupancyId
                 }, (responseJSON) => {
                     if (responseJSON.success) {
+                        cityssm.disableNavBlocker();
                         window.location.href =
                             urlPrefix +
                                 "/lotOccupancies?t=" +
@@ -119,36 +120,58 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 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="lotOccupancy--lotOccupancyFieldValue_' +
+                        '<label class="label" for="' +
-                            occupancyTypeField.occupancyTypeFieldId +
+                            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 =
+                        inputElement.id = fieldId;
-                        "lotOccupancy--lotOccupancyFieldValue_" +
+                        inputElement.name = fieldName;
-                            occupancyTypeField.occupancyTypeFieldId;
-                    inputElement.name =
-                        "lotOccupancyFieldValue_" +
-                            occupancyTypeField.occupancyTypeFieldId;
                         inputElement.type = "text";
-                    inputElement.required = occupancyTypeField.isRequired;
+                        inputElement.required =
+                            occupancyTypeField.isRequired;
                         inputElement.minLength =
                             occupancyTypeField.minimumLength;
                         inputElement.maxLength =
                             occupancyTypeField.maximumLength;
                         if (occupancyTypeField.pattern &&
                             occupancyTypeField.pattern !== "") {
-                        inputElement.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>";
+                        fieldElement.querySelector("select").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;
+                            fieldElement.querySelector("select").append(optionElement);
+                        }
+                    }
                     lotOccupancyFieldsContainerElement.append(fieldElement);
                 }
                 lotOccupancyFieldsContainerElement.insertAdjacentHTML("beforeend", '<input name="occupancyTypeFieldIds" type="hidden" value="' +

public-typescript/lotOccupancyEdit.ts

@@ -110,6 +110,7 @@ declare const bulmaJS: BulmaJS;
                             errorMessage?: string;
                         }) => {
                             if (responseJSON.success) {
+                                cityssm.disableNavBlocker();
                                 window.location.href =
                                     urlPrefix +
                                     "/lotOccupancies?t=" +
@@ -187,28 +188,39 @@ declare const bulmaJS: BulmaJS;
                         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="lotOccupancy--lotOccupancyFieldValue_' +
+                            '<label class="label" for="' +
-                            occupancyTypeField.occupancyTypeFieldId +
+                            fieldId +
                             '"></label>' +
                             '<div class="control"></div>';
 
                         fieldElement.querySelector("label").textContent =
                             occupancyTypeField.occupancyTypeField;
 
-                        const inputElement = document.createElement("input");
+                        if (
+                            occupancyTypeField.occupancyTypeFieldValues === ""
+                        ) {
+                            const inputElement =
+                                document.createElement("input");
+
                             inputElement.className = "input";
-                        inputElement.id =
+
-                            "lotOccupancy--lotOccupancyFieldValue_" +
+                            inputElement.id = fieldId;
-                            occupancyTypeField.occupancyTypeFieldId;
+
-                        inputElement.name =
+                            inputElement.name = fieldName;
-                            "lotOccupancyFieldValue_" +
+
-                            occupancyTypeField.occupancyTypeFieldId;
                             inputElement.type = "text";
 
-                        inputElement.required = occupancyTypeField.isRequired;
+                            inputElement.required =
+                                occupancyTypeField.isRequired;
                             inputElement.minLength =
                                 occupancyTypeField.minimumLength;
                             inputElement.maxLength =
@@ -218,12 +230,35 @@ declare const bulmaJS: BulmaJS;
                                 occupancyTypeField.pattern &&
                                 occupancyTypeField.pattern !== ""
                             ) {
-                            inputElement.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>";
+
+                            fieldElement.querySelector("select").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;
+                                fieldElement.querySelector("select").append(optionElement);
+                            }
+                        }
 
                         lotOccupancyFieldsContainerElement.append(fieldElement);
                     }

routes/workOrders.js

@@ -1,9 +1,12 @@
 import { Router } from "express";
+import * as permissionHandlers from "../handlers/permissions.js";
 import handler_search from "../handlers/workOrders-get/search.js";
 import handler_doSearchWorkOrders from "../handlers/workOrders-post/doSearchWorkOrders.js";
 import handler_view from "../handlers/workOrders-get/view.js";
+import handler_edit from "../handlers/workOrders-get/edit.js";
 export const router = Router();
 router.get("/", handler_search);
 router.post("/doSearchWorkOrders", handler_doSearchWorkOrders);
 router.get("/:workOrderId", handler_view);
+router.get("/:workOrderId/edit", permissionHandlers.updateGetHandler, handler_edit);
 export default router;

routes/workOrders.ts

@@ -1,13 +1,14 @@
 import { Router } from "express";
 
 import * as permissionHandlers from "../handlers/permissions.js";
-import * as configFunctions from "../helpers/functions.config.js";
 
 import handler_search from "../handlers/workOrders-get/search.js";
 import handler_doSearchWorkOrders from "../handlers/workOrders-post/doSearchWorkOrders.js";
 
 import handler_view from "../handlers/workOrders-get/view.js";
 
+import handler_edit from "../handlers/workOrders-get/edit.js";
+
 export const router = Router();
 
 router.get("/", handler_search);
@@ -16,4 +17,8 @@ router.post("/doSearchWorkOrders", handler_doSearchWorkOrders);
 
 router.get("/:workOrderId", handler_view);
 
+router.get("/:workOrderId/edit",
+    permissionHandlers.updateGetHandler,
+    handler_edit);
+
 export default router;

views/_header.ejs

@@ -18,7 +18,8 @@
 
 <body>
     <nav class="navbar is-light is-fixed-top is-static-print" id="cityssm-theme--navbar" role="navigation"
-        aria-label="main navigation">
+        aria-label="main navigation"
+        style="z-index:1100">
         <div class="container">
             <div class="navbar-brand">
                 <a class="navbar-item" href="<%= urlPrefix %>/dashboard">

views/map-edit.ejs

@@ -1,9 +1,6 @@
 <%- include('_header'); -%>
 
-<div class="columns is-variable is-4-mobile is-4-tablet is-block-print" id="is-site-layout">
+<nav class="breadcrumb">
-
-    <div class="column is-block-print">
-        <nav class="breadcrumb">
     <ul>
         <li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
         <li>
@@ -25,17 +22,17 @@
             </a>
         </li>
     </ul>
-        </nav>
+</nav>
 
-        <h1 class="title is-1">
+<h1 class="title is-1">
     <% if (isCreate) { %>
     Create a New <%= configFunctions.getProperty("aliases.map") %>
     <% } else { %>
     Update <%= configFunctions.getProperty("aliases.map") %>
     <% } %>
-        </h1>
+</h1>
 
-        <form id="form--map">
+<form id="form--map">
     <input id="map--mapId" name="mapId" type="hidden" value="<%= map.mapId %>" />
 
     <div class="columns">
@@ -186,9 +183,7 @@
             </div>
         <% } %>
     </div>
-        </form>
+</form>
-    </div>
-</div>
 
 <%- include('_footerA'); -%>
 

views/map-view.ejs

@@ -1,9 +1,6 @@
 <%- include('_header'); -%>
 
-<div class="columns is-variable is-4-mobile is-4-tablet is-block-print" id="is-site-layout">
+<nav class="breadcrumb">
-
-    <div class="column is-block-print">
-        <nav class="breadcrumb">
     <ul>
         <li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
         <li>
@@ -18,22 +15,22 @@
             </a>
         </li>
     </ul>
-        </nav>
+</nav>
 
-        <h1 class="title is-1">
+<h1 class="title is-1">
     <%= map.mapName || "(No Name)" %>
-        </h1>
+</h1>
 
-        <% if (user.userProperties.canUpdate) { %>
+<% if (user.userProperties.canUpdate) { %>
     <div class="fixed-container is-fixed-bottom-right mx-4 my-4 has-text-right is-hidden-print">
         <a class="button is-circle is-primary has-tooltip-left" data-tooltip="Update <%= configFunctions.getProperty("aliases.map") %>" href="<%= urlPrefix %>/maps/<%= map.mapId %>/edit">
             <i class="fas fa-pencil-alt" aria-hidden="true"></i>
             <span class="sr-only">Update <%= configFunctions.getProperty("aliases.map") %></span>
         </a>
     </div>
-        <% } %>
+<% } %>
 
-        <div class="panel">
+<div class="panel">
     <div class="panel-block is-block">
         <div class="columns">
             <% if (map.mapDescription && map.mapDescription !== "") { %>
@@ -61,9 +58,9 @@
             </div>
         <% } %>
     </div>
-        </div>
+</div>
 
-        <div class="columns">
+<div class="columns">
     <div class="column">
         <div class="panel">
             <h2 class="panel-heading">Geographic Location</h2>
@@ -95,9 +92,9 @@
             </div>
         </div>
     </div>
-        </div>
+</div>
 
-        <div class="panel">
+<div class="panel">
     <h2 class="panel-heading">
         Related Searches
     </h2>
@@ -108,9 +105,6 @@
             <span class="tag"><%= map.lotCount %></span>
         </a>
     </div>
-        </div>
-
-    </div>
 </div>
 
 <%- include('_footerA'); -%>

views/workOrder-edit.ejs

@@ -0,0 +1,27 @@
+<%- include('_header'); -%>
+
+<nav class="breadcrumb">
+    <ul>
+        <li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
+        <li>
+            <a href="<%= urlPrefix %>/workOrders">
+                <span class="icon is-small"><i class="fas fa-hard-hat" aria-hidden="true"></i></span>
+                <span>Work Orders</span>
+            </a>
+        </li>
+        <li>
+            <a href="<%= urlPrefix %>/workOrders/<%= workOrder.workOrderId %>">
+                Work Order #<%= workOrder.workOrderNumber || "(No Number)" %>
+            </a>
+        </li>
+        <li class="is-active">
+            <a href="#" aria-current="page">
+                Update Work Order
+            </a>
+        </li>
+    </ul>
+</nav>
+
+<%- include('_footerA'); -%>
+
+<%- include('_footerB'); -%>

views/workOrder-search.ejs

@@ -3,10 +3,12 @@
 <nav class="breadcrumb">
     <ul>
         <li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
-        <li class="is-active"><a href="#" aria-current="page">
+        <li class="is-active">
+            <a href="#" aria-current="page">
                 <span class="icon is-small"><i class="fas fa-hard-hat" aria-hidden="true"></i></span>
                 <span>Work Orders</span>
-            </a></li>
+            </a>
+        </li>
     </ul>
 </nav>
 

views/workOrder-view.ejs

@@ -1,9 +1,6 @@
 <%- include('_header'); -%>
 
-<div class="columns is-variable is-4-mobile is-4-tablet is-block-print" id="is-site-layout">
+<nav class="breadcrumb">
-
-    <div class="column is-block-print">
-        <nav class="breadcrumb">
     <ul>
         <li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
         <li>
@@ -18,21 +15,183 @@
             </a>
         </li>
     </ul>
-        </nav>
+</nav>
 
-        <h1 class="title is-1">
+<h1 class="title is-1">
     Work Order #<%= workOrder.workOrderNumber || "(No Number)" %>
-        </h1>
+</h1>
 
-        <% if (user.userProperties.canUpdate) { %>
+<% if (user.userProperties.canUpdate) { %>
     <div class="fixed-container is-fixed-bottom-right mx-4 my-4 has-text-right is-hidden-print">
         <a class="button is-circle is-primary has-tooltip-left" data-tooltip="Update Work Order" href="<%= urlPrefix %>/workOrders/<%= workOrder.workOrderId %>/edit">
             <i class="fas fa-pencil-alt" aria-hidden="true"></i>
             <span class="sr-only">Update Work Order</span>
         </a>
     </div>
-        <% } %>
+<% } %>
 
+<div class="panel">
+    <div class="panel-block is-block">
+        <div class="columns">
+            <div class="column">
+                <p class="mb-2">
+                    <strong>Work Order Type</strong><br />
+                    <%= workOrder.workOrderType %>
+                </p>
+                <p>
+                    <strong>Description</strong><br />
+                    <% if (workOrder.workOrderDescription) { %>
+                        <%= workOrder.workOrderDescription %>
+                    <% } else { %>
+                        <span class="has-text-grey">(No Description)</span>
+                    <% } %>
+                </p>
+            </div>
+            <div class="column">
+                <p class="mb-2">
+                    <strong>Open Date</strong><br />
+                    <%= workOrder.workOrderOpenDateString %>
+                </p>
+                <p>
+                    <strong>Close Date</strong><br />
+                    <% if (workOrder.workOrderCloseDate) { %>
+                        <%= workOrder.workOrderCloseDateString %>
+                    <% } else { %>
+                        <span class="has-text-grey">(No Close Date)</span>
+                    <% } %>
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="panel">
+    <h2 class="panel-heading">Related <%= configFunctions.getProperty("aliases.lots") %></h2>
+    <div class="panel-block is-block">
+        <%
+            const tabToSelect = (workOrder.workOrderLotOccupancies.length > 0 || workOrder.workOrderLots.length === 0 ? "lotOccupancies" : "lots");
+        %>
+        <div class="tabs is-boxed">
+            <ul>
+                <li class="<%= (tabToSelect === "lotOccupancies" ? "is-active" : "") %>">
+                    <a href="#relatedTab--lotOccupancies">
+                        <span><%= configFunctions.getProperty("aliases.occupancies") %></span>
+                        <span class="ml-2 tag"><%= workOrder.workOrderLotOccupancies.length %></span>
+                    </a>
+                </li>
+                <li class="<%= (tabToSelect === "lots" ? "is-active" : "") %>">
+                    <a href="#relatedTab--lots">
+                        <span><%= configFunctions.getProperty("aliases.lots") %></span>
+                        <span class="ml-2 tag"><%= workOrder.workOrderLots.length %></span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+        <div class="tab-container">
+            <div class="<%= (tabToSelect === "lotOccupancies" ? "" : "is-hidden") %>" id="relatedTab--lotOccupancies">
+                <% if (workOrder.workOrderLotOccupancies.length === 0) { %>
+                    <div class="message is-info">
+                        <p class="message-body">
+                            There are no
+                            <%= configFunctions.getProperty("aliases.lot").toLowerCase() %>
+                            <%= configFunctions.getProperty("aliases.occupancy").toLowerCase() %>
+                            records associated with this work order.
+                        </p>
+                    </div>
+                <% } else { %>
+                    <table class="table is-fullwidth is-striped is-hoverable">
+                        <thead>
+                            <tr>
+                                <th class="has-width-1"></th>
+                                <th>Occupancy Type</th>
+                                <th><%= configFunctions.getProperty("aliases.lot") %></th>
+                                <th>Start Date</th>
+                                <th>End Date</th>
+                                <th><%= configFunctions.getProperty("aliases.occupants") %></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <% for (const lotOccupancy of workOrder.workOrderLotOccupancies) { %>
+                                <% const isActive = !(lotOccupancy.occupancyEndDate && lotOccupancy.occupancyEndDate < currentDate); %>
+                                <tr>
+                                    <td class="has-text-centered">
+                                        <% if (isActive) { %>
+                                        <i class="fas fa-play" title="Current <%= configFunctions.getProperty("aliases.occupancy") %>"></i>
+                                        <% } else { %>
+                                        <i class="fas fa-stop" title="Previous <%= configFunctions.getProperty("aliases.occupancy") %>"></i>
+                                        <% } %>
+                                    </td>
+                                    <td>
+                                        <a class="has-text-weight-bold"
+                                            href="<%= urlPrefix %>/lotOccupancies/<%= lotOccupancy.lotOccupancyId %>">
+                                            <%= lotOccupancy.occupancyType %>
+                                        </a>
+                                    </td>
+                                    <td>
+                                        <% if (lotOccupancy.lotId) { %>
+                                            <%= lotOccupancy.lotName %>
+                                        <% } else { %>
+                                            <span class="has-text-grey">(No <%= configFunctions.getProperty("aliases.lot") %>)</span>
+                                        <% } %>
+                                    </td>
+                                    <td><%= lotOccupancy.occupancyStartDateString %></td>
+                                    <td>
+                                        <% if (lotOccupancy.occupancyEndDate) { %>
+                                            <%= lotOccupancy.occupancyEndDateString %>
+                                        <% } else { %>
+                                            <span class="has-text-grey">(No End Date)</span>
+                                        <% } %>
+                                    </td>
+                                    <td>
+                                        <% if (lotOccupancy.lotOccupancyOccupants.length === 0) { %>
+                                            <span class="has-text-grey">(No <%= configFunctions.getProperty("aliases.occupants") %>)</span>
+                                        <% } else { %>
+                                            <% const occupant = lotOccupancy.lotOccupancyOccupants[0]; %>
+                                            <%= occupant.occupantName %>
+                                            <%= (lotOccupancy.lotOccupancyOccupants.length > 1 ? " plus " + (lotOccupancy.lotOccupancyOccupants.length - 1) : "") %>
+                                        <% } %>
+                                    </td>
+                                </tr>
+                            <% } %>
+                        </tbody>
+                    </table>
+                <% } %>
+            </div>
+            <div class="<%= (tabToSelect === "lots" ? "" : "is-hidden") %>" id="relatedTab--lots">
+                <% if (workOrder.workOrderLots.length === 0) { %>
+                    <div class="message is-info">
+                        <p class="message-body">
+                            There are no
+                            <%= configFunctions.getProperty("aliases.lots").toLowerCase() %>
+                            records associated with this work order.
+                        </p>
+                    </div>
+                <% } else { %>
+                    <table class="table is-fullwidth is-striped is-hoverable">
+                        <thead>
+                            <tr>
+                                <th><%= configFunctions.getProperty("aliases.lot") %></th>
+                                <th><%= configFunctions.getProperty("aliases.map") %></th>
+                                <th><%= configFunctions.getProperty("aliases.lot") %> Type</th>
+                                <th>Status</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <% for (const lot of workOrder.workOrderLots) { %>
+                                <tr>
+                                    <td>
+                                        <a class="has-text-weight-bold" href="<%= urlPrefix %>/lots/<%= lot.lotId %>"><%= lot.lotName %></a>
+                                    </td>
+                                    <td><%= lot.mapName %></td>
+                                    <td><%= lot.lotType %></td>
+                                    <td><%= lot.lotStatus %></td>
+                                </tr>
+                            <% } %>
+                        </tbody>
+                    </table>
+                <% } %>
+            </div>
+        </div>
     </div>
 </div>