Revize ec5e3220

Re #8187 - implemented draggable timeline

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') }}");