Projekt

Obecné

Profil

Stáhnout (8.29 KB) Statistiky
| Větev: | Revize:
1 3fc08f2d vastja
{% extends 'base.html.twig' %}
2 94c6eb49 Martin Sebela
3 3c909967 Martin Sebela
{% block title %}Heatmap.ZČU{% endblock %}
4 3fc08f2d vastja
{% block stylesheets %}
5 c892003d Martin Sebela
<link rel="stylesheet" href="{{ asset('css/leaflet.css') }}">
6
    <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
7
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
8
    <link rel="stylesheet" href="{{ asset('css/bootstrap-datepicker3.css') }}">
9 3fc08f2d vastja
{% endblock %}
10
11
{% block body %}
12
13 c6708024 vastja
  <header class="map">
14 3fc22d29 Martin Sebela
    <nav class="navbar navbar-expand-lg ml-auto">
15
      <a href="{{ path('home') }}" class="navbar-brand">
16 c6708024 vastja
        <h1>Heatmap.ZČU</h1>
17
      </a>
18
19
      <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
20
        <span class="navbar-toggler-icon"></span>
21
      </button>
22
23 3fc22d29 Martin Sebela
      <div class="collapse navbar-collapse ml-auto" id="navigation">
24 896f0d9c vastja
        {{ form_start(form, {'action': path('heatmap'), 'method': 'GET'}) }}
25 c6708024 vastja
          <ul class="navbar-nav">
26
            <li class="nav-item">
27 1cf1413d ballakt
              {{ form_label(form.date, 'Vyberte datum', {
28
                label_attr: {class: 'font-weight-bold'}
29
              }) }}
30 bb2d43b5 Martin Sebela
              {{ form_widget(form.date,
31 03c02899 vastja
                {
32 c883131e Martin Sebela
                  'type' : 'text',
33 03c02899 vastja
                  'id' : 'date',
34
                  'attr' : {
35 0a828a5a Martin Sebela
                    'class' : 'form-control',
36 a7e04778 Martin Sebela
                    'maxlength' : '10',
37
                    'placeholder' : 'YYYY-MM-DD',
38 63cd0d07 Martin Sebela
                    'autocomplete' : 'off',
39 9a772066 Tomáš
                    'onchange' : 'js.checkDataSetsAvailability("' ~ path('available') ~ '")'
40 03c02899 vastja
                  }
41
                })
42
              }}
43 c6708024 vastja
            </li>
44
            <li class="nav-item">
45 1cf1413d ballakt
              <label class="font-weight-bold">Vyberte čas</label>
46 bb2d43b5 Martin Sebela
              <div class="dropdown">
47
                <button type="button" class="btn dropdown-toggle" id="dropdownMenuButtonTime" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
48 d51166e8 ballakt
                  {{ formated_current_time }}
49 1cf1413d ballakt
                </button>
50 c892003d Martin Sebela
                <div id="dropdown-time" class="dropdown-menu" aria-labelledby="dropdownMenuButtonTime">
51 94c6eb49 Martin Sebela
                  {% for hour in form.time.children %}
52
                  <div class="dropdown-item custom-dropdown-item">
53
                    {{ form_widget(hour, {attr: {class: 'd-none'}}) }}
54
                    {{ form_label(hour, null) }}
55
                  </div>
56 bb2d43b5 Martin Sebela
                  {% endfor %}
57
                </div>
58 1cf1413d ballakt
              </div>
59 c6708024 vastja
            </li>
60
            <li class="nav-item">
61 2f227a6c ballakt
              <div class="dropdown">
62 bb2d43b5 Martin Sebela
                <button type="button" class="btn dropdown-toggle font-weight-bold" id="dropdownMenuButtonDataset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
63 2f227a6c ballakt
                  Vyberte datovou sadu
64 bb2d43b5 Martin Sebela
                </button>
65 c892003d Martin Sebela
                <div id="dropdown-dataset" class="dropdown-menu" aria-labelledby="dropdownMenuButtonDataset">
66 94c6eb49 Martin Sebela
                  {% for dataset in form.type.children %}
67 bb2d43b5 Martin Sebela
                  <div class="dropdown-item custom-dropdown-item">
