sunrise-cms/views/cemetery-edit.ejs

<%- include('_header'); -%>

<nav class="breadcrumb">
  <ul>
    <li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
    <li>
      <a href="<%= urlPrefix %>/cemeteries">
        <span class="icon is-small"><i class="far fa-map" aria-hidden="true"></i></span>
        <span>Cemeteries</span>
      </a>
    </li>
    <% if (!isCreate) { %>
      <li>
        <a href="<%= urlPrefix %>/cemeteries/<%= cemetery.cemeteryId %>" accesskey="v">
          <%= cemetery.cemeteryName || "(No Name)" %>
        </a>
      </li>
    <% } %>
    <li class="is-active">
      <a href="#" aria-current="page">
        <% if (isCreate) { %>
          Create a New Cemetery
        <% } else { %>
          Update
        <% } %>
      </a>
    </li>
  </ul>
</nav>

<h1 class="title is-1">
  <% if (isCreate) { %>
    Create a New Cemetery
  <% } else { %>
    Update Cemetery
  <% } %>
</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">
        <%= cemetery.cemeteryName || "(No Name)" %>
      </span>
    <% } %>
  </div>
  <div class="level-right">
    <% if (isCreate) { %>
      <div class="level-item">
        <a class="button is-danger is-light" href="<%= urlPrefix %>/cemeteries">
          Cancel
        </a>
      </div>
    <% } else { %>
      <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--deleteCemetery" href="#">
                <span class="icon is-small"><i class="fas fa-trash has-text-danger" aria-hidden="true"></i></span>
                <span>Delete Cemetery</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    <% } %>
    <div class="level-item">
      <button class="button is-primary is-light" type="submit" form="form--cemetery">
        <span class="icon is-small"><i class="fas fa-save" aria-hidden="true"></i></span>
        <span>
          <%= (isCreate ? "Create": "Update") %>
          Cemetery
        </span>
      </button>
    </div>
  </div>
</div>

<form id="form--cemetery">
  <input id="cemetery--cemeteryId" name="cemeteryId" type="hidden" value="<%= cemetery.cemeteryId %>" />

  <div class="columns">
    <div class="column">
      <div class="panel">
        <div class="panel-block is-block">
          <div class="field">
            <label class="label" for="cemetery--cemeteryName">Cemetery Name</label>
            <div class="control">
              <input class="input" id="cemetery--cemeteryName" name="cemeteryName" type="text"
                value="<%= cemetery.cemeteryName %>" maxlength="200" required
                accesskey="f"
                <%= (isCreate ? " autofocus" : "") %> />
            </div>
          </div>
          <div class="field">
            <label class="label" for="cemetery--cemeteryKey">Cemetery Key</label>
            <div class="control">
              <input class="input" id="cemetery--cemeteryKey" name="cemeteryKey" type="text"
                value="<%= cemetery.cemeteryKey %>" maxlength="20"
                <%= configFunctions.getConfigProperty('settings.burialSites.burialSiteNameSegments.includeCemeteryKey') ? ' required' : '' %> />
              <% if (configFunctions.getConfigProperty('settings.burialSites.burialSiteNameSegments.includeCemeteryKey')) { %>
                <p class="help">
                  The cemetery key is prepended to the burial site names.
                </p>
              <% } %>
            </div>
          </div>
          <div class="field">
            <label class="label" for="cemetery--cemeteryDescription">Cemetery Description</label>
            <div class="control">
              <textarea class="textarea" id="cemetery--cemeteryDescription" name="cemeteryDescription"><%= cemetery.cemeteryDescription %></textarea>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="column">
      <div class="panel">
        <div class="panel-heading">
          <div class="level">
            <div class="level-left">
              <div class="level-item">
                <h2 class="title is-5 has-text-weight-bold has-text-white">Address</h2>
              </div>
            </div>
            <div class="level-right">
              <div class="level-item">
                <i class="fas fa-location-arrow" aria-hidden="true"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="panel-block is-block">
            <div class="field">
              <label class="label" for="cemetery--cemeteryAddress1">Address</label>
              <div class="control">
                <input class="input" id="cemetery--cemeteryAddress1" name="cemeteryAddress1" type="text" value="<%= cemetery.cemeteryAddress1 %>" maxlength="50" placeholder="Line 1" />
              </div>
            </div>
            <div class="field">
              <div class="control">
                <input class="input" id="cemetery--cemeteryAddress2" name="cemeteryAddress2" type="text" value="<%= cemetery.cemeteryAddress2 %>" 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="cemetery--cemeteryCity">City</label>
                  <div class="control">
                    <input class="input" id="cemetery--cemeteryCity" name="cemeteryCity" value="<%= cemetery.cemeteryCity %>" maxlength="20" />
                  </div>
                </div>
              </div>
              <div class="column">
                <div class="field">
                  <label class="label" for="cemetery--cemeteryProvince">Province</label>
                  <div class="control">
                    <input class="input" id="cemetery--cemeteryProvince" name="cemeteryProvince" value="<%= cemetery.cemeteryProvince %>" maxlength="2" />
                  </div>
                </div>
              </div>
            </div>
            <div class="columns">
              <div class="column">
                <div class="field">
                  <label class="label" for="cemetery--cemeteryPostalCode">Postal Code</label>
                  <div class="control">
                    <input class="input" id="cemetery--cemeteryPostalCode" name="cemeteryPostalCode" value="<%= cemetery.cemeteryPostalCode %>" maxlength="7" />
                  </div>
                </div>
              </div>
              <div class="column">
                <div class="field">
                  <label class="label" for="cemetery--cemeteryPhoneNumber">Phone Number</label>
                  <div class="control">
                    <input class="input" id="cemetery--cemeteryPhoneNumber" name="cemeteryPhoneNumber" value="<%= cemetery.cemeteryPhoneNumber %>" maxlength="30" />
                  </div>
                </div>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>
  <div class="columns">
    <div class="column">
      <div class="panel">
        <div class="panel-heading">
          <div class="level">
            <div class="level-left">
              <div class="level-item">
                <h2 class="title is-5 has-text-weight-bold has-text-white">Geographic Location</h2>
              </div>
            </div>
            <div class="level-right">
              <div class="level-item">
                <button class="button is-small" id="button--selectCoordinate" type="button">
                  <span class="icon"><i class="fas fa-map-marked-alt" aria-hidden="true"></i></span>
                  <span>Select Coordinate</span>
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="panel-block is-block">
          <div class="field">
            <label class="label" for="cemetery--cemeteryLatitude">Latitude</label>
            <div class="control">
              <input class="input" id="cemetery--cemeteryLatitude" name="cemeteryLatitude" type="number"
                min="<%= configFunctions.getConfigProperty('settings.latitudeMin') %>"
                max="<%= configFunctions.getConfigProperty('settings.latitudeMax') %>"
                step="0.00000001" value="<%= cemetery.cemeteryLatitude %>" />
            </div>
          </div>
          <div class="field">
            <label class="label" for="cemetery--cemeteryLongitude">Longitude</label>
            <div class="control">
              <input class="input" id="cemetery--cemeteryLongitude" name="cemeteryLongitude" type="number"
                min="<%= configFunctions.getConfigProperty('settings.longitudeMin') %>"
                max="<%= configFunctions.getConfigProperty('settings.longitudeMax') %>"
                step="0.00000001" value="<%= cemetery.cemeteryLongitude %>" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="column">
      <div class="panel">
        <div class="panel-heading">
          <div class="level">
            <div class="level-left">
              <div class="level-item">
                <h2 class="title is-5 has-text-weight-bold has-text-white">Image</h2>
              </div>
            </div>
            <div class="level-right">
              <div class="level-item">
                <i class="fas fa-image" aria-hidden="true"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="panel-block is-block">
          <div class="field">
            <label class="label" for="cemetery--cemeterySvg">SVG File</label>
            <div class="control">
              <div class="select is-fullwidth">
                <select id="cemetery--cemeterySvg" name="cemeterySvg">
                  <option value="">(Select a File)</option>
                  <% for (const cemeterySVG of cemeterySVGs) { %>
                    <option value="<%= cemeterySVG %>" <%= (cemetery.cemeterySvg === cemeterySVG) ? " selected" : "" %>>
                      <%= cemeterySVG %>
                    </option>
                  <% } %>
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

