Mercurial > gemma

changeset 5075:aeb100b4c41b time-sliding

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
timeslider: prerequisites for time travel * splitting selected time to a) the actual time visible on map (in the toolbar) b) the actual selected time with the timeslider Analogous to an event "ongoing refresh" we have "ongoing timeslide". During this event (a) stays the same according to the information presented on the screen. (b) is not affected. As soon as the loaders settle, the next requests are started with the then "selected time" and the actual time visible on map is set to this new value. Reloading the layers "jumps back to now".
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 13 Mar 2020 10:37:44 +0100
parents 8ec4f1a0db86
children 96a544504818
files client/src/components/TimeSlider.vue client/src/components/layers/Layers.vue client/src/components/map/layers.js client/src/components/toolbar/TimeSlider.vue client/src/store/application.js client/src/store/map.js
diffstat 6 files changed, 27 insertions(+), 5 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/TimeSlider.vue	Thu Mar 12 11:08:12 2020 +0100
+++ b/client/src/components/TimeSlider.vue	Fri Mar 13 10:37:44 2020 +0100
@@ -98,11 +98,18 @@
       if (this.ongoingRefresh) return;
       this.$store.commit("application/setSelectedTime", new Date());
       this.$nextTick(this.rescaleSlider(1));
+    },
+    ongoingTimeSlide() {
+      if (this.ongoingTimeSlide) return;
+      this.$store.commit(
+        "application/setCurrentVisibleTime",
+        this.selectedTime
+      );
     }
   },
   computed: {
     ...mapState("application", ["showTimeSlider", "paneSetup"]),
-    ...mapState("map", ["ongoingRefresh"]),
+    ...mapState("map", ["ongoingRefresh", "ongoingTimeSlide"]),
     reposition() {
       // reposition time slider in case of opened diagram
       if (["DEFAULT", "COMPARESURVEYS"].indexOf(this.paneSetup) === -1) {
--- a/client/src/components/layers/Layers.vue	Thu Mar 12 11:08:12 2020 +0100
+++ b/client/src/components/layers/Layers.vue	Fri Mar 13 10:37:44 2020 +0100
@@ -99,11 +99,14 @@
       this.$store.commit("application/showLayers", false);
     },
     refreshLayers() {
+      this.$store.commit("application/setCurrentVisibleTime", new Date());
       this.$store.commit("map/startRefreshLayers");
+      this.$store.commit("map/startTimeSlide");
       this.$store.commit("gauges/deleteNashSutcliffeCache");
       this.$store.dispatch("map/refreshLayers");
       this.$nextTick(() => {
         this.$store.commit("map/finishRefreshLayers");
+        this.$store.commit("map/finishTimeSlide");
       });
     }
   }
--- a/client/src/components/map/layers.js	Thu Mar 12 11:08:12 2020 +0100
+++ b/client/src/components/map/layers.js	Fri Mar 13 10:37:44 2020 +0100
@@ -689,6 +689,7 @@
               LAYERS: "fairway_marks",
               VERSION: "1.1.1",
               TILED: true
+              //CQL_FILTER: "" + store.state.application.currentVisibleTime
             },
             tileLoadFunction: function(tile, src) {
               HTTP.get(src, {
--- a/client/src/components/toolbar/TimeSlider.vue	Thu Mar 12 11:08:12 2020 +0100
+++ b/client/src/components/toolbar/TimeSlider.vue	Fri Mar 13 10:37:44 2020 +0100
@@ -36,17 +36,17 @@
 
 export default {
   computed: {
-    ...mapState("application", ["showTimeSlider", "selectedTime"]),
+    ...mapState("application", ["showTimeSlider", "currentVisibleTime"]),
     label() {
-      const date = this.selectedTime;
-      return `<b>${this.selectedTime.toLocaleDateString(locale2, {
+      const date = this.currentVisibleTime;
+      return `<b>${this.currentVisibleTime.toLocaleDateString(locale2, {
         day: "2-digit",
         month: "2-digit",
         year: "numeric"
       })} ${format(date, "HH:mm")}</b>`;
     },
     currentTimeSelection() {
-      const date = this.selectedTime;
+      const date = this.currentVisibleTime;
       const result = date.toLocaleDateString(locale2, {
         day: "2-digit",
         month: "2-digit"
--- a/client/src/store/application.js	Thu Mar 12 11:08:12 2020 +0100
+++ b/client/src/store/application.js	Fri Mar 13 10:37:44 2020 +0100
@@ -48,6 +48,7 @@
     countries: ["AT", "SK", "HU", "HR", "RS", "BG", "RO"],
     searchQuery: "",
     selectedTime: new Date(),
+    currentVisibleTime: new Date(),
     version,
     tempRoute: "",
     config: {}
@@ -79,6 +80,9 @@
     }
   },
   mutations: {
+    setCurrentVisibleTime: (state, currentVisibleTime) => {
+      state.currentVisibleTime = currentVisibleTime;
+    },
     setTempRoute: (state, tempRoute) => {
       state.tempRoute = tempRoute;
     },
--- a/client/src/store/map.js	Thu Mar 12 11:08:12 2020 +0100
+++ b/client/src/store/map.js	Fri Mar 13 10:37:44 2020 +0100
@@ -53,6 +53,7 @@
     isolinesLegendImgDataURL: "",
     differencesLegendImgDataURL: "",
     ongoingRefresh: false,
+    ongoingTimeSlide: false,
     reviewActive: false
   };
 };
@@ -102,6 +103,12 @@
     finishRefreshLayers: state => {
       state.ongoingRefresh = false;
     },
+    startTimeSlide: state => {
+      state.ongoingRefresh = true;
+    },
+    finishTimeSlide: state => {
+      state.ongoingRefresh = false;
+    },
     initialLoad: (state, initialLoad) => {
       state.initialLoad = initialLoad;
     },