Revize bb2d43b5

Re #8159 - frontend bugfixes and refactoring

website/public/css/style.css

@@ -1 +1 @@
 @charset "UTF-8";
 @import url("https://fonts.googleapis.com/css2?family=Be+Vietnam:wght@400;600;700;800&display=swap");
 html, body {
-  font-family: 'Be Vietnam', sans-serif;
-  color: #fff;
   position: relative;
   height: 96.2%;
-  background: #242C6B;
+  font-family: 'Be Vietnam', sans-serif;
+  color: #ffffff;
+  background: #0b155a;
 }
 
 @media (max-width: 767.98px) {
@@ -113 +113 @@
 header .nav-item.button .nav-link {
   padding-left: 22px;
   padding-right: 22px;
-  border: 1px solid #fff;
+  border: 1px solid #ffffff;
   border-radius: 20px;
 }
 
@@ -124 +124 @@
 header .navbar-button {
   padding: .5rem 22px;
   margin-right: 40px;
-  border: 1px solid #fff;
+  border: 1px solid #ffffff;
   border-radius: 20px;
   text-decoration: none;
 }
@@ -173 +173 @@
 
 header.map input, header.map .custom-select {
   letter-spacing: .4px;
-  color: #fff;
+  color: #ffffff;
   border-color: #0048A9;
   background: #0048A9;
 }
 
+header.map input::placeholder, header.map .custom-select::placeholder {
+  color: #ffffff;
+  opacity: 1;
+}
+
 header.map .nav-item {
   margin: 0;
   border-right: 1px solid #1C6CC0;
@@ -263 +268 @@
 }
 
 a {
-  color: #fff;
+  color: #ffffff;
   outline: none;
 }
 
 a:hover {
-  color: #fff;
+  color: #ffffff;
 }
 
 hr {
   width: 300px;
   text-align: left;
   margin: 30px 0;
-  border-top: 2px solid #fff;
+  border-top: 2px solid #ffffff;
 }
 
 @media (max-width: 1199.98px) {
@@ -403 +408 @@
   bottom: 20px;
   z-index: 1;
   border-radius: 100px;
-  background: #0B155A;
+  background: #0b155a;
 }
 
 @media (max-width: 1199.98px) {
@@ -430 +435 @@
   height: 45px;
   position: relative;
   border-radius: 50%;
-  border: 2px solid #fff;
+  border: 2px solid #ffffff;
 }
 
 .swiper-pagination-buttons .btn-prev:after, .swiper-pagination-buttons .btn-next:after {
@@ -464 +469 @@
   bottom: 30px !important;
   border-radius: 100px;
   opacity: 0.8;
-  background: #0B155A;
+  background: #0b155a;
 }
 
 @media (min-width: 992px) {
@@ -487 +492 @@
   top: 13px;
   left: 15px;
   z-index: 1;
-  border-top: 2px solid #fff;
+  border-top: 2px solid #ffffff;
 }
 
 .swiper-pagination-bullets .swiper-pagination-bullet {
@@ -496 +501 @@
   position: relative;
   margin: 4px 15px !important;
   opacity: 1;
-  border: 2px solid #0B155A;
-  background: #0B155A;
+  border: 2px solid #0b155a;
+  background: #0b155a;
 }
 
 .swiper-pagination-bullets .swiper-pagination-bullet:before {
@@ -509 +514 @@
   top: 5px;
   left: 5px;
   border-radius: 50%;
-  background: #fff;
+  background: #ffffff;
 }
 
 .swiper-pagination-bullets .swiper-pagination-bullet:first-of-type {
@@ -521 +526 @@
 }
 
 .swiper-pagination-bullets .swiper-pagination-bullet-active {
-  border: 2px solid #fff;
+  border: 2px solid #ffffff;
 }
 
 .btn-primary {
@@ -536 +541 @@
   text-transform: uppercase;
   letter-spacing: 0.4px;
   border-radius: 30px;
-  border: 1px solid #0B155A;
-  background: #0B155A;
+  border: 1px solid #0b155a;
+  background: #0b155a;
 }
 
 .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
@@ -555 +560 @@
 }
 
 .btn-secondary {
-  background: #0B155A;
+  background: #0b155a;
 }
 
 .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
