aswi2020sebela-gitlab/website/templates/heatmap.html.twig @ 61ff7718

{% 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') }}">
  <link rel="stylesheet" href="{{ asset('css/bootstrap-datepicker3.css') }}">
{% endblock %}


{% block body %}

  <header class="map">
    <nav class="navbar navbar-expand-lg ml-auto">
      <a href="{{ path('home') }}" 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 ml-auto" id="navigation">
        
        {{ form_start(form, {'action': path('heatmap'), 'method': 'GET'}) }}

          <ul class="navbar-nav">
            <li class="nav-item">
              {{ form_label(form.date, 'Vyberte datum') }}
              {{
                form_widget(form.date,
                {
                  'type' : 'text',
                  'id' : 'date',
                  'attr' : {
                    'class' : 'form-control',                 
                    'onChange' : 'checkDataSetsAvailability("' ~ path('available') ~ '")'
                  }
                })
              }}
            </li>

            <li class="nav-item">
              {{ form_label(form.time, 'Vyberte čas') }}
              {{
                form_widget(form.time, {
                  'id' : 'time',
                  'attr' : {
                    'class' : "custom-select"
                  }
                })
              }}             
            </li>

            <li class="nav-item">
              {{ form_label(form.type, 'Vyberte datovou sadu') }}
              {{
                form_widget(form.type, {
                  'id' : 'type',
                  'attr' : {
                    'class' : "custom-select"                 
                  }
                })
              }}  
            </li>

            <li class="nav-item">
              {{
                form_widget(form.submit,
                {
                  'label' : 'Potvrdit výběr',
                  'type' : 'submit',
                  'id' : 'submit-btn',
                  'attr' : {
                    'class': 'btn btn-secondary'
                  }
                })
              }}
            </li>
          </ul> 
        
        {{ form_end(form) }}

      </div>
    </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.7367263, 13.3709177, 18)">FPE &ndash; Pedagogická fakulta</li>
        <li onclick="setMapView(49.7474950, 13.3748308, 18)">FPR &ndash; Právnická fakulta</li>
        <li onclick="setMapView(49.7450169, 13.3702668, 18)">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.9590236, 13.1597114, 18)">Zámek ZČU &ndash; Nečtiny</li>
        <li onclick="setMapView(49.7345564, 13.3585038, 18)">Koleje Borská</li>
        <li onclick="setMapView(49.7250373, 13.3696772, 18)">Koleje Bory</li>
        <li onclick="setMapView(49.7600000, 13.3723463, 18)">Koleje Lochotín</li>
        <li onclick="setMapView(49.7293726, 13.3589237, 15)">Oblast s&nbsp;koloběžkami</li>
      </ul>
    </div>
  </div>

  <div class="player">
    <div class="prev" onclick="previous()"></div>
    <div class="play" id="play-pause" onclick="changeAnimationState()"></div>
    <div class="next" onclick="next()"></div>

    <div class="timeline">
      <div class="time hour-0" id="timeline">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/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ asset('js/bootstrap-datepicker.cs.min.js') }}" charset="UTF-8"></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();
        checkDataSetsAvailability("{{ path('available') }}")
        {% if submitted %}
          loadCurrentTimeHeatmap("{{ path('opendata') }}", "{{ path('positions') }}");
        {% endif %}
      
        var datesetDates = '23-04-2019,24-04-2019,25-04-2019,24-05-2020,27-05-2020'.split(',');

        function formatDate(date) {
          var day = String(date.getDate());
          var month = String(date.getMonth() + 1);

          if (day.length === 1) {
            day = '0' + day;
          }

          if (month.length === 1) {
            month = '0' + month;
          }

          return day + '-' + month + '-' + date.getFullYear();
        }

        $(function () {
          $('#date').datepicker({
            format: 'yyyy-mm-dd',
            language: 'cs',
            beforeShowDay: function(date) {
              if (datesetDates.indexOf(formatDate(date)) < 0) {
                return {enabled: false, tooltip: 'Žádná data'}
              }
              else {
                return {enabled: true}
              }
            },
            autoclose: true
          })
        });
  </script>

{% endblock %}