Add temporal navigation buttons to slider [GRIDV-68]

spatial/static/spatial/js/gridmap.js

@@ -463,4 +463,20 @@ function getWarningStatusTitle(jsonDataStr, warningStatus)
         : warningStatus == 3 ? gettext("Medium risk of infection")
         : warningStatus == 4 ? gettext("High risk of infection") : "";
     }
+}
+
+/**
+ * Programmatically move the slider back and forth
+ * Used by the arrow buttons (onclick event) on each side of the slider
+ * @param {Integer} step 
+ */
+function moveDateSlider(step)
+{
+    let slider=document.getElementById("layerDateRange");
+    let min = parseInt(slider.min);
+    let max = parseInt(slider.max);
+    let newValue = parseInt(slider.value) + step;
+    newValue = newValue > max ? max : newValue < min ? min : newValue;
+    slider.value=newValue;
+    slider.onchange();
 }
\ No newline at end of file

spatial/templates/spatial/gridmap.html

@@ -32,7 +32,9 @@
 	<div class="col-md-12" id="mapContainer" style="position: relative; height: 800px; padding-top: 15px; padding-bottom: 15px;">
 		<div class="slidecontainer" style="position: absolute; left: 20px; bottom: 20px; background-color: white; z-index: 1000;padding: 15px; border-radius: 15px;">
 			{% trans "Current date" %}: <span id="currentDate"></span> <br/>
-			<input type="range" min="0" max="0" value="0" step="1" id="layerDateRange" onchange="switchLayer(parseInt(this.value));"><br/>
+			<button type="button" class="btn" onclick="moveDateSlider(-1);"><i class="fa fa-step-backward" aria-hidden="true"></i></button>
+			<input type="range" min="0" max="0" value="0" step="1" id="layerDateRange" onchange="switchLayer(parseInt(this.value));">
+			<button type="button" class="btn" onclick="moveDateSlider(1);"><i class="fa fa-step-forward" aria-hidden="true"></i></button>
 		</div>
 		<div class="form-group" id="paramselector" style="position: absolute; right: 20px; bottom: 20px; background-color: white; z-index: 1000;padding: 15px; border-radius: 15px;">
 		</div>