<% if (!isCreate) { %>
  <% const burialSiteSearchUrl = urlPrefix + "/burialSites?cemeteryId=" + cemetery.cemeteryId; %>
  <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-white has-text-weight-bold">
              Burial Site Summaries
              <a class="tag is-link ml-2" href="<%= burialSiteSearchUrl %>">
                <%= cemetery.burialSiteCount %>
              </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 %>/burialSites/new?cemeteryId=<%= cemetery.cemeteryId %>">
                  <span class="icon"><i class="fas fa-plus" aria-hidden="true"></i></span>
                  <span>Create a Burial Site</span>
              </a>
          </div>
          <div class="level-item">
            <a class="button is-small has-text-weight-normal" href="<%=urlPrefix %>/reports/burialSites-byCemeteryId?cemeteryId=<%= cemetery.cemeteryId %>" 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 (cemetery.burialSiteCount === 0) { %>
        <div class="message is-info">
          <p class="message-body">
            There are no burial sites
            associated with this cemetery.
          </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">
                    Burial Site Count
                  </th>
                  <th class="has-text-right">Percentage</th>
                </tr>
              </thead>
              <tbody>
                <% for (const burialSiteType of burialSiteTypeSummary) { %>
                  <tr>
                    <td>
                      <a class="has-text-weight-bold" href="<%= burialSiteSearchUrl %>&burialSiteTypeId=<%= burialSiteType.burialSiteTypeId %>">
                        <%= burialSiteType.burialSiteType %>
                      </a>
                    </td>
                    <td class="has-text-right">
                      <%= burialSiteType.burialSiteCount %>
                    </td>
                    <td class="has-text-right">
                      <%= ((burialSiteType.burialSiteCount / cemetery.burialSiteCount) * 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">
                    Burial Site Count
                  </th>
                  <th class="has-text-right">Percentage</th>
                </tr>
              </thead>
              <tbody>
                <% for (const burialSiteStatus of burialSiteStatusSummary) { %>
                  <tr>
                    <td>
                      <a class="has-text-weight-bold" href="<%= burialSiteSearchUrl %>&burialSiteStatusId=<%= burialSiteStatus.burialSiteStatusId %>">
                        <%= burialSiteStatus.burialSiteStatus %>
                      </a>
                    </td>
                    <td class="has-text-right">
                      <%= burialSiteStatus.burialSiteCount %>
                    </td>
                    <td class="has-text-right">
                      <%= ((burialSiteStatus.burialSiteCount / cemetery.burialSiteCount) * 100).toFixed(1) %>%
                    </td>
                  </tr>
                <% } %>
              </tbody>
            </table>
          </div>
        </div>
      <% } %>
    </div>
  </div>    
<% } %>

<%- include('_footerA'); -%>

<script src="<%= urlPrefix %>/javascripts/cemetery.edit.js"></script>

<%- include('_footerB'); -%>