Mercurial > gemma
changeset 5038:9d26f67dd916 time-sliding
client: add date picker to the time-slider
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Thu, 27 Feb 2020 17:55:31 +0100 |
parents | 9d288d9b851b |
children | aec0923f9c52 |
files | client/src/components/TimeSlider.vue |
diffstat | 1 files changed, 30 insertions(+), 1 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/TimeSlider.vue Thu Feb 27 09:53:11 2020 +0100 +++ b/client/src/components/TimeSlider.vue Thu Feb 27 17:55:31 2020 +0100 @@ -6,6 +6,14 @@ { expanded: showTimeSlider } ]" > + <div class="d-flex m-1"> + <input + type="date" + v-model="timeSelection" + min="2020-01-01" + max="2020-03-01" + /> + </div> <div id="sliderContainer" class="d-flex sliderContainer" @@ -42,6 +50,7 @@ */ import { mapState } from "vuex"; import * as d3 from "d3"; +let zoom = null; export default { name: "timeslider", data() { @@ -51,6 +60,25 @@ }, computed: { ...mapState("application", ["showTimeSlider"]), + timeSelection: { + get() { + const date = this.$store.state.application.selectedTime; + return date.toISOString().split("T")[0]; + }, + set(value) { + const date = new Date(value); + this.$store.commit("application/setSelectedTime", date); + this.$nextTick(() => { + this.createSlider(); + // redraw the time slider and move to right selected time + zoom.translateTo( + d3.select(".line"), + this.newX(d3.isoParse(this.selectedTime.toISOString())), + 1 + ); + }); + } + }, selectedTime: { get() { return this.$store.state.application.selectedTime; @@ -72,6 +100,7 @@ marginLeft = 0; this.newX = this.getScale(); + d3.select(".sliderContainer svg").remove(); let svg = d3 .select(".sliderContainer") .append("svg") @@ -79,7 +108,7 @@ .attr("height", svgHeight); // zoom event - let zoom = d3 + zoom = d3 .zoom() .scaleExtent([0, Infinity]) .translateExtent([[0, 0], [svgWidth, svgHeight]])