@@ -569 +574 @@
   position: absolute;
   border-radius: 50%;
   cursor: pointer;
-  border: 2px solid #fff;
+  border: 2px solid #ffffff;
 }
 
 @media not all and (min-width: 1900px) and (max-width: 2100px) {
@@ -602 +607 @@
   z-index: 0;
   opacity: 0.75;
   border-radius: 25px 0 25px 0;
-  background: #0B155A;
+  background: #0b155a;
 }
 
 .map-point .desc {
@@ -632 +637 @@
   top: -2px;
   left: -2px;
   border-radius: 50%;
-  border: 2px solid #fff;
+  border: 2px solid #ffffff;
 }
 
 .map-point.point-1 {
@@ -697 +702 @@
   text-decoration: none;
   border-radius: 50px;
   opacity: 1;
-  background: #0B155A;
+  background: #0b155a;
 }
 
 .map-locations .menu .circle {
@@ -708 +713 @@
   top: 3px;
   right: 3px;
   border-radius: 50%;
-  border: 2px solid #fff;
+  border: 2px solid #ffffff;
 }
 
 .map-locations .menu .circle:after {
@@ -777 +782 @@
   position: relative;
   border-radius: 50%;
   opacity: .7;
-  border: 2px solid #fff;
-  box-shadow: 0 0 0 4px #0B155A;
-  background: #0B155A;
+  border: 2px solid #ffffff;
+  box-shadow: 0 0 0 4px #0b155a;
+  background: #0b155a;
   cursor: pointer;
 }
 
@@ -874 +879 @@
   text-align: center;
   border-radius: 15px;
   cursor: pointer;
-  background: #0B155A;
+  background: #0b155a;
 }
 
 @media (max-width: 390px) {
@@ -924 +929 @@
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: #fff;
+  background: #ffffff;
 }
 
 .player .timeline .hour:after {
@@ -934 +939 @@
   top: -2px;
   width: 20px;
   height: 2px;
-  background: #fff;
+  background: #ffffff;
 }
 
 .player .timeline .end-dot:before {
@@ -943 +948 @@
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: #fff;
+  background: #ffffff;
 }
 
 @media (max-width: 991.98px) {
@@ -961 +966 @@
   padding: 3px 0 4px 0;
   z-index: 1000;
   border-radius: 15px;
-  background: #0B155A;
+  background: #0b155a;
 }
 
 @media (min-width: 992px) {
@@ -1137 +1142 @@
   background: url("../img/btn-next.svg") rgba(125, 125, 125, 0.1) no-repeat center center;
 }
 
+.leaflet-popup-content-wrapper #total-info {
+  margin-left: 5px;
+  font-size: 11pt;
+}
+
 .leaflet-popup-content-wrapper #number-info {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-family: monospace;
   font-size: 24pt;
   font-weight: 700;
@@ -1145 +1158 @@
 
 .leaflet-popup-content-wrapper #count-info {
   margin: auto;
-  color: #fff;
+  color: #ffffff;
 }
 
 header.map .nav-item {
@@ -1165 +1178 @@
   width: 40px;
   margin-left: 10px;
   transition: all 0.2s ease-out;
-  color: #0048a9;
+  color: #0048A9;
   background: white;
   -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.17);
   -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.17);
@@ -1200 +1213 @@
 }
 
 header.map .nav-item .btn-secondary:hover {
-  color: #0048a9;
+  color: #0048A9;
   background: white !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);
@@ -1209 +1222 @@
 
 header.map .nav-item .btn-secondary:active, header.map .nav-item .btn-secondary:focus {
   background: #f0f0f0 !important;
-  color: #0048a9 !important;
+  color: #0048A9 !important;
 }
 
 header.map .nav-item input:hover {
@@ -1217 +1230 @@
 }
 
 header.map .nav-item input:focus {
-  background: #fff;
+  background: #ffffff;
   color: #000;
 }
 
@@ -1227 +1240 @@
 }
 
 header.map .nav-item select:hover option {
-  background: #0048a9;
+  background: #0048A9;
 }
 
 header.map .nav-item select:focus {
-  background: #0048a9;
+  background: #0048A9;
   color: white;
 }
 
