sunrise-cms/views/cemetery-view.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>
    <li class="is-active">
      <a href="#" aria-current="page">
        <%= cemetery.cemeteryName || "(No Name)" %>
      </a>
    </li>
  </ul>
</nav>

<h1 class="title is-1">
  <%= cemetery.cemeteryName || "(No Name)" %>
  <% if (cemetery.cemeteryKey !== '') { %>
    <span class="tag is-large"><%= cemetery.cemeteryKey %></span>
  <% } %>
</h1>


<div class="level is-fixed-bottom is-mobile has-background-white has-shadow is-hidden-print">
  <div class="level-left">
    <span class="level-item has-text-weight-bold">
      <%= cemetery.cemeteryName || "(No Name)" %>
    </span>
  </div>
  <div class="level-right">
    <div class="level-item">
      <a class="button is-link is-outlined has-tooltip-left"
          data-tooltip="Previous Cemetery"
          href="<%= urlPrefix %>/cemeteries/<%= cemetery.cemeteryId %>/previous"
          accesskey=",">
          <i class="fas fa-arrow-left" aria-hidden="true"></i>
          <span class="sr-only">Previous Cemetery</span>
      </a>
    </div>
    <div class="level-item">
      <a class="button is-link has-tooltip-left"
          data-tooltip="Next Cemetery"
          href="<%= urlPrefix %>/cemeteries/<%= cemetery.cemeteryId %>/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) { %>
      <div class="level-item">
        <a class="button is-primary"
          href="<%= urlPrefix %>/cemeteries/<%= cemetery.cemeteryId %>/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 class="panel">
  <div class="panel-block is-block">
    <div class="columns">
      <% if (cemetery.cemeteryDescription && cemetery.cemeteryDescription !== "") { %>
        <div class="column">
          <strong>Description</strong><br />
          <%= cemetery.cemeteryDescription %>
        </div>
      <% } %>
      <div class="column">
          <strong>Address</strong><br />
          <% if (cemetery.cemeteryAddress1 !== "") { %>
              <%= cemetery.cemeteryAddress1 %><br />
          <% } %>
          <% if (cemetery.cemeteryAddress2 !== "") { %>
              <%= cemetery.cemeteryAddress2 %><br />
          <% } %>
          <%= cemetery.cemeteryCity %>, <%= cemetery.cemeteryProvince %><br />
          <%= cemetery.cemeteryPostalCode %>
      </div>
      <% if (cemetery.cemeteryPhoneNumber !== "") { %>
          <div class="column">
              <strong>Phone Number</strong><br />
              <%= cemetery.cemeteryPhoneNumber %>
          </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">
            <% if (cemetery.cemeteryLatitude && cemetery.cemeteryLongitude) { %>
                <div id="cemetery--leaflet" data-cemetery-latitude="<%= cemetery.cemeteryLatitude %>" data-cemetery-longitude="<%= cemetery.cemeteryLongitude %>" style="height:300px"></div>
            <% } else { %>
                <div class="message is-info">
                    <p class="message-body">There are no geographic coordinates associated with this cemetery.</p>
                </div>
            <% } %>
        </div>
      </div>
    </div>
    <div class="column">
        <div class="panel">
          <h2 class="panel-heading">Image</h2>
          <div class="panel-block is-block">
            <% if (cemetery.cemeterySvg) { %>
              <% const imageURL = urlPrefix + "/images/cemeteries/" + cemetery.cemeterySvg %>
              <a class="image" href="<%= urlPrefix %>/images/cemeteries/<%= cemetery.cemeterySvg %>" target="_blank">
                <%- include('../public/images/cemeteries/' + cemetery.cemeterySvg); -%>
              </a>
            <% } else { %>
              <div class="message is-info">
                <p class="message-body">There are no image associated with this cemetery.</p>
              </div>
            <% } %>
          </div>
        </div>
    </div>
</div>

<% const burialSiteSearchUrl = urlPrefix + "/burialSites?cemeteryId=" + cemetery.cemeteryId; %>
<div class="panel">
    <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">
                  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-link 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.view.js"></script>

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