Mercurial > gemma

annotate client/src/components/Main.vue @ 2985:1b8bb4f89227

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: removed .js and .vue extention from imports
author Markus Kottlaender <markus@intevation.de>
date Tue, 09 Apr 2019 18:38:15 +0200
parents 61f69e8919d3
children fc8fbea24568
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>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
2 <div
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
3 id="panes"
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
4 :class="[
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
5 'd-flex flex-wrap position-absolute',
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
6 { 'flex-column': ['left', 'right'].includes(paneMode) }
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
7 ]"
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
8 >
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
9 <template v-if="panes.length === 1">
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
10 <div id="pane1" class="pane wh-100"><component :is="panes[0]" /></div>
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 === 2">
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
14 <template v-if="paneMode === 'horizontal'">
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
15 <div id="pane1" class="pane w-100 h-50">
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
16 <component :is="panes[0]" />
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
17 </div>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
18 <div id="pane2" class="pane w-100 h-50">
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
19 <component :is="panes[1]" />
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
20 </div>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
21 </template>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
22 <template v-if="paneMode === 'vertical'">
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
23 <div id="pane1" class="pane w-50 h-100">
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
24 <component :is="panes[0]" />
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
25 </div>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
26 <div id="pane2" class="pane w-50 h-100">
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
27 <component :is="panes[1]" />
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
28 </div>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
29 </template>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
30 </template>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
31
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
32 <template v-if="panes.length === 3">
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
33 <template v-if="paneMode === 'top'">
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
34 <div id="pane1" class="pane w-100 h-50">
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
35 <component :is="panes[0]" />
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
36 </div>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
37 <div id="pane2" class="pane w-50 h-50">
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
38 <component :is="panes[1]" />
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
39 </div>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
40 <div id="pane3" class="pane w-50 h-50">
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
41 <component :is="panes[2]" />
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
42 </div>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
43 </template>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
44 <template v-if="paneMode === 'right'">
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
45 <div id="pane1" class="pane w-50 h-50">
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
46 <component :is="panes[0]" />
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
47 </div>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
48 <div id="pane2" class="pane w-50 h-50">
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
49 <component :is="panes[1]" />
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
50 </div>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
51 <div id="pane3" class="pane w-50 h-100">
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
52 <component :is="panes[2]" />
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
53 </div>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
54 </template>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
55 <template v-if="paneMode === 'bottom'">
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
56 <div id="pane1" class="pane w-50 h-50">
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
57 <component :is="panes[0]" />
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
58 </div>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59 <div id="pane2" class="pane w-50 h-50">
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60 <component :is="panes[1]" />
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 </div>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
62 <div id="pane3" class="pane w-100 h-50">
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 <component :is="panes[2]" />
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64 </div>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65 </template>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 <template v-if="paneMode === 'left'">
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67 <div id="pane1" class="pane w-50 h-100">
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
68 <component :is="panes[0]" />
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
69 </div>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
70 <div id="pane2" class="pane w-50 h-50">
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
71 <component :is="panes[1]" />
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
72 </div>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
73 <div id="pane3" class="pane w-50 h-50">
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
74 <component :is="panes[2]" />
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
75 </div>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
76 </template>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
77 </template>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
78
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
79 <template v-if="panes.length === 4">
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
80 <div id="pane1" class="pane w-50 h-50"><component :is="panes[0]" /></div>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
81 <div id="pane2" class="pane w-50 h-50"><component :is="panes[1]" /></div>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
82 <div id="pane3" class="pane w-50 h-50"><component :is="panes[2]" /></div>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
83 <div id="pane4" class="pane w-50 h-50"><component :is="panes[3]" /></div>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
84 </template>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
85 </div>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
86 </template>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
87
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
88 <style lang="sass" scoped>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
89 #panes
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
90 top: -1.5px
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
91 right: -1.5px
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
92 bottom: -1.5px
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
93 left: -1.5px
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
94 z-index: 1
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
95 .pane
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
96 border: solid 1.5px #fff
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
97 background-color: #eee
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
98 background-image: linear-gradient(45deg, #e8e8e8 25%, transparent 25%, transparent 75%, #e8e8e8 75%, #e8e8e8), linear-gradient(45deg, #e8e8e8 25%, transparent 25%, transparent 75%, #e8e8e8 75%, #e8e8e8)
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
99 background-size: 20px 20px
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
100 background-position: 0 0, 10px 10px
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
101 </style>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
102
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
103 <script>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
104 /* 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
105 * without warranty, see README.md and license for details.
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
106 *
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
107 * SPDX-License-Identifier: AGPL-3.0-or-later
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
108 * License-Filename: LICENSES/AGPL-3.0.txt
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 * Copyright (C) 2018 by via donau
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
111 * – Österreichische Wasserstraßen-Gesellschaft mbH
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
112 * Software engineering by Intevation GmbH
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
113 *
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
114 * Author(s):
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
115 * Thomas Junk <thomas.junk@intevation.de>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
116 * Markus Kottländer <markus.kottlaender@intevation.de>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
117 */
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
118
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
119 import { mapState } from "vuex";
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
120
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
121 export default {
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
122 components: {
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
123 // all components that are supposed to be displayed in a pane must be registered here
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
124 Maplayer: () => import("./Maplayer")
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
125 },
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
126 computed: {
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
127 ...mapState("application", ["panes", "paneMode"])
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>