sunrise-cms/views/map-edit.ejs

321 lines
15 KiB
Plaintext

<%- include('_header'); -%>
<nav class="breadcrumb">
<ul>
<li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
<li>
<a href="<%= urlPrefix %>/maps">
<span class="icon is-small"><i class="far fa-map" aria-hidden="true"></i></span>
<span><%= configFunctions.getProperty("aliases.maps") %></span>
</a>
</li>
<% if (!isCreate) { %>
<li>
<a href="<%= urlPrefix %>/maps/<%= map.mapId %>" accesskey="v">
<%= map.mapName || "(No Name)" %>
</a>
</li>
<% } %>
<li class="is-active">
<a href="#" aria-current="page">
<% if (isCreate) { %>
Create a New <%= configFunctions.getProperty("aliases.map") %>
<% } else { %>
Update
<% } %>
</a>
</li>
</ul>
</nav>
<h1 class="title is-1">
<% if (isCreate) { %>
Create a New <%= configFunctions.getProperty("aliases.map") %>
<% } else { %>
Update <%= configFunctions.getProperty("aliases.map") %>
<% } %>
</h1>
<div class="level is-fixed-bottom is-mobile has-background-white has-shadow is-hidden-print">
<div class="level-left">
<% if (!isCreate) { %>
<span class="level-item has-text-weight-bold">
<%= map.mapName || "(No Name)" %>
</span>
<% } %>
</div>
<div class="level-right">
<% if (!isCreate) { %>
<div class="level-item">
<div class="dropdown is-right is-up">
<div class="dropdown-trigger">
<button class="button" type="button">
<span>More Options</span>
<span class="icon is-small">
<i class="fas fa-angle-up" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu">
<div class="dropdown-content">
<a class="dropdown-item" id="button--deleteMap" href="#">
<span class="icon is-small"><i class="fas fa-trash has-text-danger" aria-hidden="true"></i></span>
<span>Delete <%= configFunctions.getProperty("aliases.map") %></span>
</a>
</div>
</div>
</div>
</div>
<% } %>
<div class="level-item">
<button class="button is-primary" type="submit" form="form--map">
<span class="icon is-small"><i class="fas fa-save" aria-hidden="true"></i></span>
<span>
<%= (isCreate ? "Create": "Update") %>
<%= configFunctions.getProperty("aliases.map") %>
</span>
</button>
</div>
</div>
</div>
<form id="form--map">
<input id="map--mapId" name="mapId" type="hidden" value="<%= map.mapId %>" />
<div class="columns">
<div class="column">
<div class="panel">
<div class="panel-block is-block">
<div class="field">
<label class="label" for="map--mapName"><%= configFunctions.getProperty("aliases.map") %> Name</label>
<div class="control">
<input class="input" id="map--mapName" name="mapName" type="text"
value="<%= map.mapName %>" maxlength="200" required
accesskey="f"
<%= (isCreate ? " autofocus" : "") %> />
</div>
</div>
<div class="field">
<label class="label" for="map--mapDescription"><%= configFunctions.getProperty("aliases.map") %> Description</label>
<div class="control">
<textarea class="textarea" id="map--mapDescription" name="mapDescription"><%= map.mapDescription %></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="column">
<div class="panel">
<h2 class="panel-heading">Address</h2>
<div class="panel-block is-block">
<div class="field">
<label class="label" for="map--mapAddress1">Address</label>
<div class="control">
<input class="input" id="map--mapAddress1" name="mapAddress1" type="text" value="<%= map.mapAddress1 %>" maxlength="50" placeholder="Line 1" />
</div>
</div>
<div class="field">
<div class="control">
<input class="input" id="map--mapAddress2" name="mapAddress2" type="text" value="<%= map.mapAddress2 %>" maxlength="50" placeholder="Line 2" aria-label="Address Line 2" />
</div>
</div>
<div class="columns">
<div class="column is-8">
<div class="field">
<label class="label" for="map--mapCity">City</label>
<div class="control">
<input class="input" id="map--mapCity" name="mapCity" value="<%= map.mapCity %>" maxlength="20" />
</div>
</div>
</div>
<div class="column">
<div class="field">
<label class="label" for="map--mapProvince">Province</label>
<div class="control">
<input class="input" id="map--mapProvince" name="mapProvince" value="<%= map.mapProvince %>" maxlength="2" />
</div>
</div>
</div>
</div>
<div class="columns">
<div class="column">
<div class="field">
<label class="label" for="map--mapPostalCode">Postal Code</label>
<div class="control">
<input class="input" id="map--mapPostalCode" name="mapPostalCode" value="<%= map.mapPostalCode %>" maxlength="7" />
</div>
</div>
</div>
<div class="column">
<div class="field">
<label class="label" for="map--mapPhoneNumber">Phone Number</label>
<div class="control">
<input class="input" id="map--mapPhoneNumber" name="mapPhoneNumber" value="<%= map.mapPhoneNumber %>" maxlength="30" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="columns">
<div class="column">
<div class="panel">
<h2 class="panel-heading">Geographic Location</h2>
<div class="panel-block is-block">
<div class="field">
<label class="label" for="map--mapLatitude">Latitude</label>
<div class="control">
<input class="input" id="map--mapLatitude" name="mapLatitude" type="number" min="-90" max="90" step="0.00000001" value="<%= map.mapLatitude %>" />
</div>
</div>
<div class="field">
<label class="label" for="map--mapLongitude">Longitude</label>
<div class="control">
<input class="input" id="map--mapLongitude" name="mapLongitude" type="number" min="-180" max="180" step="0.00000001" value="<%= map.mapLongitude %>" />
</div>
</div>
</div>
</div>
</div>
<div class="column">
<div class="panel">
<h2 class="panel-heading">Image</h2>
<div class="panel-block is-block">
<div class="field">
<label class="label" for="map--mapSVG">SVG File</label>
<div class="control">
<div class="select is-fullwidth">
<select id="map--mapSVG" name="mapSVG">
<option value="">(Select a File)</option>
<% for (const mapSVG of mapSVGs) { %>
<option value="<%= mapSVG %>" <%= (map.mapSVG === mapSVG) ? " selected" : "" %>>
<%= mapSVG %>
</option>
<% } %>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<% if (!isCreate) { %>
<% const lotSearchUrl = urlPrefix + "/lots?mapId=" + map.mapId; %>
<div class="panel mt-4">
<div class="panel-heading">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<h2 class="title is-5 has-text-weight-bold">
<%= configFunctions.getProperty("aliases.lot") %> Summaries
<a class="tag is-link ml-2" href="<%= lotSearchUrl %>">
<%= map.lotCount %>
</a>
</h2>
</div>
</div>
<div class="level-right">
<div class="level-item">
<a class="button is-small is-success has-text-weight-normal" href="<%=urlPrefix %>/lots/new?mapId=<%= map.mapId %>">
<span class="icon"><i class="fas fa-plus" aria-hidden="true"></i></span>
<span>Create a <%= configFunctions.getProperty("aliases.lot") %></span>
</a>
</div>
<div class="level-item">
<a class="button is-small is-link has-text-weight-normal" href="<%=urlPrefix %>/reports/lots-byMapId?mapId=<%= map.mapId %>" download>
<span class="icon"><i class="fas fa-download" aria-hidden="true"></i></span>
<span>Export All</span>
</a>
</div>
</div>
</div>
</div>
<div class="panel-block is-block">
<% if (map.lotCount === 0) { %>
<div class="message is-info">
<p class="message-body">
There are no <%= configFunctions.getProperty("aliases.lots").toLowerCase() %>
associated with this <%= configFunctions.getProperty("aliases.map").toLowerCase() %>.
</p>
</div>
<% } else { %>
<div class="columns">
<div class="column">
<table class="table is-fullwidth is-striped is-hoverable">
<thead>
<tr>
<th>Type</th>
<th class="has-text-right">
<%= configFunctions.getProperty("aliases.lot") %> Count
</th>
<th class="has-text-right">Percentage</th>
</tr>
</thead>
<tbody>
<% for (const lotType of lotTypeSummary) { %>
<tr>
<td>
<a class="has-text-weight-bold" href="<%= lotSearchUrl %>&lotTypeId=<%= lotType.lotTypeId %>">
<%= lotType.lotType %>
</a>
</td>
<td class="has-text-right">
<%= lotType.lotCount %>
</td>
<td class="has-text-right">
<%= ((lotType.lotCount / map.lotCount) * 100).toFixed(1) %>%
</td>
</tr>
<% } %>
</tbody>
</table>
</div>
<div class="column">
<table class="table is-fullwidth is-striped is-hoverable">
<thead>
<tr>
<th>Status</th>
<th class="has-text-right">
<%= configFunctions.getProperty("aliases.lot") %> Count
</th>
<th class="has-text-right">Percentage</th>
</tr>
</thead>
<tbody>
<% for (const lotStatus of lotStatusSummary) { %>
<tr>
<td>
<a class="has-text-weight-bold" href="<%= lotSearchUrl %>&lotStatusId=<%= lotStatus.lotStatusId %>">
<%= lotStatus.lotStatus %>
</a>
</td>
<td class="has-text-right">
<%= lotStatus.lotCount %>
</td>
<td class="has-text-right">
<%= ((lotStatus.lotCount / map.lotCount) * 100).toFixed(1) %>%
</td>
</tr>
<% } %>
</tbody>
</table>
</div>
</div>
<% } %>
</div>
</div>
<% } %>
<%- include('_footerA'); -%>
<script src="<%= urlPrefix %>/javascripts/mapEdit.min.js"></script>
<%- include('_footerB'); -%>