aswi2020sebela-gitlab/website/templates/heatmap.html.twig @ 2f227a6c

{% 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">
              <div class="dropdown">
              {# {{ form_label(form.type, 'Vyberte datovou sadu') }} #}
                <button class="btn dropdown-toggle text-white font-weight-bold" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Vyberte datovou sadu
              </button>
              <div id="dataset-dropdown" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              {% for oneType in form.type.children %}
              <label class="dropdown-item custom-dropdown-item">
              <div class="custom-control custom-checkbox custom-checkbox-{{oneType.vars.value}}">
              {{ form_widget(oneType, {
                attr: {'class': "custom-control-input custom-control-input-#{oneType.vars.value}"}
              }) }}
              {{ form_label(oneType, null, {
                'label_attr': {'class': 'custom-control-label'}
                }) }}
              </div>
              </label>
              {% endfor %}
              </div>
              </div>  
            </li>

            <li class="nav-item">
              {{
                form_widget(form.submit,
                {
                  'name' : '',
                  '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();        
        $( document ).ready(function() {
          onDocumentReady();
          checkDataSetsAvailability("{{ path('available') }}")
          {% if submitted %}
          loadCurrentTimeHeatmap("{{ path('opendata') }}", "{{ path('positions') }}");
          {% endif %}
        });
        $(window).resize(function() {
          initLocationsMenu();
        });
  </script>

{% endblock %}

{% block style %}
  <style>
    {% for key, item in dataset_colors %}
      .custom-control-input-{{key}}:focus~.custom-control-label::before {
          border-color: {{item}} !important;
          box-shadow: 0 0 0 0.2rem rgba(192,192,192, 0.4) !important;
      }

      .custom-control-input-{{key}}:checked~.custom-control-label::before {
          border-color: {{item}} !important;
          background-color: {{item}} !important;
      }

      .custom-control-input-{{key}}:focus:not(:checked)~.custom-control-label::before {
          border-color: {{item}} !important;
      }

      .custom-control-input-{{key}}:not(:disabled):active~.custom-control-label::before {
          background-color: {{item}} !important;
          border-color: {{item}} !important;
      }

      .popup-{{key}} > .leaflet-popup-content-wrapper, .popup-{{key}} .leaflet-popup-tip{
        background-color: {{item}} !important;
      }
    {% endfor %}
  </style>
{% endblock %}