Mercurial > gemma

annotate client/src/components/Main.vue @ 5629:84d01a536bec 729-node-js-newer-version

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Transformed scss and sass styles into css
author Luisa Beerboom <lbeerboom@intevation.de>
date Thu, 11 May 2023 13:23:52 +0200
parents fa7dc3f31ef3
children
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
5629
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3296
diff changeset
25 <style>
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3296
diff changeset
26 #panes {
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3296
diff changeset
27 top: -1px;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3296
diff changeset
28 right: -1px;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3296
diff changeset
29 bottom: -1px;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3296
diff changeset
30 left: -1px;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3296
diff changeset
31 z-index: 1;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3296
diff changeset
32 }
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3296
diff changeset
33 #panes.rotate1 {
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3296
diff changeset
34 flex-wrap: wrap;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3296
diff changeset
35 flex-direction: row;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3296
diff changeset
36 }
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3296
diff changeset
37 #panes.rotate2 {
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3296
diff changeset
38 flex-wrap: wrap-reverse;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3296
diff changeset
39 flex-direction: column;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3296
diff changeset
40 }
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3296
diff changeset
41 #panes.rotate3 {
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3296
diff changeset
42 flex-wrap: wrap-reverse;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3296
diff changeset
43 flex-direction: row-reverse;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3296
diff changeset
44 }
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3296
diff changeset
45 #panes.rotate4 {
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3296
diff changeset
46 flex-wrap: wrap;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3296
diff changeset
47 flex-direction: column-reverse;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3296
diff changeset
48 }
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3296
diff changeset
49 #panes .pane {
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3296
diff changeset
50 border: solid 1px #dee2e6;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3296
diff changeset
51 background: #fff;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3296
diff changeset
52 }
2984
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
53 </style>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
54
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
55 <script>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
56 /* 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
57 * without warranty, see README.md and license for details.
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
58 *
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59 * SPDX-License-Identifier: AGPL-3.0-or-later
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60 * License-Filename: LICENSES/AGPL-3.0.txt
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 *
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
62 * Copyright (C) 2018 by via donau
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 * – Österreichische Wasserstraßen-Gesellschaft mbH
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64 * Software engineering by Intevation GmbH
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65 *
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 * Author(s):
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67 * Thomas Junk <thomas.junk@intevation.de>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
68 * Markus Kottländer <markus.kottlaender@intevation.de>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
69 */
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 import { mapState } from "vuex";
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
72 import * as paneSetups from "./paneSetups";
2984
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
73
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
74 export default {
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
75 components: {
3072
0233845cadb7 client: improved splitscreen mechanis
Markus Kottlaender <markus@intevation.de>
parents: 3041
diff changeset
76 Pane: () => import("./Pane")
2984
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 computed: {
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
79 ...mapState("application", ["paneSetup", "paneRotate"]),
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
80 panes() {
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
81 return Object.values(paneSetups[this.paneSetup]);
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
82 },
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
83 paneClasses() {
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
84 if (this.paneSetup === "DEFAULT") {
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
85 return ["wh-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 === "COMPARESURVEYS") {
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
89 return [2, 4].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"];
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
92 }
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
93
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
94 if (this.paneSetup === "FAIRWAYPROFILE") {
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
95 return [1, 3].includes(this.paneRotate)
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
96 ? ["w-100 h-50", "w-100 h-50"]
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
97 : ["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
98 }
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
99
3178
5ec34e08b01d available_fairway_depth: display mock
Thomas Junk <thomas.junk@intevation.de>
parents: 3146
diff changeset
100 if (this.paneSetup === "AVAILABLEFAIRWAYDEPTH") {
5ec34e08b01d available_fairway_depth: display mock
Thomas Junk <thomas.junk@intevation.de>
parents: 3146
diff changeset
101 return [1, 3].includes(this.paneRotate)
5ec34e08b01d available_fairway_depth: display mock
Thomas Junk <thomas.junk@intevation.de>
parents: 3146
diff changeset
102 ? ["w-100 h-50", "w-100 h-50"]
5ec34e08b01d available_fairway_depth: display mock
Thomas Junk <thomas.junk@intevation.de>
parents: 3146
diff changeset
103 : ["w-50 h-100", "w-50 h-100"];
5ec34e08b01d available_fairway_depth: display mock
Thomas Junk <thomas.junk@intevation.de>
parents: 3146
diff changeset
104 }
5ec34e08b01d available_fairway_depth: display mock
Thomas Junk <thomas.junk@intevation.de>
parents: 3146
diff changeset
105
3296
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents: 3178
diff changeset
106 if (this.paneSetup === "AVAILABLEFAIRWAYDEPTHLNWL") {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents: 3178
diff changeset
107 return [1, 3].includes(this.paneRotate)
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents: 3178
diff changeset
108 ? ["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
109 : ["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
110 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents: 3178
diff changeset
111
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
112 if (this.paneSetup === "COMPARESURVEYS_FAIRWAYPROFILE") {
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
113 return [1, 3].includes(this.paneRotate)
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
114 ? ["wh-50", "wh-50", "w-100 h-50"]
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
115 : ["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
116 }
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
117
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
118 if (
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
119 ["GAUGE_WATERLEVEL", "GAUGE_HYDROLOGICALCONDITIONS"].includes(
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
120 this.paneSetup
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 ) {
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", "w-100 h-50"]
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
125 : ["w-50 h-100", "w-50 h-100"];
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
126 }
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
127
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
128 if (this.paneSetup === "GAUGE_WATERLEVEL_HYDROLOGICALCONDITIONS") {
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
129 return [1, 3].includes(this.paneRotate)
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
130 ? ["w-100 h-50", "wh-50", "wh-50"]
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3126
diff changeset
131 : ["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
132 }
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
133 }
2984
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
134 }
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
135 };
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
136 </script>