changeset 5085:fe63733750d7 time-sliding

client: correct refresh layers request time * make a variable "refreshLayersTime" to track the time used in the refreshLayers request, to avoid using old value as long as "currentVisibleTime" gets its value after the refreshLayers request is ended, which was leading to show time in toolbar does not actually match the time in the layers reload request.
author Fadi Abbud <fadi.abbud@intevation.de>
date Thu, 19 Mar 2020 17:43:23 +0100
parents 2c3108152497
children f572b553cd8a
files client/src/components/TimeSlider.vue client/src/components/layers/Layers.vue client/src/components/layers/layers.js client/src/store/application.js
diffstat 4 files changed, 19 insertions(+), 15 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/TimeSlider.vue	Thu Mar 19 07:23:35 2020 +0100
+++ b/client/src/components/TimeSlider.vue	Thu Mar 19 17:43:23 2020 +0100
@@ -103,7 +103,7 @@
       if (this.ongoingTimeSlide) return;
       this.$store.commit(
         "application/setCurrentVisibleTime",
-        this.selectedTime
+        this.refreshLayersTime
       );
     },
     selectedTime() {
@@ -114,14 +114,15 @@
       // differs from the selected time on time slider
       if (this.sourcesLoading !== 0) return;
       if (compareAsc(this.selectedTime, this.currentVisibleTime) === 0) return;
-      this.refreshLayers();
+      this.triggerMapReload();
     }
   },
   computed: {
     ...mapState("application", [
       "showTimeSlider",
       "paneSetup",
-      "currentVisibleTime"
+      "currentVisibleTime",
+      "refreshLayersTime"
     ]),
     ...mapState("map", [
       "ongoingRefresh",
@@ -202,20 +203,21 @@
     close() {
       this.$store.commit("application/showTimeSlider", false);
     },
-    refreshLayers() {
+    triggerMapReload() {
+      // trigger refresh layers only when last loading of layers was ended
+      if (this.sourcesLoading) {
+        return;
+      }
+      this.$store.commit(
+        "application/setLayerRefreshedTime",
+        this.selectedTime
+      );
       this.$store.commit("map/startTimeSlide");
       this.$store.dispatch("map/refreshTimebasedLayers");
       this.$nextTick(() => {
         this.$store.commit("map/finishTimeSlide");
       });
     },
-    triggerMapReload() {
-      // trigger refresh layers only when last loading of layers was ended
-      if (this.sourcesLoading) {
-        return;
-      }
-      this.refreshLayers();
-    },
     rescaleSlider(scaleFactor) {
       const tx =
         -scaleFactor *
--- a/client/src/components/layers/Layers.vue	Thu Mar 19 07:23:35 2020 +0100
+++ b/client/src/components/layers/Layers.vue	Thu Mar 19 17:43:23 2020 +0100
@@ -99,14 +99,12 @@
       this.$store.commit("application/showLayers", false);
     },
     refreshLayers() {
-      this.$store.commit("application/setCurrentVisibleTime", new Date());
+      this.$store.commit("application/setLayerRefreshedTime", 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/layers/layers.js	Thu Mar 19 07:23:35 2020 +0100
+++ b/client/src/components/layers/layers.js	Thu Mar 19 17:43:23 2020 +0100
@@ -689,7 +689,7 @@
               LAYERS: "fairway_marks",
               VERSION: "1.1.1",
               TILED: true,
-              TIME: store.state.application.currentVisibleTime.toISOString()
+              TIME: store.state.application.refreshLayersTime.toISOString()
             },
             tileLoadFunction: function(tile, src) {
               HTTP.get(src, {
--- a/client/src/store/application.js	Thu Mar 19 07:23:35 2020 +0100
+++ b/client/src/store/application.js	Thu Mar 19 17:43:23 2020 +0100
@@ -49,6 +49,7 @@
     searchQuery: "",
     selectedTime: new Date(),
     currentVisibleTime: new Date(),
+    refreshLayersTime: new Date(),
     version,
     tempRoute: "",
     config: {}
@@ -83,6 +84,9 @@
     setCurrentVisibleTime: (state, currentVisibleTime) => {
       state.currentVisibleTime = currentVisibleTime;
     },
+    setLayerRefreshedTime: (state, refreshLayersTime) => {
+      state.refreshLayersTime = refreshLayersTime;
+    },
     setTempRoute: (state, tempRoute) => {
       state.tempRoute = tempRoute;
     },