views/ticket-reconcile.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">Ownership Reconciliation</a></li>
</ul>
</nav>
<h1 class="title is-1">
Ownership Reconciliation
</h1>
<h2 class="title is-4">
<a class="is-toggle-hidden-link" href="#toggle-hidden--errorLog">
<i class="fas fa-caret-down" aria-hidden="true"></i>
Lookup Errors
</a>
<span class="tag is-rounded is-medium"><%= errorLog.length %></span>
</h2>
<div
class="mb-4 <%= (errorLog.length === 0 ? "is-hidden" : "") %>"
id="toggle-hidden--errorLog">
<% if (errorLog.length === 0) { %>
<div class="message is-info">
<div class="message-body">
<p>There are no unacknowledged lookup errors.</p>
</div>
</div>
<% } else { %>
<table class="table is-fullwidth is-striped is-hoverable">
<thead>
<tr>
<th class="has-border-right-width-2">Licence Plate</th>
<th class="has-border-right-width-2" colspan="3">Affected Parking Ticket</th>
<th class="has-border-right-width-2">Error Message</th>
<th class="has-width-100">Action</th>
</tr>
</thead>
<tbody>
<%
for (let index = 0; index < errorLog.length; index += 1) {
const logEntry = errorLog[index];
%>
<tr>
<td class="has-border-right-width-2 licence-plate-number">
<%= logEntry.licencePlateNumber %>
</td>
<td>
<a href="<%= urlPrefix %>/tickets/<%= logEntry.ticketId %>" target="_blank">
<%= logEntry.ticketNumber %>
</a>
</td>
<td><%= logEntry.issueDateString %></td>
<td class="has-border-right-width-2"><%= logEntry.vehicleMakeModel %></td>
<td class="has-border-right-width-2">
<%= logEntry.errorMessage %><br />
<small><%= logEntry.errorCode %></small>
</td>
<td>
<button class="button is-warning is-acknowledge-error-button"
data-batch-id="<%= logEntry.batchId %>"
data-log-index="<%= logEntry.logIndex %>"
type="button">
<span class="icon is-small">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
<span>Acknowledge</span>
</button>
</td>
</tr>
<%
}
%>
</tbody>
</table>
<% } %>
</div>
<h2 class="title is-4">
<a class="is-toggle-hidden-link" href="#toggle-hidden--reconcile">
<i class="fas fa-caret-down" aria-hidden="true"></i>
Records to Reconcile
</a>
<span class="tag is-rounded is-medium"><%= records.length %></span>
</h2>
<div
<%- (errorLog.length !== 0 ? "class=\"is-hidden\"" : "") %>
id="toggle-hidden--reconcile">
<% if (records.length === 0) { %>
<div class="message is-info">
<div class="message-body">
<p class="has-text-weight-bold">There are no parking tickets that can be reconciled with ownership information at this time.</p>
<p>Check back after recording additional parking tickets or after importing ownership records.</p>
</div>
</div>
<% } else { %>
<div class="message is-info">
<div class="message-body">
<p class="has-text-weight-bold">
There <%= (records.length === 1 ? "is one parking ticket" : "are " + records.length + " parking tickets") %>
that can be reconciled at this time.
</p>
<p class="has-text-right">
<button class="button is-success" id="is-quick-reconcile-matches-button" type="button">
<span class="icon"><i class="fas fa-check" aria-hidden="true"></i></span>
<span>Quick Reconcile Matches</span>
</button>
</p>
</div>
</div>
<table class="table is-fullwidth is-striped is-hoverable">
<thead>
<tr>
<th class="has-border-right-width-2" rowspan="2">Licence Plate</th>
<th class="has-border-right-width-2" colspan="3">Unresolved Parking Ticket</th>
<th class="has-border-right-width-2" colspan="2">Ownership</th>
<th class="has-border-right-width-2" rowspan="2">
<span class="has-cursor-help" data-tooltip="Lookup Date - Issue Date">Record Date Difference</span>
</th>
<th class="has-width-150" rowspan="2">Options</th>
</tr>
<tr>
<th>Ticket Number</th>
<th>Vehicle Make</th>
<th class="has-border-right-width-2">Plate Expiry Date</th>
<th>Vehicle Make</th>
<th class="has-border-right-width-2">Plate Expiry Date</th>
</tr>
</thead>
<tbody>
<%
for (let index = 0; index < records.length; index += 1) {
const record = records[index];
const locationProperties = configFunctions.getLicencePlateLocationProperties(record.licencePlateCountry, record.licencePlateProvince);
%>
<tr
data-licence-plate-country="<%= record.licencePlateCountry %>"
data-licence-plate-province="<%= record.licencePlateProvince %>"
data-licence-plate-number="<%= record.licencePlateNumber %>"
data-ticket-id="<%= record.ticket_ticketId %>"
data-ticket-vehicle="<%= record.ticket_vehicleMakeModel %>"
data-ticket-expiry-date="<%= record.ticket_licencePlateExpiryDateString %>"
data-owner-vehicle="<%= record.owner_vehicleMake %>"
data-owner-expiry-date="<%= record.owner_licencePlateExpiryDateString %>"
data-record-date="<%= record.owner_recordDate %>"
<%= (record.isVehicleMakeMatch ? " data-is-vehicle-make-match": "") %>
<%= (record.isLicencePlateExpiryDateMatch ? " data-is-licence-plate-expiry-date-match": "") %>>
<td class="has-border-right-width-2">
<div class="licence-plate is-fullwidth" style="--color:<%= locationProperties.licencePlateProvince.color %>;--backgroundColor:<%= locationProperties.licencePlateProvince.backgroundColor %>">
<div class="licence-plate-province">
<%= locationProperties.licencePlateProvinceAlias %>
</div>
<div class="licence-plate-number">
<%= record.licencePlateNumber %>
</div>
</div>
</td>
<td>
<a href="<%= urlPrefix %>/tickets/<%= record.ticket_ticketId %>" target="_blank">
<%= record.ticket_ticketNumber %>
</a><br />
<small class="has-cursor-help has-tooltip-right" data-tooltip="Ticket Issue Date" aria-label="Ticket Issue Date"><%= record.ticket_issueDateString %></small>
</td>
<td><%= record.ticket_vehicleMakeModel %></td>
<td class="has-border-right-width-2">
<% if (record.ticket_licencePlateExpiryDateString === "") { %>
<span class="has-text-grey">(Not Set)</span>
<% } else { %>
<span class="has-cursor-help" data-tooltip="Plate Expiry Date on Ticket"><%= record.ticket_licencePlateExpiryDateString %></span>
<% } %>
</td>
<td>
<%= record.owner_vehicleMake %>
<%-
(record.isVehicleMakeMatch ?
"<span class=\"has-cursor-help\" data-tooltip=\"Vehicle Make Match\"><i class=\"fas fa-check-circle has-text-grey-light\" aria-hidden=\"true\"></i></span>" :
"")
%>
<% if (record.owner_vehicleNCIC !== record.owner_vehicleMake) { %>
<br />
<small><%= record.owner_vehicleNCIC %></small>
<% } %>
</td>
<td class="has-border-right-width-2">
<% if (record.owner_licencePlateExpiryDateString === "") { %>
<span class="has-text-grey">(Not Set)</span>
<% } else { %>
<%= record.owner_licencePlateExpiryDateString %>
<%-
(record.isLicencePlateExpiryDateMatch ?
"<span class=\"has-cursor-help\" data-tooltip=\"Expiry Date Match\"><i class=\"fas fa-check-circle has-text-grey-light\" aria-hidden=\"true\"></i></span>" :
"")
%>
<% } %>
</td>
<td class="has-border-right-width-2">
<% if (record.dateDifference === 0) { %>
Same Day
<% } else { %>
<span class="has-cursor-help" data-tooltip="Lookup Date - Issue Date">
<%= record.dateDifference %>
<%= (record.dateDifference === 1 ? "Day" : "Days") %>
</span>
<% } %>
</td>
<td class="is-nowrap is-options-cell" id="is-options-cell--<%= record.ticket_ticketId %>">
<button class="button is-success is-ownership-match-button" type="button">
<span class="icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
<span>Match</span>
</button>
<button class="button is-danger is-ownership-error-button" type="button">
<i class="fas fa-times" aria-hidden="true"></i>
<span class="sr-only">Error</span>
</button>
</td>
</tr>
<%
}
%>
</tbody>
</table>
<% } %>
</div>
</div>
</div>
<%- include('_footerA'); -%>
<script src="<%= urlPrefix %>/javascripts/ticket-reconcile.js"></script>
<%- include('_footerB'); -%>