Mercurial > gemma
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 =