commit ec5e322072879d6e981ffa8870ae9ba3232e5afa
Author: Martin Sebela <msebela@zcu.cz>
Date:   Mon Oct 19 18:47:31 2020 +0200

    Re #8187 - implemented draggable timeline

diff --git a/website/public/css/style.css b/website/public/css/style.css
index 01a36c0..355f295 100644
--- a/website/public/css/style.css
+++ b/website/public/css/style.css
@@ -961,9 +961,7 @@ hr {
   height: 30px;
   flex-direction: row;
   position: relative;
-  padding: 0 10px;
   border-radius: 100px;
-  cursor: pointer;
   background-color: rgba(11, 21, 90, 0.7);
 }
 
@@ -982,12 +980,20 @@ hr {
   }
 }
 
+.player .timeline .hour {
+  cursor: pointer;
+}
+
 @media (max-width: 991.98px) {
   .player .timeline .hour {
     display: none;
   }
 }
 
+.player .timeline .hour:nth-of-type(2) {
+  margin-left: 10px;
+}
+
 .player .timeline .hour:before {
   content: "";
   display: inline-block;
@@ -1012,6 +1018,7 @@ hr {
   display: inline-block;
   width: 6px;
   height: 6px;
+  margin-right: 10px;
   border-radius: 50%;
   background: #ffffff;
 }
@@ -1026,12 +1033,13 @@ hr {
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 15px;
+  width: 64px;
   padding: 3px 0 4px 0;
   z-index: 1000;
+  font-size: 15px;
   border-radius: 15px;
+  cursor: ew-resize;
   background: #0b155a;
-  width: 64px;
 }
 
 .player .time .custom-spinner-border {
diff --git a/website/public/css/style.scss b/website/public/css/style.scss
index 095b282..988a882 100755
--- a/website/public/css/style.scss
+++ b/website/public/css/style.scss
@@ -194,22 +194,27 @@ header {
         margin-bottom: 20px;
         border: 0;
       }
+
       &:nth-of-type(3) {
         .dropdown {
           height: calc(100% + 10px) !important;
           margin: -5px;
           margin-top: -7px;
+
           .dropdown-menu {
             top: calc(100% - 4px);
           }
+
           button {
             padding-left: 20px;
             border-radius: 0px;
           }
+
           @include media-breakpoint-down(md) {
             height: 100% !important;
             margin: 0px;
             flex-direction: column;
+
             button {
               padding-left: 12px;
               border-radius: 5px;
@@ -217,8 +222,10 @@ header {
           }
         }
       }
+
       &:nth-of-type(1), &:nth-of-type(2), &:nth-of-type(3) {
         width: 300px;
+        
         @media (max-width: 1500px) {
           width: 280px;
         }
@@ -915,9 +922,7 @@ hr {
     height: 30px;
     flex-direction: row;
     position: relative;
-    padding: 0 10px;
     border-radius: 100px;
-    cursor: pointer;
     background-color: rgba(11, 21, 90, .7);
 
     @include media-breakpoint-down(md) {
@@ -932,10 +937,16 @@ hr {
     }
 
     .hour {
+      cursor: pointer;
+
       @include media-breakpoint-down(md) {
         display: none;
       }
 
+      &:nth-of-type(2) {
+        margin-left: 10px;
+      }
+
       &:before {
         content: "";
         display: inline-block;
@@ -961,6 +972,7 @@ hr {
       display: inline-block;
       width: 6px;
       height: 6px;
+      margin-right: 10px;
       border-radius: 50%;
       background: $primary-text-color;
 
@@ -974,12 +986,13 @@ hr {
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: 15px;
+    width: 64px;
     padding: 3px 0 4px 0;
     z-index: 1000;
+    font-size: 15px;
     border-radius: 15px;
+    cursor: ew-resize;
     background: $secondary-bg-color;
-    width: 64px;
 
     .custom-spinner-border {
       margin: 3px 0 4px 0;
diff --git a/website/public/js/zcu-heatmap.js b/website/public/js/zcu-heatmap.js
index bd50404..77413c5 100644
--- a/website/public/js/zcu-heatmap.js
+++ b/website/public/js/zcu-heatmap.js
@@ -397,6 +397,9 @@ async function previous () {
   if (loading) {
     return
   }
+
+  $("#player-time").removeAttr("style");
+
   currentTime = (currentTime + 23) % 24
   changeHour(currentTime)
   mymap.closePopup()
@@ -412,6 +415,9 @@ async function next () {
   if (loading) {
     return
   }
+
+  $("#player-time").removeAttr("style");
+  
   currentTime = (currentTime + 1) % 24
   changeHour(currentTime)
   mymap.closePopup()
@@ -709,3 +715,21 @@ const loadCheckboxDatasetNameData = () => {
     datasetDictNameDisplayName[inputVal] = $(input).data('dataset-display-name')
   })
 }
+
+function dragTimeline() {
+  let hourElemWidthPx = 26
+
+  let elem = $("#player-time")
+  let offset = elem.offset().left - elem.parent().offset().left
+
+  elem.draggable({ containment: "parent", axis: "x", cursor: "ew-resize" })
+
+  if (offset >= 0 && offset <= elem.parent().width()) {
+    let hour = Math.round(offset / hourElemWidthPx)
+    
+    elem.attr("class", "time hour-" + hour)
+    $("#player-time span").html(hour + ":00")
+
+    onChangeHour(hour)
+  }
+}
\ No newline at end of file
diff --git a/website/templates/heatmap.html.twig b/website/templates/heatmap.html.twig
index 97696c2..af24fad 100644
--- a/website/templates/heatmap.html.twig
+++ b/website/templates/heatmap.html.twig
@@ -115,21 +115,20 @@
     <div class="animate-btn play" id="animate-btn" onclick="changeAnimationState()"></div>
     <div class="next-btn" onclick="next()"></div>
 
-    <div class="timeline-wrapper" title="Animovat pouze v rámci jednoho dne">
+    <div class="timeline-wrapper">
       {% if form.vars.value.date %}
-      <div class="date" id="player-date" onclick="toggleDayLock()">
+      <div class="date" id="player-date" onclick="toggleDayLock()" title="Animovat pouze v rámci jednoho dne">
         <span>{{ form.vars.value.date|date('j. n. Y') }}</span>
         <div class="lock-btn"></div>
       </div>
       {% endif %}
 
       <div class="timeline">
-        <div class="time hour-{{ current_time }}" id="player-time">
+        <div class="time hour-{{ current_time }}" id="player-time" draggable="true" ondrag="dragTimeline()">
           <span></span>
           <div class="spinner-border spinner-border-sm custom-spinner-border" role="status">
-            <span class="sr-only">Loading...</span>
+            <span class="sr-only">Loading&hellip;</span>
           </div>
-
         </div>
         {% for i in 0..23 %}
         <div class="hour" title="{{ i }}:00" onclick="onChangeHour('{{ i }}')"></div>
@@ -151,6 +150,7 @@
     <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="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
     <script src="{{ asset('js/zcu-heatmap.js') }}"></script>
     <script>
       initDatepicker("{{ path('dates') }}");
