Mercurial > gemma
view client/src/components/Main.vue @ 4130:980f12d3c766 request_hist_bns
bottleneck import: Fixed detection of identical bottlenecks.
author | Sascha Wilde <wilde@intevation.de> |
---|---|
date | Thu, 01 Aug 2019 18:23:32 +0200 |
parents | fa7dc3f31ef3 |
children | 84d01a536bec |
line wrap: on
line source
<template> <div id="panes" :class="'d-flex position-absolute rotate' + paneRotate"> <Pane :pane="panes[0]" :key="panes[0].id" :class="paneClasses[0]" /> <Pane :pane="panes[1]" :key="panes[1].id" :class="paneClasses[1]" v-if="panes.length >= 2" /> <Pane :pane="panes[2]" :key="panes[2].id" :class="paneClasses[2]" v-if="panes.length >= 3" /> <Pane :pane="panes[3]" :key="panes[3].id" :class="paneClasses[3]" v-if="panes.length === 4" /> </div> </template> <style lang="sass"> #panes top: -1px right: -1px bottom: -1px left: -1px z-index: 1 &.rotate1 flex-wrap: wrap flex-direction: row &.rotate2 flex-wrap: wrap-reverse flex-direction: column &.rotate3 flex-wrap: wrap-reverse flex-direction: row-reverse &.rotate4 flex-wrap: wrap flex-direction: column-reverse .pane border: solid 1px #dee2e6 background: #fff </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): * Thomas Junk <thomas.junk@intevation.de> * Markus Kottländer <markus.kottlaender@intevation.de> */ import { mapState } from "vuex"; import * as paneSetups from "./paneSetups"; export default { components: { Pane: () => import("./Pane") }, computed: { ...mapState("application", ["paneSetup", "paneRotate"]), panes() { return Object.values(paneSetups[this.paneSetup]); }, paneClasses() { if (this.paneSetup === "DEFAULT") { return ["wh-100"]; } if (this.paneSetup === "COMPARESURVEYS") { return [2, 4].includes(this.paneRotate) ? ["w-100 h-50", "w-100 h-50"] : ["w-50 h-100", "w-50 h-100"]; } if (this.paneSetup === "FAIRWAYPROFILE") { return [1, 3].includes(this.paneRotate) ? ["w-100 h-50", "w-100 h-50"] : ["w-50 h-100", "w-50 h-100"]; } if (this.paneSetup === "AVAILABLEFAIRWAYDEPTH") { return [1, 3].includes(this.paneRotate) ? ["w-100 h-50", "w-100 h-50"] : ["w-50 h-100", "w-50 h-100"]; } if (this.paneSetup === "AVAILABLEFAIRWAYDEPTHLNWL") { return [1, 3].includes(this.paneRotate) ? ["w-100 h-50", "w-100 h-50"] : ["w-50 h-100", "w-50 h-100"]; } if (this.paneSetup === "COMPARESURVEYS_FAIRWAYPROFILE") { return [1, 3].includes(this.paneRotate) ? ["wh-50", "wh-50", "w-100 h-50"] : ["wh-50", "wh-50", "w-50 h-100"]; } if ( ["GAUGE_WATERLEVEL", "GAUGE_HYDROLOGICALCONDITIONS"].includes( this.paneSetup ) ) { return [1, 3].includes(this.paneRotate) ? ["w-100 h-50", "w-100 h-50"] : ["w-50 h-100", "w-50 h-100"]; } if (this.paneSetup === "GAUGE_WATERLEVEL_HYDROLOGICALCONDITIONS") { return [1, 3].includes(this.paneRotate) ? ["w-100 h-50", "wh-50", "wh-50"] : ["h-100 w-50", "wh-50", "wh-50"]; } } } }; </script>