views/event-edit.ejs
<%- include('_header'); -%>
<div class="columns is-variable is-4-mobile is-4-tablet is-block-print" id="is-site-layout">
<%- include("_sideMenu-events"); -%>
<div class="column is-block-print is-full-print">
<div class="columns">
<div class="column">
<nav class="breadcrumb">
<ul>
<li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
<li><a href="<%= urlPrefix %>/events">
<span class="icon is-small"><i class="fas fa-calendar" aria-hidden="true"></i></span>
<span>Lottery Events</span>
</a></li>
<li>
<a href="<%= urlPrefix %>/licences/<%= event.licenceID %>">
<% if (configFunctions.getProperty("licences.externalLicenceNumber.isPreferredID")) { %>
Licence <%= licence.externalLicenceNumber %>
<% } else { %>
Licence #<%= event.licenceID %>
<% } %>
</a>
</li>
<li><a href="<%= urlPrefix %>/events/<%= event.licenceID %>/<%= event.eventDate %>">
Event <%= event.eventDateString %>
</a></li>
<li class="is-active"><a href="#" aria-current="page">
Update
</a></li>
</ul>
</nav>
</div>
<% if (licence.events.length > 1) { %>
<div class="column is-narrow is-hidden-print">
<div class="field has-addons justify-flex-end ml-3">
<div class="control">
<label class="button is-small is-static" for="eventNav--eventDate">Switch Dates</label>
</div>
<div class="control has-icons-left">
<div class="select is-small">
<select id="eventNav--eventDate" data-licence-id="<%= licence.licenceID %>" data-is-edit="true">
<% for (let index = 0; index < licence.events.length; index += 1) { %>
<option value="<%= licence.events[index].eventDate %>" <%= (event.eventDate === licence.events[index].eventDate ? " selected" : "") %>>
<%= licence.events[index].eventDateString %>
</option>
<% } %>
</select>
</div>
<div class="icon is-left">
<i class="fas fa-calendar" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<% } %>
</div>
<div class="columns">
<div class="column is-5">
<h1 class="title is-1">
<% if (configFunctions.getProperty("licences.externalLicenceNumber.isPreferredID")) { %>
Licence <%= licence.externalLicenceNumber %>
<% } else { %>
Licence #<%= event.licenceID %>
<% } %>
<br />
</h1>
</div>
<div class="column">
<h1 class="title is-1">
Event <%= event.eventDateString %>
</h1>
</div>
</div>
<form id="form--event">
<div class="columns is-desktop">
<div class="column is-5-desktop">
<%- include('_event-view_edit-snapshot'); -%>
</div>
<div class="column">
<input id="event--licenceID" name="licenceID" type="hidden" value="<%= event.licenceID %>" />
<input id="event--eventDate" name="eventDate" type="hidden" value="<%= event.eventDate %>" />
<div class="panel">
<h2 class="panel-heading">Event Reporting</h2>
<div class="panel-block is-block">
<div class="field">
<label class="label" for="event--reportDateString">Report Date</label>
<div class="control">
<input class="input" id="event--reportDateString" name="reportDateString" type="date" value="<%= event.reportDateString %>" min="<%= licence.startDateString %>" max="<%= dateTimeFns.dateToString(new Date()) %>" />
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading">
<div class="level">
<h2 class="level-left has-text-weight-bold">Bank Information</h2>
<div class="level-right">
<button class="button is-small" id="is-bank-information-lookup-button" type="button">
<span class="icon">
<i class="fas fa-search" aria-hidden="true"></i>
</span>
<span>Lookup Past Bank Information</span>
</button>
</div>
</div>
</div>
<div class="panel-block is-block">
<div class="field">
<label class="label" for="event--bank_name">Name</label>
<div class="control">
<input class="input" id="event--bank_name" name="bank_name" type="text" maxlength="50" value="<%= event.bank_name %>" autocomplete="off" />
</div>
</div>
<div class="field">
<label class="label" for="event--bank_address">Address</label>
<div class="control">
<input class="input" id="event--bank_address" name="bank_address" type="text" maxlength="50" value="<%= event.bank_address %>" autocomplete="off" />
</div>
</div>
<div class="columns">
<div class="column">
<div class="field">
<label class="label" for="event--bank_accountNumber">Account Number</label>
<div class="control">
<input class="input" id="event--bank_accountNumber" name="bank_accountNumber" type="text" maxlength="20" value="<%= event.bank_accountNumber %>" autocomplete="off" />
</div>
</div>
</div>
<div class="column">
<div class="field">
<label class="label" for="event--bank_accountBalance">Account Balance</label>
<div class="control has-icons-left">
<input class="input has-text-right" id="event--bank_accountBalance" name="bank_accountBalance" type="number" max="1000000000" step="0.01" value="<%= (event.bank_accountBalance ? event.bank_accountBalance.toFixed(2) : "") %>" onwheel="return false;" />
<span class="icon is-left">
<i class="fas fa-dollar-sign" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel">
<h2 class="panel-heading">Event Cost Breakdown</h2>
<table class="table is-fullwidth is-striped is-hoverable" id="event--costs">
<thead>
<tr>
<% if (event.eventCosts[0].ticketType) { %>
<th>Ticket Type</th>
<% } %>
<th class="has-text-centered">Receipts</th>
<td class="has-text-centered">
<i class="fas fa-minus" aria-hidden="true"></i>
<span class="sr-only">Minus</span>
</td>
<th class="has-text-centered">Admin Costs</th>
<td class="has-text-centered">
<i class="fas fa-minus" aria-hidden="true"></i>
<span class="sr-only">Minus</span>
</td>
<th class="has-text-centered">Prizes Awarded</th>
<td class="has-text-centered">
<i class="fas fa-equals" aria-hidden="true"></i>
<span class="sr-only">Equals</span>
</td>
<th class="has-text-centered">Net Proceeds</th>
</tr>
</thead>
<tbody>
<%
let ticketTypesCSV = "";
%>
<% for (const eventCost of event.eventCosts) { %>
<%
const ticketType = (eventCost.ticketType || "");
ticketTypesCSV += "," + ticketType;
%>
<tr data-ticket-type="<%= ticketType %>">
<% if (eventCost.ticketType) { %>
<th class="is-vcentered"><%= eventCost.ticketType %></th>
<% } %>
<td>
<div class="field">
<div class="control has-icons-left">
<input class="input has-text-right" name="costs_receipts-<%= ticketType %>" data-cost="receipts" type="number" value="<%= eventCost.costs_receipts %>" min="0" max="99999999.99" step="0.01" aria-label="Receipts" onwheel="return false" />
<span class="icon is-small is-left">
<i class="fas fa-dollar-sign" aria-hidden="true"></i>
</span>
</div>
</div>
</td>
<td class="has-text-centered is-vcentered has-text-grey">
<i class="fas fa-minus" aria-hidden="true"></i>
<span class="sr-only">Minus</span>
</td>
<td>
<div class="field">
<div class="control has-icons-left">
<input class="input has-text-right" name="costs_admin-<%= ticketType %>" data-cost="admin" type="number" value="<%= eventCost.costs_admin %>" min="0" max="99999999.99" step="0.01" aria-label="Admin Costs" onwheel="return false" />
<span class="icon is-small is-left">
<i class="fas fa-dollar-sign" aria-hidden="true"></i>
</span>
</div>
</div>
</td>
<td class="has-text-centered is-vcentered has-text-grey">
<i class="fas fa-minus" aria-hidden="true"></i>
<span class="sr-only">Minus</span>
</td>
<td>
<div class="field">
<div class="control has-icons-left">
<input class="input has-text-right" name="costs_prizesAwarded-<%= ticketType %>" data-cost="prizesAwarded" type="number" value="<%= eventCost.costs_prizesAwarded %>" min="0" max="99999999.99" step="0.01" aria-label="Prizes Awarded" onwheel="return false" />
<span class="icon is-small is-left">
<i class="fas fa-dollar-sign" aria-hidden="true"></i>
</span>
</div>
</div>
</td>
<td class="has-text-centered is-vcentered has-text-grey">
<i class="fas fa-equals" aria-hidden="true"></i>
<span class="sr-only">Equals</span>
</td>
<td class="is-vcentered has-text-right" id="event--costs_netProceeds-<%= ticketType %>">
<%
const costs_netProceeds = (eventCost.costs_receipts || 0) - (eventCost.costs_admin || 0) - (eventCost.costs_prizesAwarded || 0);
%>
$<%= costs_netProceeds.toFixed(2) %>
</td>
</tr>
<% } %>
</tbody>
<tfoot>
<% if (event.eventCosts[0].ticketType) { %>
<th></th>
<% } %>
<th class="has-text-right" id="event--costs_receiptsSum"></th>
<td class="has-text-centered is-vcentered has-text-grey">
<i class="fas fa-minus" aria-hidden="true"></i>
<span class="sr-only">Minus</span>
</td>
<th class="has-text-right" id="event--costs_adminSum"></th>
<td class="has-text-centered is-vcentered has-text-grey">
<i class="fas fa-minus" aria-hidden="true"></i>
<span class="sr-only">Minus</span>
</td>
<th class="has-text-right" id="event--costs_prizesAwardedSum"></th>
<td class="has-text-centered is-vcentered has-text-grey">
<i class="fas fa-equals" aria-hidden="true"></i>
<span class="sr-only">Equals</span>
</td>
<th class="has-text-right" id="event--costs_netProceedsSum"></th>
</tfoot>
</table>
<input name="ticketTypes" type="hidden" value="<%= (ticketTypesCSV.charAt(0) === "," ? ticketTypesCSV.substring(1) : ticketTypesCSV) %>" />
</div>
<div class="columns is-desktop">
<div class="column is-5-desktop">
<div class="panel">
<h2 class="panel-heading">
Donation
</h2>
<div class="panel-block is-block">
<div class="field">
<label class="label" for="event--costs_amountDonated">Amount Donated</label>
<div class="control has-icons-left">
<input class="input has-text-right" id="event--costs_amountDonated" name="costs_amountDonated" type="number" value="<%= event.costs_amountDonated %>" min="0" max="99999999.99" step="0.01" />
<span class="icon is-small is-left">
<i class="fas fa-dollar-sign" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
</div>
<%- include('_event-view_edit-licenceFields'); -%>
</div>
<div class="column">
<%
const licenceType = configFunctions.getLicenceType(licence.licenceTypeKey);
%>
<div class="panel">
<h2 class="panel-heading">
Event Fields
</h2>
<%
const eventFields = licenceType.eventFields || [];
let fieldKeys = "";
for (let fieldIndex = 0; fieldIndex < eventFields.length; fieldIndex += 1) {
const eventField = eventFields[fieldIndex];
const inputName = licenceType.licenceTypeKey + "-" + eventField.fieldKey;
let fieldValue = "";
for (let savedFieldIndex = 0; savedFieldIndex < event.eventFields.length; savedFieldIndex += 1) {
if (event.eventFields[savedFieldIndex].fieldKey === inputName) {
event.eventFields[savedFieldIndex].isDisplayed = true;
fieldValue = event.eventFields[savedFieldIndex].fieldValue;
break;
}
}
if (!eventField.isActive && fieldValue === "") {
continue;
}
fieldKeys += "," + inputName;
const inputAttributes = eventField.inputAttributes || {};
if (!inputAttributes.type) {
inputAttributes.type = "text";
} else if (inputAttributes.type === "number") {
inputAttributes.onwheel = "return false";
}
let inputAttributesString = "";
for (let attributeName in inputAttributes) {
inputAttributesString += " " + attributeName + "=\"" + inputAttributes[attributeName] + "\"";
}
%>
<div class="panel-block is-block">
<div class="field">
<label class="label" for="event--<%= inputName %>"><%= eventField.fieldLabel || eventField.fieldKey %></label>
<div class="control">
<input class="input" id="event--<%= inputName %>" name="<%= inputName %>" value="<%= fieldValue %>" <%- inputAttributesString %> />
</div>
</div>
</div>
<%
}
for (let savedFieldIndex = 0; savedFieldIndex < event.eventFields.length; savedFieldIndex += 1) {
const savedField = event.eventFields[savedFieldIndex];
if (!savedField.isDisplayed) {
fieldKeys += "," + savedField.fieldKey;
%>
<div class="panel-block is-block">
<div class="field">
<label class="label" for="event--<%= savedField.fieldKey %>"><%= savedField.fieldKey %></label>
<div class="control">
<input class="input" id=event--<%= savedField.fieldKey %>" name="<%= savedField.fieldKey %>" type="text" value="<%= savedField.fieldValue %>" />
</div>
</div>
</div>
<%
}
}
%>
</div>
<input name="fieldKeys" type="hidden" value="<%= (fieldKeys.charAt(0) === "," ? fieldKeys.substring(1) : fieldKeys) %>" />
<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" id="container--form-message"></div>
<div class="level-right">
<div class="buttons">
<button class="button is-success" type="submit">
<span class="icon">
<i class="fas fa-save" aria-hidden="true"></i>
</span>
<span>Update Event</span>
</button>
<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-event-button" href="#">
<span class="icon"><i class="fas fa-trash has-text-danger"></i></span>
<span>Delete Event</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<%- include('_footerA'); -%>
<% if (licence.events.length > 1) { %>
<script src="<%= urlPrefix %>/javascripts/event-viewEdit.min.js"></script>
<% } %>
<script src="<%= urlPrefix %>/javascripts/event-edit.min.js"></script>
<%- include('_footerB'); -%>