1
|
{% extends 'base.html.twig' %}
|
2
|
|
3
|
{% block title %}Heatmap.ZČU{% endblock %}
|
4
|
{% block stylesheets %}
|
5
|
<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
|
{% endblock %}
|
10
|
|
11
|
|
12
|
{% block body %}
|
13
|
|
14
|
<header class="map">
|
15
|
<nav class="navbar navbar-expand-lg ml-auto">
|
16
|
<a href="{{ path('home') }}" class="navbar-brand">
|
17
|
<h1>Heatmap.ZČU</h1>
|
18
|
</a>
|
19
|
|
20
|
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
|
21
|
<span class="navbar-toggler-icon"></span>
|
22
|
</button>
|
23
|
|
24
|
<div class="collapse navbar-collapse ml-auto" id="navigation">
|
25
|
|
26
|
{{ form_start(form, {'action': path('heatmap'), 'method': 'GET'}) }}
|
27
|
|
28
|
<ul class="navbar-nav">
|
29
|
<li class="nav-item">
|
30
|
{{ form_label(form.date, 'Vyberte datum') }}
|
31
|
{{
|
32
|
form_widget(form.date,
|
33
|
{
|
34
|
'type' : 'text',
|
35
|
'id' : 'date',
|
36
|
'attr' : {
|
37
|
'class' : 'form-control',
|
38
|
'maxlength' : '10',
|
39
|
'placeholder' : 'YYYY-MM-DD',
|
40
|
'autocomplete' : 'off',
|
41
|
'onChange' : 'checkDataSetsAvailability("' ~ path('available') ~ '")'
|
42
|
}
|
43
|
})
|
44
|
}}
|
45
|
</li>
|
46
|
|
47
|
<li class="nav-item">
|
48
|
{{ form_label(form.time, 'Vyberte čas') }}
|
49
|
{{
|
50
|
form_widget(form.time, {
|
51
|
'id' : 'time',
|
52
|
'attr' : {
|
53
|
'class' : 'custom-select',
|
54
|
},
|
55
|
})
|
56
|
}}
|
57
|
</li>
|
58
|
|
59
|
<li class="nav-item">
|
60
|
<div class="dropdown">
|
61
|
{# {{ form_label(form.type, 'Vyberte datovou sadu') }} #}
|
62
|
<button class="btn dropdown-toggle text-white font-weight-bold" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
63
|
Vyberte datovou sadu
|
64
|
</button>
|
65
|
<div id="dataset-dropdown" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
66
|
{% for oneType in form.type.children %}
|
67
|
<label class="dropdown-item custom-dropdown-item">
|
68
|
<div class="custom-control custom-checkbox custom-checkbox-{{oneType.vars.value}}">
|
69
|
{{ form_widget(oneType, {
|
70
|
attr: {
|
71
|
'class': "custom-control-input custom-control-input-#{oneType.vars.value}",
|
72
|
'data-dataset-display-name': "#{oneType.vars.label}"
|
73
|
}
|
74
|
}) }}
|
75
|
{{ form_label(oneType, null, {
|
76
|
'label_attr': {'class': 'custom-control-label'}
|
77
|
}) }}
|
78
|
</div>
|
79
|
</label>
|
80
|
{% endfor %}
|
81
|
</div>
|
82
|
</div>
|
83
|
</li>
|
84
|
|
85
|
<li class="nav-item">
|
86
|
{{
|
87
|
form_widget(form.submit,
|
88
|
{
|
89
|
'name' : '',
|
90
|
'label' : 'Potvrdit výběr',
|
91
|
'type' : 'submit',
|
92
|
'id' : 'submit-btn',
|
93
|
'attr' : {
|
94
|
'class': 'btn btn-secondary'
|
95
|
}
|
96
|
})
|
97
|
}}
|
98
|
</li>
|
99
|
</ul>
|
100
|
|
101
|
{{ form_end(form) }}
|
102
|
|
103
|
</div>
|
104
|
</nav>
|
105
|
</header>
|
106
|
|
107
|
<div class="map-locations">
|
108
|
<a class="menu" data-toggle="collapse" href="#mapLocations" role="button" aria-expanded="false" aria-controls="mapLocations">
|
109
|
<span class="desktop">Prohlédněte si jednotlivé oblasti</span>
|
110
|
<span class="mobile">Jednotlivé oblasti</span>
|
111
|
<div class="circle"></div>
|
112
|
</a>
|
113
|
<div class="locations collapse" id="mapLocations">
|
114
|
<ul>
|
115
|
<li onclick="setMapView(49.7248, 13.3521, 17)">Kampus ZČU</li>
|
116
|
<li onclick="setMapView(49.7367263, 13.3709177, 18)">FPE – Pedagogická fakulta</li>
|
117
|
<li onclick="setMapView(49.7474950, 13.3748308, 18)">FPR – Právnická fakulta</li>
|
118
|
<li onclick="setMapView(49.7450169, 13.3702668, 18)">FZS – Fakulta zdravotnických studií</li>
|
119
|
<li onclick="setMapView(50.0762590, 12.3640213, 17)">FEK – pracoviště Cheb</li>
|
120
|
<li onclick="setMapView(49.7236785, 13.3353118, 18)">NTC – výzkumné centrum</li>
|
121
|
<li onclick="setMapView(49.9590236, 13.1597114, 18)">Zámek ZČU – Nečtiny</li>
|
122
|
<li onclick="setMapView(49.7345564, 13.3585038, 18)">Koleje Borská</li>
|
123
|
<li onclick="setMapView(49.7250373, 13.3696772, 18)">Koleje Bory</li>
|
124
|
<li onclick="setMapView(49.7600000, 13.3723463, 18)">Koleje Lochotín</li>
|
125
|
<li onclick="setMapView(49.7293726, 13.3589237, 15)">Oblast s koloběžkami</li>
|
126
|
</ul>
|
127
|
</div>
|
128
|
</div>
|
129
|
|
130
|
<div class="player">
|
131
|
<div class="prev" onclick="previous()"></div>
|
132
|
<div class="play" id="play-pause" onclick="changeAnimationState()"></div>
|
133
|
<div class="next" onclick="next()"></div>
|
134
|
|
135
|
<div class="datetime">
|
136
|
|
137
|
{% if form.vars.value.date %}
|
138
|
<div class="date" onclick="openDatepicker()">{{ form.vars.value.date|date('j. n. Y') }}</div>
|
139
|
{% endif %}
|
140
|
|
141
|
<div class="timeline">
|
142
|
<div class="time hour-0" id="timeline">0:00</div>
|
143
|
|
144
|
<div class="hour"></div>
|
145
|
<div class="hour"></div>
|
146
|
<div class="hour"></div>
|
147
|
<div class="hour"></div>
|
148
|
<div class="hour"></div>
|
149
|
<div class="hour"></div>
|
150
|
<div class="hour"></div>
|
151
|
<div class="hour"></div>
|
152
|
<div class="hour"></div>
|
153
|
<div class="hour"></div>
|
154
|
<div class="hour"></div>
|
155
|
<div class="hour"></div>
|
156
|
<div class="hour"></div>
|
157
|
<div class="hour"></div>
|
158
|
<div class="hour"></div>
|
159
|
<div class="hour"></div>
|
160
|
<div class="hour"></div>
|
161
|
<div class="hour"></div>
|
162
|
<div class="hour"></div>
|
163
|
<div class="hour"></div>
|
164
|
<div class="hour"></div>
|
165
|
<div class="hour"></div>
|
166
|
<div class="hour"></div>
|
167
|
<div class="hour"></div>
|
168
|
<div class="end-dot"></div>
|
169
|
</div>
|
170
|
</div>
|
171
|
</div>
|
172
|
|
173
|
<div id="heatmap"></div>
|
174
|
|
175
|
{% endblock %}
|
176
|
|
177
|
{% block javascripts %}
|
178
|
|
179
|
<script src="{{ asset('js/vendor/jquery-3.4.1.min.js') }}"></script>
|
180
|
<script src="{{ asset('js/vendor/bootstrap.min.js') }}"></script>
|
181
|
<script src="{{ asset('js/vendor/bootstrap-datepicker.min.js') }}"></script>
|
182
|
<script src="{{ asset('js/vendor/bootstrap-datepicker.cs.min.js') }}" charset="UTF-8"></script>
|
183
|
<script src="{{ asset('js/vendor/leaflet.js') }}"></script>
|
184
|
<script src="{{ asset('js/vendor/leaflet-heat.js') }}"></script>
|
185
|
<script src="{{ asset('js/zcu-heatmap.js') }}"></script>
|
186
|
<script>
|
187
|
initDatepicker("{{ path('dates') }}");
|
188
|
initLocationsMenu();
|
189
|
initMap();
|
190
|
$( document ).ready(function() {
|
191
|
onDocumentReady();
|
192
|
checkDataSetsAvailability("{{ path('available') }}")
|
193
|
{% if submitted %}
|
194
|
loadCurrentTimeHeatmap("{{ path('opendata') }}", "{{ path('positions') }}");
|
195
|
{% endif %}
|
196
|
});
|
197
|
$(window).resize(function() {
|
198
|
initLocationsMenu();
|
199
|
});
|
200
|
</script>
|
201
|
|
202
|
{% endblock %}
|
203
|
|
204
|
{% block style %}
|
205
|
<style>
|
206
|
{% for key, item in dataset_colors %}
|
207
|
.custom-control-input-{{key}}:focus~.custom-control-label::before {
|
208
|
border-color: {{item}} !important;
|
209
|
box-shadow: 0 0 0 0.2rem rgba(192,192,192, 0.4) !important;
|
210
|
}
|
211
|
|
212
|
.custom-control-input-{{key}}:checked~.custom-control-label::before {
|
213
|
border-color: {{item}} !important;
|
214
|
background-color: {{item}} !important;
|
215
|
}
|
216
|
|
217
|
.custom-control-input-{{key}}:focus:not(:checked)~.custom-control-label::before {
|
218
|
border-color: {{item}} !important;
|
219
|
}
|
220
|
|
221
|
.custom-control-input-{{key}}:not(:disabled):active~.custom-control-label::before {
|
222
|
background-color: {{item}} !important;
|
223
|
border-color: {{item}} !important;
|
224
|
}
|
225
|
|
226
|
.popup-{{key}} > .leaflet-popup-content-wrapper, .popup-{{key}} .leaflet-popup-tip{
|
227
|
background-color: {{item}} !important;
|
228
|
}
|
229
|
{% endfor %}
|
230
|
</style>
|
231
|
{% endblock %}
|