Mercurial > gemma

changeset 5090:70bd5c824639 time-sliding

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: distinguish time in refreshLayers requests during Time-slider enable/disable * We have now two states: Time-slider enabled: make requests for the selected time Time-slider disables: make request with value "now" * Reactivate Time-slider initiates request with the last chosen time value before Time-slider was deactivated.
author Fadi Abbud <fadi.abbud@intevation.de>
date Mon, 23 Mar 2020 17:33:26 +0100
parents b47f2e3e0a75
children 1154b73328ec
files client/src/components/TimeSlider.vue client/src/components/toolbar/TimeSlider.vue client/src/store/application.js
diffstat 3 files changed, 27 insertions(+), 6 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/TimeSlider.vue	Mon Mar 23 10:20:44 2020 +0100
+++ b/client/src/components/TimeSlider.vue	Mon Mar 23 17:33:26 2020 +0100
@@ -202,6 +202,8 @@
   methods: {
     close() {
       this.$store.commit("application/showTimeSlider", false);
+      this.$store.commit("application/setStoredTime", this.currentVisibleTime);
+      this.$store.commit("application/setSelectedTime", new Date());
     },
     triggerMapReload() {
       // trigger refresh layers only when last loading of layers was ended
--- a/client/src/components/toolbar/TimeSlider.vue	Mon Mar 23 10:20:44 2020 +0100
+++ b/client/src/components/toolbar/TimeSlider.vue	Mon Mar 23 17:33:26 2020 +0100
@@ -1,9 +1,5 @@
 <template>
-  <div
-    @click="$store.commit('application/showTimeSlider', !showTimeSlider)"
-    class="toolbar-button"
-    v-tooltip.right="label"
-  >
+  <div @click="showSlider" class="toolbar-button" v-tooltip.right="label">
     <pre
       :class="[
         'menuEntry',
@@ -36,7 +32,11 @@
 
 export default {
   computed: {
-    ...mapState("application", ["showTimeSlider", "currentVisibleTime"]),
+    ...mapState("application", [
+      "showTimeSlider",
+      "currentVisibleTime",
+      "storedTime"
+    ]),
     label() {
       const date = this.currentVisibleTime;
       return `<b>${this.currentVisibleTime.toLocaleDateString(locale2, {
@@ -53,6 +53,21 @@
       });
       return `${format(date, "HH:mm")}\n${result}\n${date.getFullYear()}`;
     }
+  },
+  methods: {
+    showSlider() {
+      if (this.showTimeSlider) {
+        this.$store.commit(
+          "application/setStoredTime",
+          this.currentVisibleTime
+        );
+        this.$store.commit("application/setSelectedTime", new Date());
+        this.$store.commit("application/showTimeSlider", false);
+      } else {
+        this.$store.commit("application/setSelectedTime", this.storedTime);
+        this.$store.commit("application/showTimeSlider", true);
+      }
+    }
   }
 };
 </script>
--- a/client/src/store/application.js	Mon Mar 23 10:20:44 2020 +0100
+++ b/client/src/store/application.js	Mon Mar 23 17:33:26 2020 +0100
@@ -50,6 +50,7 @@
     selectedTime: new Date(),
     currentVisibleTime: new Date(),
     refreshLayersTime: new Date(),
+    storedTime: new Date(),
     version,
     tempRoute: "",
     config: {}
@@ -87,6 +88,9 @@
     setLayerRefreshedTime: (state, refreshLayersTime) => {
       state.refreshLayersTime = refreshLayersTime;
     },
+    setStoredTime: (state, storedTime) => {
+      state.storedTime = storedTime;
+    },
     setTempRoute: (state, tempRoute) => {
       state.tempRoute = tempRoute;
     },