@@ -1276 +1289 @@
 .dropdown #dataset-dropdown-time .dropdown-item:nth-of-type(even) {
   background: rgba(0, 0, 0, 0.05);
 }
+
+.dropdown #dataset-dropdown-time .dropdown-item:nth-of-type(even):active {
+  background: #007bff;
+}

website/public/css/style.scss

@@ -2 +2 @@
 @import 'bootstrap-4.4.1/_variables.scss';
 @import 'bootstrap-4.4.1/mixins/_breakpoints.scss';
 
+@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam:wght@400;600;700;800&display=swap');
+
+$primary-bg-color: #0048A9;
+$primary-bg-color-darker: #004fb3;
+$secondary-bg-color: #0b155a;
+
+$primary-text-color: #ffffff;
+
 $images-dir: '../img/';
 
-@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam:wght@400;600;700;800&display=swap');
 
 html, body {
-  font-family: 'Be Vietnam', sans-serif;
-  color: #fff;
   position: relative;
   height: 96.2%;
-  background: #242C6B;
+  font-family: 'Be Vietnam', sans-serif;
+  color: $primary-text-color;
+  background: $secondary-bg-color;
 
   &.intro {
     @include media-breakpoint-down(sm) {
@@ -22 +29 @@
 
 header {
   height: 70px;
-  background: #0048A9;
+  background: $primary-bg-color;
 
   .logo {
     width: 450px;
@@ -75 +82 @@
       left: 0;
       z-index: 1001;
       opacity: .98;
-      background: #004fb3;
+      background: $primary-bg-color-darker;
     }
   }
 
@@ -106 +113 @@
       .nav-link {
         padding-left: 22px;
         padding-right: 22px;
-        border: 1px solid #fff;
+        border: 1px solid $primary-text-color;
         border-radius: 20px;
 
         &:hover {
@@ -119 +126 @@
   .navbar-button {
     padding: .5rem 22px;
     margin-right: 40px;
-    border: 1px solid #fff;
+    border: 1px solid $primary-text-color;
     border-radius: 20px;
     text-decoration: none;
 
@@ -139 +146 @@
     font-weight: 800;
     letter-spacing: 0.4px;
     border-radius: 0;
-    border: #0048A9;
+    border: $primary-bg-color;
     background: #004fb3;
 
     &:hover {
-      background: #0048A9 !important;
+      background: $primary-bg-color !important;
     }
   }
 
@@ -168 +175 @@
 
     input, .custom-select {
       letter-spacing: .4px;
-      color: #fff;
-      border-color: #0048A9;
-      background: #0048A9;
+      color: $primary-text-color;
+      border-color: $primary-bg-color;
+      background: $primary-bg-color;
+
+      &::placeholder {
+        color: $primary-text-color;
+        opacity: 1;
+      }
     }
 
     .nav-item {
@@ -244 +256 @@
 }
 
 a {
-  color: #fff;
+  color: $primary-text-color;
   outline: none;
 
   &:hover {
-    color: #fff;
+    color: $primary-text-color;
   }
 }
 
@@ -256 +268 @@
   width: 300px;
   text-align: left;
   margin: 30px 0;
-  border-top: 2px solid #fff;
+  border-top: 2px solid $primary-text-color;
 
   @include media-breakpoint-down(lg) {
     width: 90%;
@@ -374 +386 @@
   bottom: 20px;
   z-index: 1;
   border-radius: 100px;
-  background: #0B155A;
+  background: $secondary-bg-color;
 
   @include media-breakpoint-down(lg) {
     right: 20px;
@@ -394 +406 @@
     height: 45px;
     position: relative;
     border-radius: 50%;
-    border: 2px solid #fff;
+    border: 2px solid $primary-text-color;
 
     &:after {
       content: "";
@@ -430 +442 @@
   bottom: 30px !important;
   border-radius: 100px;
   opacity: 0.8;
-  background: #0B155A;
+  background: $secondary-bg-color;
 
   @include media-breakpoint-up(lg) {
     left: 50% !important;
@@ -448 +460 @@
     top: 13px;
     left: 15px;
     z-index: 1;
-    border-top: 2px solid #fff;
+    border-top: 2px solid $primary-text-color;
   }
 
   .swiper-pagination-bullet {
@@ -457 +469 @@
     position: relative;
     margin: 4px 15px !important;
     opacity: 1;
-    border: 2px solid #0B155A;
-    background: #0B155A;
+    border: 2px solid $secondary-bg-color;
+    background: $secondary-bg-color;
 
     &:before {
       content: "";
@@ -469 +481 @@
       top: 5px;
       left: 5px;
       border-radius: 50%;
-      background: #fff;
+      background: $primary-text-color;
     }
 
     &:first-of-type {
@@ -482 +494 @@
   }
 
   .swiper-pagination-bullet-active {
-    border: 2px solid #fff;
+    border: 2px solid $primary-text-color;
   }
 }
 
@@ -498 +510 @@
   text-transform: uppercase;
   letter-spacing: 0.4px;
   border-radius: 30px;
-  border: 1px solid #0B155A;
-  background: #0B155A;
+  border: 1px solid $secondary-bg-color;
+  background: $secondary-bg-color;
 
   &:hover, &:focus, &:active {
-    border: 1px solid #0048A9;
-    background: #0048A9 !important;
+    border: 1px solid $primary-bg-color;
+    background: $primary-bg-color !important;
   }
 
   @include media-breakpoint-down(xs) {
@@ -515 +527 @@
 }
 
 .btn-secondary {
-  background: #0B155A;
+  background: $secondary-bg-color;
 
   &:hover, &:focus, &:active {
     background: #7378A0 !important;
@@ -530 +542 @@
   position: absolute;
   border-radius: 50%;
   cursor: pointer;
-  border: 2px solid #fff;
+  border: 2px solid $primary-text-color;
 
   @media not all and (min-width: 1900px) and (max-width: 2100px) {
     display: none;
@@ -561 +573 @@
       z-index: 0;
       opacity: 0.75;
       border-radius: 25px 0 25px 0;
-      background: #0B155A;
+      background: $secondary-bg-color;
     }
   }
 
@@ -592 +604 @@
     top: -2px;
     left: -2px;
     border-radius: 50%;
-    border: 2px solid #fff;
+    border: 2px solid $primary-text-color;
   }
 
   &.point-1 {
@@ -657 +669 @@
     text-decoration: none;
     border-radius: 50px;
     opacity: 1;
-    background: #0B155A;
+    background: $secondary-bg-color;
 
     .circle {
       display: inline-block;
@@ -667 +679 @@
       top: 3px;
       right: 3px;
       border-radius: 50%;
-      border: 2px solid #fff;
+      border: 2px solid $primary-text-color;
 
       &:after {
         content: "";
@@ -735 +747 @@
     position: relative;
     border-radius: 50%;
     opacity: .7;
-    border: 2px solid #fff;
-    box-shadow: 0 0 0 4px #0B155A;
-    background: #0B155A;
+    border: 2px solid $primary-text-color;
+    box-shadow: 0 0 0 4px $secondary-bg-color;
+    background: $secondary-bg-color;
     cursor: pointer;
 
     &:hover {
@@ -826 +838 @@
     text-align: center;
     border-radius: 15px;
     cursor: pointer;
-    background: #0B155A;
+    background: $secondary-bg-color;
 
     @media (max-width: 390px) {
       margin-right: 0;
@@ -868 +880 @@
         width: 6px;
         height: 6px;
         border-radius: 50%;
-        background: #fff;
+        background: $primary-text-color;
       }
 
       &:after {
@@ -878 +890 @@
         top: -2px;
         width: 20px;
         height: 2px;
-        background: #fff;
+        background: $primary-text-color;
       }
     }
 
@@ -888 +900 @@
       width: 6px;
       height: 6px;
       border-radius: 50%;
-      background: #fff;
+      background: $primary-text-color;
 
       @include media-breakpoint-down(md) {
         display: none;
@@ -905 +917 @@
     padding: 3px 0 4px 0;
     z-index: 1000;
     border-radius: 15px;
-    background: #0B155A;
+    background: $secondary-bg-color;
 
     @include media-breakpoint-up(lg) {
       position: absolute;
@@ -1037 +1049 @@
     }
   }
 
+  #total-info {
+    margin-left: 5px;
+    font-size: 11pt;
+  }
+
   #number-info {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     font-family: monospace;
     font-size: 24pt;
     font-weight: 700;
@@ -1045 +1065 @@
 
   #count-info {
     margin: auto;
-    color: #fff;
+    color: $primary-text-color;
   }
 }
 
@@ -1066 +1086 @@
     width: 40px;
     margin-left: 10px;
     transition: all 0.2s ease-out;
-    color: #0048a9;
+    color: $primary-bg-color;
     background: rgba(255, 255, 255, 1);
     -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.17);
     -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.17);
@@ -1098 +1118 @@
     }
     
     &:hover {
-      color: #0048a9;
+      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);
@@ -1107 +1127 @@
 
     &:active, &:focus {
       background: rgba(240, 240, 240, 1) !important;
-      color: #0048a9 !important;
+      color: $primary-bg-color !important;
     }
   }
 
@@ -1117 +1137 @@
     }
 
     &:focus {
-      background: #fff;
+      background: $primary-text-color;
       color: #000;
     }
   }
@@ -1128 +1148 @@
       background: rgba(255, 255, 255, .2);
 
       option {
-        background: #0048a9;
+        background: $primary-bg-color;
       }
     }
 
     &:focus {
-      background: #0048a9;
+      background: $primary-bg-color;
       color: white;
     }
   }
