Mercurial > gemma
changeset 5040:066b76ef5e6a time-sliding
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: {}