Revize d51166e8

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

website/public/css/style.css

@@ -1026 +1026 @@
   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) {

website/public/css/style.scss

@@ -974 +974 @@
     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;

website/public/js/zcu-heatmap.js

@@ -23 +23 @@
 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 +45 @@
 // 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 +168 @@
 
 const onCheckboxClicked = async (checkbox) => {
   if ($(checkbox).prop('checked')) {
-    loadCurrentTimeHeatmap(dataSourceRoute, positionsSourceRoute)
+    loadCurrentTimeHeatmap(dataSourceRoute, positionsSourceRoute, 0)
     changeUrl()
   } else {
     loadCheckboxDatasetNameData()
@@ -183 +199 @@
 const onValueChangeRegister = () => {
   $('#date').change(function () {
     changeCurrentDate($(this).val())
-    loadCurrentTimeHeatmap(dataSourceRoute, positionsSourceRoute)
+    loadCurrentTimeHeatmap(dataSourceRoute, positionsSourceRoute, 0)
     changeUrl()
   })
 
@@ -424 +440 @@
 }
 
 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 +476 @@
  * @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 +495 @@
     allPromises.push(dataSelectedHandler(datasetName))
   })
 
-  loadingY()
+  loadingY(loaderDelay)
   Promise.all(allPromises).then(
     () => {
-      loadingN()
+      loadingN(0)
       drawDataSourceMarks(dataSourceMarks)
       drawHeatmap(data[currentTime])
       preload(currentTime, 1, currentDateToString())
@@ -662 +692 @@
 
   $('#btn-update-heatmap').prop('name', '')
   changeCurrentTime()
-  setTimeline()
   changeCurrentDate()
   onValueChangeRegister()
 }

website/src/Controller/HeatmapController.php

@@ -55 +55 @@
                 '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(),
             ]
         );
     }

website/templates/heatmap.html.twig

@@ -45 +45 @@
               <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 +124 @@
       {% 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 %}