views/ticket-view.ejs
<%- include('_header'); -%>
<div class="columns is-variable is-4-mobile is-4-tablet is-block-print" id="is-site-layout">
<%- include("_sideMenu-tickets"); -%>
<div class="column">
<nav class="breadcrumb">
<ul>
<li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
<li><a href="<%= urlPrefix %>/tickets">Parking Tickets</a></li>
<li class="is-active"><a href="#" aria-current="page">Ticket <%= ticket.ticketNumber %></a></li>
</ul>
</nav>
<div class="columns">
<div class="column">
<h1 class="title is-1">
Ticket <%= ticket.ticketNumber %>
</h1>
</div>
<div class="column is-narrow has-text-right">
<a class="button is-link" href="<%= urlPrefix %>/tickets/<%= ticket.ticketId %>/print" target="_blank">
<span class="icon"><i class="fas fa-print" aria-hidden="true"></i></span>
<span>Print</span>
</a>
</div>
</div>
<% if (ticket.recordDelete_timeMillis) { %>
<div class="message is-danger">
<div class="message-body is-clearfix">
<p class="has-text-weight-bold">This ticket was deleted by <%= ticket.recordDelete_userName %> on <%= dateTimeFns.dateToString(new Date(ticket.recordDelete_timeMillis)) %>.</p>
<% if (user.isAdmin) { %>
<button class="button is-danger is-pulled-right" id="is-restore-ticket-button" data-ticket-id="<%= ticket.ticketId %>" type="button">
<span class="icon is-small"><i class="fas fa-trash-restore" aria-hidden="true"></i></span>
<span>Restore Ticket</span>
</button>
<% } %>
</div>
</div>
<% } %>
<% if (ticket.resolvedDate) { %>
<div class="message is-success">
<div class="message-body is-clearfix">
<p class="has-text-weight-bold">This ticket was resolved <%= ticket.resolvedDateString %>.</p>
<% if (ticket.canUpdate && !ticket.recordDelete_timeMillis) { %>
<p class="mb-3">If further changes are required, you can remove the resolved status from the ticket.</p>
<button class="button is-warning is-pulled-right" id="is-unresolve-ticket-button" data-ticket-id="<%= ticket.ticketId %>" type="button">
<span class="icon is-small"><i class="fas fa-ban" aria-hidden="true"></i></span>
<span>Remove Resolved Status</span>
</button>
<% } %>
</div>
</div>
<% } %>
<% if (ticket.canUpdate && !ticket.resolvedDate && !ticket.recordDelete_timeMillis) { %>
<div class="fixed-container is-fixed-bottom-right mb-4 mr-4 has-text-right is-hidden-print">
<a class="button is-circle is-primary has-tooltip-left" data-tooltip="Edit this Ticket" href="<%= urlPrefix %>/tickets/<%=ticket.ticketId %>/edit">
<i class="fas fa-pencil-alt" aria-hidden="true"></i>
<span class="sr-only">Edit this Ticket</span>
</a>
</div>
<% } %>
<div class="columns">
<div class="column is-4">
<div class="panel">
<h2 class="panel-heading">
Parking Ticket Details
</h2>
<div class="panel-block is-block">
<strong>Issue Date/Time</strong><br />
<%= ticket.issueDateString + " " + ticket.issueTimeString %>
</div>
<div class="panel-block is-block">
<strong>Issuing Officer</strong><br />
<% if (!ticket.issuingOfficer || ticket.issuingOfficer === "") { %>
<span class="has-text-grey">(Not Recorded)</span>
<% } else { %>
<%= ticket.issuingOfficer %>
<% } %>
</div>
<div class="panel-block is-block">
<strong>Location</strong><br />
<% if ((!ticket.locationDescription || ticket.locationDescription === "") && !ticket.locationName) { %>
<span class="has-text-grey">(Not Recorded)</span>
<% } else { %>
<% if (ticket.locationName) { %>
<i class="fas fa-map-marker-alt" aria-hidden="true"></i>
<%= ticket.locationName %><br />
<% } %>
<%= ticket.locationDescription %>
<% } %>
</div>
<div class="panel-block is-block">
<strong>Parking Offence</strong><br />
<% if (!ticket.parkingOffence || ticket.parkingOffence === "") { %>
<span class="has-text-grey">(Not Recorded)</span>
<% } else { %>
<%= ticket.parkingOffence %>
<% } %>
</div>
<div class="panel-block is-block">
<div class="columns is-variable">
<div class="column">
<strong>
Related
<span class="is-nowrap">By-Law</span>
</strong><br />
<% if (!ticket.bylawNumber || ticket.bylawNumber === "") { %>
<span class="has-text-grey">(Not Recorded)</span>
<% } else { %>
<%= ticket.bylawNumber %>
<% } %>
</div>
<div class="column">
<strong>Offence Amount</strong><br />
<% if (!ticket.offenceAmount) { %>
<span class="has-text-grey">(Not Recorded)</span>
<% } else { %>
$<%= ticket.offenceAmount.toFixed(2) %>
<% } %>
</div>
</div>
</div>
<div class="panel-block is-block">
<strong>Discount Offence Amount</strong><br />
<% if (!ticket.discountOffenceAmount) { %>
<span class="has-text-grey">(Not Recorded)</span>
<% } else { %>
$<%= ticket.discountOffenceAmount.toFixed(2) %>
for
<%= ticket.discountDays %> days
<% } %>
</div>
</div>
</div>
<div class="column">
<div class="panel">
<h2 class="panel-heading">
Vehicle Details
</h2>
<div class="panel-block is-block">
<%
const licencePlateLocationObj = configFunctions.getLicencePlateLocationProperties(ticket.licencePlateCountry, ticket.licencePlateProvince);
%>
<div class="columns">
<div class="column is-narrow has-text-centered">
<div class="licence-plate" style="--color:<%= licencePlateLocationObj.licencePlateProvince.color %>;--backgroundColor:<%= licencePlateLocationObj.licencePlateProvince.backgroundColor %>">
<div class="licence-plate-province"><%= licencePlateLocationObj.licencePlateProvinceAlias %></div>
<div class="licence-plate-number">
<% if (ticket.licencePlateNumber === "") { %>
<i class="fas fa-question-circle has-opacity-2" aria-hidden="true"></i>
<% } else { %>
<%= ticket.licencePlateNumber %>
<% } %>
</div>
</div><br />
<% if (ticket.licencePlateExpiryDateString === "") { %>
<span class="is-size-7 has-text-grey">(No Expiry Date)</span>
<% } else { %>
<span class="is-size-7">
Expires<br />
<%=
(configFunctions.getConfigProperty("parkingTickets.licencePlateExpiryDate.includeDay") ?
ticket.licencePlateExpiryDateString :
ticket.licencePlateExpiryDateString.substring(0, ticket.licencePlateExpiryDateString.lastIndexOf("-")))
%>
</span>
<% } %>
</div>
<div class="column">
<p class="mb-1">
<strong>Vehicle Make/Model from Ticket</strong><br />
<% if (!ticket.vehicleMakeModel || ticket.vehicleMakeModel === "") { %>
<span class="has-text-grey">(Not Recorded)</span>
<% } else { %>
<%= ticket.vehicleMakeModel %>
<% } %>
</p>
<p>
<strong>Vehicle VIN</strong><br />
<% if (!ticket.vehicleVIN || ticket.vehicleVIN === "") { %>
<span class="has-text-grey">(Not Recorded)</span>
<% } else { %>
<%= ticket.vehicleVIN %>
<% } %>
</p>
</div>
<div class="column">
<%
if (ticket.licencePlateOwner) {
%>
<p>
<strong>
Ownership Information
</strong>
<% if (ticket.licencePlateOwner.recordDate) { %>
<span class="tag is-info">
<%= ticket.licencePlateOwner.recordDateString %>
</span>
<% } else { %>
<span class="tag is-warning">
No Record Date
</span>
<% } %>
<br />
<span data-tooltip="Primary Owner" aria-label="Primary Owner">
<i class="fas fa-fw fa-user" aria-hidden="true"></i>
<%= ticket.licencePlateOwner.ownerName1 %>
</span>
<% if (ticket.licencePlateOwner.ownerName2) { %>
<br />
<span data-tooltip="Secondary Owner" aria-label="Secondary Label">
<i class="fas fa-fw fa-user" aria-hidden="true"></i> <%= ticket.licencePlateOwner.ownerName2 %>
</span>
<% } %>
<% if (ticket.licencePlateOwner.vehicleNCIC) { %>
<br />
<span data-tooltip="Vehicle Make/NCIC from Ownership" aria-label="Vehicle Make/NCIC from Ownership">
<i class="fas fa-fw fa-car-side" aria-hidden="true"></i>
<%= ticket.licencePlateOwner.vehicleMake %>
<% if (ticket.licencePlateOwner.vehicleNCIC !== ticket.licencePlateOwner.vehicleMake) { %>
(<%= ticket.licencePlateOwner.vehicleNCIC %>)
<% } %>
</span>
<% } %>
</p>
<%
} else {
%>
<div class="message is-info is-small">
<p class="message-body">
Ownership information is not available for this licence plate.
</p>
</div>
<%
}
%>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="columns">
<div class="column">
<div class="panel">
<div class="panel-heading">
<div class="level has-text-weight-normal">
<div class="level-left">
<h2 class="has-text-weight-bold">Remarks</h2>
</div>
<div class="level-right">
<a class="button is-small" href="<%= urlPrefix %>/reports/remarks-byTicketId/?ticketId=<%= ticket.ticketId %>" download>
<span class="icon is-small"><i class="fas fa-download" aria-hidden="true"></i></span>
<span>Export</span>
</a>
</div>
</div>
</div>
<% if (ticket.remarks.length === 0) { %>
<div class="panel-block is-block">
<div class="message is-info is-small">
<p class="message-body">
There are no remarks recorded for this ticket.
</p>
</div>
</div>
<% } else { %>
<%
for (let index = 0; index < ticket.remarks.length; index += 1) {
const remarkObj = ticket.remarks[[index]];
%>
<div class="panel-block is-block">
<p class="has-newline-chars"><%= remarkObj.remark %></p>
<p class="is-size-7">
<%= remarkObj.recordUpdate_userName %>
-
<%= remarkObj.remarkDateString %>
<%= remarkObj.remarkTimeString %>
</div>
<%
}
%>
<% } %>
</div>
</div>
<div class="column">
<div class="panel">
<div class="panel-heading">
<div class="level has-text-weight-normal">
<div class="level-left">
<h2 class="has-text-weight-bold">Status</h2>
</div>
<div class="level-right">
<% if (ticket.resolvedDate) { %>
<span class="tag is-success">
<span class="icon is-small"><i class="fas fa-check" aria-hidden="true"></i></span>
<span>Resolved <%=ticket.resolvedDateString %></span>
</span>
<% } else { %>
<span class="tag is-warning">
Open
</span>
<% } %>
<a class="button is-small ml-3" href="<%= urlPrefix %>/reports/statuses-byTicketId/?ticketId=<%= ticket.ticketId %>" download>
<span class="icon is-small"><i class="fas fa-download" aria-hidden="true"></i></span>
<span>Export</span>
</a>
</div>
</div>
</div>
<%
for (let index = 0; index < ticket.statusLog.length; index += 1) {
const statusLogEntryObj = ticket.statusLog[index];
const statusObj = configFunctions.getParkingTicketStatus(statusLogEntryObj.statusKey) || {};
%>
<div class="panel-block is-block">
<div class="level mb-1">
<div class="level-left">
<strong><%= statusObj.status || statusLogEntryObj.statusKey %></strong>
</div>
<div class="level-right">
<%= statusLogEntryObj.statusDateString %>
</div>
</div>
<% if (statusLogEntryObj.statusField && statusLogEntryObj.statusField !== "") { %>
<div class="is-size-7">
<strong><%= (statusObj.statusField && statusObj.statusField.fieldLabel ? statusObj.statusField.fieldLabel + ":" : "") %></strong>
<%= statusLogEntryObj.statusField %>
</div>
<% } %>
<% if (statusLogEntryObj.statusField2 && statusLogEntryObj.statusField2 !== "") { %>
<div class="is-size-7">
<strong><%= (statusObj.statusField2 && statusObj.statusField2.fieldLabel ? statusObj.statusField2.fieldLabel + ":" : "") %></strong>
<%= statusLogEntryObj.statusField2 %>
</div>
<% } %>
<div class="has-newline-chars is-size-7"><%= statusLogEntryObj.statusNote %></div>
</div>
<%
}
%>
</div>
</div>
</div>
</div>
</div>
<%- include('_footerA'); -%>
<% if (user.canUpdate || user.isAdmin) { %>
<script src="<%= urlPrefix %>/javascripts/ticket-view.js"></script>
<% } %>
<%- include('_footerB'); -%>