aswi2020sebela-gitlab/website/templates/heatmap.html.twig @ f83d4608

{% 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',
                    'maxlength' : '10',
                    'placeholder' : 'YYYY-MM-DD',
                    'autocomplete' : 'off',
                    '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">
      <span class="desktop">Prohlédněte si jednotlivé oblasti</span>
      <span class="mobile">Jednotlivé oblasti</span>
      <div class="circle"></div>
    </a>
    <div class="locations collapse" id="mapLocations">
      <ul>
        <li onclick="setMapView(49.7248, 13.3521, 17)">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(50.0762590, 12.3640213, 17)">FEK &ndash; pracoviště Cheb</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="datetime">
    
    {% if form.vars.value.date %}
      <div class="date" onclick="openDatepicker()">{{ form.vars.value.date|date('j. n. Y') }}</div>
    {% endif %}

    <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>

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

{% block javascripts %}

    <script src="{{ asset('js/vendor/jquery-3.4.1.min.js') }}"></script>
    <script src="{{ asset('js/vendor/bootstrap.min.js') }}"></script>
    <script src="{{ asset('js/vendor/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ asset('js/vendor/bootstrap-datepicker.cs.min.js') }}" charset="UTF-8"></script>
    <script src="{{ asset('js/vendor/leaflet.js') }}"></script>
    <script src="{{ asset('js/vendor/leaflet-heat.js') }}"></script>
    <script src="{{ asset('js/zcu-heatmap.js') }}"></script>
    <script>
        initDatepicker("{{ path('dates') }}");
        initLocationsMenu();
        initMap();
        checkDataSetsAvailability("{{ path('available') }}")
        {% if submitted %}
        loadCurrentTimeHeatmap("{{ path('opendata') }}", "{{ path('positions') }}");
        {% endif %}

        $(window).resize(function() {
          initLocationsMenu();
        });
  </script>

{% endblock %}