Mercurial > gemma
view client/src/components/toolbar/TimeSlider.vue @ 5065:385cb52d32ee time-sliding
client: enhanced time-slider behavior on updating selected time after reloads
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Tue, 10 Mar 2020 12:49:16 +0100 |
parents | 43bebcc8961f |
children | aeb100b4c41b |
line wrap: on
line source
<template> <div @click="$store.commit('application/showTimeSlider', !showTimeSlider)" class="toolbar-button" v-tooltip.right="label" > <pre :class="[ 'menuEntry', { 'text-info': this.showTimeSlider } ]" >{{ currentTimeSelection }}</pre > </div> </template> <script> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. * * SPDX-License-Identifier: AGPL-3.0-or-later * License-Filename: LICENSES/AGPL-3.0.txt * * Copyright (C) 2020 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * * Author(s): * Fadi Abbud <fadiabbud@intevation.de> */ import { mapState } from "vuex"; import locale2 from "locale2"; import { format } from "date-fns"; export default { computed: { ...mapState("application", ["showTimeSlider", "selectedTime"]), label() { const date = this.selectedTime; return `<b>${this.selectedTime.toLocaleDateString(locale2, { day: "2-digit", month: "2-digit", year: "numeric" })} ${format(date, "HH:mm")}</b>`; }, currentTimeSelection() { const date = this.selectedTime; const result = date.toLocaleDateString(locale2, { day: "2-digit", month: "2-digit" }); return `${format(date, "HH:mm")}\n${result}\n${date.getFullYear()}`; } } }; </script> <style lang="scss" scoped> .menuEntry { font-size: 9px; font-weight: bold; line-height: normal; } pre { margin-top: 0px; margin-bottom: 0px; text-align: left; font-family: sans-serif; } .toolbar-button { height: 2.5rem; width: auto; } </style>