commit d51166e863327419ed172be4f14f25ea38a0fbf3
Author: ballakt <ballakt@zcu.cz>
Date:   Mon Oct 19 13:04:58 2020 +0000

    Re #8186 loader + start on the current-time with player

diff --git a/website/public/css/style.css b/website/public/css/style.css
index ece1b54..01a36c0 100644
--- a/website/public/css/style.css
+++ b/website/public/css/style.css
@@ -1026,12 +1026,16 @@ hr {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 64px;
   font-size: 15px;
   padding: 3px 0 4px 0;
   z-index: 1000;
   border-radius: 15px;
   background: #0b155a;
+  width: 64px;
+}
+
+.player .time .custom-spinner-border {
+  margin: 3px 0 4px 0;
 }
 
 @media (min-width: 992px) {
diff --git a/website/public/css/style.scss b/website/public/css/style.scss
index a4fb890..095b282 100755
--- a/website/public/css/style.scss
+++ b/website/public/css/style.scss
@@ -974,12 +974,16 @@ hr {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 64px;
     font-size: 15px;
     padding: 3px 0 4px 0;
     z-index: 1000;
     border-radius: 15px;
     background: $secondary-bg-color;
+    width: 64px;
+
+    .custom-spinner-border {
+      margin: 3px 0 4px 0;
+    }
 
     @include media-breakpoint-up(lg) {
       position: absolute;
diff --git a/website/public/js/zcu-heatmap.js b/website/public/js/zcu-heatmap.js
index edd3ffc..bd50404 100644
--- a/website/public/js/zcu-heatmap.js
+++ b/website/public/js/zcu-heatmap.js
@@ -23,14 +23,19 @@ var data = []
 var info = []
 let currentInfo = 0
 
+// dictionary for names of datasets
 const datasetDictNameDisplayName = {}
 var datasetSelected = []
 
 // data only for one day
 let lockedDay = false
 
+// loading information for async operations
 let loading = 0
 
+// default loader showup delay
+const defaultLoaderDelay = 1000
+
 // marks for all datasets
 const dataSourceMarks = {}
 
@@ -40,11 +45,22 @@ const globalMarkersHolder = {}
 // key: x and y, x + '' + y string
 let globalMarkersChanged = {}
 
-const loadingY = () => {
+const loadingCallbackNested = (func, delay) => {
+  setTimeout(() => {
+    func(loading)
+    if (loading) {
+      loadingCallbackNested(func, delay)
+    }
+  }, delay)
+}
+const loadingY = (delay = defaultLoaderDelay) => {
   loading++
+  // check after nms if there is something that is loading
+  loadingCallbackNested(() => loadingCallbackNested((isLoading) => loadingTimeline(isLoading), delay))
 }
-const loadingN = () => {
+const loadingN = (delay = defaultLoaderDelay) => {
   loading--
+  loadingCallbackNested(() => loadingCallbackNested((isLoading) => loadingTimeline(isLoading)), delay)
 }
 
 const changeCurrentTime = (time = null) => {
@@ -152,7 +168,7 @@ const genPopUp = (datasetName, place, count, sum, currentPos, maxPos) => {
 
 const onCheckboxClicked = async (checkbox) => {
   if ($(checkbox).prop('checked')) {
-    loadCurrentTimeHeatmap(dataSourceRoute, positionsSourceRoute)
+    loadCurrentTimeHeatmap(dataSourceRoute, positionsSourceRoute, 0)
     changeUrl()
   } else {
     loadCheckboxDatasetNameData()
@@ -183,7 +199,7 @@ const debounce = (func, delay) => {
 const onValueChangeRegister = () => {
   $('#date').change(function () {
     changeCurrentDate($(this).val())
-    loadCurrentTimeHeatmap(dataSourceRoute, positionsSourceRoute)
+    loadCurrentTimeHeatmap(dataSourceRoute, positionsSourceRoute, 0)
     changeUrl()
   })
 
@@ -424,10 +440,24 @@ function updateHeaderControls () {
 }
 
 function setTimeline () {
-  $('#player-time').text(currentTime + ':00')
+  $('#player-time > span').text(currentTime + ':00')
   $('#player-time').attr('class', 'time hour-' + currentTime)
 }
-
+const loadingTimeline = (isLoading) => {
+  if (isLoading) {
+    loadingYTimeline()
+  } else {
+    loadingNTimeline()
+  }
+}
+const loadingYTimeline = () => {
+  $('#player-time > .spinner-border').removeClass('d-none')
+  $('#player-time > span').text('')
+}
+const loadingNTimeline = () => {
+  $('#player-time > .spinner-border').addClass('d-none')
+  setTimeline()
+}
 const onChangeHour = (hour) => {
   changeHour(hour)
   drawHeatmap(data[currentTime])
@@ -446,7 +476,7 @@ const changeHour = (hour) => {
  * @param {string} positionsRoute  route to dataset postitions source
  */
 // eslint-disable-next-line no-unused-vars
-async function loadCurrentTimeHeatmap (opendataRoute, positionsRoute) {
+async function loadCurrentTimeHeatmap (opendataRoute, positionsRoute, loaderDelay = defaultLoaderDelay) {
   loadCheckboxDatasetNameData()
 
   dataSourceRoute = opendataRoute
@@ -465,10 +495,10 @@ async function loadCurrentTimeHeatmap (opendataRoute, positionsRoute) {
     allPromises.push(dataSelectedHandler(datasetName))
   })
 
-  loadingY()
+  loadingY(loaderDelay)
   Promise.all(allPromises).then(
     () => {
-      loadingN()
+      loadingN(0)
       drawDataSourceMarks(dataSourceMarks)
       drawHeatmap(data[currentTime])
       preload(currentTime, 1, currentDateToString())
@@ -662,7 +692,6 @@ function onDocumentReady () {
 
   $('#btn-update-heatmap').prop('name', '')
   changeCurrentTime()
-  setTimeline()
   changeCurrentDate()
   onValueChangeRegister()
 }
diff --git a/website/src/Controller/HeatmapController.php b/website/src/Controller/HeatmapController.php
index 8a65d93..b6c8678 100644
--- a/website/src/Controller/HeatmapController.php
+++ b/website/src/Controller/HeatmapController.php
@@ -55,7 +55,8 @@ class HeatmapController extends AbstractController {
                 'submitted' => $isSubmitted,
                 'data_to_display' => $dataSet,
                 'dataset_colors' => Utils::prepareDatasetsColors($manager->getAvailableCollections()),
-                'current_time' => $dataSet->getFormattedTime(),
+                'formated_current_time' => $dataSet->getFormattedTime(),
+                'current_time' => $dataSet->getTime(),
             ]
         );
     }
diff --git a/website/templates/heatmap.html.twig b/website/templates/heatmap.html.twig
index 2c505ef..97696c2 100644
--- a/website/templates/heatmap.html.twig
+++ b/website/templates/heatmap.html.twig
@@ -45,7 +45,7 @@
               <label class="font-weight-bold">Vyberte čas</label>
               <div class="dropdown">
                 <button type="button" class="btn dropdown-toggle" id="dropdownMenuButtonTime" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                  {{ current_time }}
+                  {{ formated_current_time }}
                 </button>
                 <div id="dropdown-time" class="dropdown-menu" aria-labelledby="dropdownMenuButtonTime">
                   {% for hour in form.time.children %}
@@ -124,8 +124,13 @@
       {% endif %}
 
       <div class="timeline">
-        <div class="time hour-0" id="player-time">0:00</div>
+        <div class="time hour-{{ current_time }}" id="player-time">
+          <span></span>
+          <div class="spinner-border spinner-border-sm custom-spinner-border" role="status">
+            <span class="sr-only">Loading...</span>
+          </div>
 
+        </div>
         {% for i in 0..23 %}
         <div class="hour" title="{{ i }}:00" onclick="onChangeHour('{{ i }}')"></div>
         {% endfor %}
