Mercurial > gemma
view client/src/components/toolbar/TimeSlider.vue @ 5090:70bd5c824639 time-sliding
client: distinguish time in refreshLayers requests during Time-slider enable/disable
* We have now two states:
Time-slider enabled: make requests for the selected time
Time-slider disables: make request with value "now"
* Reactivate Time-slider initiates request with the last chosen time value
before Time-slider was deactivated.
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Mon, 23 Mar 2020 17:33:26 +0100 |
parents | aeb100b4c41b |
children | 673f2a00c767 |
line wrap: on
line source
<template> <div @click="showSlider" 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", "currentVisibleTime", "storedTime" ]), label() { const date = this.currentVisibleTime; return `<b>${this.currentVisibleTime.toLocaleDateString(locale2, { day: "2-digit", month: "2-digit", year: "numeric" })} ${format(date, "HH:mm")}</b>`; }, currentTimeSelection() { const date = this.currentVisibleTime; const result = date.toLocaleDateString(locale2, { day: "2-digit", month: "2-digit" }); return `${format(date, "HH:mm")}\n${result}\n${date.getFullYear()}`; } }, methods: { showSlider() { if (this.showTimeSlider) { this.$store.commit( "application/setStoredTime", this.currentVisibleTime ); this.$store.commit("application/setSelectedTime", new Date()); this.$store.commit("application/showTimeSlider", false); } else { this.$store.commit("application/setSelectedTime", this.storedTime); this.$store.commit("application/showTimeSlider", true); } } } }; </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>