@@ -1161 +1181 @@
     width: 100%;
     text-align: left;
     letter-spacing: .4px;
-    color: #ffffff;
+    color: $primary-text-color;
 
     &:hover {
       background: #336dba;
@@ -1176 +1196 @@
 
   #dataset-dropdown-time .dropdown-item:nth-of-type(even) {
     background: rgba(0,0,0,.05);
+
+    &:active {
+      background: #007bff;
+    }
   }
 }

website/public/js/zcu-heatmap.js

@@ -71 +71 @@
   className: className
 }).setLatLng([lat / num, lng / num])
 
-const genPopUp = (datasetName, place, number, sum, currentPos, maxPos) => {
-  const header = `<strong>${datasetName}</strong><div id="place-info">${place}</div>`
-  const currentNum = `<span id="digit-info">${number}</span>`
-  // eslint-disable-next-line eqeqeq
-  const sumNum = `<span id="total-info" style="font-size: large">${(sum && (sum != number)) ? '/' + sum : ''}</span>`
-  const digitInfo = `<div id="number-info">${currentNum}${sumNum}</div>`
+const genPopUp = (datasetName, place, count, sum, currentPos, maxPos) => {
+  const popupHeader = `
+    <strong>${datasetName}</strong>
+    <div id="place-info">${place}</div>`
+  const popupData = `
+    <div id="number-info">
+      <span id="digit-info">${count}</span>
+      <span id="total-info">${(sum && (sum != count)) ? '/' + sum : ''}</span>
+    </div>`
   const { previousButton, nextButton, posInfo } = genPopUpControlButtons(currentPos, maxPos)
+
   return `
-  ${header}
-  ${digitInfo}
+  ${popupHeader}
+  ${popupData}
   ${genPopUpControls(maxPos > 1 ? [previousButton, posInfo, nextButton] : null)}
   `
 }
@@ -110 +114 @@
     inDebounce = setTimeout(() => func.apply(context, args), delay)
   }
 }
