index.html.jinja

{% extends "base.html.jinja" %}

{% block additional_head %}
  <!-- Bootstrap Table -->
  <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css">
  <script defer src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>

  <!-- Custom JS -->
  <script defer src="https://maps.googleapis.com/maps/api/js?key= {{- mapsAPIKey -}} "></script>
  <script defer src="{{ url_for('static', filename='index/index.js') }}"></script>
  <!-- Custom CSS -->
  <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='index/index.css') }}">
{% endblock %}

{% block content %}
  <div class="text-justify">
    <div class="date-info">
      <div>
        <p><strong>Last updated:</strong> {{lastUpdated}} ({{hoursAgo}} hours ago)</p>
      </div>
      <div>
        <p><strong>Today:</strong> {{day1}}</p>
        <p><strong>Tomorrow:</strong> {{day2}}</p>
        <p><strong>In 2 days:</strong> {{day3}}</p>
      </div>
      <a href="#closure-tables">Table View</a>
    </div>
    <p>
      Growing units shown below are colored by closure risk. 
      The colors are defined in a legend on the map. For more information
      on the forecast, find out <a href="/how-it-works">how ShellCast works</a>.
    </p>
  </div>

  <div id="closure-map"></div>
  <label class="sr-only" for="closure-map" id="Map alt text">
    Satellite imagery-based map of the North Carolina coast overlaid with
    shellfish growing unit polygons and shaded green, yellow, orange, and
    red based on the forecasted percent chance of closure for today,
    tomorrow, and in two days. When a user is logged into ShellCast they
    can also see map pins for the locations of their shellfish leases.
    Clicking on a map pin or shellfish growing unit polygon reveals the
    forecasted percent chance of closure for today, tomorrow, and in two
    days. These values can also be viewed in the “My Leases” and
    “Shellfish Growing Units” tables below the map.
  </label>

  <br>


  <div id="create-account-message">
    <p>
      To add your lease location pins to the map above and get notifications
      for your lease sites, find out <a href="/how-it-works">how ShellCast works</a>
      and <a href="/signin?mode=select&signInSuccessUrl=/">sign in or create an account</a>.
    </p>
  </div>

  <div id="closure-tables">

    <div id="lease-table-div">
      <div id="lease-table-toolbar">
        <h4>My Leases</h4>
      </div>
      <table
        id="lease-table"
        data-classes="table table-bordered table-hover table-sm"
        data-toggle="table"
        data-search="true"
        data-height="200"
        data-toolbar="#lease-table-toolbar">
        <thead>
          <tr>
            <th data-sortable="true" data-field="ncdmf_lease_id">Lease ID</th>
            <th data-sortable="true" data-field="prob_1d_perc">Today</th>
            <th data-sortable="true" data-field="prob_2d_perc">Tomorrow</th>
            <th data-sortable="true" data-field="prob_3d_perc">In 2 days</th>
          </tr>
        </thead>
      </table>
    </div>

    <div id="lease-table-explanation">
      <p>
        To add more lease location pins to the map above and get notifications
        for those leases go to the <a href="/preferences">preferences page</a>.
      </p>
    </div>

    <div id="growing-unit-table-div">
      <div id="growing-unit-table-toolbar">
        <h4>Shellfish Growing Units</h4>
      </div>
      <table
        id="growing-unit-table"
        data-classes="table table-bordered table-hover table-sm"
        data-toggle="table"
        data-search="true"
        data-height="200"
        data-toolbar="#growing-unit-table-toolbar">
        <thead>
          <tr>
            <th data-sortable="true" data-field="cmu_name">Growing Unit</th>
            <th data-sortable="true" data-field="prob_1d_perc">Today</th>
            <th data-sortable="true" data-field="prob_2d_perc">Tomorrow</th>
            <th data-sortable="true" data-field="prob_3d_perc">In 2 days</th>
          </tr>
        </thead>
      </table>
    </div>

    <div id="growing-unit-table-explanation">
      <p>
        The forecasts shown provide the risk of temporary closure
        for leases in each of the conditionally approved NC Division of
        Marine Fisheries shellfish growing units.
      </p>
    </div>

  </div>
{% endblock %}