68 94c6eb49 Martin Sebela
                    <div class="custom-control custom-checkbox custom-checkbox-{{dataset.vars.value}}">
69
                      {{ form_widget(dataset, {
70 bb2d43b5 Martin Sebela
                        attr: {
71 94c6eb49 Martin Sebela
                          'class': "custom-control-input custom-control-input-#{dataset.vars.value}",
72
                          'data-dataset-display-name': "#{dataset.vars.label}"
73 bb2d43b5 Martin Sebela
                          }
74
                      }) }}
75 94c6eb49 Martin Sebela
                      {{ form_label(dataset, null, {
76 bb2d43b5 Martin Sebela
                        'label_attr': {'class': 'custom-control-label'}
77
                      }) }}
78
                    </div>
79
                  </div>
80
                  {% endfor %}
81
                </div>
82 2f227a6c ballakt
              </div>
83 c6708024 vastja
            </li>
84
            <li class="nav-item">
85 bb2d43b5 Martin Sebela
              {{ form_widget(form.submit,
86 03c02899 vastja
                {
87
                  'type' : 'submit',
88 c892003d Martin Sebela
                  'name' : '',
89 94c6eb49 Martin Sebela
                  'id' : 'btn-update-heatmap',
90 03c02899 vastja
                  'attr' : {
91
                    'class': 'btn btn-secondary'
92
                  }
93
                })
94
              }}
95 c6708024 vastja
            </li>
96 bb2d43b5 Martin Sebela
          </ul>
97 03c02899 vastja
        {{ form_end(form) }}
98 c6708024 vastja
      </div>
99
    </nav>
100
  </header>
101 3fc08f2d vastja
102 c236b33a msebela
  <div class="map-locations">
103 863ca316 Martin Sebela
    <a href="#mapLocations" class="menu" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="mapLocations">
104 dd652e61 Martin Sebela
      <span class="desktop">Prohlédněte si jednotlivé oblasti</span>
105
      <span class="mobile">Jednotlivé oblasti</span>
106 c236b33a msebela
      <div class="circle"></div>
107 351696d5 Martin Sebela
    </a>
108 dd652e61 Martin Sebela
    <div class="locations collapse" id="mapLocations">
109 bb2d43b5 Martin Sebela
      {% include 'heatmap-locations.html.twig' %}
110 c236b33a msebela
    </div>
111
  </div>
112
113
  <div class="player">
114 9a772066 Tomáš
    <div class="prev-btn" onclick="js.previous()"></div>
115
    <div class="animate-btn play" id="animate-btn" onclick="js.changeAnimationState()"></div>
116
    <div class="next-btn" onclick="js.next()"></div>
117 351696d5 Martin Sebela
118 ec5e3220 Martin Sebela
    <div class="timeline-wrapper">
119 94c6eb49 Martin Sebela
      {% if form.vars.value.date %}
120 9a772066 Tomáš
      <div class="date" id="player-date" onclick="js.toggleDayLock()" title="Animovat pouze v rámci jednoho dne">
121 1774c06d Tomáš Ballák
        <span>{{ form.vars.value.date|date('j. n. Y') }}</span>
122 863ca316 Martin Sebela
        <div class="lock-btn"></div>
123 b7a21811 Martin Sebela
      </div>
124 94c6eb49 Martin Sebela
      {% endif %}
125
126
      <div class="timeline">
127 fdba469a Martin Sebela
        <div class="time hour-{{ current_time }}" id="player-time">
128 d51166e8 ballakt
          <span></span>
129
          <div class="spinner-border spinner-border-sm custom-spinner-border" role="status">
130 ec5e3220 Martin Sebela
            <span class="sr-only">Loading&hellip;</span>
131 d51166e8 ballakt
          </div>
132
        </div>
133 fdba469a Martin Sebela
134 94c6eb49 Martin Sebela
        {% for i in 0..23 %}
135 9a772066 Tomáš
        <div class="hour" title="{{ i }}:00" onclick="js.onChangeHour('{{ i }}')"></div>
136 94c6eb49 Martin Sebela
        {% endfor %}
137 863ca316 Martin Sebela
138 94c6eb49 Martin Sebela
        <div class="end-dot"></div>
139
      </div>
140 351696d5 Martin Sebela
    </div>
