aswi2020sebela-gitlab/website/templates/heatmap.html.twig @ 351696d5

{% extends 'base.html.twig' %}
  
{% block title %} Heatmap.ZČU {% endblock %}
{% block stylesheets %}
  <link rel="stylesheet" href="{{ asset('css/leaflet.css') }}" />
  <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}" />
  <link rel="stylesheet" href="{{ asset('css/style.css') }}" />
{% endblock %}


{% block body %}

  <header class="map">
    <nav class="navbar navbar-expand-lg">
      <a href="{{ path('heatmap') }}" class="navbar-brand">
        <h1>Heatmap.ZČU</h1>
      </a>

      <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navigation">
        <form method="get">
          <ul class="navbar-nav">
            <li class="nav-item">
              <label for="date">Vyberte datum</label>
              <input type="date" name="date" id="date" class="form-control" required>
            </li>

            <li class="nav-item">
              <label for="hour">Vyberte čas</label>
              <select name="hour" id="hour" class="custom-select">
                <option value="0">0:00&ndash;1:00</option>
                <option value="1">1:00&ndash;2:00</option>
                <option value="2">2:00&ndash;3:00</option>
                <option value="3">3:00&ndash;4:00</option>
                <option value="4">4:00&ndash;5:00</option>
                <option value="5">5:00&ndash;6:00</option>
                <option value="6">6:00&ndash;7:00</option>
                <option value="7">7:00&ndash;8:00</option>
                <option value="8">8:00&ndash;9:00</option>
                <option value="9">9:00&ndash;10:00</option>
                <option value="10">10:00&ndash;11:00</option>
                <option value="11">11:00&ndash;12:00</option>
                <option value="12">12:00&ndash;13:00</option>
                <option value="13">13:00&ndash;14:00</option>
                <option value="14">14:00&ndash;15:00</option>
                <option value="15">15:00&ndash;16:00</option>
                <option value="16">16:00&ndash;17:00</option>
                <option value="17">17:00&ndash;18:00</option>
                <option value="18">18:00&ndash;19:00</option>
                <option value="19">19:00&ndash;20:00</option>
                <option value="20">20:00&ndash;21:00</option>
                <option value="21">21:00&ndash;22:00</option>
                <option value="22">22:00&ndash;23:00</option>
                <option value="23">23:00&ndash;0:00</option>
              </select>
            </li>

            <li class="nav-item">
              <label for="dataset">Vybrané datové sady</label>
              <select name="dataset" id="dataset" class="custom-select">
                <option value="internet">Wi-Fi a drátové připojení</option>
                <option value="jis">JIS snímače</option>
                <option value="scoobikes">Koloběžky</option>
              </select>
            </li>

            <li class="nav-item">
              <button class="btn btn-secondary" type="submit">
                Potvrdit výběr
              </button>
            </li>

            <li class="nav-item button">
              <h2>
                <a href="{{ path('home') }}" class="nav-link">O&nbsp;projektu</a>
              </h2>
            </li>
          </ul>
        </form>
      </div>

      <a href="{{ path('home') }}" class="navbar-button">
        <h2>
          O&nbsp;projektu
        </h2>
      </a>
    </nav>
  </header>

  <div class="map-locations">
    <a class="menu" data-toggle="collapse" href="#mapLocations" role="button" aria-expanded="false" aria-controls="mapLocations">
      Prohlédněte si jednotlivé oblasti
      <div class="circle"></div>
    </a>
    <div class="locations collapse show" id="mapLocations">
      <ul>
        <li onclick="setMapView()">Kampus ZČU</li>
        <li onclick="setMapView(49.7489485, 13.3757721, 19)">FF &ndash; Filozofická fakulta</li>
        <li onclick="setMapView(49.7367263, 13.3709177, 19)">FPE &ndash; Pedagogická fakulta</li>
        <li onclick="setMapView(49.7471633, 13.3739511, 19)">FPR &ndash; Právnická fakulta</li>
        <li onclick="setMapView(49.7450169, 13.3702668, 19)">FZS &ndash; Fakulta zdravotnických studií</li>
        <li onclick="setMapView(49.7236785, 13.3353118, 18)">NTC &ndash; výzkumné centrum</li>
        <li onclick="setMapView(49.7345564, 13.3585038, 19)">Koleje Borská</li>
        <li onclick="setMapView(49.7250373, 13.3696772, 19)">Koleje Bory</li>
        <li onclick="setMapView(49.7600000, 13.3723463, 19)">Koleje Lochotín</li>
      </ul>
    </div>
  </div>

  <div class="player">
    <div class="prev" onclick="changeTime('prev')"></div>
    <div class="play" onclick="animateTimeline()"></div>
    <div class="next" onclick="changeTime('next')"></div>

    <div class="timeline">
      <div class="time hour-0" id="time">0:00</div>

      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="end-dot"></div>
    </div>
  </div>

  <div id="heatmap"></div>
  
{% endblock %}

{% block javascripts %}

  <script src="{{ asset('js/jquery-3.4.1.min.js') }}"></script>
  <script src="{{ asset('js/bootstrap.min.js') }}"></script>
  <script src="{{ asset('js/leaflet.js') }}"></script>
  <script src="{{ asset('js/leaflet-heat.js') }}"></script>
  <script src="{{ asset('js/zcu-heatmap.js') }}"></script>
  <script>
      initMap();
      showHeatmap("{{ path('opendata', {'collectionName':'open-data-db.KOLOBEZKY31102018'}) }}");
  </script>

{% endblock %}