Mercurial > gemma
annotate client/src/components/splitscreen/Splitscreen.vue @ 2740:85de42146bdb
client: css: moved class for loading overlay to application.scss
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 19 Mar 2019 19:21:04 +0100 |
parents | 1686ec185155 |
children | 71e7237110ba |
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"> |
2740
85de42146bdb
client: css: moved class for loading overlay to application.scss
Markus Kottlaender <markus@intevation.de>
parents:
2590
diff
changeset
|
18 <div class="loading" v-if="splitscreenLoading"> |
2566
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
19 <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
|
20 </div> |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
21 </transition> |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
22 <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
|
23 </div> |
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 </template> |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
27 |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
28 <style lang="sass" scoped> |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
29 .splitscreen |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
30 position: absolute |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
31 bottom: -50vh |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
32 left: 0 |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
33 right: 0 |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
34 height: 50vh |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
35 overflow: hidden |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
36 z-index: 1 |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
37 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
|
38 transition: bottom 0.3s |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
39 &.show |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
40 bottom: 0 |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
41 |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
42 .loading |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
43 top: 34px |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
44 </style> |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
45 |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
46 <script> |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
47 /* 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
|
48 * 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
|
49 * |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
50 * 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
|
51 * 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
|
52 * |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
53 * 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
|
54 * – Österreichische Wasserstraßen-Gesellschaft mbH |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
55 * Software engineering by Intevation GmbH |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
56 * |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
57 * Author(s): |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
58 * 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
|
59 */ |
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 import { mapState, mapGetters } from "vuex"; |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
62 |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
63 export default { |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
64 components: { |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
2566
diff
changeset
|
65 Fairwayprofile: () => import("@/components/fairway/Fairwayprofile"), |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
2566
diff
changeset
|
66 Waterlevel: () => import("@/components/gauge/Waterlevel") |
2566
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
67 }, |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
68 computed: { |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
69 ...mapState("application", ["showSplitscreen", "splitscreenLoading"]), |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
70 ...mapGetters("application", ["activeSplitscreen"]) |
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 methods: { |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
73 collapse() { |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
74 if (this.activeSplitscreen.collapseCallback) |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
75 this.activeSplitscreen.collapseCallback(); |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
76 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
|
77 }, |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
78 close() { |
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 setTimeout(() => { |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
2566
diff
changeset
|
81 let removeId = this.activeSplitscreen.id; |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
2566
diff
changeset
|
82 let callback = this.activeSplitscreen.closeCallback; |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
2566
diff
changeset
|
83 this.$store.commit("application/activeSplitscreenId", null); |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
2566
diff
changeset
|
84 if (callback) callback(); |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
2566
diff
changeset
|
85 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
|
86 }, 350); |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
87 } |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
88 } |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
89 }; |
83b938bf4da9
client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
90 </script> |