Revize 94c6eb49

Re #8159 - frontend HTML, JS syntax bugfixes, CSS improvements

website/templates/heatmap.html.twig

@@ -1 +1 @@
 {% extends 'base.html.twig' %}
-  
+
 {% block title %}Heatmap.ZČU{% endblock %}
 {% block stylesheets %}
   <link rel="stylesheet" href="{{ asset('css/leaflet.css') }}">
@@ -36 +36 @@
                     'maxlength' : '10',
                     'placeholder' : 'YYYY-MM-DD',
                     'autocomplete' : 'off',
-                    'onChange' : 'checkDataSetsAvailability("' ~ path('available') ~ '")'
+                    'onchange' : 'checkDataSetsAvailability("' ~ path('available') ~ '")'
                   }
                 })
               }}
@@ -48 +48 @@
                   {{ current_time }}
                 </button>
                 <div id="dataset-dropdown-time" class="dropdown-menu" aria-labelledby="dropdownMenuButtonTime">
-                  {% for oneTime in form.time.children %}
-                  <label class="dropdown-item custom-dropdown-item">
-                    {{ form_widget(oneTime, {attr: {class: 'd-none'}}) }}
-                    {{ form_label(oneTime, null) }}
-                  </label>
+                  {% 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>
@@ -63 +63 @@
                   Vyberte datovou sadu
                 </button>
                 <div id="dataset-dropdown" class="dropdown-menu" aria-labelledby="dropdownMenuButtonDataset">
-                  {% for oneDataset in form.type.children %}
+                  {% for dataset in form.type.children %}
                   <div class="dropdown-item custom-dropdown-item">
-                    <div class="custom-control custom-checkbox custom-checkbox-{{oneDataset.vars.value}}">
-                      {{ form_widget(oneDataset, {
+                    <div class="custom-control custom-checkbox custom-checkbox-{{dataset.vars.value}}">
+                      {{ form_widget(dataset, {
                         attr: {
-                          'class': "custom-control-input custom-control-input-#{oneDataset.vars.value}",
-                          'data-dataset-display-name': "#{oneDataset.vars.label}"
+                          'class': "custom-control-input custom-control-input-#{dataset.vars.value}",
+                          'data-dataset-display-name': "#{dataset.vars.label}"
                           }
                       }) }}
-                      {{ form_label(oneDataset, null, {
+                      {{ form_label(dataset, null, {
                         'label_attr': {'class': 'custom-control-label'}
                       }) }}
                     </div>
@@ -87 +87 @@
                   'name' : '',
                   'label' : '',
                   'type' : 'submit',
-                  'id' : 'submit-btn',
+                  'id' : 'btn-update-heatmap',
                   'attr' : {
                     'class': 'btn btn-secondary'
                   }
@@ -118 +118 @@
 
     <div class="datetime">
     
-    {% if form.vars.value.date %}
+      {% if form.vars.value.date %}
       <div class="date" id="player-date" onclick="openDatepicker()">{{ form.vars.value.date|date('j. n. Y') }}</div>
-    {% endif %}
-
-    <div class="timeline">
-      <div class="time hour-0" id="timeline">0:00</div>
-
-      <div class="hour"></div>
-      <div class="hour"></div>
-      <div class="hour"></div>
-      <div class="hour"></div>
-      <div class="hour"></div>
-      <div class="hour"></div>
-      <div class="hour"></div>
-      <div class="hour"></div>
-      <div class="hour"></div>
-      <div class="hour"></div>
-      <div class="hour"></div>
-      <div class="hour"></div>
-      <div class="hour"></div>
-      <div class="hour"></div>
-      <div class="hour"></div>
-      <div class="hour"></div>
-      <div class="hour"></div>
-      <div class="hour"></div>
-      <div class="hour"></div>
-      <div class="hour"></div>
-      <div class="hour"></div>
-      <div class="hour"></div>
-      <div class="hour"></div>
-      <div class="hour"></div>
-      <div class="end-dot"></div>
-    </div>
+      {% endif %}
+
+      <div class="timeline">
+        <div class="time hour-0" id="timeline">0:00</div>
+
+        {% for i in 0..23 %}
+        <div class="hour"></div>
+        {% endfor %}
+        <div class="end-dot"></div>
+      </div>
     </div>
   </div>
 
   <div id="heatmap"></div>
-  
+
 {% endblock %}
 
 {% block javascripts %}
@@ -163 +142 @@
     <script src="{{ asset('js/vendor/jquery-3.4.1.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') }}" charset="UTF-8"></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 src="{{ asset('js/zcu-heatmap.js') }}"></script>
     <script>
         initDatepicker("{{ path('dates') }}");
         initLocationsMenu();
-        initMap();        
+        initMap();
+
         $(document).ready(function() {
           onDocumentReady();
           checkDataSetsAvailability("{{ path('available') }}")
@@ -178 +158 @@
           loadCurrentTimeHeatmap("{{ path('opendata') }}", "{{ path('positions') }}");
           {% endif %}
         });
+        
         $(window).resize(function() {
           initLocationsMenu();
         });
@@ -186 +167 @@
 {% endblock %}
 
 {% block style %}
-  <style>
-    {% for key, item in dataset_colors %}
-      .custom-control-input-{{key}}:focus~.custom-control-label::before {
-        border-color: {{item}} !important;
+  <style type="text/css">
+    {% 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-{{key}}:checked~.custom-control-label::before {
-        border-color: {{item}} !important;
-        background-color: {{item}} !important;
+      .custom-control-input-{{ dataset_name }}:checked~.custom-control-label::before {
+        border-color: {{ dataset_color }} !important;
+        background-color: {{ dataset_color }} !important;
       }
 
-      .custom-control-input-{{key}}:focus:not(:checked)~.custom-control-label::before {
-        border-color: {{item}} !important;
+      .custom-control-input-{{ dataset_name }}:focus:not(:checked)~.custom-control-label::before {
+        border-color: {{ dataset_color }} !important;
       }
 
-      .custom-control-input-{{key}}:not(:disabled):active~.custom-control-label::before {
-        background-color: {{item}} !important;
-        border-color: {{item}} !important;
+      .custom-control-input-{{ dataset_name }}:not(:disabled):active~.custom-control-label::before {
+        background-color: {{ dataset_color }} !important;
+        border-color: {{ dataset_color }} !important;
       }
 
-      .popup-{{key}} > .leaflet-popup-content-wrapper, .popup-{{key}} .leaflet-popup-tip {
-        background-color: {{item}} !important;
+      .popup-{{ dataset_name }} > .leaflet-popup-content-wrapper, .popup-{{ dataset_name }} .leaflet-popup-tip {
+        background-color: {{ dataset_color }} !important;
       }
     {% endfor %}
   </style>