141 c236b33a msebela
  </div>
142
143 c6708024 vastja
  <div id="heatmap"></div>
144 94c6eb49 Martin Sebela
145 3fc08f2d vastja
{% endblock %}
146
147
{% block javascripts %}
148 8feb1753 ballakt
    <script src="{{ asset('js/vendor/jquery-3.4.1.min.js') }}"></script>
149 fdba469a Martin Sebela
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
150 8feb1753 ballakt
    <script src="{{ asset('js/vendor/bootstrap.min.js') }}"></script>
151
    <script src="{{ asset('js/vendor/bootstrap-datepicker.min.js') }}"></script>
152 94c6eb49 Martin Sebela
    <script src="{{ asset('js/vendor/bootstrap-datepicker.cs.min.js') }}"></script>
153 8feb1753 ballakt
    <script src="{{ asset('js/vendor/leaflet.js') }}"></script>
154
    <script src="{{ asset('js/vendor/leaflet-heat.js') }}"></script>
155 667990c0 Tomáš
    <script>
156
      const modernBrowser = 'fetch' in window && 'assign' in Object;
157 660f24a7 Martin Sebela
158 667990c0 Tomáš
      if (!modernBrowser) {
159
        const scriptElement = document.createElement('script');
160 660f24a7 Martin Sebela
161 667990c0 Tomáš
        scriptElement.async = false;
162 660f24a7 Martin Sebela
        scriptElement.src = '{{ asset("js/polyfills.bundle.js") }}';
163 667990c0 Tomáš
        document.head.appendChild(scriptElement);
164
      }
165
    </script>
166 9a772066 Tomáš
    <script src="{{ asset('js/index.bundle.js') }}"></script>
167 03c02899 vastja
    <script>
168 9a772066 Tomáš
      js.initDatepicker("{{ path('dates') }}");
169
      js.initLocationsMenu();
170
      js.initMap();
171 c892003d Martin Sebela
172
      $(document).ready(function() {
173 9a772066 Tomáš
        js.onDocumentReady();
174
        js.checkDataSetsAvailability("{{ path('available') }}")
175 c892003d Martin Sebela
        {% if submitted %}
176 9a772066 Tomáš
        js.loadCurrentTimeHeatmap("{{ path('opendata') }}", "{{ path('positions') }}");
177 c892003d Martin Sebela
        {% endif %}
178 9a772066 Tomáš
        $('#player-time').draggable({ containment: 'parent', axis: 'x', drag: function(event, ui) { js.dragTimeline() }, cursor: 'ew-resize' })
179 c892003d Martin Sebela
      });
180
      
181
      $(window).resize(function() {
182 9a772066 Tomáš
        js.initLocationsMenu();
183 c892003d Martin Sebela
      });
184 c883131e Martin Sebela
  </script>
185 2f227a6c ballakt
{% endblock %}
186
187
{% block style %}
188 b7a21811 Martin Sebela
<style>
189 c892003d Martin Sebela
{% for dataset_name, dataset_color in dataset_colors %}
190
    .custom-control-input-{{ dataset_name }}:focus~.custom-control-label::before {
191
      border-color: {{ dataset_color }} !important;
192
      box-shadow: 0 0 0 0.2rem rgba(192,192,192, 0.4) !important;
193
    }
194
195
    .custom-control-input-{{ dataset_name }}:checked~.custom-control-label::before {
196
      border-color: {{ dataset_color }} !important;
197
      background-color: {{ dataset_color }} !important;
198
    }
199
200
    .custom-control-input-{{ dataset_name }}:focus:not(:checked)~.custom-control-label::before {
201
      border-color: {{ dataset_color }} !important;
202
    }
203
204
    .custom-control-input-{{ dataset_name }}:not(:disabled):active~.custom-control-label::before {
205
      background-color: {{ dataset_color }} !important;
206
      border-color: {{ dataset_color }} !important;
207
    }
208
209
    .popup-{{ dataset_name }} > .leaflet-popup-content-wrapper, .popup-{{ dataset_name }} .leaflet-popup-tip {
210
      background-color: {{ dataset_color }} !important;
211
    }
212
{% endfor %}
213
</style>
214 3fc08f2d vastja
{% endblock %}