Mercurial > gemma
diff client/src/components/TimeSlider.vue @ 5063:43bebcc8961f time-sliding
client: set time according to zoom level.
* in case zoom is at a hourly level hours respected
* otherwise a default of 12:00 is set
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Mon, 09 Mar 2020 16:30:57 +0100 |
parents | da28a58eb10d |
children | d87438a8c891 |
line wrap: on
line diff
--- a/client/src/components/TimeSlider.vue Mon Mar 09 15:38:00 2020 +0100 +++ b/client/src/components/TimeSlider.vue Mon Mar 09 16:30:57 2020 +0100 @@ -71,6 +71,7 @@ name: "timeslider", data() { return { + isSelectedTimeHourly: false, newX: null }; }, @@ -82,11 +83,7 @@ } }, computed: { - ...mapState("application", [ - "showTimeSlider", - "paneSetup", - "isSelectedTimeHourly" - ]), + ...mapState("application", ["showTimeSlider", "paneSetup"]), ...mapState("map", ["ongoingRefresh"]), reposition() { // reposition time slider in case of opened diagram @@ -104,7 +101,10 @@ }, set(value) { if (!value) return; - const date = new Date(value); + let date = new Date(value); + const [hours, minutes] = this.timeSelection.split(":"); + date = setHours(date, hours); + date = setMinutes(date, minutes); this.$store.commit("application/setSelectedTime", date); this.rescaleSlider(50); } @@ -128,6 +128,11 @@ return this.$store.state.application.selectedTime; }, set(value) { + if (!this.isSelectedTimeHourly) { + value = setHours(value, 12); + value = setMinutes(value, 0); + } + this.$store.commit("application/setSelectedTime", value); } } @@ -265,8 +270,8 @@ this.newX = d3.event.transform.rescaleX(xScale); const currentScaleFactor = d3.event.transform.k; const isHourly = currentScaleFactor > 400; - if (isHourly != this.isSelectedTimeHourly) - this.$store.commit("application/setSelectedTimeHourly", isHourly); + if (this.isSelectedTimeHourly != isHourly) + this.isSelectedTimeHourly = isHourly; xAxis.scale(this.newX); d3.select(".axis--x").call(xAxis); d3.select(".line").attr("x", this.newX(d3.isoParse(this.selectedTime)));