Revize 815159f3

done

website/public/js/zcu-heatmap.js

@@ -5 +5 @@
 var heatmapLayer = null
 var marksLayer = null
 
+// values for arrow keys
+const arrowKeyLEFT = 37
+const arrowKeyRIGHT = 39
+
 var startX = 49.7248
 var startY = 13.3521
 var startZoom = 17
@@ -186 +190 @@
   }
 }
 
+const onArrowLeftRightKeysDownRegister = () => {
+  $(document).keydown(function (e) {
+    const { which } = e
+    if (which === arrowKeyLEFT) {
+      previous()
+    } else if (which === arrowKeyRIGHT) {
+      next()
+    }
+    e.preventDefault()
+  })
+}
+
 const debounce = (func, delay) => {
   let inDebounce
   return function () {
@@ -398 +414 @@
     return
   }
 
-  $("#player-time").removeAttr("style");
-
   currentTime = (currentTime + 23) % 24
   changeHour(currentTime)
   mymap.closePopup()
@@ -416 +430 @@
     return
   }
 
-  $("#player-time").removeAttr("style");
-  
   currentTime = (currentTime + 1) % 24
   changeHour(currentTime)
   mymap.closePopup()
@@ -470 +482 @@
 }
 
 const changeHour = (hour) => {
+  $('#player-time').removeAttr('style')
   changeCurrentTime(hour)
   updateHeaderControls()
   setTimeline()
@@ -700 +713 @@
   changeCurrentTime()
   changeCurrentDate()
   onValueChangeRegister()
+  onArrowLeftRightKeysDownRegister()
 }
 
 const loadCheckboxDatasetNameData = () => {
@@ -716 +730 @@
   })
 }
 
-function dragTimeline() {
-  let hourElemWidthPx = 26
+function dragTimeline () {
+  const hourElemWidthPx = 26
 
-  let elem = $("#player-time")
-  let offset = elem.offset().left - elem.parent().offset().left
+  const elem = $('#player-time')
+  const offset = elem.offset().left - elem.parent().offset().left
 
-  elem.draggable({ containment: "parent", axis: "x", cursor: "ew-resize" })
+  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")
+    const hour = Math.round(offset / hourElemWidthPx)
+
+    elem.attr('class', 'time hour-' + hour)
+    $('#player-time span').html(hour + ':00')
 
     onChangeHour(hour)
   }
-}
+}