Mercurial > gemma
changeset 5090:70bd5c824639 time-sliding
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; },