aswi2020sebela-gitlab/website/templates/heatmap.html.twig @ 94c6eb49

{% 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', {
                label_attr: {class: 'font-weight-bold'}
              }) }}
              {{ 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">
              <label class="font-weight-bold">Vyberte čas</label>
              <div class="dropdown">
                <button type="button" class="btn dropdown-toggle" id="dropdownMenuButtonTime" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  {{ current_time }}
                </button>
                <div id="dataset-dropdown-time" class="dropdown-menu" aria-labelledby="dropdownMenuButtonTime">
                  {% for hour in form.time.children %}
                  <div class="dropdown-item custom-dropdown-item">
                    {{ form_widget(hour, {attr: {class: 'd-none'}}) }}
                    {{ form_label(hour, null) }}
                  </div>
                  {% endfor %}
                </div>
              </div>
            </li>
            <li class="nav-item">
              <div class="dropdown">
                <button type="button" class="btn dropdown-toggle font-weight-bold" id="dropdownMenuButtonDataset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Vyberte datovou sadu
                </button>
                <div id="dataset-dropdown" class="dropdown-menu" aria-labelledby="dropdownMenuButtonDataset">
                  {% for dataset in form.type.children %}
                  <div class="dropdown-item custom-dropdown-item">
                    <div class="custom-control custom-checkbox custom-checkbox-{{dataset.vars.value}}">
                      {{ form_widget(dataset, {
                        attr: {
                          'class': "custom-control-input custom-control-input-#{dataset.vars.value}",
                          'data-dataset-display-name': "#{dataset.vars.label}"
                          }
                      }) }}
                      {{ form_label(dataset, null, {
                        'label_attr': {'class': 'custom-control-label'}
                      }) }}
                    </div>
                  </div>
                  {% endfor %}
                </div>
              </div>
            </li>
            <li class="nav-item">
              {{ form_widget(form.submit,
                {
                  'name' : '',
                  'label' : '',
                  'type' : 'submit',
                  'id' : 'btn-update-heatmap',
                  '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">
      {% include 'heatmap-locations.html.twig' %}
    </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" id="player-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>

        {% for i in 0..23 %}
        <div class="hour"></div>
        {% endfor %}
        <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') }}"></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 type="text/css">
    {% for dataset_name, dataset_color in dataset_colors %}
      .custom-control-input-{{ dataset_name }}:focus~.custom-control-label::before {
        border-color: {{ dataset_color }} !important;
        box-shadow: 0 0 0 0.2rem rgba(192,192,192, 0.4) !important;
      }

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

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

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

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