Mercurial > gemma

annotate client/src/components/splitscreen/Splitscreen.vue @ 2566:83b938bf4da9

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
author Markus Kottlaender <markus@intevation.de>
date Mon, 11 Mar 2019 11:34:54 +0100
parents
children 1686ec185155
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
2566
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1 <template>
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
2 <div>
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
3 <div
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
4 :class="[
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
5 'splitscreen bg-white d-flex flex-column ui-element',
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
6 { show: showSplitscreen }
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
7 ]"
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
8 >
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
9 <UIBoxHeader
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
10 :icon="activeSplitscreen.icon"
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
11 :title="activeSplitscreen.title"
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
12 :closeCallback="close"
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
13 :collapseCallback="collapse"
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
14 v-if="activeSplitscreen"
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
15 />
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
16 <div class="d-flex flex-fill">
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
17 <transition name="fade">
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
18 <div
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
19 class="loading d-flex justify-content-center align-items-center"
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
20 v-if="splitscreenLoading"
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
21 >
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
22 <font-awesome-icon icon="spinner" spin />
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
23 </div>
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
24 </transition>
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
25 <component :is="activeSplitscreen.component" v-if="activeSplitscreen" />
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
26 </div>
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
27 </div>
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
28 </div>
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
29 </template>
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
30
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
31 <style lang="sass" scoped>
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
32 .splitscreen
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
33 position: absolute
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
34 bottom: -50vh
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
35 left: 0
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
36 right: 0
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
37 height: 50vh
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
38 overflow: hidden
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
39 z-index: 1
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
40 box-shadow: 0 -.125rem .25rem rgba(0, 0, 0, 0.075)
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
41 transition: bottom 0.3s
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
42 &.show
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
43 bottom: 0
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
44
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
45 .loading
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
46 background: rgba(255, 255, 255, 0.96)
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
47 position: absolute
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
48 z-index: 99
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
49 top: 34px
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
50 right: 0
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
51 bottom: 0
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
52 left: 0
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
53 </style>
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
54
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
55 <script>
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
56 /* This is Free Software under GNU Affero General Public License v >= 3.0
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
57 * without warranty, see README.md and license for details.
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
58 *
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59 * SPDX-License-Identifier: AGPL-3.0-or-later
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60 * License-Filename: LICENSES/AGPL-3.0.txt
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 *
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
62 * Copyright (C) 2018 by via donau
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 * – Österreichische Wasserstraßen-Gesellschaft mbH
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64 * Software engineering by Intevation GmbH
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65 *
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 * Author(s):
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67 * Markus Kottländer <markus.kottlaender@intevation.de>
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
68 */
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
69
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
70 import { mapState, mapGetters } from "vuex";
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
71
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
72 export default {
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
73 components: {
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
74 Fairwayprofile: () => import("@/components/fairway/Fairwayprofile")
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
75 },
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
76 computed: {
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
77 ...mapState("application", ["showSplitscreen", "splitscreenLoading"]),
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
78 ...mapGetters("application", ["activeSplitscreen"])
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
79 },
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
80 methods: {
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
81 collapse() {
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
82 if (this.activeSplitscreen.collapseCallback)
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
83 this.activeSplitscreen.collapseCallback();
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
84 this.$store.commit("application/showSplitscreen", false);
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
85 },
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
86 close() {
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
87 if (this.activeSplitscreen.closeCallback)
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
88 this.activeSplitscreen.closeCallback();
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
89 this.$store.commit("application/showSplitscreen", false);
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
90 setTimeout(() => {
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
91 this.$store.commit(
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
92 "application/removeSplitscreen",
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
93 this.activeSplitscreen.id
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
94 );
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
95 this.$store.commit("application/activeSplitscreen", null);
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
96 }, 350);
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
97 }
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
98 }
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
99 };
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
100 </script>