Mercurial > gemma
changeset 5046:b5e77c43fb8b time-sliding
client: add Time picker to the time-slider
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Mon, 02 Mar 2020 13:41:57 +0100 |
parents | a7cda81bf96f |
children | 644118078d50 |
files | client/src/components/TimeSlider.vue |
diffstat | 1 files changed, 25 insertions(+), 5 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/TimeSlider.vue Mon Mar 02 10:27:40 2020 +0100 +++ b/client/src/components/TimeSlider.vue Mon Mar 02 13:41:57 2020 +0100 @@ -6,14 +6,21 @@ { expanded: showTimeSlider } ]" > - <div class="d-flex m-1"> + <div class="d-flex mt-1 mr-1"> <input - class="form-control form-control-sm" + class="form-control-sm mr-1" type="date" - v-model="timeSelection" + v-model="dateSelection" min="2015-01-01" max="2020-03-01" /> + <input + type="time" + min="00:00" + max="23:59" + v-model="timeSelection" + class="form-control-sm" + /> </div> <div id="sliderContainer" @@ -53,7 +60,7 @@ import * as d3 from "d3"; import app from "@/main"; import { localeDateString } from "@/lib/datelocalization"; -import { format } from "date-fns"; +import { format, setHours, setMinutes } from "date-fns"; let zoom = null; export default { @@ -73,7 +80,7 @@ computed: { ...mapState("application", ["showTimeSlider"]), ...mapState("map", ["ongoingRefresh"]), - timeSelection: { + dateSelection: { get() { const date = this.$store.state.application.selectedTime; return format(date, "YYYY-MM-DD"); @@ -84,6 +91,19 @@ this.$nextTick(this.redrawSlider); } }, + timeSelection: { + get() { + const time = this.$store.state.application.selectedTime; + return format(time, "HH:mm"); + }, + set(value) { + let date = this.selectedTime; + date = setHours(date, value.split(":")[0]); + date = setMinutes(date, value.split(":")[1]); + this.$store.commit("application/setSelectedTime", date); + this.$nextTick(this.redrawSlider); + } + }, selectedTime: { get() { return this.$store.state.application.selectedTime;