aswi2020sebela-gitlab/website/templates/heatmap.html.twig @ 1752e732

{% 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' : 'js.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">
                  {{ formated_current_time }}
                </button>
                <div id="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="dropdown-dataset" 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,
                {
                  'type' : 'submit',
                  'name' : '',
                  'id' : 'btn-update-heatmap',
                  'attr' : {
                    'class': 'btn btn-secondary'
                  }
                })
              }}
            </li>
          </ul>
        {{ form_end(form) }}
      </div>
    </nav>
  </header>

  <div class="map-locations">
    <a href="#mapLocations" class="menu" data-toggle="collapse" 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-btn" onclick="js.previous()"></div>
    <div class="animate-btn play" id="animate-btn" onclick="js.changeAnimationState()"></div>
    <div class="next-btn" onclick="js.next()"></div>

    <div class="timeline-wrapper">
      {% if form.vars.value.date %}
      <div class="date" id="player-date" onclick="js.toggleDayLock()" title="Animovat pouze v rámci jednoho dne">
        <span>{{ form.vars.value.date|date('j. n. Y') }}</span>
        <div class="lock-btn"></div>
      </div>
      {% endif %}

      <div class="timeline">
        <div class="time hour-{{ current_time }}" id="player-time">
          <span></span>
          <div class="spinner-border spinner-border-sm custom-spinner-border" role="status">
            <span class="sr-only">Loading&hellip;</span>
          </div>
        </div>

        {% for i in 0..23 %}
        <div class="hour" title="{{ i }}:00" onclick="js.onChangeHour('{{ i }}')"></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="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.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>
      const modernBrowser = 'fetch' in window && 'assign' in Object;

      if (!modernBrowser) {
        const scriptElement = document.createElement('script');

        scriptElement.async = false;
        scriptElement.src = '{{ asset("js/polyfills.bundle.js") }}';
        document.head.appendChild(scriptElement);
      }
    </script>
    <script src="{{ asset('js/index.bundle.js') }}"></script>
    <script>
      js.initDatepicker("{{ path('dates') }}");
      js.initLocationsMenu();
      js.initMap();

      $(document).ready(function() {
        js.onDocumentReady();
        js.checkDataSetsAvailability("{{ path('available') }}")
        {% if submitted %}
        js.loadCurrentTimeHeatmap("{{ path('opendata') }}", "{{ path('positions') }}");
        {% endif %}
        $('#player-time').draggable({ containment: 'parent', axis: 'x', drag: function(event, ui) { js.dragTimeline() }, cursor: 'ew-resize' })
      });
      
      $(window).resize(function() {
        js.initLocationsMenu();
      });
  </script>
{% endblock %}

{% block style %}
<style>
{% 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 %}