Mercurial > gemma
changeset 3072:0233845cadb7
client: improved splitscreen mechanis
Added possibility to define lifecycle hooks for components in panes. Created Pane component.
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Wed, 17 Apr 2019 10:53:13 +0200 |
parents | 53082e5a198a |
children | 0cb180676722 |
files | client/src/components/Main.vue client/src/components/Pane.vue client/src/components/map/Map.vue client/src/lib/mixins.js client/src/store/application.js |
diffstat | 5 files changed, 76 insertions(+), 34 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Main.vue Wed Apr 17 10:51:30 2019 +0200 +++ b/client/src/components/Main.vue Wed Apr 17 10:53:13 2019 +0200 @@ -1,39 +1,25 @@ <template> <div id="panes" :class="'d-flex position-absolute rotate' + paneRotate"> - <div id="pane1" :class="'pane d-flex ' + pane1Class"> - <component :is="panes[0]" /> - </div> + <Pane :pane="panes[0]" :class="pane1Classes" /> <template v-if="panes.length === 2"> - <div id="pane2" :class="'pane d-flex ' + pane2Class"> - <component :is="panes[1]" /> - </div> + <Pane :pane="panes[1]" :class="pane2Classes" /> </template> <template v-if="panes.length === 3"> - <div id="pane3" class="pane d-flex wh-50"> - <component :is="panes[2]" /> - </div> - <div id="pane2" class="pane d-flex wh-50"> - <component :is="panes[1]" /> - </div> + <Pane :pane="panes[2]" class="d-flex wh-50" /> + <Pane :pane="panes[1]" class="d-flex wh-50" /> </template> <template v-if="panes.length === 4"> - <div id="pane2" class="pane d-flex wh-50"> - <component :is="panes[1]" /> - </div> - <div id="pane4" class="pane d-flex wh-50"> - <component :is="panes[3]" /> - </div> - <div id="pane3" class="pane d-flex wh-50"> - <component :is="panes[2]" /> - </div> + <Pane :pane="panes[1]" class="d-flex wh-50" /> + <Pane :pane="panes[3]" class="d-flex wh-50" /> + <Pane :pane="panes[2]" class="d-flex wh-50" /> </template> </div> </template> -<style lang="sass" scoped> +<style lang="sass"> #panes top: -0.5px right: -0.5px @@ -77,18 +63,13 @@ export default { components: { - // all components that are supposed to be displayed in a pane must be registered here - Map: () => import("./map/Map"), - Fairwayprofile: () => import("./fairway/Fairwayprofile"), - AvailableFairwayDepth: () => import("./fairway/AvailableFairwayDepth"), - Waterlevel: () => import("./gauge/Waterlevel"), - HydrologicalConditions: () => import("./gauge/HydrologicalConditions") + Pane: () => import("./Pane") }, computed: { ...mapState("application", ["panes", "paneRotate"]), // pane 1 and 2 are the only ones that can have varying size // thats why tehre is no pane3class or pane4class - pane1Class() { + pane1Classes() { if (this.panes.length === 1) return "wh-100"; if (this.panes.length === 2 || this.panes.length === 3) { if (this.paneRotate === 1 || this.paneRotate === 3) return "w-100 h-50"; @@ -98,7 +79,7 @@ return "wh-50"; } }, - pane2Class() { + pane2Classes() { if (this.panes.length === 2) { if (this.paneRotate === 1 || this.paneRotate === 3) return "w-100 h-50"; if (this.paneRotate === 2 || this.paneRotate === 4) return "w-50 h-100";
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/Pane.vue Wed Apr 17 10:53:13 2019 +0200 @@ -0,0 +1,40 @@ +<template> + <div :id="pane.id" class="pane"> + <component + :is="pane.component" + :key="pane.id" + :paneCreated="pane.created" + :paneMounted="pane.mounted" + :paneUpdated="pane.updated" + :paneDestroyed="pane.destroyed" + /> + </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) 2018 by via donau + * – Österreichische Wasserstraßen-Gesellschaft mbH + * Software engineering by Intevation GmbH + * + * Author(s): + * Markus Kottländer <markus.kottlaender@intevation.de> + */ + +export default { + props: ["pane"], + components: { + // all components that are supposed to be displayed in a pane must be registered here + Map: () => import("./map/Map"), + Fairwayprofile: () => import("./fairway/Fairwayprofile"), + AvailableFairwayDepth: () => import("./fairway/AvailableFairwayDepth"), + Waterlevel: () => import("./gauge/Waterlevel"), + HydrologicalConditions: () => import("./gauge/HydrologicalConditions") + } +}; +</script>
--- a/client/src/components/map/Map.vue Wed Apr 17 10:51:30 2019 +0200 +++ b/client/src/components/map/Map.vue Wed Apr 17 10:53:13 2019 +0200 @@ -43,14 +43,14 @@ import { Map, View } from "ol"; import { Stroke, Style, Fill } from "ol/style"; import { displayError } from "@/lib/errors"; -import { uuid } from "@/lib/mixins"; +import { uuid, paneHooks } from "@/lib/mixins"; import layers from "@/components/map/layers"; import "ol/ol.css"; /* for the sake of debugging */ /* eslint-disable no-console */ export default { - mixins: [uuid], + mixins: [uuid, paneHooks], data() { return { map: null,
--- a/client/src/lib/mixins.js Wed Apr 17 10:51:30 2019 +0200 +++ b/client/src/lib/mixins.js Wed Apr 17 10:53:13 2019 +0200 @@ -39,4 +39,25 @@ } }; -export { sortTable, uuid }; +const paneHooks = { + props: { + paneCreated: Function, + paneMounted: Function, + paneUpdated: Function, + paneDestroyed: Function + }, + created() { + if (this.paneCreated) this.paneCreated(); + }, + mounted() { + if (this.paneMounted) this.paneMounted(); + }, + updated() { + if (this.paneUpdated) this.paneUpdated(); + }, + destroyed() { + if (this.paneDestroyed) this.paneDestroyed(); + } +}; + +export { sortTable, uuid, paneHooks };
--- a/client/src/store/application.js Wed Apr 17 10:51:30 2019 +0200 +++ b/client/src/store/application.js Wed Apr 17 10:53:13 2019 +0200 @@ -24,7 +24,7 @@ secondaryLogo: process.env.VUE_APP_SECONDARY_LOGO_URL, logoForPDF: process.env.VUE_APP_LOGO_FOR_PDF_URL, popup: null, - panes: ["Map"], + panes: [{ id: "main", component: "Map" }], paneRotate: 1, splitscreens: [], splitscreenLoading: false,