comparison client/src/components/TimeSlider.vue @ 5075:aeb100b4c41b time-sliding

timeslider: prerequisites for time travel * splitting selected time to a) the actual time visible on map (in the toolbar) b) the actual selected time with the timeslider Analogous to an event "ongoing refresh" we have "ongoing timeslide". During this event (a) stays the same according to the information presented on the screen. (b) is not affected. As soon as the loaders settle, the next requests are started with the then "selected time" and the actual time visible on map is set to this new value. Reloading the layers "jumps back to now".
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 13 Mar 2020 10:37:44 +0100
parents 8ec4f1a0db86
children faa1521e597b
comparison
equal deleted inserted replaced
5074:8ec4f1a0db86 5075:aeb100b4c41b
96 watch: { 96 watch: {
97 ongoingRefresh() { 97 ongoingRefresh() {
98 if (this.ongoingRefresh) return; 98 if (this.ongoingRefresh) return;
99 this.$store.commit("application/setSelectedTime", new Date()); 99 this.$store.commit("application/setSelectedTime", new Date());
100 this.$nextTick(this.rescaleSlider(1)); 100 this.$nextTick(this.rescaleSlider(1));
101 },
102 ongoingTimeSlide() {
103 if (this.ongoingTimeSlide) return;
104 this.$store.commit(
105 "application/setCurrentVisibleTime",
106 this.selectedTime
107 );
101 } 108 }
102 }, 109 },
103 computed: { 110 computed: {
104 ...mapState("application", ["showTimeSlider", "paneSetup"]), 111 ...mapState("application", ["showTimeSlider", "paneSetup"]),
105 ...mapState("map", ["ongoingRefresh"]), 112 ...mapState("map", ["ongoingRefresh", "ongoingTimeSlide"]),
106 reposition() { 113 reposition() {
107 // reposition time slider in case of opened diagram 114 // reposition time slider in case of opened diagram
108 if (["DEFAULT", "COMPARESURVEYS"].indexOf(this.paneSetup) === -1) { 115 if (["DEFAULT", "COMPARESURVEYS"].indexOf(this.paneSetup) === -1) {
109 const height = document.getElementById("main").clientHeight + 1; 116 const height = document.getElementById("main").clientHeight + 1;
110 return `bottom: ${height}px`; 117 return `bottom: ${height}px`;