Projekt

Obecné

Profil

Stáhnout (7.9 KB) Statistiky
| Větev: | Revize:
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
{% block body %}
12

    
13
  <header class="map">
14
    <nav class="navbar navbar-expand-lg ml-auto">
15
      <a href="{{ path('home') }}" class="navbar-brand">
16
        <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
      <div class="collapse navbar-collapse ml-auto" id="navigation">
24
        {{ form_start(form, {'action': path('heatmap'), 'method': 'GET'}) }}
25
          <ul class="navbar-nav">
26
            <li class="nav-item">
27
              {{ form_label(form.date, 'Vyberte datum', {
28
                label_attr: {class: 'font-weight-bold'}
29
              }) }}
30
              {{ form_widget(form.date,
31
                {
32
                  'type' : 'text',
33
                  'id' : 'date',
34
                  'attr' : {
35
                    'class' : 'form-control',
36
                    'maxlength' : '10',
37
                    'placeholder' : 'YYYY-MM-DD',
38
                    'autocomplete' : 'off',
39
                    'onchange' : 'checkDataSetsAvailability("' ~ path('available') ~ '")'
40
                  }
41
                })
42
              }}
43
            </li>
44
            <li class="nav-item">
45
              <label class="font-weight-bold">Vyberte čas</label>
46
              <div class="dropdown">
47
                <button type="button" class="btn dropdown-toggle" id="dropdownMenuButtonTime" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
48
                  {{ formated_current_time }}
49
                </button>
50
                <div id="dropdown-time" class="dropdown-menu" aria-labelledby="dropdownMenuButtonTime">
51
                  {% 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
                  {% endfor %}
57
                </div>
58
              </div>
59
            </li>
60
            <li class="nav-item">
61
              <div class="dropdown">
62
                <button type="button" class="btn dropdown-toggle font-weight-bold" id="dropdownMenuButtonDataset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
63
                  Vyberte datovou sadu
64
                </button>
65
                <div id="dropdown-dataset" class="dropdown-menu" aria-labelledby="dropdownMenuButtonDataset">
66
                  {% for dataset in form.type.children %}
67
                  <div class="dropdown-item custom-dropdown-item">
68
                    <div class="custom-control custom-checkbox custom-checkbox-{{dataset.vars.value}}">
69
                      {{ form_widget(dataset, {
70
                        attr: {
71
                          'class': "custom-control-input custom-control-input-#{dataset.vars.value}",
72
                          'data-dataset-display-name': "#{dataset.vars.label}"
73
                          }
74
                      }) }}
75
                      {{ form_label(dataset, null, {
76
                        'label_attr': {'class': 'custom-control-label'}
77
                      }) }}
78
                    </div>
79
                  </div>
80
                  {% endfor %}
81
                </div>
82
              </div>
83
            </li>
84
            <li class="nav-item">
85
              {{ form_widget(form.submit,
86
                {
87
                  'type' : 'submit',
88
                  'name' : '',
89
                  'id' : 'btn-update-heatmap',
90
                  'attr' : {
91
                    'class': 'btn btn-secondary'
92
                  }
93
                })
94
              }}
95
            </li>
96
          </ul>
97
        {{ form_end(form) }}
98
      </div>
99
    </nav>
100
  </header>
101

    
102
  <div class="map-locations">
103
    <a href="#mapLocations" class="menu" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="mapLocations">
104
      <span class="desktop">Prohlédněte si jednotlivé oblasti</span>
105
      <span class="mobile">Jednotlivé oblasti</span>
106
      <div class="circle"></div>
107
    </a>
108
    <div class="locations collapse" id="mapLocations">
109
      {% include 'heatmap-locations.html.twig' %}
110
    </div>
111
  </div>
112

    
113
  <div class="player">
114
    <div class="prev-btn" onclick="previous()"></div>
115
    <div class="animate-btn play" id="animate-btn" onclick="changeAnimationState()"></div>
116
    <div class="next-btn" onclick="next()"></div>
117

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

    
126
      <div class="timeline">
127
        <div class="time hour-{{ current_time }}" id="player-time">
128
          <span></span>
129
          <div class="spinner-border spinner-border-sm custom-spinner-border" role="status">
130
            <span class="sr-only">Loading&hellip;</span>
131
          </div>
132
        </div>
133

    
134
        {% for i in 0..23 %}
135
        <div class="hour" title="{{ i }}:00" onclick="onChangeHour('{{ i }}')"></div>
136
        {% endfor %}
137

    
138
        <div class="end-dot"></div>
139
      </div>
140
    </div>
141
  </div>
142

    
143
  <div id="heatmap"></div>
144

    
145
{% endblock %}
146

    
147
{% block javascripts %}
148
    <script src="{{ asset('js/vendor/jquery-3.4.1.min.js') }}"></script>
149
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
150
    <script src="{{ asset('js/vendor/bootstrap.min.js') }}"></script>
151
    <script src="{{ asset('js/vendor/bootstrap-datepicker.min.js') }}"></script>
152
    <script src="{{ asset('js/vendor/bootstrap-datepicker.cs.min.js') }}"></script>
153
    <script src="{{ asset('js/vendor/leaflet.js') }}"></script>
154
    <script src="{{ asset('js/vendor/leaflet-heat.js') }}"></script>
155
    <script src="{{ asset('js/zcu-heatmap.js') }}"></script>
156
    <script>
157
      initDatepicker("{{ path('dates') }}");
158
      initLocationsMenu();
159
      initMap();
160

    
161
      $(document).ready(function() {
162
        onDocumentReady();
163
        checkDataSetsAvailability("{{ path('available') }}")
164
        {% if submitted %}
165
        loadCurrentTimeHeatmap("{{ path('opendata') }}", "{{ path('positions') }}");
166
        {% endif %}
167
        $('#player-time').draggable({ containment: 'parent', axis: 'x', drag: function(event, ui) { dragTimeline() }, cursor: 'ew-resize' })
168
      });
169
      
170
      $(window).resize(function() {
171
        initLocationsMenu();
172
      });
173
  </script>
174
{% endblock %}
175

    
176
{% block style %}
177
<style>
178
{% for dataset_name, dataset_color in dataset_colors %}
179
    .custom-control-input-{{ dataset_name }}:focus~.custom-control-label::before {
180
      border-color: {{ dataset_color }} !important;
181
      box-shadow: 0 0 0 0.2rem rgba(192,192,192, 0.4) !important;
182
    }
183

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

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

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

    
198
    .popup-{{ dataset_name }} > .leaflet-popup-content-wrapper, .popup-{{ dataset_name }} .leaflet-popup-tip {
199
      background-color: {{ dataset_color }} !important;
200
    }
201
{% endfor %}
202
</style>
203
{% endblock %}
(3-3/4)