bottom bar options

- switch to edit mode
- save/create
- print
- more options
- next/previous record
deepsource-autofix-76c6eb20
Dan Gowans 2023-01-11 13:01:50 -05:00
parent a4f4b353fc
commit 59b04c2b8f
10 changed files with 554 additions and 455 deletions

View File

@ -1,7 +1,7 @@
@import "@cityssm/bulma-webapp-css/cityssm"; @import '@cityssm/bulma-webapp-css/cityssm';
@import "bulma/sass/utilities/derived-variables"; @import 'bulma/sass/utilities/derived-variables';
@import "bulma-calendar/src/sass/index"; @import 'bulma-calendar/src/sass/index';
@import "@cityssm/fa-glow/fa-glow"; @import '@cityssm/fa-glow/fa-glow';
$white: #fff; $white: #fff;
$black: #000; $black: #000;
@ -196,3 +196,24 @@ span.button.is-static {
.datetimepicker.is-active { .datetimepicker.is-active {
z-index: 10; z-index: 10;
} }
/*
* Fixed Level
*/
.level {
&.is-fixed-bottom {
z-index: 1100;
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 15px;
margin: 0;
&.has-shadow {
box-shadow: 0 -2px 0 0 #f5f5f5;
}
}
}

File diff suppressed because one or more lines are too long

View File

@ -36,6 +36,50 @@
<% } %> <% } %>
</h1> </h1>
<div class="level is-fixed-bottom is-mobile has-background-white has-shadow is-hidden-print">
<% if (!isCreate) { %>
<div class="level-left">
<span class="level-item has-text-weight-bold">
<%= lot.lotName %>
</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--deleteLot" href="#">
<span class="icon is-small"><i class="fas fa-trash has-text-danger" aria-hidden="true"></i></span>
<span>Delete <%= configFunctions.getProperty("aliases.lot") %></span>
</a>
</div>
</div>
</div>
</div>
<% } %>
<div class="level-item">
<button class="button is-primary" type="submit" form="form--lot">
<span class="icon is-small"><i class="fas fa-save" aria-hidden="true"></i></span>
<span>
<%= (isCreate ? "Create" : "Update") %>
<%= configFunctions.getProperty("aliases.lot") %>
</span>
</button>
</div>
</div>
</div>
<form id="form--lot"> <form id="form--lot">
<input id="lot--lotId" name="lotId" type="hidden" value="<%= isCreate ? "" : lot.lotId %>" /> <input id="lot--lotId" name="lotId" type="hidden" value="<%= isCreate ? "" : lot.lotId %>" />
@ -295,35 +339,7 @@
</div> </div>
</div> </div>
<div class="has-text-right mb-4 is-hidden-print">
<button class="button is-primary" type="submit">
<span class="icon is-small"><i class="fas fa-save" aria-hidden="true"></i></span>
<span>
<%= (isCreate ? "Create" : "Update") %>
<%= configFunctions.getProperty("aliases.lot") %>
</span>
</button>
<% if (!isCreate) { %>
<div class="dropdown is-right ml-2">
<div class="dropdown-trigger">
<button class="button" type="button">
<span>More Options</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu">
<div class="dropdown-content">
<a class="dropdown-item" id="button--deleteLot" href="#">
<span class="icon is-small"><i class="fas fa-trash has-text-danger" aria-hidden="true"></i></span>
<span>Delete <%= configFunctions.getProperty("aliases.lot") %></span>
</a>
</div>
</div>
</div>
<% } %>
</div>
</form> </form>
<% if (isCreate) { %> <% if (isCreate) { %>

View File

@ -1,49 +1,62 @@
<%- include('_header'); -%> <%- include('_header'); -%>
<nav class="breadcrumb"> <nav class="breadcrumb">
<ul> <ul>
<li><a href="<%= urlPrefix %>/dashboard">Home</a></li> <li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
<li> <li>
<a href="<%= urlPrefix %>/lots"> <a href="<%= urlPrefix %>/lots">
<span class="icon is-small"><i class="fas fa-vector-square" aria-hidden="true"></i></span> <span class="icon is-small"><i class="fas fa-vector-square" aria-hidden="true"></i></span>
<span><%= configFunctions.getProperty("aliases.lots") %></span> <span><%= configFunctions.getProperty("aliases.lots") %></span>
</a> </a>
</li> </li>
<li class="is-active"><a href="#" aria-current="page"> <li class="is-active">
<%= lot.lotName %> <a href="#" aria-current="page">
</a></li> <%= lot.lotName %>
</ul> </a>
</li>
</ul>
</nav> </nav>
<h1 class="title is-1"> <h1 class="title is-1">
<%= lot.lotName %> <%= lot.lotName %>
</h1> </h1>
<div class="fixed-container is-fixed-bottom-right mx-4 my-4 has-text-right is-hidden-print"> <div class="level is-fixed-bottom is-mobile has-background-white has-shadow is-hidden-print">
<div class="level-left">
<a class="button is-circle is-link has-tooltip-left" <span class="level-item has-text-weight-bold">
data-tooltip="Previous <%= configFunctions.getProperty("aliases.lot") %>" <%= lot.lotName %>
href="<%= urlPrefix %>/lots/<%= lot.lotId %>/previous" </span>
accesskey=","> </div>
<i class="fas fa-arrow-left" aria-hidden="true"></i> <div class="level-right">
<span class="sr-only">Previous <%= configFunctions.getProperty("aliases.lot") %></span> <div class="level-item">
</a> <a class="button is-link is-outlined has-tooltip-left"
<a class="button is-circle is-link has-tooltip-left" data-tooltip="Previous <%= configFunctions.getProperty("aliases.lot") %>"
data-tooltip="Next <%= configFunctions.getProperty("aliases.lot") %>" href="<%= urlPrefix %>/lots/<%= lot.lotId %>/previous"
href="<%= urlPrefix %>/lots/<%= lot.lotId %>/next" accesskey=",">
accesskey="."> <i class="fas fa-arrow-left" aria-hidden="true"></i>
<i class="fas fa-arrow-right" aria-hidden="true"></i> <span class="sr-only">Previous <%= configFunctions.getProperty("aliases.lot") %></span>
<span class="sr-only">Next <%= configFunctions.getProperty("aliases.lot") %></span> </a>
</a> </div>
<div class="level-item">
<a class="button is-link has-tooltip-left"
data-tooltip="Next <%= configFunctions.getProperty("aliases.lot") %>"
href="<%= urlPrefix %>/lots/<%= lot.lotId %>/next"
accesskey=".">
<span>Next</span>
<span class="icon"><i class="fas fa-arrow-right" aria-hidden="true"></i></span>
</a>
</div>
<% if (user.userProperties.canUpdate) { %> <% if (user.userProperties.canUpdate) { %>
<a class="button is-circle is-primary has-tooltip-left" <div class="level-item">
data-tooltip="Update <%= configFunctions.getProperty("aliases.lot") %>" <a class="button is-primary"
href="<%= urlPrefix %>/lots/<%= lot.lotId %>/edit" href="<%= urlPrefix %>/lots/<%= lot.lotId %>/edit"
accesskey="e"> accesskey="e">
<i class="fas fa-pencil-alt" aria-hidden="true"></i> <span class="icon"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="sr-only">Update <%= configFunctions.getProperty("aliases.lot") %></span> <span>Switch to Edit Mode</span>
</a> </a>
</div>
<% } %> <% } %>
</div>
</div> </div>
<div class="columns"> <div class="columns">

View File

@ -38,54 +38,12 @@
Create a New <%= configFunctions.getProperty("aliases.occupancy") %> Record Create a New <%= configFunctions.getProperty("aliases.occupancy") %> Record
</h1> </h1>
<% } else { %> <% } else { %>
<div class="level"> <h1 class="title is-1">
<div class="level-left"> Update <%= configFunctions.getProperty("aliases.occupancy") %> #<%= lotOccupancy.lotOccupancyId %>
<div class="level-item is-justify-content-left"> </h1>
<h1 class="title is-1">
Update <%= configFunctions.getProperty("aliases.occupancy") %> #<%= lotOccupancy.lotOccupancyId %>
</h1>
</div>
</div>
<% if (occupancyTypePrints.length > 0) { %>
<div class="level-right is-hidden-print">
<div class="level-item is-justify-content-right">
<% if (occupancyTypePrints.length === 1) { %>
<a class="button is-link" href="<%= urlPrefix %>/print/<%= occupancyTypePrints[0] %>/?lotOccupancyId=<%= lotOccupancy.lotOccupancyId %>" target="_blank">
<span class="icon is-small"><i class="fas fa-print" aria-hidden="true"></i></span>
<span>Print</span>
</a>
<% } else { %>
<div class="dropdown is-right">
<div class="dropdown-trigger">
<button class="button is-link" type="button">
<span class="icon is-small"><i class="fas fa-print" aria-hidden="true"></i></span>
<span>Print</span>
<span class="icon is-small"><i class="fas fa-caret-down" aria-hidden="true"></i></span>
</button>
</div>
<div class="dropdown-menu">
<div class="dropdown-content">
<% for (const printName of occupancyTypePrints) { %>
<% const printConfig = printFunctions.getPrintConfig(printName); %>
<% if (printConfig) { %>
<a class="dropdown-item" href="<%= urlPrefix %>/print/<%= printName %>/?lotOccupancyId=<%= lotOccupancy.lotOccupancyId %>" target="_blank">
<span class="icon is-small"><i class="fas fa-print" aria-hidden="true"></i></span>
<span><%= printConfig.title %></span>
</a>
<% } %>
<% } %>
</div>
</div>
</div>
<% } %>
</div>
</div>
<% } %>
</div>
<% } %> <% } %>
<form id="form--lotOccupancy"> <form id="form--lotOccupancy">
<input id="lotOccupancy--lotOccupancyId" name="lotOccupancyId" type="hidden" value="<%= lotOccupancy.lotOccupancyId %>" /> <input id="lotOccupancy--lotOccupancyId" name="lotOccupancyId" type="hidden" value="<%= lotOccupancy.lotOccupancyId %>" />
<div class="panel"> <div class="panel">
@ -360,8 +318,81 @@
</div> </div>
<% } %> <% } %>
<div class="panel-block is-justify-content-right is-hidden-print"> </div>
<button class="button is-primary" type="submit">
<div class="level is-fixed-bottom is-mobile has-background-white has-shadow is-hidden-print">
<% if (!isCreate) { %>
<div class="level-left">
<span class="level-item has-text-weight-bold">
<%= configFunctions.getProperty("aliases.occupancy") %> #<%= lotOccupancy.lotOccupancyId %>:
<%= lotOccupancy.lotName || ("(No " + configFunctions.getProperty("aliases.lot") + ")") %>
</span>
</div>
<% } %>
<div class="level-right">
<% if (!isCreate && occupancyTypePrints.length > 0) { %>
<% if (occupancyTypePrints.length === 1) { %>
<div class="level-item">
<a href="<%= urlPrefix %>/print/<%= occupancyTypePrints[0] %>/?lotOccupancyId=<%= lotOccupancy.lotOccupancyId %>" target="_blank">
<span class="icon"><i class="fas fa-print" aria-hidden="true"></i></span>
<span>Print</span>
</a>
</div>
<% } else { %>
<div class="level-item">
<div class="dropdown is-right is-up">
<div class="dropdown-trigger">
<button class="button" type="button">
<span class="icon"><i class="fas fa-print" aria-hidden="true"></i></span>
<span>Print</span>
<span class="icon"><i class="fas fa-angle-up" aria-hidden="true"></i></span>
</a>
</div>
<div class="dropdown-menu">
<div class="dropdown-content">
<% for (const printName of occupancyTypePrints) { %>
<% const printConfig = printFunctions.getPrintConfig(printName); %>
<% if (printConfig) { %>
<a class="dropdown-item" href="<%= urlPrefix %>/print/<%= printName %>/?lotOccupancyId=<%= lotOccupancy.lotOccupancyId %>" target="_blank">
<span class="icon"><i class="fas fa-print" aria-hidden="true"></i></span>
<span><%= printConfig.title %></span>
</a>
<% } %>
<% } %>
</div>
</div>
</div>
</div>
<% } %>
<% } %>
<% 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">
<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--copyLotOccupancy" href="#">
<span class="icon"><i class="far fa-copy" aria-hidden="true"></i></span>
<span>Copy <%= configFunctions.getProperty("aliases.occupancy") %> Record as New</span>
</a>
<a class="dropdown-item" id="button--deleteLotOccupancy" href="#">
<span class="icon"><i class="fas fa-trash has-text-danger" aria-hidden="true"></i></span>
<span>Delete <%= configFunctions.getProperty("aliases.occupancy") %> Record</span>
</a>
</div>
</div>
</div>
</div>
<% } %>
<div class="level-item">
<button class="button is-success" type="submit">
<span class="icon is-small"><i class="fas fa-save" aria-hidden="true"></i></span> <span class="icon is-small"><i class="fas fa-save" aria-hidden="true"></i></span>
<span> <span>
<%= (isCreate ? "Create" : "Update") %> <%= (isCreate ? "Create" : "Update") %>
@ -369,37 +400,12 @@
Record Record
</span> </span>
</button> </button>
<% if (!isCreate) { %> </div>
<div class="dropdown is-right ml-2">
<div class="dropdown-trigger">
<button class="button" type="button">
<span>More Options</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu">
<div class="dropdown-content">
<a class="dropdown-item" id="button--copyLotOccupancy" href="#">
<span class="icon is-small"><i class="far fa-copy" aria-hidden="true"></i></span>
<span>Copy <%= configFunctions.getProperty("aliases.occupancy") %> Record as New</span>
</a>
<a class="dropdown-item" id="button--deleteLotOccupancy" href="#">
<span class="icon is-small"><i class="fas fa-trash has-text-danger" aria-hidden="true"></i></span>
<span>Delete <%= configFunctions.getProperty("aliases.occupancy") %> Record</span>
</a>
</div>
</div>
</div>
<% } %>
</div> </div>
</div> </div>
</form> </form>
<% if (isCreate) { %> <% if (!isCreate) { %>
<% } else { %>
<div class="panel mt-5"> <div class="panel mt-5">
<div class="panel-heading"> <div class="panel-heading">
<div class="level is-mobile"> <div class="level is-mobile">

View File

@ -22,71 +22,76 @@
</ul> </ul>
</nav> </nav>
<div class="level"> <h1 class="title is-1">
<div class="level-left"> <%= configFunctions.getProperty("aliases.occupancy") %>
<div class="level-item is-justify-content-left"> #<%= lotOccupancy.lotOccupancyId %>:
<h1 class="title is-1"> <%= lotOccupancy.lotName || ("(No " + configFunctions.getProperty("aliases.lot") + ")") %>
<%= configFunctions.getProperty("aliases.occupancy") %> #<%= lotOccupancy.lotOccupancyId %>: <%= lotOccupancy.lotName || ("(No " + configFunctions.getProperty("aliases.lot") + ")") %> </h1>
</h1>
</div>
</div>
<% if (occupancyTypePrints.length > 0) { %>
<div class="level-right is-hidden-print">
<div class="level-item is-justify-content-right">
<% if (occupancyTypePrints.length === 1) { %>
<a class="button is-link" href="<%= urlPrefix %>/print/<%= occupancyTypePrints[0] %>/?lotOccupancyId=<%= lotOccupancy.lotOccupancyId %>" target="_blank">
<span class="icon is-small"><i class="fas fa-print" aria-hidden="true"></i></span>
<span>Print</span>
</a>
<% } else { %>
<div class="dropdown is-right">
<div class="dropdown-trigger">
<button class="button is-link" type="button">
<span class="icon is-small"><i class="fas fa-print" aria-hidden="true"></i></span>
<span>Print</span>
<span class="icon is-small"><i class="fas fa-caret-down" aria-hidden="true"></i></span>
</button>
</div>
<div class="dropdown-menu">
<div class="dropdown-content">
<% for (const printName of occupancyTypePrints) { %>
<% const printConfig = printFunctions.getPrintConfig(printName); %>
<% if (printConfig) { %>
<a class="dropdown-item" href="<%= urlPrefix %>/print/<%= printName %>/?lotOccupancyId=<%= lotOccupancy.lotOccupancyId %>" target="_blank">
<span class="icon is-small"><i class="fas fa-print" aria-hidden="true"></i></span>
<span><%= printConfig.title %></span>
</a>
<% } %>
<% } %>
</div>
</div>
</div>
<% } %>
</div>
</div>
<% } %>
</div>
<% if (user.userProperties.canUpdate) { %> <div class="level is-fixed-bottom is-mobile has-background-white has-shadow is-hidden-print">
<div class="fixed-container is-fixed-bottom-right mx-4 my-4 has-text-right is-hidden-print"> <div class="level-left">
<a class="button is-circle has-tooltip-left <%= (lotOccupancy.occupancyEndDate ? "is-warning" : "is-primary") %>" <span class="level-item has-text-weight-bold">
data-tooltip="Update <%= configFunctions.getProperty("aliases.occupancy") %>" <%= configFunctions.getProperty("aliases.occupancy") %> #<%= lotOccupancy.lotOccupancyId %>:
href="<%= urlPrefix %>/lotOccupancies/<%= lotOccupancy.lotOccupancyId %>/edit" <%= lotOccupancy.lotName || ("(No " + configFunctions.getProperty("aliases.lot") + ")") %>
accesskey="e"> </span>
<i class="fas fa-pencil-alt" aria-hidden="true"></i> </div>
<span class="sr-only">Update <%= configFunctions.getProperty("aliases.occupancy") %></span> <div class="level-right">
</a> <% if (occupancyTypePrints.length > 0) { %>
<% if (occupancyTypePrints.length === 1) { %>
<div class="level-item">
<a href="<%= urlPrefix %>/print/<%= occupancyTypePrints[0] %>/?lotOccupancyId=<%= lotOccupancy.lotOccupancyId %>" target="_blank">
<span class="icon"><i class="fas fa-print" aria-hidden="true"></i></span>
<span>Print</span>
</a>
</div>
<% } else { %>
<div class="level-item">
<div class="dropdown is-right is-up">
<div class="dropdown-trigger">
<button class="button" type="button">
<span class="icon"><i class="fas fa-print" aria-hidden="true"></i></span>
<span>Print</span>
<span class="icon"><i class="fas fa-angle-up" aria-hidden="true"></i></span>
</a>
</div>
<div class="dropdown-menu">
<div class="dropdown-content">
<% for (const printName of occupancyTypePrints) { %>
<% const printConfig = printFunctions.getPrintConfig(printName); %>
<% if (printConfig) { %>
<a class="dropdown-item" href="<%= urlPrefix %>/print/<%= printName %>/?lotOccupancyId=<%= lotOccupancy.lotOccupancyId %>" target="_blank">
<span class="icon"><i class="fas fa-print" aria-hidden="true"></i></span>
<span><%= printConfig.title %></span>
</a>
<% } %>
<% } %>
</div>
</div>
</div>
</div>
<% } %>
<% } %>
<% if (user.userProperties.canUpdate) { %>
<div class="level-item">
<a class="button <%= (lotOccupancy.occupancyEndDate ? "is-warning" : "is-primary") %>"
href="<%= urlPrefix %>/lotOccupancies/<%= lotOccupancy.lotOccupancyId %>/edit"
accesskey="e">
<span class="icon"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span>Switch to Edit Mode</span>
</a>
</div>
<% } %>
</div>
</div> </div>
<% } %>
<div class="panel"> <div class="panel">
<div class="panel-block is-block"> <div class="panel-block is-block">
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<p> <p>
<strong><%= configFunctions.getProperty("aliases.occupancy") %> Type</strong><br /> <strong><%= configFunctions.getProperty("aliases.occupancy") %> Type</strong><br />
<%= lotOccupancy.occupancyType %> <%= lotOccupancy.occupancyType %>
</p> </p>
</div> </div>
<div class="column"> <div class="column">
<p class="mb-2"> <p class="mb-2">

View File

@ -1,31 +1,31 @@
<%- include('_header'); -%> <%- include('_header'); -%>
<nav class="breadcrumb"> <nav class="breadcrumb">
<ul> <ul>
<li><a href="<%= urlPrefix %>/dashboard">Home</a></li> <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> <li>
<a href="<%= urlPrefix %>/maps"> <a href="<%= urlPrefix %>/maps/<%= map.mapId %>" accesskey="v">
<span class="icon is-small"><i class="far fa-map" aria-hidden="true"></i></span> <%= map.mapName || "(No Name)" %>
<span><%= configFunctions.getProperty("aliases.maps") %></span>
</a> </a>
</li> </li>
<% if (!isCreate) { %> <% } %>
<li> <li class="is-active">
<a href="<%= urlPrefix %>/maps/<%= map.mapId %>" accesskey="v"> <a href="#" aria-current="page">
<%= map.mapName || "(No Name)" %> <% if (isCreate) { %>
</a> Create a New <%= configFunctions.getProperty("aliases.map") %>
</li> <% } else { %>
<% } %> Update
<li class="is-active"> <% } %>
<a href="#" aria-current="page"> </a>
<% if (isCreate) { %> </li>
Create a New <%= configFunctions.getProperty("aliases.map") %> </ul>
<% } else { %>
Update
<% } %>
</a>
</li>
</ul>
</nav> </nav>
<h1 class="title is-1"> <h1 class="title is-1">
@ -36,6 +36,50 @@
<% } %> <% } %>
</h1> </h1>
<div class="level is-fixed-bottom is-mobile has-background-white has-shadow is-hidden-print">
<% if (!isCreate) { %>
<div class="level-left">
<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"> <form id="form--map">
<input id="map--mapId" name="mapId" type="hidden" value="<%= map.mapId %>" /> <input id="map--mapId" name="mapId" type="hidden" value="<%= map.mapId %>" />
@ -160,35 +204,7 @@
</div> </div>
</div> </div>
<div class="has-text-right is-hidden-print">
<button class="button is-primary" type="submit">
<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>
<% if (!isCreate) { %>
<div class="dropdown is-right ml-2">
<div class="dropdown-trigger">
<button class="button" type="button">
<span>More Options</span>
<span class="icon is-small">
<i class="fas fa-angle-down" 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>
</form> </form>
<% if (!isCreate) { %> <% if (!isCreate) { %>

View File

@ -1,20 +1,20 @@
<%- include('_header'); -%> <%- include('_header'); -%>
<nav class="breadcrumb"> <nav class="breadcrumb">
<ul> <ul>
<li><a href="<%= urlPrefix %>/dashboard">Home</a></li> <li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
<li> <li>
<a href="<%= urlPrefix %>/maps"> <a href="<%= urlPrefix %>/maps">
<span class="icon is-small"><i class="far fa-map" aria-hidden="true"></i></span> <span class="icon is-small"><i class="far fa-map" aria-hidden="true"></i></span>
<span><%= configFunctions.getProperty("aliases.maps") %></span> <span><%= configFunctions.getProperty("aliases.maps") %></span>
</a> </a>
</li> </li>
<li class="is-active"> <li class="is-active">
<a href="#" aria-current="page"> <a href="#" aria-current="page">
<%= map.mapName || "(No Name)" %> <%= map.mapName || "(No Name)" %>
</a> </a>
</li> </li>
</ul> </ul>
</nav> </nav>
<h1 class="title is-1"> <h1 class="title is-1">
@ -22,15 +22,23 @@
</h1> </h1>
<% if (user.userProperties.canUpdate) { %> <% if (user.userProperties.canUpdate) { %>
<div class="fixed-container is-fixed-bottom-right mx-4 my-4 has-text-right is-hidden-print"> <div class="level is-fixed-bottom is-mobile has-background-white has-shadow is-hidden-print">
<a class="button is-circle is-primary has-tooltip-left" <div class="level-left">
data-tooltip="Update <%= configFunctions.getProperty("aliases.map") %>" <span class="level-item has-text-weight-bold">
<%= map.mapName || "(No Name)" %>
</span>
</div>
<div class="level-right">
<div class="level-item">
<a class="button is-primary"
href="<%= urlPrefix %>/maps/<%= map.mapId %>/edit" href="<%= urlPrefix %>/maps/<%= map.mapId %>/edit"
accesskey="e"> accesskey="e">
<i class="fas fa-pencil-alt" aria-hidden="true"></i> <span class="icon"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="sr-only">Update <%= configFunctions.getProperty("aliases.map") %></span> <span>Switch to Edit Mode</span>
</a> </a>
</div>
</div> </div>
</div>
<% } %> <% } %>
<div class="panel"> <div class="panel">

View File

@ -1,86 +1,124 @@
<%- include('_header'); -%> <%- include('_header'); -%>
<nav class="breadcrumb"> <nav class="breadcrumb">
<ul> <ul>
<li><a href="<%= urlPrefix %>/dashboard">Home</a></li> <li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
<li> <li>
<a href="<%= urlPrefix %>/workOrders"> <a href="<%= urlPrefix %>/workOrders">
<span class="icon is-small"><i class="fas fa-hard-hat" aria-hidden="true"></i></span> <span class="icon is-small"><i class="fas fa-hard-hat" aria-hidden="true"></i></span>
<span>Work Orders</span> <span>Work Orders</span>
</a> </a>
</li> </li>
<% if (isCreate) { %> <% if (isCreate) { %>
<li class="is-active"> <li class="is-active">
<a href="#" aria-current="page"> <a href="#" aria-current="page">
Create a New Work Order Create a New Work Order
</a> </a>
</li> </li>
<% } else { %> <% } else { %>
<li> <li>
<a href="<%= urlPrefix %>/workOrders/<%= workOrder.workOrderId %>" accesskey="v"> <a href="<%= urlPrefix %>/workOrders/<%= workOrder.workOrderId %>" accesskey="v">
Work Order #<%= workOrder.workOrderNumber || "(No Number)" %> Work Order #<%= workOrder.workOrderNumber || "(No Number)" %>
</a> </a>
</li> </li>
<li class="is-active"> <li class="is-active">
<a href="#" aria-current="page"> <a href="#" aria-current="page">
Update Work Order Update Work Order
</a> </a>
</li> </li>
<% } %> <% } %>
</ul> </ul>
</nav> </nav>
<% if (isCreate) { %> <% if (isCreate) { %>
<h1 class="title is-1"> <h1 class="title is-1">
Create a New Work Order Create a New Work Order
</h1> </h1>
<% } else { %> <% } else { %>
<div class="level"> <h1 class="title is-1">
<div class="level-left"> Work Order #<%= workOrder.workOrderNumber || "(No Number)" %>
<div class="level-item is-justify-content-left"> </h1>
<h1 class="title is-1">
Work Order #<%= workOrder.workOrderNumber || "(No Number)" %>
</h1>
</div>
</div>
<% if (configFunctions.getProperty("settings.workOrders.prints").length > 0) { %>
<div class="level-right is-hidden-print">
<div class="level-item is-justify-content-right">
<% if (configFunctions.getProperty("settings.workOrders.prints").length === 1) { %>
<a class="button is-link" href="<%= urlPrefix %>/print/<%= configFunctions.getProperty("settings.workOrders.prints")[0] %>/?workOrderId=<%= workOrder.workOrderId %>" target="_blank">
<span class="icon is-small"><i class="fas fa-print" aria-hidden="true"></i></span>
<span>Print</span>
</a>
<% } else { %>
<div class="dropdown is-right">
<div class="dropdown-trigger">
<button class="button is-link" type="button">
<span class="icon is-small"><i class="fas fa-print" aria-hidden="true"></i></span>
<span>Print</span>
<span class="icon is-small"><i class="fas fa-caret-down" aria-hidden="true"></i></span>
</button>
</div>
<div class="dropdown-menu">
<div class="dropdown-content">
<% for (const printName of configFunctions.getProperty("settings.workOrders.prints")) { %>
<% const printConfig = printFunctions.getPrintConfig(printName); %>
<% if (printConfig) { %>
<a class="dropdown-item" href="<%= urlPrefix %>/print/<%= printName %>/?workOrderId=<%= workOrder.workOrderId %>" target="_blank">
<span class="icon is-small"><i class="fas fa-print" aria-hidden="true"></i></span>
<span><%= printConfig.title %></span>
</a>
<% } %>
<% } %>
</div>
</div>
</div>
<% } %>
</div>
</div>
<% } %>
</div>
<% } %> <% } %>
<div class="level is-fixed-bottom is-mobile has-background-white has-shadow is-hidden-print">
<% if (!isCreate) { %>
<div class="level-left">
<span class="level-item has-text-weight-bold">
Work Order
#<%= workOrder.workOrderNumber || "(No Number)" %>
</span>
</div>
<% } %>
<div class="level-right">
<% if (!isCreate && configFunctions.getProperty("settings.workOrders.prints").length > 0) { %>
<% if (configFunctions.getProperty("settings.workOrders.prints").length === 1) { %>
<div class="level-item">
<a href="<%= urlPrefix %>/print/<%= configFunctions.getProperty("settings.workOrders.prints")[0] %>/?workOrderId=<%= workOrder.workOrderId %>" target="_blank">
<span class="icon"><i class="fas fa-print" aria-hidden="true"></i></span>
<span>Print</span>
</a>
</div>
<% } else { %>
<div class="level-item">
<div class="dropdown is-right is-up">
<div class="dropdown-trigger">
<button class="button" type="button">
<span class="icon"><i class="fas fa-print" aria-hidden="true"></i></span>
<span>Print</span>
<span class="icon"><i class="fas fa-angle-up" aria-hidden="true"></i></span>
</button>
</div>
<div class="dropdown-menu">
<div class="dropdown-content">
<% for (const printName of configFunctions.getProperty("settings.workOrders.prints")) { %>
<% const printConfig = printFunctions.getPrintConfig(printName); %>
<% if (printConfig) { %>
<a class="dropdown-item" href="<%= urlPrefix %>/print/<%= printName %>/?workOrderId=<%= workOrder.workOrderId %>" target="_blank">
<span class="icon"><i class="fas fa-print" aria-hidden="true"></i></span>
<span><%= printConfig.title %></span>
</a>
<% } %>
<% } %>
</div>
</div>
</div>
</div>
<% } %>
<% } %>
<div class="level-item">
<% 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--deleteWorkOrder" href="#">
<span class="icon is-small">
<i class="fas fa-trash has-text-danger" aria-hidden="true"></i>
</span>
<span>Delete Work Order</span>
</a>
</div>
</div>
</div>
</div>
<% } %>
<button class="button is-success" type="submit" form="form--workOrderEdit">
<span class="icon is-small"><i class="fas fa-save" aria-hidden="true"></i></span>
<span>
<%= (isCreate ? "Create" : "Update") %>
Work Order
</span>
</button>
</div>
</div>
</div>
<div class="columns is-desktop"> <div class="columns is-desktop">
<div class="column"> <div class="column">
<form id="form--workOrderEdit"> <form id="form--workOrderEdit">
@ -149,50 +187,23 @@
</div> </div>
</div> </div>
<div class="column"> <div class="column">
<div class="field"> <label class="label" for="workOrderEdit--workOrderCloseDateString"><%= configFunctions.getProperty("aliases.workOrderCloseDate") %></label>
<label class="label" for="workOrderEdit--workOrderCloseDateString"><%= configFunctions.getProperty("aliases.workOrderCloseDate") %></label> <div class="field has-addons">
<div class="control"> <div class="control is-expanded">
<input class="input" id="workOrderEdit--workOrderCloseDateString" name="workOrderCloseDateString" type="date" value="<%= workOrder.workOrderCloseDateString %>" disabled readonly /> <input class="input" id="workOrderEdit--workOrderCloseDateString" name="workOrderCloseDateString" type="date" value="<%= workOrder.workOrderCloseDateString %>" disabled readonly />
</div> </div>
<div class="control">
<button class="button is-light is-success is-outlined" id="button--closeWorkOrder" type="button">
<span class="icon is-small"><i class="fas fa-stop-circle" aria-hidden="true"></i></span>
<span>
Close
</span>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="panel-block is-justify-content-flex-end">
<button class="button is-success" type="submit">
<span class="icon is-small"><i class="fas fa-save" aria-hidden="true"></i></span>
<span>
<%= (isCreate ? "Create" : "Update") %>
Work Order
</span>
</button>
<% if (!isCreate) { %>
<button class="button is-primary ml-2" id="button--closeWorkOrder" type="button">
<span class="icon is-small"><i class="fas fa-stop-circle" aria-hidden="true"></i></span>
<span>
Close Work Order
</span>
</button>
<div class="dropdown is-right ml-2">
<div class="dropdown-trigger">
<button class="button" type="button">
<span>More Options</span>
<span class="icon is-small"><i class="fas fa-caret-down" aria-hidden="true"></i></span>
</button>
</div>
<div class="dropdown-menu">
<div class="dropdown-content">
<a class="dropdown-item" id="button--deleteWorkOrder" href="#">
<span class="icon is-small">
<i class="fas fa-trash has-text-danger" aria-hidden="true"></i>
</span>
<span>Delete Work Order</span>
</a>
</div>
</div>
</div>
<% } %>
</div>
</div> </div>
</form> </form>

View File

@ -1,78 +1,88 @@
<%- include('_header'); -%> <%- include('_header'); -%>
<nav class="breadcrumb"> <nav class="breadcrumb">
<ul> <ul>
<li><a href="<%= urlPrefix %>/dashboard">Home</a></li> <li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
<li> <li>
<a href="<%= urlPrefix %>/workOrders"> <a href="<%= urlPrefix %>/workOrders">
<span class="icon is-small"><i class="fas fa-hard-hat" aria-hidden="true"></i></span> <span class="icon is-small"><i class="fas fa-hard-hat" aria-hidden="true"></i></span>
<span>Work Orders</span> <span>Work Orders</span>
</a> </a>
</li> </li>
<li class="is-active"> <li class="is-active">
<a href="#" aria-current="page"> <a href="#" aria-current="page">
Work Order #<%= workOrder.workOrderNumber || "(No Number)" %> Work Order #<%= workOrder.workOrderNumber || "(No Number)" %>
</a> </a>
</li> </li>
</ul> </ul>
</nav> </nav>
<div class="level"> <h1 class="title is-1">
<div class="level-left"> Work Order
<div class="level-item is-justify-content-left"> #<%= workOrder.workOrderNumber || "(No Number)" %>
<h1 class="title is-1"> </h1>
Work Order #<%= workOrder.workOrderNumber || "(No Number)" %>
</h1>
</div>
</div>
<% if (configFunctions.getProperty("settings.workOrders.prints").length > 0) { %>
<div class="level-right is-hidden-print">
<div class="level-item is-justify-content-right">
<% if (configFunctions.getProperty("settings.workOrders.prints").length === 1) { %>
<a class="button is-link" href="<%= urlPrefix %>/print/<%= configFunctions.getProperty("settings.workOrders.prints")[0] %>/?workOrderId=<%= workOrder.workOrderId %>" target="_blank">
<span class="icon is-small"><i class="fas fa-print" aria-hidden="true"></i></span>
<span>Print</span>
</a>
<% } else { %>
<div class="dropdown is-right">
<div class="dropdown-trigger">
<button class="button is-link" type="button">
<span class="icon is-small"><i class="fas fa-print" aria-hidden="true"></i></span>
<span>Print</span>
<span class="icon is-small"><i class="fas fa-caret-down" aria-hidden="true"></i></span>
</button>
</div>
<div class="dropdown-menu">
<div class="dropdown-content">
<% for (const printName of configFunctions.getProperty("settings.workOrders.prints")) { %>
<% const printConfig = printFunctions.getPrintConfig(printName); %>
<% if (printConfig) { %>
<a class="dropdown-item" href="<%= urlPrefix %>/print/<%= printName %>/?workOrderId=<%= workOrder.workOrderId %>" target="_blank">
<span class="icon is-small"><i class="fas fa-print" aria-hidden="true"></i></span>
<span><%= printConfig.title %></span>
</a>
<% } %>
<% } %>
</div>
</div>
</div>
<% } %>
</div>
</div>
<% } %>
</div>
<% if (user.userProperties.canUpdate && !workOrder.workOrderCloseDate) { %> <div class="level is-fixed-bottom is-mobile has-background-white has-shadow is-hidden-print">
<div class="fixed-container is-fixed-bottom-right mx-4 my-4 has-text-right is-hidden-print"> <div class="level-left">
<a class="button is-circle is-primary has-tooltip-left" <span class="level-item has-text-weight-bold">
data-tooltip="Update Work Order" Work Order
#<%= workOrder.workOrderNumber || "(No Number)" %>
</span>
</div>
<div class="level-right">
<% if (configFunctions.getProperty("settings.workOrders.prints").length > 0) { %>
<% if (configFunctions.getProperty("settings.workOrders.prints").length === 1) { %>
<div class="level-item">
<a href="<%= urlPrefix %>/print/<%= configFunctions.getProperty("settings.workOrders.prints")[0] %>/?workOrderId=<%= workOrder.workOrderId %>" target="_blank">
<span class="icon"><i class="fas fa-print" aria-hidden="true"></i></span>
<span>Print</span>
</a>
</div>
<% } else { %>
<div class="level-item">
<div class="dropdown is-right is-up">
<div class="dropdown-trigger">
<button class="button" type="button">
<span class="icon"><i class="fas fa-print" aria-hidden="true"></i></span>
<span>Print</span>
<span class="icon"><i class="fas fa-angle-up" aria-hidden="true"></i></span>
</button>
</div>
<div class="dropdown-menu">
<div class="dropdown-content">
<% for (const printName of configFunctions.getProperty("settings.workOrders.prints")) { %>
<% const printConfig = printFunctions.getPrintConfig(printName); %>
<% if (printConfig) { %>
<a class="dropdown-item" href="<%= urlPrefix %>/print/<%= printName %>/?workOrderId=<%= workOrder.workOrderId %>" target="_blank">
<span class="icon"><i class="fas fa-print" aria-hidden="true"></i></span>
<span><%= printConfig.title %></span>
</a>
<% } %>
<% } %>
</div>
</div>
</div>
</div>
<% } %>
<% } %>
<% if (user.userProperties.canUpdate) { %>
<div class="level-item">
<% if (workOrder.workOrderCloseDate) { %>
<button class="button is-warning" id="button--reopenWorkOrder" data-work-order-id="<%= workOrder.workOrderId %>" type="button">
Reopen Work Order
</button>
<% } else { %>
<a class="button is-primary"
href="<%= urlPrefix %>/workOrders/<%= workOrder.workOrderId %>/edit" href="<%= urlPrefix %>/workOrders/<%= workOrder.workOrderId %>/edit"
accesskey="e"> accesskey="e">
<i class="fas fa-pencil-alt" aria-hidden="true"></i> <span class="icon"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span class="sr-only">Update Work Order</span> <span>Switch to Edit Mode</span>
</a> </a>
</div> <% } %>
<% } %> </div>
<% } %>
</div>
</div>
<div class="columns is-desktop"> <div class="columns is-desktop">
<div class="column"> <div class="column">
@ -109,13 +119,6 @@
</div> </div>
</div> </div>
</div> </div>
<% if (user.userProperties.canUpdate && workOrder.workOrderCloseDate) { %>
<div class="panel-block is-justify-content-flex-end">
<button class="button is-warning" id="button--reopenWorkOrder" data-work-order-id="<%= workOrder.workOrderId %>" type="button">
Reopen Work Order
</button>
</div>
<% } %>
</div> </div>
<div class="panel"> <div class="panel">