Mercurial > gemma
view client/src/components/toolbar/TimeSlider.vue @ 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 | 8b39081fa3aa |
children | 43bebcc8961f |
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", "isSelectedTimeHourly" ]), 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" }); const prefix = this.isSelectedTimeHourly ? `${format(date, "HH:mm")}\n` : ``; return `${prefix}${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>