Mercurial > gemma
changeset 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 |
| files | client/src/components/TimeSlider.vue client/src/components/toolbar/TimeSlider.vue client/src/store/application.js |
| diffstat | 3 files changed, 15 insertions(+), 21 deletions(-) [+] |
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)));
--- a/client/src/components/toolbar/TimeSlider.vue Mon Mar 09 15:38:00 2020 +0100 +++ b/client/src/components/toolbar/TimeSlider.vue Mon Mar 09 16:30:57 2020 +0100 @@ -36,11 +36,7 @@ export default { computed: { - ...mapState("application", [ - "showTimeSlider", - "selectedTime", - "isSelectedTimeHourly" - ]), + ...mapState("application", ["showTimeSlider", "selectedTime"]), label() { const date = this.selectedTime; return `<b>${this.selectedTime.toLocaleDateString(locale2, { @@ -55,10 +51,7 @@ day: "2-digit", month: "2-digit" }); - const prefix = this.isSelectedTimeHourly - ? `${format(date, "HH:mm")}\n` - : ``; - return `${prefix}${result}\n${date.getFullYear()}`; + return `${format(date, "HH:mm")}\n${result}\n${date.getFullYear()}`; } } };
--- a/client/src/store/application.js Mon Mar 09 15:38:00 2020 +0100 +++ b/client/src/store/application.js Mon Mar 09 16:30:57 2020 +0100 @@ -48,7 +48,6 @@ countries: ["AT", "SK", "HU", "HR", "RS", "BG", "RO"], searchQuery: "", selectedTime: new Date(), - isSelectedTimeHourly: false, version, tempRoute: "", config: {} @@ -80,9 +79,6 @@ } }, mutations: { - setSelectedTimeHourly: (state, isHourly) => { - state.isSelectedTimeHourly = isHourly; - }, setTempRoute: (state, tempRoute) => { state.tempRoute = tempRoute; },