Mercurial > gemma
changeset 5062:da28a58eb10d time-sliding
client: correct showing of time in toolbar according to zoom level(selected time)
| author | Fadi Abbud <fadi.abbud@intevation.de> |
|---|---|
| date | Mon, 09 Mar 2020 15:38:00 +0100 |
| parents | 37371727f704 |
| children | 43bebcc8961f |
| files | client/src/components/TimeSlider.vue client/src/components/toolbar/TimeSlider.vue client/src/store/application.js |
| diffstat | 3 files changed, 22 insertions(+), 3 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/TimeSlider.vue Mon Mar 09 15:00:21 2020 +0100 +++ b/client/src/components/TimeSlider.vue Mon Mar 09 15:38:00 2020 +0100 @@ -82,7 +82,11 @@ } }, computed: { - ...mapState("application", ["showTimeSlider", "paneSetup"]), + ...mapState("application", [ + "showTimeSlider", + "paneSetup", + "isSelectedTimeHourly" + ]), ...mapState("map", ["ongoingRefresh"]), reposition() { // reposition time slider in case of opened diagram @@ -259,6 +263,10 @@ }, zoomed() { 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); 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:00:21 2020 +0100 +++ b/client/src/components/toolbar/TimeSlider.vue Mon Mar 09 15:38:00 2020 +0100 @@ -36,7 +36,11 @@ export default { computed: { - ...mapState("application", ["showTimeSlider", "selectedTime"]), + ...mapState("application", [ + "showTimeSlider", + "selectedTime", + "isSelectedTimeHourly" + ]), label() { const date = this.selectedTime; return `<b>${this.selectedTime.toLocaleDateString(locale2, { @@ -51,7 +55,10 @@ day: "2-digit", month: "2-digit" }); - return `${format(date, "HH:mm")}\n${result}\n${date.getFullYear()}`; + const prefix = this.isSelectedTimeHourly + ? `${format(date, "HH:mm")}\n` + : ``; + return `${prefix}${result}\n${date.getFullYear()}`; } } };
--- a/client/src/store/application.js Mon Mar 09 15:00:21 2020 +0100 +++ b/client/src/store/application.js Mon Mar 09 15:38:00 2020 +0100 @@ -48,6 +48,7 @@ countries: ["AT", "SK", "HU", "HR", "RS", "BG", "RO"], searchQuery: "", selectedTime: new Date(), + isSelectedTimeHourly: false, version, tempRoute: "", config: {} @@ -79,6 +80,9 @@ } }, mutations: { + setSelectedTimeHourly: (state, isHourly) => { + state.isSelectedTimeHourly = isHourly; + }, setTempRoute: (state, tempRoute) => { state.tempRoute = tempRoute; },