Mercurial > gemma

annotate client/src/components/Main.vue @ 3644:9e91b416d5bb

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: cross profile: display arrow in diagram consciously diceded to not draw it in the svg so it will not be exported to pdf since there it does not make sense without the map
author Markus Kottlaender <markus@intevation.de>
date Wed, 12 Jun 2019 17:10:49 +0200
parents fa7dc3f31ef3
children 84d01a536bec
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">
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
3296
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents: 3178
diff changeset
100 if (this.paneSetup === "AVAILABLEFAIRWAYDEPTHLNWL") {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents: 3178
diff changeset
101 return [1, 3].includes(this.paneRotate)
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents: 3178
diff changeset
102 ? ["w-100 h-50", "w-100 h-50"]
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents: 3178
diff changeset
103 : ["w-50 h-100", "w-50 h-100"];
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents: 3178
diff changeset
104 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents: 3178
diff changeset
105
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
106 if (this.paneSetup === "COMPARESURVEYS_FAIRWAYPROFILE") {
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
107 return [1, 3].includes(this.paneRotate)
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
108 ? ["wh-50", "wh-50", "w-100 h-50"]
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
109 : ["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
110 }
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
111
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
112 if (
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
113 ["GAUGE_WATERLEVEL", "GAUGE_HYDROLOGICALCONDITIONS"].includes(
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
114 this.paneSetup
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 ) {
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", "w-100 h-50"]
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
119 : ["w-50 h-100", "w-50 h-100"];
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
120 }
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
121
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
122 if (this.paneSetup === "GAUGE_WATERLEVEL_HYDROLOGICALCONDITIONS") {
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
123 return [1, 3].includes(this.paneRotate)
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
124 ? ["w-100 h-50", "wh-50", "wh-50"]
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
125 : ["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
126 }
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
127 }
2984
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
128 }
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
129 };
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
130 </script>