377 lines
14 KiB
TypeScript
377 lines
14 KiB
TypeScript
/* eslint-disable unicorn/prefer-module */
|
|
|
|
import type { cityssmGlobal } from "@cityssm/bulma-webapp-js/src/types";
|
|
import type { BulmaJS } from "@cityssm/bulma-js/types";
|
|
import type * as recordTypes from "../types/recordTypes";
|
|
|
|
declare const cityssm: cityssmGlobal;
|
|
declare const bulmaJS: BulmaJS;
|
|
|
|
(() => {
|
|
const urlPrefix = document.querySelector("main").dataset.urlPrefix;
|
|
|
|
const workOrderId = (
|
|
document.querySelector(
|
|
"#workOrderEdit--workOrderId"
|
|
) as HTMLInputElement
|
|
).value;
|
|
|
|
const isCreate = workOrderId === "";
|
|
|
|
document
|
|
.querySelector("#form--workOrderEdit")
|
|
.addEventListener("submit", (submitEvent) => {
|
|
submitEvent.preventDefault();
|
|
|
|
cityssm.postJSON(
|
|
urlPrefix +
|
|
"/workOrders/" +
|
|
(isCreate ? "doCreateWorkOrder" : "doUpdateWorkOrder"),
|
|
submitEvent.currentTarget,
|
|
(responseJSON: {
|
|
success: boolean;
|
|
workOrderId?: number;
|
|
errorMessage?: string;
|
|
}) => {
|
|
if (responseJSON.success) {
|
|
if (isCreate) {
|
|
window.location.href =
|
|
urlPrefix +
|
|
"/workOrders/" +
|
|
responseJSON.workOrderId +
|
|
"/edit";
|
|
} else {
|
|
bulmaJS.alert({
|
|
message: "Work Order Updated Successfully",
|
|
contextualColorName: "success"
|
|
});
|
|
}
|
|
} else {
|
|
bulmaJS.alert({
|
|
title: "Error Updating Work Order",
|
|
message: responseJSON.errorMessage,
|
|
contextualColorName: "danger"
|
|
});
|
|
}
|
|
}
|
|
);
|
|
});
|
|
|
|
/*
|
|
* Related Lots
|
|
*/
|
|
|
|
if (!isCreate) {
|
|
let workOrderLots: recordTypes.Lot[] = exports.workOrderLots;
|
|
delete exports.workOrderLots;
|
|
|
|
let workOrderLotOccupancies: recordTypes.LotOccupancy[] =
|
|
exports.workOrderLotOccupancies;
|
|
delete exports.workOrderLotOccupancies;
|
|
|
|
const deleteLotOccupancy = (clickEvent: Event) => {
|
|
const lotOccupancyId = (
|
|
(clickEvent.currentTarget as HTMLElement).closest(
|
|
".container--lotOccupancy"
|
|
) as HTMLElement
|
|
).dataset.lotOccupancyId;
|
|
|
|
const doDelete = () => {
|
|
cityssm.postJSON(
|
|
urlPrefix + "/workOrders/doDeleteWorkOrderLotOccupancy",
|
|
{
|
|
workOrderId,
|
|
lotOccupancyId
|
|
},
|
|
(responseJSON: {
|
|
success: boolean;
|
|
errorMessage?: string;
|
|
workOrderLotOccupancies?: recordTypes.LotOccupancy[];
|
|
}) => {
|
|
if (responseJSON.success) {
|
|
workOrderLotOccupancies =
|
|
responseJSON.workOrderLotOccupancies;
|
|
renderRelatedLotsAndOccupancies();
|
|
} else {
|
|
bulmaJS.alert({
|
|
title: "Error Deleting Relationship",
|
|
message: responseJSON.errorMessage,
|
|
contextualColorName: "danger"
|
|
});
|
|
}
|
|
}
|
|
);
|
|
};
|
|
|
|
bulmaJS.confirm({
|
|
title:
|
|
"Delete " +
|
|
exports.aliases.lot +
|
|
" " +
|
|
exports.aliases.occupancy +
|
|
" Relationship",
|
|
message:
|
|
"Are you sure you want to remove the relationship to this " +
|
|
exports.aliases.lot.toLowerCase() +
|
|
" " +
|
|
exports.aliases.occupancy.toLowerCase() +
|
|
" record from this work order? Note that the record will remain.",
|
|
contextualColorName: "warning",
|
|
okButton: {
|
|
text: "Yes, Delete Relationship",
|
|
callbackFunction: doDelete
|
|
}
|
|
});
|
|
};
|
|
|
|
const renderRelatedOccupancies = () => {
|
|
const occupanciesContainerElement = document.querySelector(
|
|
"#relatedTab--lotOccupancies"
|
|
) as HTMLElement;
|
|
|
|
document.querySelector(
|
|
".tabs a[href='#relatedTab--lotOccupancies'] .tag"
|
|
).textContent = workOrderLotOccupancies.length.toString();
|
|
|
|
if (workOrderLotOccupancies.length === 0) {
|
|
occupanciesContainerElement.innerHTML =
|
|
'<div class="message is-info">' +
|
|
'<p class="message-body">There are no ' +
|
|
exports.aliases.occupancies.toLowerCase() +
|
|
" associated with this work order.</p>" +
|
|
"</div>";
|
|
|
|
return;
|
|
}
|
|
|
|
occupanciesContainerElement.innerHTML =
|
|
'<table class="table is-fullwidth is-striped is-hoverable">' +
|
|
"<thead>" +
|
|
"<tr>" +
|
|
'<th class="has-width-1"></th>' +
|
|
("<th>" + exports.aliases.occupancy + " Type</th>") +
|
|
("<th>" + exports.aliases.lot + "</th>") +
|
|
"<th>Start Date</th>" +
|
|
"<th>End Date</th>" +
|
|
("<th>" + exports.aliases.occupants + "</th>") +
|
|
'<th class="has-width-1"></th>' +
|
|
"</tr>" +
|
|
"</thead>" +
|
|
"<tbody></tbody>" +
|
|
"</table>";
|
|
|
|
const currentDateString = cityssm.dateToString(new Date());
|
|
|
|
for (const lotOccupancy of workOrderLotOccupancies) {
|
|
const rowElement = document.createElement("tr");
|
|
rowElement.className = "container--lotOccupancy";
|
|
rowElement.dataset.lotOccupancyId =
|
|
lotOccupancy.lotOccupancyId.toString();
|
|
|
|
const isActive = !(
|
|
lotOccupancy.occupancyEndDate &&
|
|
lotOccupancy.occupancyEndDateString < currentDateString
|
|
);
|
|
|
|
rowElement.innerHTML =
|
|
'<td class="has-text-centered">' +
|
|
(isActive
|
|
? '<i class="fas fa-play" title="Current ' +
|
|
cityssm.escapeHTML(exports.aliases.occupancy) +
|
|
'"></i>'
|
|
: '<i class="fas fa-stop" title="Previous ' +
|
|
cityssm.escapeHTML(exports.aliases.occupancy) +
|
|
'"></i>') +
|
|
"</td>" +
|
|
("<td>" +
|
|
'<a class="has-text-weight-bold" href="' +
|
|
cityssm.escapeHTML(urlPrefix) +
|
|
"/lotOccupancies/" +
|
|
lotOccupancy.lotOccupancyId +
|
|
'">' +
|
|
cityssm.escapeHTML(lotOccupancy.occupancyType) +
|
|
"</a>" +
|
|
"</td>") +
|
|
("<td>" +
|
|
(lotOccupancy.lotId
|
|
? cityssm.escapeHTML(lotOccupancy.lotName)
|
|
: '<span class="has-text-grey">(No ' +
|
|
exports.aliases.lot +
|
|
")</span>") +
|
|
"</td>") +
|
|
("<td>" + lotOccupancy.occupancyStartDateString + "</td>") +
|
|
("<td>" +
|
|
(lotOccupancy.occupancyEndDate
|
|
? lotOccupancy.occupancyEndDateString
|
|
: '<span class="has-text-grey">(No End Date)</span>') +
|
|
"</td>") +
|
|
("<td>" +
|
|
(lotOccupancy.lotOccupancyOccupants.length === 0
|
|
? '<span class="has-text-grey">(No ' +
|
|
cityssm.escapeHTML(exports.aliases.occupants) +
|
|
")</span>"
|
|
: cityssm.escapeHTML(
|
|
lotOccupancy.lotOccupancyOccupants[0]
|
|
.occupantName
|
|
) +
|
|
(lotOccupancy.lotOccupancyOccupants.length > 1
|
|
? " plus " +
|
|
(lotOccupancy.lotOccupancyOccupants.length -
|
|
1)
|
|
: "")) +
|
|
"</td>") +
|
|
("<td>" +
|
|
'<button class="button is-small is-light is-danger button--deleteLotOccupancy" data-tooltip="Delete Relationship" type="button">' +
|
|
'<i class="fas fa-trash" aria-hidden="true"></i>' +
|
|
"</button>" +
|
|
"</td>");
|
|
|
|
rowElement
|
|
.querySelector(".button--deleteLotOccupancy")
|
|
.addEventListener("click", deleteLotOccupancy);
|
|
|
|
occupanciesContainerElement
|
|
.querySelector("tbody")
|
|
.append(rowElement);
|
|
}
|
|
};
|
|
|
|
const deleteLot = (clickEvent: Event) => {
|
|
const lotId = (
|
|
(clickEvent.currentTarget as HTMLElement).closest(
|
|
".container--lot"
|
|
) as HTMLElement
|
|
).dataset.lotId;
|
|
|
|
const doDelete = () => {
|
|
cityssm.postJSON(
|
|
urlPrefix + "/workOrders/doDeleteWorkOrderLot",
|
|
{
|
|
workOrderId,
|
|
lotId
|
|
},
|
|
(responseJSON: {
|
|
success: boolean;
|
|
errorMessage?: string;
|
|
workOrderLots?: recordTypes.Lot[];
|
|
}) => {
|
|
if (responseJSON.success) {
|
|
workOrderLots =
|
|
responseJSON.workOrderLots;
|
|
renderRelatedLotsAndOccupancies();
|
|
} else {
|
|
bulmaJS.alert({
|
|
title: "Error Deleting Relationship",
|
|
message: responseJSON.errorMessage,
|
|
contextualColorName: "danger"
|
|
});
|
|
}
|
|
}
|
|
);
|
|
};
|
|
|
|
bulmaJS.confirm({
|
|
title:
|
|
"Delete " +
|
|
exports.aliases.lot +
|
|
" " +
|
|
exports.aliases.occupancy +
|
|
" Relationship",
|
|
message:
|
|
"Are you sure you want to remove the relationship to this " +
|
|
exports.aliases.lot.toLowerCase() +
|
|
" " +
|
|
exports.aliases.occupancy.toLowerCase() +
|
|
" record from this work order? Note that the record will remain.",
|
|
contextualColorName: "warning",
|
|
okButton: {
|
|
text: "Yes, Delete Relationship",
|
|
callbackFunction: doDelete
|
|
}
|
|
});
|
|
};
|
|
|
|
const renderRelatedLots = () => {
|
|
const lotsContainerElement = document.querySelector(
|
|
"#relatedTab--lots"
|
|
) as HTMLElement;
|
|
|
|
document.querySelector(
|
|
".tabs a[href='#relatedTab--lots'] .tag"
|
|
).textContent = workOrderLots.length.toString();
|
|
|
|
if (workOrderLots.length === 0) {
|
|
lotsContainerElement.innerHTML =
|
|
'<div class="message is-info">' +
|
|
'<p class="message-body">There are no ' +
|
|
exports.aliases.lots.toLowerCase() +
|
|
" associated with this work order.</p>" +
|
|
"</div>";
|
|
|
|
return;
|
|
}
|
|
|
|
lotsContainerElement.innerHTML =
|
|
'<table class="table is-fullwidth is-striped is-hoverable">' +
|
|
"<thead>" +
|
|
"<tr>" +
|
|
("<th>" + exports.aliases.lot + "</th>") +
|
|
("<th>" + exports.aliases.map + "</th>") +
|
|
("<th>" + exports.aliases.lot + " Type</th>") +
|
|
"<th>Status</th>" +
|
|
'<th class="has-width-1"></th>' +
|
|
"</tr>" +
|
|
"</thead>" +
|
|
"<tbody></tbody>" +
|
|
"</table>";
|
|
|
|
for (const lot of workOrderLots) {
|
|
const rowElement = document.createElement("tr");
|
|
rowElement.className = "container--lot";
|
|
|
|
rowElement.dataset.lotId = lot.lotId.toString();
|
|
|
|
rowElement.innerHTML =
|
|
"<td>" +
|
|
'<a class="has-text-weight-bold" href="' +
|
|
cityssm.escapeHTML(urlPrefix) +
|
|
"/lots/" +
|
|
lot.lotId +
|
|
'">' +
|
|
cityssm.escapeHTML(lot.lotName) +
|
|
"</a>" +
|
|
"</td>" +
|
|
("<td>" + cityssm.escapeHTML(lot.mapName) + "</td>") +
|
|
("<td>" + cityssm.escapeHTML(lot.lotType) + "</td>") +
|
|
("<td>" + cityssm.escapeHTML(lot.lotStatus) + "</td>") +
|
|
("<td>" +
|
|
'<button class="button is-small is-light is-danger button--deleteLot" data-tooltip="Delete Relationship" type="button">' +
|
|
'<i class="fas fa-trash" aria-hidden="true"></i>' +
|
|
"</button>" +
|
|
"</td>");
|
|
|
|
rowElement
|
|
.querySelector(".button--deleteLot")
|
|
.addEventListener("click", deleteLot);
|
|
|
|
lotsContainerElement.querySelector("tbody").append(rowElement);
|
|
}
|
|
};
|
|
|
|
const renderRelatedLotsAndOccupancies = () => {
|
|
renderRelatedOccupancies();
|
|
renderRelatedLots();
|
|
};
|
|
|
|
renderRelatedLotsAndOccupancies();
|
|
}
|
|
|
|
/*
|
|
* Comments
|
|
*/
|
|
|
|
/*
|
|
* Milestones
|
|
*/
|
|
})();
|