Mercurial > gemma

annotate client/src/components/splitscreen/Splitscreen.vue @ 2907:ab0a829735f6

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: import stretches: removed unnecessary wrapper method
author Markus Kottlaender <markus@intevation.de>
date Tue, 02 Apr 2019 16:55:55 +0200
parents 95e40c87a943
children
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">
2894
95e40c87a943 client: applied component name change where it is used
Markus Kottlaender <markus@intevation.de>
parents: 2840
diff changeset
17 <UISpinnerOverlay v-if="splitscreenLoading" />
2840
503a73e9a755 client: ui: implemented global SpinnerOverlay component
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
18 <transition name="fade" mode="out-in">
503a73e9a755 client: ui: implemented global SpinnerOverlay component
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
19 <component
503a73e9a755 client: ui: implemented global SpinnerOverlay component
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
20 :is="activeSplitscreen.component"
503a73e9a755 client: ui: implemented global SpinnerOverlay component
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
21 v-if="activeSplitscreen"
503a73e9a755 client: ui: implemented global SpinnerOverlay component
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
22 />
2566
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
23 </transition>
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
24 </div>
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
25 </div>
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 </template>
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
28
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
29 <style lang="sass" scoped>
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
30 .splitscreen
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
31 position: absolute
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
32 bottom: -50vh
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
33 left: 0
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
34 right: 0
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
35 height: 50vh
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
36 overflow: hidden
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
37 z-index: 1
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
38 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
39 transition: bottom 0.3s
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
40 &.show
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
41 bottom: 0
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
42
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
43 .loading
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
44 top: 34px
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
45 </style>
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
46
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
47 <script>
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
48 /* 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
49 * 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
50 *
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
51 * 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
52 * 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
53 *
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
54 * 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
55 * – Österreichische Wasserstraßen-Gesellschaft mbH
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
56 * Software engineering by Intevation GmbH
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
57 *
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
58 * Author(s):
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59 * 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
60 */
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 import { mapState, mapGetters } from "vuex";
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64 export default {
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65 components: {
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
66 Fairwayprofile: () => import("@/components/fairway/Fairwayprofile"),
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents: 2740
diff changeset
67 Waterlevel: () => import("@/components/gauge/Waterlevel"),
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents: 2740
diff changeset
68 HydrologicalConditions: () =>
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents: 2740
diff changeset
69 import("@/components/gauge/HydrologicalConditions")
2566
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
70 },
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
71 computed: {
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
72 ...mapState("application", ["showSplitscreen", "splitscreenLoading"]),
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
73 ...mapGetters("application", ["activeSplitscreen"])
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
74 },
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
75 methods: {
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
76 collapse() {
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
77 if (this.activeSplitscreen.collapseCallback)
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
78 this.activeSplitscreen.collapseCallback();
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
79 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
80 },
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
81 close() {
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
82 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
83 setTimeout(() => {
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
84 let removeId = this.activeSplitscreen.id;
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
85 let callback = this.activeSplitscreen.closeCallback;
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
86 this.$store.commit("application/activeSplitscreenId", null);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
87 if (callback) callback();
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
88 this.$store.commit("application/removeSplitscreen", removeId);
2566
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
89 }, 350);
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
90 }
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
91 }
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
92 };
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
93 </script>