+
 const onValueChangeRegister = () => {
   $('#date').change(function () {
     data = []
     loadCurrentTimeHeatmap(dataSourceRoute, positionsSourceRoute)
-    console.log('VAL:', $(this).val())
     const date = new Date($(this).val())
     $('#player-date').html(`${date.getDate()}. ${date.getMonth() + 1}. ${date.getFullYear()}`)
+    changeUrl()
   })
+
   $('#dataset-dropdown-time input[type="radio"]').each(function () {
     $(this).change(function () {
       currentTime = $(this).val()
       updateHeaderControls()
       setTimeline()
       drawHeatmap(data[currentTime])
+      changeUrl()
     })
   })
+
   $('input[type=checkbox]').each(function () {
     $(this).change(
       debounce(() => onCheckboxClicked(this), 1000)
     )
   })
 }
+
 /**
  * Initialize leaflet map on start position which can be default or set based on user action
  */
@@ -330 +339 @@
 
 function updateHeaderControls () {
   $(`#time_${currentTime}`).prop('checked', true)
-  $('#dropdownMenuButton-time').html(currentTime >= 10 ? `${currentTime}:00` : `0${currentTime}:00`)
+  $('#dropdownMenuButtonTime').html((currentTime < 10 ? '0' : '') + `${currentTime}:00`)
 }
 
 function setTimeline () {

website/templates/heatmap-locations.html.twig

@@ +1 @@
+<ul>
+  <li onclick="setMapView(49.7248, 13.3521, 17)">Kampus ZČU</li>
+  <li onclick="setMapView(49.7367263, 13.3709177, 18)">FPE &ndash; Fakulta pedagogická</li>
+  <li onclick="setMapView(49.7474950, 13.3748308, 18)">FPR &ndash; Fakulta právnická</li>
+  <li onclick="setMapView(49.7450169, 13.3702668, 18)">FZS &ndash; Fakulta zdravotnických studií</li>
+  <li onclick="setMapView(50.0762590, 12.3640213, 17)">FEK &ndash; pracoviště Cheb</li>
+  <li onclick="setMapView(49.7236785, 13.3353118, 18)">NTC &ndash; výzkumné centrum</li>
+  <li onclick="setMapView(49.9590236, 13.1597114, 18)">Zámek ZČU &ndash; Nečtiny</li>
+  <li onclick="setMapView(49.7345564, 13.3585038, 18)">Koleje Borská</li>
+  <li onclick="setMapView(49.7250373, 13.3696772, 18)">Koleje Bory</li>
+  <li onclick="setMapView(49.7600000, 13.3723463, 18)">Koleje Lochotín</li>
+  <li onclick="setMapView(49.7293726, 13.3589237, 15)">Oblast s&nbsp;koloběžkami</li>
+</ul>

website/templates/heatmap.html.twig

@@ -8 +8 @@
   <link rel="stylesheet" href="{{ asset('css/bootstrap-datepicker3.css') }}">
 {% endblock %}
 
-
 {% block body %}
 
   <header class="map">
@@ -22 +21 @@
       </button>
 
       <div class="collapse navbar-collapse ml-auto" id="navigation">
-        
         {{ form_start(form, {'action': path('heatmap'), 'method': 'GET'}) }}
           <ul class="navbar-nav">
             <li class="nav-item">
               {{ form_label(form.date, 'Vyberte datum', {
                 label_attr: {class: 'font-weight-bold'}
               }) }}
-              {{
-                form_widget(form.date,
+              {{ form_widget(form.date,
                 {
                   'type' : 'text',
                   'id' : 'date',
@@ -46 +43 @@
             </li>
             <li class="nav-item">
               <label class="font-weight-bold">Vyberte čas</label>
-                <div class="dropdown">
-                <button class="btn dropdown-toggle" type="button_1" id="dropdownMenuButton-time" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              <div class="dropdown">
+                <button type="button" class="btn dropdown-toggle" id="dropdownMenuButtonTime" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                   {{ current_time }}
                 </button>
-                <div id="dataset-dropdown-time" class="dropdown-menu" aria-labelledby="dropdownMenuButton-time">
-                {% for oneTime in form.time.children %}
+                <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>   
-                {% endfor %}
+                    {{ form_widget(oneTime, {attr: {class: 'd-none'}}) }}
+                    {{ form_label(oneTime, null) }}
+                  </label>
+                  {% endfor %}
+                </div>
               </div>
             </li>
             <li class="nav-item">
               <div class="dropdown">
-                <button class="btn dropdown-toggle font-weight-bold" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <button type="button" class="btn dropdown-toggle font-weight-bold" id="dropdownMenuButtonDataset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                   Vyberte datovou sadu
-              </button>
-              <div id="dataset-dropdown" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-              {% for oneType in form.type.children %}
-              <label class="dropdown-item custom-dropdown-item">
-              <div class="custom-control custom-checkbox custom-checkbox-{{oneType.vars.value}}">
-              {{ form_widget(oneType, {
-                attr: {
-                  'class': "custom-control-input custom-control-input-#{oneType.vars.value}",
-                  'data-dataset-display-name': "#{oneType.vars.label}"
-                  }
-              }) }}
-              {{ form_label(oneType, null, {
-                'label_attr': {'class': 'custom-control-label'}
-                }) }}
-              </div>
-              </label>
-              {% endfor %}
+                </button>
+                <div id="dataset-dropdown" class="dropdown-menu" aria-labelledby="dropdownMenuButtonDataset">
+                  {% for oneDataset 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, {
+                        attr: {
+                          'class': "custom-control-input custom-control-input-#{oneDataset.vars.value}",
+                          'data-dataset-display-name': "#{oneDataset.vars.label}"
+                          }
+                      }) }}
+                      {{ form_label(oneDataset, null, {
+                        'label_attr': {'class': 'custom-control-label'}
+                      }) }}
+                    </div>
+                  </div>
+                  {% endfor %}
+                </div>
               </div>
-              </div>  
             </li>
-
             <li class="nav-item">
-              {{
-                form_widget(form.submit,
+              {{ form_widget(form.submit,
                 {
                   'name' : '',
                   'label' : '',
@@ -100 +94 @@
                 })
               }}
             </li>
-          </ul> 
-        
+          </ul>
         {{ form_end(form) }}
-
       </div>
     </nav>
   </header>
@@ -115 +107 @@
       <div class="circle"></div>
     </a>
     <div class="locations collapse" id="mapLocations">
-      <ul>
-        <li onclick="setMapView(49.7248, 13.3521, 17)">Kampus ZČU</li>
-        <li onclick="setMapView(49.7367263, 13.3709177, 18)">FPE &ndash; Pedagogická fakulta</li>
-        <li onclick="setMapView(49.7474950, 13.3748308, 18)">FPR &ndash; Právnická fakulta</li>
-        <li onclick="setMapView(49.7450169, 13.3702668, 18)">FZS &ndash; Fakulta zdravotnických studií</li>
-        <li onclick="setMapView(50.0762590, 12.3640213, 17)">FEK &ndash; pracoviště Cheb</li>
-        <li onclick="setMapView(49.7236785, 13.3353118, 18)">NTC &ndash; výzkumné centrum</li>
-        <li onclick="setMapView(49.9590236, 13.1597114, 18)">Zámek ZČU &ndash; Nečtiny</li>
-        <li onclick="setMapView(49.7345564, 13.3585038, 18)">Koleje Borská</li>
-        <li onclick="setMapView(49.7250373, 13.3696772, 18)">Koleje Bory</li>
-        <li onclick="setMapView(49.7600000, 13.3723463, 18)">Koleje Lochotín</li>
-        <li onclick="setMapView(49.7293726, 13.3589237, 15)">Oblast s&nbsp;koloběžkami</li>
-      </ul>
+      {% include 'heatmap-locations.html.twig' %}
     </div>
   </div>
 
@@ -191 +171 @@
         initDatepicker("{{ path('dates') }}");
         initLocationsMenu();
         initMap();        
-        $( document ).ready(function() {
+        $(document).ready(function() {
           onDocumentReady();
           checkDataSetsAvailability("{{ path('available') }}")
           {% if submitted %}
@@ -209 +189 @@
   <style>
     {% for key, item in dataset_colors %}
       .custom-control-input-{{key}}:focus~.custom-control-label::before {
-          border-color: {{item}} !important;
-          box-shadow: 0 0 0 0.2rem rgba(192,192,192, 0.4) !important;
+        border-color: {{item}} !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;
+        border-color: {{item}} !important;
+        background-color: {{item}} !important;
       }
 
       .custom-control-input-{{key}}:focus:not(:checked)~.custom-control-label::before {
-          border-color: {{item}} !important;
+        border-color: {{item}} !important;
       }
 
       .custom-control-input-{{key}}:not(:disabled):active~.custom-control-label::before {
-          background-color: {{item}} !important;
-          border-color: {{item}} !important;
+        background-color: {{item}} !important;
+        border-color: {{item}} !important;
       }
 
-      .popup-{{key}} > .leaflet-popup-content-wrapper, .popup-{{key}} .leaflet-popup-tip{
+      .popup-{{key}} > .leaflet-popup-content-wrapper, .popup-{{key}} .leaflet-popup-tip {
         background-color: {{item}} !important;
       }
     {% endfor %}