Mercurial > gemma
annotate client/src/components/splitscreen/Splitscreen.vue @ 2840:503a73e9a755
client: ui: implemented global SpinnerOverlay component
to unify loading animations for boxes and other ui elements that need to be blocked
while loading/refreshing data
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 28 Mar 2019 10:22:30 +0100 |
parents | 71e7237110ba |
children | 95e40c87a943 |
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"> |
2840
503a73e9a755
client: ui: implemented global SpinnerOverlay component
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
17 <SpinnerOverlay v-if="splitscreenLoading" /> |
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> |