Revize ec5e3220

Re #8187 - implemented draggable timeline

website/public/css/style.css

@@ -961 +961 @@
   height: 30px;
   flex-direction: row;
   position: relative;
-  padding: 0 10px;
   border-radius: 100px;
-  cursor: pointer;
   background-color: rgba(11, 21, 90, 0.7);
 }
 
@@ -982 +980 @@
   }
 }
 
+.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 +1018 @@
   display: inline-block;
   width: 6px;
   height: 6px;
+  margin-right: 10px;
   border-radius: 50%;
   background: #ffffff;
 }
@@ -1026 +1033 @@
   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 {

website/public/css/style.scss

@@ -194 +194 @@
         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 +222 @@
           }
         }
       }
+
       &:nth-of-type(1), &:nth-of-type(2), &:nth-of-type(3) {
         width: 300px;
+        
         @media (max-width: 1500px) {
           width: 280px;
         }
@@ -915 +922 @@
     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 +937 @@
     }
 
     .hour {
+      cursor: pointer;
+
       @include media-breakpoint-down(md) {
         display: none;
       }
 
+      &:nth-of-type(2) {
+        margin-left: 10px;
+      }
+
       &:before {
         content: "";
         display: inline-block;
@@ -961 +972 @@
       display: inline-block;
       width: 6px;
       height: 6px;
+      margin-right: 10px;
       border-radius: 50%;
       background: $primary-text-color;
 
@@ -974 +986 @@
     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;

website/public/js/zcu-heatmap.js

@@ -397 +397 @@
   if (loading) {
     return
   }
+
+  $("#player-time").removeAttr("style");
+
   currentTime = (currentTime + 23) % 24
   changeHour(currentTime)
   mymap.closePopup()
@@ -412 +415 @@
   if (loading) {
     return
   }
+
+  $("#player-time").removeAttr("style");
+  
   currentTime = (currentTime + 1) % 24
   changeHour(currentTime)
   mymap.closePopup()
@@ -709 +715 @@
     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)
+  }
+}

website/templates/heatmap.html.twig

@@ -115 +115 @@
     <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 +150 @@
     <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') }}");