Mercurial > gemma
annotate client/src/components/Main.vue @ 3190:54a3e40cfbed
controllers: moved filter builder to a separate file.
author | Sascha L. Teichmann <sascha.teichmann@intevation.de> |
---|---|
date | Wed, 08 May 2019 10:50:14 +0200 |
parents | 5ec34e08b01d |
children | fa7dc3f31ef3 |
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"> |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
3 <Pane :pane="panes[0]" :key="panes[0].id" :class="paneClasses[0]" /> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
4 <Pane |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
5 :pane="panes[1]" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
6 :key="panes[1].id" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
7 :class="paneClasses[1]" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
8 v-if="panes.length >= 2" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
9 /> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
10 <Pane |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
11 :pane="panes[2]" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
12 :key="panes[2].id" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
13 :class="paneClasses[2]" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
14 v-if="panes.length >= 3" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
15 /> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
16 <Pane |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
17 :pane="panes[3]" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
18 :key="panes[3].id" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
19 :class="paneClasses[3]" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
20 v-if="panes.length === 4" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
21 /> |
2984
61f69e8919d3
client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
22 </div> |
61f69e8919d3
client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
23 </template> |
61f69e8919d3
client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
24 |
3072
0233845cadb7
client: improved splitscreen mechanis
Markus Kottlaender <markus@intevation.de>
parents:
3041
diff
changeset
|
25 <style lang="sass"> |
2984
61f69e8919d3
client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
26 #panes |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
27 top: -1px |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
28 right: -1px |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
29 bottom: -1px |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
30 left: -1px |
2984
61f69e8919d3
client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
31 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
|
32 &.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
|
33 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
|
34 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
|
35 &.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
|
36 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
|
37 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
|
38 &.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
|
39 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
|
40 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
|
41 &.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
|
42 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
|
43 flex-direction: column-reverse |
2984
61f69e8919d3
client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
44 .pane |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
45 border: solid 1px #dee2e6 |
3035
5d7db2ea16c8
client: panes: changed style and added components to be displayed in panes
Markus Kottlaender <markus@intevation.de>
parents:
3028
diff
changeset
|
46 background: #fff |
2984
61f69e8919d3
client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
47 </style> |
61f69e8919d3
client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
48 |
61f69e8919d3
client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
49 <script> |
61f69e8919d3
client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
50 /* 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
|
51 * without warranty, see README.md and license for details. |
61f69e8919d3
client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
52 * |
61f69e8919d3
client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
53 * SPDX-License-Identifier: AGPL-3.0-or-later |
61f69e8919d3
client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
54 * License-Filename: LICENSES/AGPL-3.0.txt |
61f69e8919d3
client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
55 * |
61f69e8919d3
client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
56 * Copyright (C) 2018 by via donau |
61f69e8919d3
client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
57 * – Österreichische Wasserstraßen-Gesellschaft mbH |
61f69e8919d3
client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
58 * Software engineering by Intevation GmbH |
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 * Author(s): |
61f69e8919d3
client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
61 * Thomas Junk <thomas.junk@intevation.de> |
61f69e8919d3
client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
62 * Markus Kottländer <markus.kottlaender@intevation.de> |
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 |
61f69e8919d3
client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
65 import { mapState } from "vuex"; |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
66 import * as paneSetups from "./paneSetups"; |
2984
61f69e8919d3
client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
67 |
61f69e8919d3
client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
68 export default { |
61f69e8919d3
client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
69 components: { |
3072
0233845cadb7
client: improved splitscreen mechanis
Markus Kottlaender <markus@intevation.de>
parents:
3041
diff
changeset
|
70 Pane: () => import("./Pane") |
2984
61f69e8919d3
client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
71 }, |
61f69e8919d3
client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
72 computed: { |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
73 ...mapState("application", ["paneSetup", "paneRotate"]), |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
74 panes() { |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
75 return Object.values(paneSetups[this.paneSetup]); |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
76 }, |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
77 paneClasses() { |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
78 if (this.paneSetup === "DEFAULT") { |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
79 return ["wh-100"]; |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
80 } |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
81 |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
82 if (this.paneSetup === "COMPARESURVEYS") { |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
83 return [2, 4].includes(this.paneRotate) |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
84 ? ["w-100 h-50", "w-100 h-50"] |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
85 : ["w-50 h-100", "w-50 h-100"]; |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
86 } |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
87 |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
88 if (this.paneSetup === "FAIRWAYPROFILE") { |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
89 return [1, 3].includes(this.paneRotate) |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
90 ? ["w-100 h-50", "w-100 h-50"] |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
91 : ["w-50 h-100", "w-50 h-100"]; |
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
|
92 } |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
93 |
3178
5ec34e08b01d
available_fairway_depth: display mock
Thomas Junk <thomas.junk@intevation.de>
parents:
3146
diff
changeset
|
94 if (this.paneSetup === "AVAILABLEFAIRWAYDEPTH") { |
5ec34e08b01d
available_fairway_depth: display mock
Thomas Junk <thomas.junk@intevation.de>
parents:
3146
diff
changeset
|
95 return [1, 3].includes(this.paneRotate) |
5ec34e08b01d
available_fairway_depth: display mock
Thomas Junk <thomas.junk@intevation.de>
parents:
3146
diff
changeset
|
96 ? ["w-100 h-50", "w-100 h-50"] |
5ec34e08b01d
available_fairway_depth: display mock
Thomas Junk <thomas.junk@intevation.de>
parents:
3146
diff
changeset
|
97 : ["w-50 h-100", "w-50 h-100"]; |
5ec34e08b01d
available_fairway_depth: display mock
Thomas Junk <thomas.junk@intevation.de>
parents:
3146
diff
changeset
|
98 } |
5ec34e08b01d
available_fairway_depth: display mock
Thomas Junk <thomas.junk@intevation.de>
parents:
3146
diff
changeset
|
99 |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
100 if (this.paneSetup === "COMPARESURVEYS_FAIRWAYPROFILE") { |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
101 return [1, 3].includes(this.paneRotate) |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
102 ? ["wh-50", "wh-50", "w-100 h-50"] |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
103 : ["wh-50", "wh-50", "w-50 h-100"]; |
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
|
104 } |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
105 |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
106 if ( |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
107 ["GAUGE_WATERLEVEL", "GAUGE_HYDROLOGICALCONDITIONS"].includes( |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
108 this.paneSetup |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
109 ) |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
110 ) { |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
111 return [1, 3].includes(this.paneRotate) |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
112 ? ["w-100 h-50", "w-100 h-50"] |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
113 : ["w-50 h-100", "w-50 h-100"]; |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
114 } |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
115 |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
116 if (this.paneSetup === "GAUGE_WATERLEVEL_HYDROLOGICALCONDITIONS") { |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
117 return [1, 3].includes(this.paneRotate) |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
118 ? ["w-100 h-50", "wh-50", "wh-50"] |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3126
diff
changeset
|
119 : ["h-100 w-50", "wh-50", "wh-50"]; |
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
|
120 } |
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
|
121 } |
2984
61f69e8919d3
client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
122 } |
61f69e8919d3
client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
123 }; |
61f69e8919d3
client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
124 </script> |