Mercurial > gemma
changeset 5039:aec0923f9c52 time-sliding
icon shows now date and time
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 28 Feb 2020 10:29:18 +0100 |
parents | 9d26f67dd916 |
children | 066b76ef5e6a |
files | client/src/components/TimeSlider.vue client/src/components/toolbar/TimeSlider.vue |
diffstat | 2 files changed, 42 insertions(+), 7 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/TimeSlider.vue Thu Feb 27 17:55:31 2020 +0100 +++ b/client/src/components/TimeSlider.vue Fri Feb 28 10:29:18 2020 +0100 @@ -8,9 +8,10 @@ > <div class="d-flex m-1"> <input + class="form-control form-control-sm" type="date" v-model="timeSelection" - min="2020-01-01" + min="2015-01-01" max="2020-03-01" /> </div> @@ -175,10 +176,7 @@ return d3 .scaleTime() .range([0, document.getElementById("sliderContainer").clientWidth || 0]) - .domain([ - d3.isoParse(new Date("2020-01-01")), - d3.isoParse(new Date("2020-03-01")) - ]); + .domain([d3.isoParse(new Date("2015-01-01")), d3.isoParse(new Date())]); }, zoomed() { let scale = this.getScale();
--- a/client/src/components/toolbar/TimeSlider.vue Thu Feb 27 17:55:31 2020 +0100 +++ b/client/src/components/toolbar/TimeSlider.vue Fri Feb 28 10:29:18 2020 +0100 @@ -4,7 +4,15 @@ class="toolbar-button" v-tooltip.right="label" > - <font-awesome-icon icon="clock" :class="{ 'text-info': showTimeSlider }" /> + <pre + :class="[ + 'menuEntry', + { + 'text-info': this.showTimeSlider + } + ]" + >{{ currentTimeSelection }}</pre + > </div> </template> @@ -23,13 +31,42 @@ * Fadi Abbud <fadiabbud@intevation.de> */ import { mapState } from "vuex"; +import locale2 from "locale2"; +import { format } from "date-fns"; + +const formatDate = date => { + const result = date.toLocaleDateString(locale2, { + day: "2-digit", + month: "2-digit" + }); + return `${format(date, "hh:mm")}\n${result}\n${date.getFullYear()}`; +}; export default { computed: { - ...mapState("application", ["showTimeSlider"]), + ...mapState("application", ["showTimeSlider", "selectedTime"]), label() { return this.$gettext("Time slider"); + }, + currentTimeSelection() { + return formatDate(this.selectedTime); } } }; </script> +<style lang="scss" scoped> +.menuEntry { + font-size: 9px; + font-weight: bold; +} + +pre { + margin-top: 0px; + margin-bottom: 0px; + text-align: left; +} + +.toolbar-button { + height: 3rem; +} +</style>