Mercurial > gemma

changeset 5040:066b76ef5e6a time-sliding

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
selected time is refreshed after reloads
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 28 Feb 2020 11:32:37 +0100
parents aec0923f9c52
children abe9b75686ba
files client/src/components/TimeSlider.vue client/src/components/toolbar/Toolbar.vue client/src/store/application.js
diffstat 3 files changed, 21 insertions(+), 12 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/TimeSlider.vue	Fri Feb 28 10:29:18 2020 +0100
+++ b/client/src/components/TimeSlider.vue	Fri Feb 28 11:32:37 2020 +0100
@@ -59,8 +59,16 @@
       newX: null
     };
   },
+  watch: {
+    ongoingRefresh() {
+      if (this.ongoingRefresh) return;
+      this.$store.commit("application/setSelectedTime", new Date());
+      this.$nextTick(this.redrawSlider);
+    }
+  },
   computed: {
     ...mapState("application", ["showTimeSlider"]),
+    ...mapState("map", ["ongoingRefresh"]),
     timeSelection: {
       get() {
         const date = this.$store.state.application.selectedTime;
@@ -69,15 +77,7 @@
       set(value) {
         const date = new Date(value);
         this.$store.commit("application/setSelectedTime", date);
-        this.$nextTick(() => {
-          this.createSlider();
-          // redraw the time slider and move to right selected time
-          zoom.translateTo(
-            d3.select(".line"),
-            this.newX(d3.isoParse(this.selectedTime.toISOString())),
-            1
-          );
-        });
+        this.$nextTick(this.redrawSlider);
       }
     },
     selectedTime: {
@@ -93,6 +93,14 @@
     close() {
       this.$store.commit("application/showTimeSlider", false);
     },
+    redrawSlider() {
+      this.createSlider();
+      zoom.translateTo(
+        d3.select(".line"),
+        this.newX(d3.isoParse(this.selectedTime.toISOString())),
+        1
+      );
+    },
     createSlider() {
       const element = document.getElementById("sliderContainer");
       const svgWidth = element ? element.clientWidth : 0,
--- a/client/src/components/toolbar/Toolbar.vue	Fri Feb 28 10:29:18 2020 +0100
+++ b/client/src/components/toolbar/Toolbar.vue	Fri Feb 28 11:32:37 2020 +0100
@@ -7,6 +7,7 @@
       "
     >
       <Identify />
+      <TimeSlider />
       <Layers />
       <Profiles />
       <Gauges />
@@ -14,7 +15,6 @@
       <Linetool />
       <Polygontool />
       <Pdftool />
-      <TimeSlider />
     </div>
     <div
       @click="$store.commit('application/expandToolbar', !expandToolbar)"
--- a/client/src/store/application.js	Fri Feb 28 10:29:18 2020 +0100
+++ b/client/src/store/application.js	Fri Feb 28 11:32:37 2020 +0100
@@ -14,8 +14,9 @@
  *   Bernhard E. Reiter <bernhard.reiter@intevation.de>
  */
 
+import { displayError, displayInfo } from "@/lib/errors";
+
 import { HTTP } from "@/lib/http";
-import { displayError, displayInfo } from "@/lib/errors";
 import { version } from "../../package.json";
 
 // initial state
@@ -46,7 +47,7 @@
     expandToolbar: true,
     countries: ["AT", "SK", "HU", "HR", "RS", "BG", "RO"],
     searchQuery: "",
-    selectedTime: new Date("2020-01-04"),
+    selectedTime: new Date(),
     version,
     tempRoute: "",
     config: {}