Projekt

Obecné

Profil

Stáhnout (6.27 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

    
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
                    'onChange' : 'checkDataSetsAvailability("' ~ path('available') ~ '")'
41
                  }
42
                })
43
              }}
44
            </li>
45

    
46
            <li class="nav-item">
47
              {{ form_label(form.time, 'Vyberte čas') }}
48
              {{
49
                form_widget(form.time, {
50
                  'id' : 'time',
51
                  'attr' : {
52
                    'class' : 'custom-select'
53
                  }
54
                })
55
              }}             
56
            </li>
57

    
58
            <li class="nav-item">
59
              {{ form_label(form.type, 'Vyberte datovou sadu') }}
60
              {{
61
                form_widget(form.type, {
62
                  'id' : 'type',
63
                  'attr' : {
64
                    'class' : 'custom-select'
65
                  }
66
                })
67
              }}  
68
            </li>
69

    
70
            <li class="nav-item">
71
              {{
72
                form_widget(form.submit,
73
                {
74
                  'label' : 'Potvrdit výběr',
75
                  'type' : 'submit',
76
                  'id' : 'submit-btn',
77
                  'attr' : {
78
                    'class': 'btn btn-secondary'
79
                  }
80
                })
81
              }}
82
            </li>
83
          </ul> 
84
        
85
        {{ form_end(form) }}
86

    
87
      </div>
88
    </nav>
89
  </header>
90

    
91
  <div class="map-locations">
92
    <a class="menu" data-toggle="collapse" href="#mapLocations" role="button" aria-expanded="false" aria-controls="mapLocations">
93
      <span class="desktop">Prohlédněte si jednotlivé oblasti</span>
94
      <span class="mobile">Jednotlivé oblasti</span>
95
      <div class="circle"></div>
96
    </a>
97
    <div class="locations collapse" id="mapLocations">
98
      <ul>
99
        <li onclick="setMapView(49.7248, 13.3521, 17)">Kampus ZČU</li>
100
        <li onclick="setMapView(49.7367263, 13.3709177, 18)">FPE &ndash; Pedagogická fakulta</li>
101
        <li onclick="setMapView(49.7474950, 13.3748308, 18)">FPR &ndash; Právnická fakulta</li>
102
        <li onclick="setMapView(49.7450169, 13.3702668, 18)">FZS &ndash; Fakulta zdravotnických studií</li>
103
        <li onclick="setMapView(50.0762590, 12.3640213, 17)">FEK &ndash; pracoviště Cheb</li>
104
        <li onclick="setMapView(49.7236785, 13.3353118, 18)">NTC &ndash; výzkumné centrum</li>
105
        <li onclick="setMapView(49.9590236, 13.1597114, 18)">Zámek ZČU &ndash; Nečtiny</li>
106
        <li onclick="setMapView(49.7345564, 13.3585038, 18)">Koleje Borská</li>
107
        <li onclick="setMapView(49.7250373, 13.3696772, 18)">Koleje Bory</li>
108
        <li onclick="setMapView(49.7600000, 13.3723463, 18)">Koleje Lochotín</li>
109
        <li onclick="setMapView(49.7293726, 13.3589237, 15)">Oblast s&nbsp;koloběžkami</li>
110
      </ul>
111
    </div>
112
  </div>
113

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

    
119
    <div class="datetime">
120
    <div class="date" onclick="openDatepicker()">{{ app.request.get('data_set')['date']|date('j. n. Y') }}</div>
121

    
122
    <div class="timeline">
123
      <div class="time hour-0" id="timeline">0:00</div>
124

    
125
      <div class="hour"></div>
126
      <div class="hour"></div>
127
      <div class="hour"></div>
128
      <div class="hour"></div>
129
      <div class="hour"></div>
130
      <div class="hour"></div>
131
      <div class="hour"></div>
132
      <div class="hour"></div>
133
      <div class="hour"></div>
134
      <div class="hour"></div>
135
      <div class="hour"></div>
136
      <div class="hour"></div>
137
      <div class="hour"></div>
138
      <div class="hour"></div>
139
      <div class="hour"></div>
140
      <div class="hour"></div>
141
      <div class="hour"></div>
142
      <div class="hour"></div>
143
      <div class="hour"></div>
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="end-dot"></div>
150
    </div>
151
    </div>
152
  </div>
153

    
154
  <div id="heatmap"></div>
155
  
156
{% endblock %}
157

    
158
{% block javascripts %}
159

    
160
    <script src="{{ asset('js/vendor/jquery-3.4.1.min.js') }}"></script>
161
    <script src="{{ asset('js/vendor/bootstrap.min.js') }}"></script>
162
    <script src="{{ asset('js/vendor/bootstrap-datepicker.min.js') }}"></script>
163
    <script src="{{ asset('js/vendor/bootstrap-datepicker.cs.min.js') }}" charset="UTF-8"></script>
164
    <script src="{{ asset('js/vendor/leaflet.js') }}"></script>
165
    <script src="{{ asset('js/vendor/leaflet-heat.js') }}"></script>
166
    <script src="{{ asset('js/zcu-heatmap.js') }}"></script>
167
    <script>
168
        initDatepicker("{{ path('dates') }}");
169
        initLocationsMenu();
170
        initMap();
171
        checkDataSetsAvailability("{{ path('available') }}")
172
        {% if submitted %}
173
        loadCurrentTimeHeatmap("{{ path('opendata') }}", "{{ path('positions') }}");
174
        {% endif %}
175

    
176
        $(window).resize(function() {
177
          initLocationsMenu();
178
        });
179
  </script>
180

    
181
{% endblock %}
(2-2/3)