Mercurial > gemma

annotate client/src/components/Main.vue @ 3041:ccda334eed92

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
author Markus Kottlaender <markus@intevation.de>
date Sat, 13 Apr 2019 14:51:56 +0200
parents 5d7db2ea16c8
children 0233845cadb7
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
2984
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1 <template>
3041
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
2 <div id="panes" :class="'d-flex position-absolute rotate' + paneRotate">
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
3 <div id="pane1" :class="'pane d-flex ' + pane1Class">
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
4 <component :is="panes[0]" />
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
5 </div>
2984
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
6
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
7 <template v-if="panes.length === 2">
3041
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
8 <div id="pane2" :class="'pane d-flex ' + pane2Class">
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
9 <component :is="panes[1]" />
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
10 </div>
2984
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
11 </template>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
12
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
13 <template v-if="panes.length === 3">
3041
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
14 <div id="pane3" class="pane d-flex wh-50">
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
15 <component :is="panes[2]" />
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
16 </div>
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
17 <div id="pane2" class="pane d-flex wh-50">
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
18 <component :is="panes[1]" />
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
19 </div>
2984
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
20 </template>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
21
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
22 <template v-if="panes.length === 4">
3041
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
23 <div id="pane2" class="pane d-flex wh-50">
3022
0b19105c7c4b client: panes: added flex display to panes
Markus Kottlaender <markus@intevation.de>
parents: 3016
diff changeset
24 <component :is="panes[1]" />
0b19105c7c4b client: panes: added flex display to panes
Markus Kottlaender <markus@intevation.de>
parents: 3016
diff changeset
25 </div>
3041
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
26 <div id="pane4" class="pane d-flex wh-50">
3022
0b19105c7c4b client: panes: added flex display to panes
Markus Kottlaender <markus@intevation.de>
parents: 3016
diff changeset
27 <component :is="panes[3]" />
0b19105c7c4b client: panes: added flex display to panes
Markus Kottlaender <markus@intevation.de>
parents: 3016
diff changeset
28 </div>
3041
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
29 <div id="pane3" class="pane d-flex wh-50">
3022
0b19105c7c4b client: panes: added flex display to panes
Markus Kottlaender <markus@intevation.de>
parents: 3016
diff changeset
30 <component :is="panes[2]" />
0b19105c7c4b client: panes: added flex display to panes
Markus Kottlaender <markus@intevation.de>
parents: 3016
diff changeset
31 </div>
2984
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
32 </template>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
33 </div>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
34 </template>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
35
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
36 <style lang="sass" scoped>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
37 #panes
3035
5d7db2ea16c8 client: panes: changed style and added components to be displayed in panes
Markus Kottlaender <markus@intevation.de>
parents: 3028
diff changeset
38 top: -0.5px
5d7db2ea16c8 client: panes: changed style and added components to be displayed in panes
Markus Kottlaender <markus@intevation.de>
parents: 3028
diff changeset
39 right: -0.5px
5d7db2ea16c8 client: panes: changed style and added components to be displayed in panes
Markus Kottlaender <markus@intevation.de>
parents: 3028
diff changeset
40 bottom: -0.5px
5d7db2ea16c8 client: panes: changed style and added components to be displayed in panes
Markus Kottlaender <markus@intevation.de>
parents: 3028
diff changeset
41 left: -0.5px
2984
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
42 z-index: 1
3041
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
43 &.rotate1
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
44 flex-wrap: wrap
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
45 flex-direction: row
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
46 &.rotate2
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
47 flex-wrap: wrap-reverse
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
48 flex-direction: column
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
49 &.rotate3
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
50 flex-wrap: wrap-reverse
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
51 flex-direction: row-reverse
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
52 &.rotate4
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
53 flex-wrap: wrap
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
54 flex-direction: column-reverse
2984
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
55 .pane
3035
5d7db2ea16c8 client: panes: changed style and added components to be displayed in panes
Markus Kottlaender <markus@intevation.de>
parents: 3028
diff changeset
56 border: solid 0.5px #fff
5d7db2ea16c8 client: panes: changed style and added components to be displayed in panes
Markus Kottlaender <markus@intevation.de>
parents: 3028
diff changeset
57 background: #fff
2984
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
58 </style>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60 <script>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 /* This is Free Software under GNU Affero General Public License v >= 3.0
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
62 * without warranty, see README.md and license for details.
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 *
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64 * SPDX-License-Identifier: AGPL-3.0-or-later
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65 * License-Filename: LICENSES/AGPL-3.0.txt
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 *
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67 * Copyright (C) 2018 by via donau
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
68 * – Österreichische Wasserstraßen-Gesellschaft mbH
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
69 * Software engineering by Intevation GmbH
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
70 *
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
71 * Author(s):
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
72 * Thomas Junk <thomas.junk@intevation.de>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
73 * Markus Kottländer <markus.kottlaender@intevation.de>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
74 */
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
75
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
76 import { mapState } from "vuex";
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
77
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
78 export default {
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
79 components: {
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
80 // all components that are supposed to be displayed in a pane must be registered here
3035
5d7db2ea16c8 client: panes: changed style and added components to be displayed in panes
Markus Kottlaender <markus@intevation.de>
parents: 3028
diff changeset
81 Map: () => import("./map/Map"),
5d7db2ea16c8 client: panes: changed style and added components to be displayed in panes
Markus Kottlaender <markus@intevation.de>
parents: 3028
diff changeset
82 Fairwayprofile: () => import("./fairway/Fairwayprofile"),
5d7db2ea16c8 client: panes: changed style and added components to be displayed in panes
Markus Kottlaender <markus@intevation.de>
parents: 3028
diff changeset
83 AvailableFairwayDepth: () => import("./fairway/AvailableFairwayDepth"),
5d7db2ea16c8 client: panes: changed style and added components to be displayed in panes
Markus Kottlaender <markus@intevation.de>
parents: 3028
diff changeset
84 Waterlevel: () => import("./gauge/Waterlevel"),
5d7db2ea16c8 client: panes: changed style and added components to be displayed in panes
Markus Kottlaender <markus@intevation.de>
parents: 3028
diff changeset
85 HydrologicalConditions: () => import("./gauge/HydrologicalConditions")
2984
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
86 },
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
87 computed: {
3041
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
88 ...mapState("application", ["panes", "paneRotate"]),
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
89 // pane 1 and 2 are the only ones that can have varying size
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
90 // thats why tehre is no pane3class or pane4class
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
91 pane1Class() {
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
92 if (this.panes.length === 1) return "wh-100";
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
93 if (this.panes.length === 2 || this.panes.length === 3) {
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
94 if (this.paneRotate === 1 || this.paneRotate === 3) return "w-100 h-50";
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
95 if (this.paneRotate === 2 || this.paneRotate === 4) return "w-50 h-100";
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
96 }
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
97 if (this.panes.length === 4) {
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
98 return "wh-50";
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
99 }
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
100 },
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
101 pane2Class() {
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
102 if (this.panes.length === 2) {
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
103 if (this.paneRotate === 1 || this.paneRotate === 3) return "w-100 h-50";
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
104 if (this.paneRotate === 2 || this.paneRotate === 4) return "w-50 h-100";
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
105 } else {
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
106 return "wh-50";
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
107 }
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
108 }
2984
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
109 }
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
110 };
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
111 </script>