From 2fd16d4bf71b717ea1c4e27b6a7c8840afe9ee49 Mon Sep 17 00:00:00 2001
From: Tor-Einar Skog <tor-einar.skog@nibio.no>
Date: Tue, 19 Dec 2023 15:28:18 +0100
Subject: [PATCH] Add temporal navigation buttons to slider [GRIDV-68]
---
spatial/static/spatial/js/gridmap.js | 16 ++++++++++++++++
spatial/templates/spatial/gridmap.html | 4 +++-
2 files changed, 19 insertions(+), 1 deletion(-)
diff --git a/spatial/static/spatial/js/gridmap.js b/spatial/static/spatial/js/gridmap.js
index 249d7542..446c6ac1 100644
--- a/spatial/static/spatial/js/gridmap.js
+++ b/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
diff --git a/spatial/templates/spatial/gridmap.html b/spatial/templates/spatial/gridmap.html
index 851f0ad3..9d866862 100644
--- a/spatial/templates/spatial/gridmap.html
+++ b/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>
--
GitLab