commit bb2d43b54f0e6d21eaf86c6ca7dd513d1c70983c
Author: Martin Sebela <msebela@zcu.cz>
Date:   Wed Oct 14 11:43:51 2020 +0200

    Re #8159 - frontend bugfixes and refactoring

diff --git a/website/public/css/style.css b/website/public/css/style.css
index f19d112..3384f4f 100644
--- a/website/public/css/style.css
+++ b/website/public/css/style.css
@@ -1,11 +1,11 @@
 @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,7 +113,7 @@ header .nav-item .active {
 header .nav-item.button .nav-link {
   padding-left: 22px;
   padding-right: 22px;
-  border: 1px solid #fff;
+  border: 1px solid #ffffff;
   border-radius: 20px;
 }
 
@@ -124,7 +124,7 @@ header .nav-item.button .nav-link:hover {
 header .navbar-button {
   padding: .5rem 22px;
   margin-right: 40px;
-  border: 1px solid #fff;
+  border: 1px solid #ffffff;
   border-radius: 20px;
   text-decoration: none;
 }
@@ -173,11 +173,16 @@ header.map label {
 
 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,19 +268,19 @@ h3 {
 }
 
 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,7 +408,7 @@ hr {
   bottom: 20px;
   z-index: 1;
   border-radius: 100px;
-  background: #0B155A;
+  background: #0b155a;
 }
 
 @media (max-width: 1199.98px) {
@@ -430,7 +435,7 @@ hr {
   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,7 +469,7 @@ hr {
   bottom: 30px !important;
   border-radius: 100px;
   opacity: 0.8;
-  background: #0B155A;
+  background: #0b155a;
 }
 
 @media (min-width: 992px) {
@@ -487,7 +492,7 @@ hr {
   top: 13px;
   left: 15px;
   z-index: 1;
-  border-top: 2px solid #fff;
+  border-top: 2px solid #ffffff;
 }
 
 .swiper-pagination-bullets .swiper-pagination-bullet {
@@ -496,8 +501,8 @@ hr {
   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,7 +514,7 @@ hr {
   top: 5px;
   left: 5px;
   border-radius: 50%;
-  background: #fff;
+  background: #ffffff;
 }
 
 .swiper-pagination-bullets .swiper-pagination-bullet:first-of-type {
@@ -521,7 +526,7 @@ hr {
 }
 
 .swiper-pagination-bullets .swiper-pagination-bullet-active {
-  border: 2px solid #fff;
+  border: 2px solid #ffffff;
 }
 
 .btn-primary {
@@ -536,8 +541,8 @@ hr {
   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,7 +560,7 @@ hr {
 }
 
 .btn-secondary {
-  background: #0B155A;
+  background: #0b155a;
 }
 
 .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
@@ -569,7 +574,7 @@ hr {
   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,7 +607,7 @@ hr {
   z-index: 0;
   opacity: 0.75;
   border-radius: 25px 0 25px 0;
-  background: #0B155A;
+  background: #0b155a;
 }
 
 .map-point .desc {
@@ -632,7 +637,7 @@ hr {
   top: -2px;
   left: -2px;
   border-radius: 50%;
-  border: 2px solid #fff;
+  border: 2px solid #ffffff;
 }
 
 .map-point.point-1 {
@@ -697,7 +702,7 @@ hr {
   text-decoration: none;
   border-radius: 50px;
   opacity: 1;
-  background: #0B155A;
+  background: #0b155a;
 }
 
 .map-locations .menu .circle {
@@ -708,7 +713,7 @@ hr {
   top: 3px;
   right: 3px;
   border-radius: 50%;
-  border: 2px solid #fff;
+  border: 2px solid #ffffff;
 }
 
 .map-locations .menu .circle:after {
@@ -777,9 +782,9 @@ hr {
   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,7 +879,7 @@ hr {
   text-align: center;
   border-radius: 15px;
   cursor: pointer;
-  background: #0B155A;
+  background: #0b155a;
 }
 
 @media (max-width: 390px) {
@@ -924,7 +929,7 @@ hr {
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: #fff;
+  background: #ffffff;
 }
 
 .player .timeline .hour:after {
@@ -934,7 +939,7 @@ hr {
   top: -2px;
   width: 20px;
   height: 2px;
-  background: #fff;
+  background: #ffffff;
 }
 
 .player .timeline .end-dot:before {
@@ -943,7 +948,7 @@ hr {
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: #fff;
+  background: #ffffff;
 }
 
 @media (max-width: 991.98px) {
@@ -961,7 +966,7 @@ hr {
   padding: 3px 0 4px 0;
   z-index: 1000;
   border-radius: 15px;
-  background: #0B155A;
+  background: #0b155a;
 }
 
 @media (min-width: 992px) {
@@ -1137,7 +1142,15 @@ p.logos-partners a:first-of-type img {
   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,7 +1158,7 @@ p.logos-partners a:first-of-type img {
 
 .leaflet-popup-content-wrapper #count-info {
   margin: auto;
-  color: #fff;
+  color: #ffffff;
 }
 
 header.map .nav-item {
@@ -1165,7 +1178,7 @@ header.map .nav-item .btn-secondary {
   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,7 +1213,7 @@ header.map .nav-item .btn-secondary:hover:after {
 }
 
 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,7 +1222,7 @@ header.map .nav-item .btn-secondary:hover {
 
 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,7 +1230,7 @@ header.map .nav-item input:hover {
 }
 
 header.map .nav-item input:focus {
-  background: #fff;
+  background: #ffffff;
   color: #000;
 }
 
@@ -1227,11 +1240,11 @@ header.map .nav-item select:hover {
 }
 
 header.map .nav-item select:hover option {
-  background: #0048a9;
+  background: #0048A9;
 }
 
 header.map .nav-item select:focus {
-  background: #0048a9;
+  background: #0048A9;
   color: white;
 }
 
@@ -1276,3 +1289,7 @@ input[type=radio]:checked ~ label {
 .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;
+}
diff --git a/website/public/css/style.scss b/website/public/css/style.scss
index b25bff7..0e57b6d 100755
--- a/website/public/css/style.scss
+++ b/website/public/css/style.scss
@@ -2,16 +2,23 @@
 @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,7 +29,7 @@ html, body {
 
 header {
   height: 70px;
-  background: #0048A9;
+  background: $primary-bg-color;
 
   .logo {
     width: 450px;
@@ -75,7 +82,7 @@ header {
       left: 0;
       z-index: 1001;
       opacity: .98;
-      background: #004fb3;
+      background: $primary-bg-color-darker;
     }
   }
 
@@ -106,7 +113,7 @@ header {
       .nav-link {
         padding-left: 22px;
         padding-right: 22px;
-        border: 1px solid #fff;
+        border: 1px solid $primary-text-color;
         border-radius: 20px;
 
         &:hover {
@@ -119,7 +126,7 @@ header {
   .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,11 +146,11 @@ header {
     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,9 +175,14 @@ header {
 
     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,11 +256,11 @@ h3 {
 }
 
 a {
-  color: #fff;
+  color: $primary-text-color;
   outline: none;
 
   &:hover {
-    color: #fff;
+    color: $primary-text-color;
   }
 }
 
@@ -256,7 +268,7 @@ hr {
   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,7 +386,7 @@ hr {
   bottom: 20px;
   z-index: 1;
   border-radius: 100px;
-  background: #0B155A;
+  background: $secondary-bg-color;
 
   @include media-breakpoint-down(lg) {
     right: 20px;
@@ -394,7 +406,7 @@ hr {
     height: 45px;
     position: relative;
     border-radius: 50%;
-    border: 2px solid #fff;
+    border: 2px solid $primary-text-color;
 
     &:after {
       content: "";
@@ -430,7 +442,7 @@ hr {
   bottom: 30px !important;
   border-radius: 100px;
   opacity: 0.8;
-  background: #0B155A;
+  background: $secondary-bg-color;
 
   @include media-breakpoint-up(lg) {
     left: 50% !important;
@@ -448,7 +460,7 @@ hr {
     top: 13px;
     left: 15px;
     z-index: 1;
-    border-top: 2px solid #fff;
+    border-top: 2px solid $primary-text-color;
   }
 
   .swiper-pagination-bullet {
@@ -457,8 +469,8 @@ hr {
     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,7 +481,7 @@ hr {
       top: 5px;
       left: 5px;
       border-radius: 50%;
-      background: #fff;
+      background: $primary-text-color;
     }
 
     &:first-of-type {
@@ -482,7 +494,7 @@ hr {
   }
 
   .swiper-pagination-bullet-active {
-    border: 2px solid #fff;
+    border: 2px solid $primary-text-color;
   }
 }
 
@@ -498,12 +510,12 @@ hr {
   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,7 +527,7 @@ hr {
 }
 
 .btn-secondary {
-  background: #0B155A;
+  background: $secondary-bg-color;
 
   &:hover, &:focus, &:active {
     background: #7378A0 !important;
@@ -530,7 +542,7 @@ hr {
   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,7 +573,7 @@ hr {
       z-index: 0;
       opacity: 0.75;
       border-radius: 25px 0 25px 0;
-      background: #0B155A;
+      background: $secondary-bg-color;
     }
   }
 
@@ -592,7 +604,7 @@ hr {
     top: -2px;
     left: -2px;
     border-radius: 50%;
-    border: 2px solid #fff;
+    border: 2px solid $primary-text-color;
   }
 
   &.point-1 {
@@ -657,7 +669,7 @@ hr {
     text-decoration: none;
     border-radius: 50px;
     opacity: 1;
-    background: #0B155A;
+    background: $secondary-bg-color;
 
     .circle {
       display: inline-block;
@@ -667,7 +679,7 @@ hr {
       top: 3px;
       right: 3px;
       border-radius: 50%;
-      border: 2px solid #fff;
+      border: 2px solid $primary-text-color;
 
       &:after {
         content: "";
@@ -735,9 +747,9 @@ hr {
     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,7 +838,7 @@ hr {
     text-align: center;
     border-radius: 15px;
     cursor: pointer;
-    background: #0B155A;
+    background: $secondary-bg-color;
 
     @media (max-width: 390px) {
       margin-right: 0;
@@ -868,7 +880,7 @@ hr {
         width: 6px;
         height: 6px;
         border-radius: 50%;
-        background: #fff;
+        background: $primary-text-color;
       }
 
       &:after {
@@ -878,7 +890,7 @@ hr {
         top: -2px;
         width: 20px;
         height: 2px;
-        background: #fff;
+        background: $primary-text-color;
       }
     }
 
@@ -888,7 +900,7 @@ hr {
       width: 6px;
       height: 6px;
       border-radius: 50%;
-      background: #fff;
+      background: $primary-text-color;
 
       @include media-breakpoint-down(md) {
         display: none;
@@ -905,7 +917,7 @@ hr {
     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,7 +1049,15 @@ p.logos-partners {
     }
   }
 
+  #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,7 +1065,7 @@ p.logos-partners {
 
   #count-info {
     margin: auto;
-    color: #fff;
+    color: $primary-text-color;
   }
 }
 
@@ -1066,7 +1086,7 @@ header.map .nav-item {
     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,7 +1118,7 @@ header.map .nav-item {
     }
     
     &: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,7 +1127,7 @@ header.map .nav-item {
 
     &:active, &:focus {
       background: rgba(240, 240, 240, 1) !important;
-      color: #0048a9 !important;
+      color: $primary-bg-color !important;
     }
   }
 
@@ -1117,7 +1137,7 @@ header.map .nav-item {
     }
 
     &:focus {
-      background: #fff;
+      background: $primary-text-color;
       color: #000;
     }
   }
@@ -1128,12 +1148,12 @@ header.map .nav-item {
       background: rgba(255, 255, 255, .2);
 
       option {
-        background: #0048a9;
+        background: $primary-bg-color;
       }
     }
 
     &:focus {
-      background: #0048a9;
+      background: $primary-bg-color;
       color: white;
     }
   }
@@ -1161,7 +1181,7 @@ input[type=radio]:checked~label {
     width: 100%;
     text-align: left;
     letter-spacing: .4px;
-    color: #ffffff;
+    color: $primary-text-color;
 
     &:hover {
       background: #336dba;
@@ -1176,5 +1196,9 @@ input[type=radio]:checked~label {
 
   #dataset-dropdown-time .dropdown-item:nth-of-type(even) {
     background: rgba(0,0,0,.05);
+
+    &:active {
+      background: #007bff;
+    }
   }
 }
\ No newline at end of file
diff --git a/website/public/js/zcu-heatmap.js b/website/public/js/zcu-heatmap.js
index 3989d10..655cbd5 100644
--- a/website/public/js/zcu-heatmap.js
+++ b/website/public/js/zcu-heatmap.js
@@ -71,16 +71,20 @@ const prepareLayerPopUp = (lat, lng, num, className) => L.popup({
   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,28 +114,33 @@ const debounce = (func, delay) => {
     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,7 +339,7 @@ function changeUrl () {
 
 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 () {
diff --git a/website/templates/heatmap-locations.html.twig b/website/templates/heatmap-locations.html.twig
new file mode 100644
index 0000000..359b06d
--- /dev/null
+++ b/website/templates/heatmap-locations.html.twig
@@ -0,0 +1,13 @@
+<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>
\ No newline at end of file
diff --git a/website/templates/heatmap.html.twig b/website/templates/heatmap.html.twig
index de92a44..f1c244d 100644
--- a/website/templates/heatmap.html.twig
+++ b/website/templates/heatmap.html.twig
@@ -8,7 +8,6 @@
   <link rel="stylesheet" href="{{ asset('css/bootstrap-datepicker3.css') }}">
 {% endblock %}
 
-
 {% block body %}
 
   <header class="map">
@@ -22,15 +21,13 @@
       </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,49 +43,46 @@
             </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,10 +94,8 @@
                 })
               }}
             </li>
-          </ul> 
-        
+          </ul>
         {{ form_end(form) }}
-
       </div>
     </nav>
   </header>
@@ -115,19 +107,7 @@
       <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,7 +171,7 @@
         initDatepicker("{{ path('dates') }}");
         initLocationsMenu();
         initMap();        
-        $( document ).ready(function() {
+        $(document).ready(function() {
           onDocumentReady();
           checkDataSetsAvailability("{{ path('available') }}")
           {% if submitted %}
@@ -209,25 +189,25 @@
   <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 %}
