Mercurial > gemma
view client/src/components/splitscreen/Splitscreen.vue @ 2774:6c1c4f55d99b
sidebar: only update when user is logged in
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 22 Mar 2019 12:45:53 +0100 |
parents | 71e7237110ba |
children | 503a73e9a755 |
line wrap: on
line source
<template> <div> <div :class="[ 'splitscreen bg-white d-flex flex-column ui-element', { show: showSplitscreen } ]" > <UIBoxHeader :icon="activeSplitscreen.icon" :title="activeSplitscreen.title" :closeCallback="close" :collapseCallback="collapse" v-if="activeSplitscreen" /> <div class="d-flex flex-fill"> <transition name="fade"> <div class="loading" v-if="splitscreenLoading"> <font-awesome-icon icon="spinner" spin /> </div> </transition> <component :is="activeSplitscreen.component" v-if="activeSplitscreen" /> </div> </div> </div> </template> <style lang="sass" scoped> .splitscreen position: absolute bottom: -50vh left: 0 right: 0 height: 50vh overflow: hidden z-index: 1 box-shadow: 0 -.125rem .25rem rgba(0, 0, 0, 0.075) transition: bottom 0.3s &.show bottom: 0 .loading top: 34px </style> <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) 2018 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * * Author(s): * Markus Kottländer <markus.kottlaender@intevation.de> */ import { mapState, mapGetters } from "vuex"; export default { components: { Fairwayprofile: () => import("@/components/fairway/Fairwayprofile"), Waterlevel: () => import("@/components/gauge/Waterlevel"), HydrologicalConditions: () => import("@/components/gauge/HydrologicalConditions") }, computed: { ...mapState("application", ["showSplitscreen", "splitscreenLoading"]), ...mapGetters("application", ["activeSplitscreen"]) }, methods: { collapse() { if (this.activeSplitscreen.collapseCallback) this.activeSplitscreen.collapseCallback(); this.$store.commit("application/showSplitscreen", false); }, close() { this.$store.commit("application/showSplitscreen", false); setTimeout(() => { let removeId = this.activeSplitscreen.id; let callback = this.activeSplitscreen.closeCallback; this.$store.commit("application/activeSplitscreenId", null); if (callback) callback(); this.$store.commit("application/removeSplitscreen", removeId); }, 350); } } }; </script>