Revize 94c6eb49

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

website/public/css/style.css

@@ -224 +224 @@
   }
 }
 
-@media (max-width: 991.98px) {
-  header.map .nav-item .btn {
-    width: 100%;
-  }
-}
-
 h1 {
   text-transform: uppercase;
   font-size: 21px;
@@ -1189 +1183 @@
   align-items: center;
 }
 
-header.map .nav-item .btn-secondary:after {
-  padding-bottom: 4px;
-  content: '↺';
-  font-weight: 400;
-  font-size: 30px;
-  transform: rotateZ(0);
-  transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
-}
-
-header.map .nav-item .btn-secondary:hover:after {
-  transform: rotateZ(-90deg);
-  transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
-}
-
 @media (max-width: 991.98px) {
   header.map .nav-item .btn-secondary {
+    width: 100%;
     border-radius: .25rem;
     margin-left: 0px;
     margin-top: 10px;
@@ -1212 +1193 @@
   }
 }
 
+header.map .nav-item .btn-secondary:after {
+  padding-bottom: 4px;
+  content: '↺';
+  font-weight: 400;
+  font-size: 30px;
+  transform: rotateZ(0);
+  transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
 header.map .nav-item .btn-secondary:hover {
   color: #0048A9;
   background: white !important;
@@ -1220 +1210 @@
   box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.22);
 }
 
+header.map .nav-item .btn-secondary:hover:after {
+  transform: rotateZ(-90deg);
+  transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
 header.map .nav-item .btn-secondary:active, header.map .nav-item .btn-secondary:focus {
   background: #f0f0f0 !important;
   color: #0048A9 !important;
@@ -1274 +1269 @@
   text-align: left;
   letter-spacing: .4px;
   color: #ffffff;
+  background: #0048A9;
 }
 
 .dropdown .btn:hover {
@@ -1286 +1282 @@
   overflow-y: auto;
 }
 
+.dropdown .dropdown-item label {
+  width: 100% !important;
+  cursor: pointer;
+}
+
 .dropdown #dataset-dropdown-time .dropdown-item:nth-of-type(even) {
   background: rgba(0, 0, 0, 0.05);
 }

website/public/css/style.scss

@@ -214 +214 @@
           max-width: none;
         }
       }
-
-      @include media-breakpoint-down(md) {
-        .btn {
-          width: 100%;
-        }
-      }
     }
   }
 }
@@ -1095 +1089 @@
     display: flex;
     justify-content: center;
     align-items: center;
+
+    @include media-breakpoint-down(md) {
+      width: 100%;
+      border-radius: .25rem;
+      margin-left: 0px;
+      margin-top: 10px;
+      margin-bottom: -10px;
+    }
+
     &:after{
       padding-bottom: 4px;
       content: '↺';
@@ -1103 +1106 @@
       transform: rotateZ(0);
       transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
     }
-    &:hover{
-      &:after {
-        transform: rotateZ(-90deg);
-        transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
-      }
-    }
 
-    @media (max-width: 991.98px) {
-      border-radius: .25rem;
-      margin-left: 0px;
-      margin-top: 10px;
-      margin-bottom: -10px;
-    }
-    
     &:hover {
       color: $primary-bg-color;
       background: rgba(255, 255, 255, 1) !important;
       -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.22);
       -moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.22);
       box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.22);
+
+      &:after {
+        transform: rotateZ(-90deg);
+        transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
+      }
     }
 
     &:active, &:focus {
@@ -1182 +1177 @@
     text-align: left;
     letter-spacing: .4px;
     color: $primary-text-color;
+    background: $primary-bg-color;
 
     &:hover {
       background: #336dba;
@@ -1194 +1190 @@
     overflow-y: auto;
   }
 
+  .dropdown-item label {
+    width: 100% !important;
+    cursor: pointer;
+  }
+
   #dataset-dropdown-time .dropdown-item:nth-of-type(even) {
     background: rgba(0,0,0,.05);
 

website/public/js/zcu-heatmap.js

@@ -126 +126 @@
 
   $('#dataset-dropdown-time input[type="radio"]').each(function () {
     $(this).change(function () {
-      currentTime = $(this).val()
+      currentTime = parseInt($(this).val())
       updateHeaderControls()
       setTimeline()
       drawHeatmap(data[currentTime])
@@ -493 +493 @@
     }
   })
 
-  $('#submit-btn').prop('disabled', !leastOneOptionEnabled)
+  $('#btn-update-heatmap').prop('disabled', !leastOneOptionEnabled)
 }
 
 function formatDate (date) {
@@ -560 +560 @@
     e.stopPropagation()
   })
 
-  $('#submit-btn').prop('name', '')
+  $('#btn-update-heatmap').prop('name', '')
   onValueChangeRegister()
 }
 const loadCheckboxDatasetNameData = () => {

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>

website/templates/index.html.twig

@@ -18 +18 @@
     </div>
 
     <nav class="navbar navbar-expand-lg">
-      <a href="/heatmap/?date=2019-04-11&amp;time=9&amp;type[]=JIS" class="navbar-brand shifted">
+      <a href="/heatmap/?date=2019-04-11&amp;time=9&amp;type=JIS" class="navbar-brand shifted">
         <h1>Heatmap.ZČU</h1>
       </a>
 
@@ -45 +45 @@
           </li>
           <li class="nav-item button">
             <h2>
-              <a href="/heatmap/?date=2019-04-11&amp;time=9&amp;type[]=JIS" class="nav-link">Zobrazit heatmapu</a>
+              <a href="/heatmap/?date=2019-04-11&amp;time=9&amp;type=JIS" class="nav-link">Zobrazit heatmapu</a>
             </h2>
           </li>
         </ul>
@@ -62 +62 @@
             <h3>Život na ZČU během dne</h3>
             <hr>
             <p>Zobrazte si heatmapu života univerzity hodinu po hodině během jednoho dne. Od ranního probouzení, kdy studenti a&nbsp;zaměstnanci přicházejí do laboratoří, přes polední špičku v&nbsp;menze až do samotného večera, kdy končí poslední z&nbsp;přednášek a&nbsp;cvičení.</p>
-            <a href="/heatmap/?date=2019-04-11&amp;time=9&amp;type[]=JIS" class="btn btn-primary" role="button">Vyzkoušet heatmapu</a>
+            <a href="/heatmap/?date=2019-04-11&amp;time=9&amp;type=JIS" class="btn btn-primary" role="button">Vyzkoušet heatmapu</a>
           </div>
         </div>
 
@@ -92 +92 @@
             <h3>Hledání anomálií</h3>
             <hr>
             <p>Heatmapa vám také dává možnost prozkoumávat data vlastním způsobem &ndash; stačí jen zvolit konkrétní datum a&nbsp;čas, pro které chcete data zobrazit. Můžete tak objevit i&nbsp;různé anomálie, například narazit na noční návštěvníky kampusu nebo odhalit návraty na studentské koleje v&nbsp;brzkých ranních hodinách&hellip;</p>
-            <a href="/heatmap/?date=2019-04-11&amp;time=9&amp;type[]=JIS" class="btn btn-primary" role="button">Vyzkoušet heatmapu</a>
+            <a href="/heatmap/?date=2019-04-11&amp;time=9&amp;type=JIS" class="btn btn-primary" role="button">Vyzkoušet heatmapu</a>
           </div>
         </div>