Revize a48642fb

Re #7940
+ heatmap animace - js kód
+ pause tlačítko - přidání stylu, změna

website/public/js/zcu-heatmap.js

@@ -5 +5 @@
 var startY = 13.3521;
 var startZoom = 17;
 
-var currentTime = 0;
+var dataSourceRoute;
+var currentTime;
+var name;
+var date;
+
+var timer;
+var isAnimationRunning = false;
+var data = [];
+
 
 
 function initMap() {
@@ -22 +30 @@
   mymap.setView([latitude, longitude], zoom);
 }
 
-
-function changeTime(direction, max = 0) {
-  let time = document.getElementById('time');
-
-  if (direction === 'next') {
-    currentTime += 1;
-
-    if (currentTime > 23) {
-      currentTime = 0;
-    }
+function changeAnimationState() {
+
+  isAnimationRunning = !isAnimationRunning
+  if (isAnimationRunning) {
+    $('#play-pause').attr('class', 'pause');
+    timer = setInterval(
+      function() {
+        next();
+      },
+      800
+    );
   }
-  else if (direction === 'prev') {
-    currentTime -= 1;
-
-    if (currentTime < 0) {
-      currentTime = 23;
-    }
+  else {
+    clearTimeout(timer);
+    $('#play-pause').attr('class', 'play');
   }
 
-  time.textContent = currentTime + ":00";
-  time.className = 'time hour-' + currentTime;
+
 }
 
+function previous() {
+  currentTime = (currentTime + 23) % 24;
+  drawHeatmap(data[currentTime]);
+  setTimeline();
+}
+
+function next() {
+  currentTime = (currentTime + 1) % 24;
+  drawHeatmap(data[currentTime]);
+  setTimeline();
+}
 
-function animateTimeline() {
-  setTimeout(
-    function () {
-      if (currentTime < 23) {
-        animateTimeline();
-        changeTime('next');
-      }
-      else {
-        changeTime('next');
-      }
-    }, 400);
+function setTimeline() {
+  $('#timeline').text(currentTime + ":00");
+  $('#timeline').attr('class', 'time hour-' + currentTime);
 }
 
-function showHeatmap(route) {
+function loadCurrentTimeHeatmap(route) {
 
-  var name = $('#type').children("option:selected").text();
+  dataSourceRoute = route;
+  data = []
+
+  name = $('#type').children("option:selected").text();
   var parts = $('#date').val().split('-');
-  var date = parts[2] + parts[1] + parts[0];
-  var time = $('#time').children("option:selected").val();
+  date = parts[2] + parts[1] + parts[0];
+  currentTime = parseInt($('#time').children("option:selected").val());
+  setTimeline();
 
   $.ajax({
     type: "POST",
-    url: route + '/' +  name + '/' + date + '/' + time,
+    url: dataSourceRoute + '/' +  name + '/' + date + '/' + currentTime,
     success: function(result) {
-      drawHeatmap(result);
+      data[currentTime] = result;
+      drawHeatmap(data[currentTime]);
     }
   });
+
+  preload(currentTime, 1);
+  preload(currentTime, -1);
+
+}
+
+function preload(time, change) {
+
+  var ntime = time + change; 
+  if (0 <=  ntime && ntime <= 23) {
+      $.ajax({
+        type: "POST",
+        url: dataSourceRoute + '/' +  name + '/' + date + '/' + ntime,
+        success: function(result) {
+          data[ntime] = result;
+          preload(ntime, change);
+        }
+      });
+  }
+
 }
 
 
 function drawHeatmap(points) {
 
   // Todo still switched
-  points = points.map(function (p) { return [p['y'], p['x'], p['number']]; });
-  if (heatmapLayer != null) {
-    mymap.removeLayer(heatmapLayer);
+  if (points != null) {
+    points = points.map(function (p) { return [p['x'], p['y'], p['number']]; });
+    if (heatmapLayer != null) {
+      mymap.removeLayer(heatmapLayer);
+    }
+    heatmapLayer = L.heatLayer(points).addTo(mymap);
   }
-  heatmapLayer = L.heatLayer(points, {opacity: 0.5}).addTo(mymap);
-  heatmapLayer.options = {opacity: 1};
+  else {
+    if (heatmapLayer != null) {
+      mymap.removeLayer(heatmapLayer);
+    }
+  }
+
   // var heat_01 = ...
   // on background map.addLayer(heat_01) -> map.removeLayer(heat_01);
   // $(.leaflet-heatmap-layer).css('opacity', 'value');