changeset 5082:c4ebb6ccc588 time-sliding

client: start a request for the last changed time on time slider * initiate a refresh layers request when the time for the finished request differs from the selected time on time slider
author Fadi Abbud <fadi.abbud@intevation.de>
date Wed, 18 Mar 2020 14:11:44 +0100
parents 89834f645de3
children 5ec30f63fd58
files client/src/components/TimeSlider.vue
diffstat 1 files changed, 27 insertions(+), 17 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/TimeSlider.vue	Wed Mar 18 10:01:01 2020 +0100
+++ b/client/src/components/TimeSlider.vue	Wed Mar 18 14:11:44 2020 +0100
@@ -77,7 +77,7 @@
 import * as d3 from "d3";
 import app from "@/main";
 import { localeDateString } from "@/lib/datelocalization";
-import { format, setHours, setMinutes } from "date-fns";
+import { format, setHours, setMinutes, compareAsc } from "date-fns";
 import debounce from "debounce";
 
 let zoom = null;
@@ -108,6 +108,13 @@
     },
     selectedTime() {
       this.triggerMapReload();
+    },
+    sourcesLoading() {
+      // initiate refresh layers request if the time for the finished request
+      // differs from the selected time on time slider
+      if (this.sourcesLoading !== 0) return;
+      if (compareAsc(this.selectedTime, this.currentVisibleTime) === 0) return;
+      this.refreshLayers();
     }
   },
   computed: {
@@ -170,22 +177,6 @@
         }
         this.$store.commit("application/setSelectedTime", value);
       }
-    }
-  },
-  methods: {
-    close() {
-      this.$store.commit("application/showTimeSlider", false);
-    },
-    triggerMapReload() {
-      // trigger refresh layers only when last loading of layers was ended
-      if (this.sourcesLoading()) {
-        return;
-      }
-      this.$store.commit("map/startTimeSlide");
-      this.$store.dispatch("map/refreshLayers");
-      this.$nextTick(() => {
-        this.$store.commit("map/finishTimeSlide");
-      });
     },
     sourcesLoading() {
       let counter = 0;
@@ -196,6 +187,25 @@
         }
       });
       return counter;
+    }
+  },
+  methods: {
+    close() {
+      this.$store.commit("application/showTimeSlider", false);
+    },
+    refreshLayers() {
+      this.$store.commit("map/startTimeSlide");
+      this.$store.dispatch("map/refreshLayers");
+      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 =