views/ticket-edit.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>
<% if (isCreate) { %>
<li class="is-active"><a href="#" aria-current="page">New Ticket</a></li>
<% } else { %>
<li><a href="<%= urlPrefix %>/tickets/<%= ticket.ticketId %>">Ticket <%=ticket.ticketNumber %></a></li>
<li class="is-active"><a href="#" aria-current="page">Edit</a></li>
<% } %>
</ul>
</nav>
<% if (isCreate) { %>
<h1 class="title is-1">
Create a New Ticket
</h1>
<% } else { %>
<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>
<% } %>
<form id="form--ticket">
<input id="ticket--ticketId" name="ticketId" type="hidden" value="<%=ticket.ticketId %>" />
<div class="panel">
<h2 class="panel-heading">
Parking Ticket Details
</h2>
<div class="panel-block is-block">
<div class="columns is-multiline is-desktop">
<div class="column is-6-widescreen is-12-desktop">
<label class="label" for="ticket--ticketNumber">
<%= configFunctions.getConfigProperty("parkingTickets.ticketNumber.fieldLabel") %>
</label>
<div class="field <%= (isCreate ? "" : "has-addons") %>">
<div class="control is-expanded">
<input
class="input <%= (isCreate ? "" : "is-readonly") %>"
id="ticket--ticketNumber" name="ticketNumber" type="text"
value="<%= ticket.ticketNumber %>"
pattern="<%= configFunctions.getConfigProperty("parkingTickets.ticketNumber.pattern").source %>"
maxlength="10"
autocomplete="off"
<%= (isCreate ? "autofocus" : "readonly") %>
required />
</div>
<% if (!isCreate) { %>
<div class="control">
<button class="button is-unlock-field-button"
data-unlock="input" data-tooltip="Unlock Ticket Number Field"
type="button">
<span class="sr-only">Unlock Field</span>
<i class="fas fa-unlock" aria-hidden="false"></i>
</button>
</div>
<% } %>
</div>
<div class="columns is-variable">
<div class="column">
<div class="field">
<label class="label" for="ticket--issueDateString">Issue Date</label>
<div class="control">
<input class="input" id="ticket--issueDateString" name="issueDateString" type="date" value="<%= ticket.issueDateString %>" max="<%= issueDateMaxString %>" required />
</div>
</div>
</div>
<div class="column">
<div class="field">
<label class="label" for="ticket--issueTimeString">Issue Time</label>
<div class="control">
<input class="input" id="ticket--issueTimeString" name="issueTimeString" type="time" value="<%= ticket.issueTimeString %>" required />
</div>
</div>
</div>
</div>
<div class="field">
<label class="label" for="ticket--issuingOfficer">Issuing Officer</label>
<div class="control">
<input class="input" id="ticket--issuingOfficer" name="issuingOfficer" type="text" value="<%= ticket.issuingOfficer %>" maxlength="30" required />
</div>
</div>
</div>
<div class="column is-6-widescreen is-12-desktop">
<label class="label" for="ticket--locationName">Location</label>
<input id="ticket--locationKey" name="locationKey" type="hidden" value="<%= ticket.locationKey %>" />
<div class="field has-addons">
<div class="control is-expanded">
<input class="input is-readonly" id="ticket--locationName" name="locationName" type="text" value="<%= (ticket.location || {}).locationName %>" readonly />
</div>
<div class="control">
<button class="button" id="is-location-lookup-button" data-cy="select-location" data-tooltip="Lookup Location" type="button" aria-label="Lookup Location">
<i class="fas fa-fw fa-search" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="field">
<label class="label" for="ticket--locationDescription">Location Description</label>
<textarea class="textarea" id="ticket--locationDescription" name="locationDescription"><%= ticket.locationDescription %></textarea>
</div>
</div>
</div>
<hr class="is-hidden-mobile is-hidden-tablet-only" />
<div class="columns">
<div class="column">
<label class="label" for="ticket--bylawNumber">By-Law Number</label>
<div class="field has-addons">
<div class="control is-expanded">
<input class="input is-readonly" id="ticket--bylawNumber" name="bylawNumber" type="text" value="<%= ticket.bylawNumber %>" maxlength="20" readonly required />
</div>
<div class="control">
<button class="button" id="is-bylaw-lookup-button" data-cy="select-bylaw" data-tooltip="Lookup By-Law" type="button" aria-label="Lookup By-Law">
<i class="fas fa-fw fa-search" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="field">
<label class="label" for="ticket--parkingOffence">Parking Offence</label>
<div class="control">
<textarea class="textarea" id="ticket--parkingOffence" name="parkingOffence"><%= ticket.parkingOffence %></textarea>
</div>
</div>
</div>
<div class="column">
<label class="label" for="ticket--offenceAmount">Offence Amount</label>
<div class="field has-addons">
<div class="control is-expanded has-icons-left">
<input class="input is-readonly has-text-right" id="ticket--offenceAmount" name="offenceAmount" type="number" value="<%= ticket.offenceAmount %>" min="0" step="0.01" required readonly onwheel="return false;" />
<span class="icon is-small is-left">
<i class="fas fa-dollar-sign" aria-hidden="true"></i>
</span>
</div>
<div class="control">
<button class="button is-unlock-field-button has-tooltip-left" data-unlock="input" data-tooltip="Unlock Offence Amount Field" type="button">
<span class="sr-only">Unlock Field</span>
<i class="fas fa-fw fa-unlock" aria-hidden="false"></i>
</button>
</div>
</div>
<label class="label" for="ticket--discountOffenceAmount">Discount Offence Amount</label>
<div class="field has-addons">
<div class="control is-expanded has-icons-left">
<input class="input is-readonly has-text-right" id="ticket--discountOffenceAmount" name="discountOffenceAmount" type="number" value="<%= ticket.discountOffenceAmount %>" min="0" step="0.01" required readonly onwheel="return false;" />
<span class="icon is-small is-left">
<i class="fas fa-dollar-sign" aria-hidden="true"></i>
</span>
</div>
<div class="control">
<button class="button is-unlock-field-button has-tooltip-left" data-unlock="input" data-tooltip="Unlock Discount Offence Amount Field" type="button">
<span class="sr-only">Unlock Field</span>
<i class="fas fa-fw fa-unlock" aria-hidden="false"></i>
</button>
</div>
</div>
<label class="label" for="ticket--discountDays">Discount Days</label>
<div class="field has-addons">
<div class="control is-expanded">
<input class="input is-readonly has-text-right" id="ticket--discountDays" name="discountDays" type="number" value="<%= ticket.discountDays %>" min="0" step="1" required readonly onwheel="return false;" />
</div>
<div class="control">
<button class="button is-unlock-field-button has-tooltip-left" data-unlock="input" data-tooltip="Unlock Discount Days Field" type="button">
<span class="sr-only">Unlock Field</span>
<i class="fas fa-fw fa-unlock" aria-hidden="false"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel">
<h2 class="panel-heading">
Vehicle Details
</h2>
<div class="panel-block is-block">
<div class="columns is-multiline is-desktop">
<div class="column is-6-desktop is-3-widescreen">
<div class="field">
<label class="label" for="ticket--licencePlateCountry">Licence Plate Country</label>
<div class="control">
<input class="input" id="ticket--licencePlateCountry" name="licencePlateCountry" type="text" value="<%= ticket.licencePlateCountry %>"
maxlength="2" list="datalist--licencePlateCountry" autocomplete="off"
<%= (ticket.licencePlateIsMissing ? "" : " required") %> />
<datalist id="datalist--licencePlateCountry">
<%
const licencePlateCountries = Object.values(configFunctions.getConfigProperty("licencePlateProvinces"));
for (let countryObj of licencePlateCountries) {
%>
<option value="<%= countryObj.countryShortName %>"></option>
<%
}
%>
</datalist>
</div>
</div>
</div>
<div class="column is-6-desktop is-3-widescreen">
<div class="field">
<label class="label" for="ticket--licencePlateProvince">Province</label>
<div class="control">
<input class="input" id="ticket--licencePlateProvince" name="licencePlateProvince" type="text" value="<%= ticket.licencePlateProvince %>"
maxlength="5" list="datalist--licencePlateProvince" autocomplete="off"
<%= (ticket.licencePlateIsMissing ? "" : " required") %> />
<datalist id="datalist--licencePlateProvince"></datalist>
</div>
</div>
</div>
<div class="column">
<div class="field">
<label class="label" for="ticket--licencePlateNumber">Plate Number</label>
<div class="control">
<input class="input" id="ticket--licencePlateNumber" name="licencePlateNumber" type="text" value="<%= ticket.licencePlateNumber %>"
maxlength="15" pattern="^[A-Z0-9 ]+$" autocomplete="off"
<%= (ticket.licencePlateIsMissing ? "" : " required") %> />
</div>
</div>
</div>
</div>
<div class="columns is-multiline is-desktop">
<% if (configFunctions.getConfigProperty("parkingTickets.licencePlateExpiryDate.includeDay")) { %>
<div class="columnn">
<div class="field">
<label class="label" for="ticket--licencePlateExpiryDateString">Plate Expiry Date</label>
<div class="control">
<input class="input" id="ticket--licencePlateExpiryDateString" name="licencePlateExpiryDateString" type="date" value="<%= ticket.licencePlateExpiryDateString %>" />
</div>
</div>
</div>
<% } else { %>
<div class="column">
<div class="field">
<label class="label" for="ticket--licencePlateExpiryYear">Plate Expiry Year</label>
<div class="control">
<input class="input" id="ticket--licencePlateExpiryYear" name="licencePlateExpiryYear" type="number" value="<%= ticket.licencePlateExpiryYear %>" placeholder="yyyy" min="1900" step="1" onwheel="return false" />
</div>
</div>
</div>
<div class="column">
<div class="field">
<label class="label" for="ticket--licencePlateExpiryMonth">Expiry Month</label>
<div class="control">
<div class="select is-fullwidth">
<select id="ticket--licencePlateExpiryMonth" name="licencePlateExpiryMonth">
<option value="">(No Month Select)</option>
<% for (let monthIndex = 0; monthIndex < dateTimeFns.months.length; monthIndex += 1) { %>
<option
value="<%= (monthIndex + 1) %>"
<%= (ticket.licencePlateExpiryMonth === (monthIndex + 1) ? " selected" : "") %>>
<%= ("0" + (monthIndex + 1).toString()).slice(-2) %>
-
<%= dateTimeFns.months[monthIndex] %>
</option>
<% } %>
</select>
</div>
</div>
</div>
</div>
<% } %>
<div class="column align-self-flex-end">
<div class="facheck facheck-fas-checked has-checked-warning pb-3">
<input id="ticket--licencePlateIsMissing" name="licencePlateIsMissing" type="checkbox" <%= (ticket.licencePlateIsMissing ? " checked" : "") %> />
<label for="ticket--licencePlateIsMissing">
Licence Plate Unavailable
</label>
</div>
</div>
</div>
<div class="columns">
<div class="column">
<div class="field">
<label class="label" for="ticket--vehicleMakeModel">Vehicle Make/Model from Ticket</label>
<div class="control">
<input class="input" id="ticket--vehicleMakeModel" name="vehicleMakeModel" type="text" value="<%= ticket.vehicleMakeModel %>" maxlength="30" list="datalist--vehicleMakeModel" />
<datalist id="datalist--vehicleMakeModel">
<% for (let makeIndex = 0; makeIndex < vehicleMakeModelDatalist.length; makeIndex += 1) { %>
<option value="<%= vehicleMakeModelDatalist[makeIndex] %>"></option>
<% } %>
</datalist>
</div>
</div>
</div>
<div class="column">
<div class="field">
<label class="label" for="ticket--vehicleVIN">Vehicle VIN</label>
<div class="control">
<input class="input" id="ticket--vehicleVIN" name="vehicleVIN" type="text" value="<%= ticket.vehicleVIN %>" maxlength="20" autocomplete="off" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fixed-container is-fixed-bottom px-3 py-3 has-background-grey-light is-hidden-print">
<div class="level">
<div class="level-left">
<span id="container--form-message"></span>
</div>
<div class="level-right">
<div class="buttons justify-flex-end">
<% if (isCreate) { %>
<a class="button" href="<%= urlPrefix %>/tickets">
Cancel
</a>
<% } %>
<button class="button is-success" type="submit">
<span class="icon">
<i class="fas fa-save" aria-hidden="true"></i>
</span>
<span><%= (isCreate ? "Create New Ticket and Continue" : "Update Ticket") %></span>
</button>
<% if (!isCreate) { %>
<div class="dropdown is-right is-up">
<div class="dropdown-trigger">
<button class="button" type="button" aria-haspopup="true">
<span>Options</span>
<span class="icon">
<i class="fas fa-angle-up" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" role="menu">
<div class="dropdown-content">
<a class="dropdown-item" id="is-delete-ticket-button" href="#">
<span class="icon"><i class="fas fa-trash has-text-danger" aria-hidden="true"></i></span>
<span>Delete Ticket</span>
</a>
</div>
</div>
</div>
<% } %>
</div>
</div>
</div>
</div>
</form>
<% if (!isCreate) { %>
<div class="columns is-desktop is-multiline">
<div class="column is-6-widescreen is-12-desktop">
<div class="panel" id="is-remark-panel">
<div class="panel-heading">
<div class="level">
<h2 class="level-left has-text-weight-bold">Remarks</h2>
<div class="level-right">
<button class="button is-small" id="is-add-remark-button" data-cy="add-remark" type="button">
<span class="icon"><i class="fas fa-plus" aria-hidden="true"></i></span>
<span>Add Remark</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="column is-6-widescreen is-12-desktop">
<div class="panel" id="is-status-panel">
<div class="panel-heading">
<div class="level">
<h2 class="level-left has-text-weight-bold">Status</h2>
<div class="level-right">
<div class="buttons">
<button class="button is-small" id="is-add-paid-status-button" data-cy="add-status-paid" type="button">
<span class="icon"><i class="fas fa-plus" aria-hidden="true"></i></span>
<span>Pay Ticket</span>
</button>
<button class="button is-small" id="is-add-status-button" data-cy="add-status" type="button">
<span class="icon"><i class="fas fa-plus" aria-hidden="true"></i></span>
<span>Add Status</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<% } %>
</div>
</div>
<%- include('_footerA'); -%>
<% if (!isCreate) { %>
<script>
exports.ticketRemarks = <%- JSON.stringify(ticket.remarks) %>;
exports.ticketStatusLog = <%- JSON.stringify(ticket.statusLog) %>;
</script>
<% } %>
<script src="<%= urlPrefix %>/javascripts/ticket-edit.js"></script>
<% if (!isCreate) { %>
<script src="<%= urlPrefix %>/javascripts/ticket-remarks-edit.js"></script>
<script src="<%= urlPrefix %>/javascripts/ticket-statuses-edit.js"></script>
<% } %>
<%- include('_footerB'); -%>