Mercurial > gemma
annotate client/src/components/importoverview/StretchDetails.vue @ 4643:a1a9b1eab57c stree-experiment
Use append/slicing trick to simplify tree traversals.
author | Sascha L. Teichmann <sascha.teichmann@intevation.de> |
---|---|
date | Fri, 11 Oct 2019 23:46:35 +0200 |
parents | 69166db6ba8a |
children | 008bc1ae8897 |
rev | line source |
---|---|
2602
5d0e5159190f
overview2: detail components for unified log
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
1 <template> |
3523
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
2 <div |
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
3 :class="{ |
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
4 full: !showLogs, |
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
5 split: showLogs |
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
6 }" |
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
7 > |
4340 | 8 <div v-if="details.summary.length > 0" class="d-flex flex-column"> |
9 <div | |
10 class="d-flex" | |
11 v-for="(stretch, index) in details.summary" | |
12 :key="index" | |
3523
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
13 > |
4340 | 14 <UISpinnerButton |
15 @click="showDetailsFor(index)" | |
16 :state="showDetails == index" | |
17 :icons="['angle-right', 'angle-down']" | |
18 classes="text-info" | |
19 /><a @click="zoomToStretch(stretch)" class="text-info pointer">{{ | |
20 linkText(stretch) | |
21 }}</a> | |
22 </div> | |
23 <div v-if="showDetails !== $options.NODETAILS"> | |
3523
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
24 <div |
4340 | 25 v-for="(entry, index) in Object.keys(selectedDetails)" |
3523
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
26 :key="index" |
4340 | 27 class="d-flex comparison row no-gutters px-4 text-left" |
3523
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
28 > |
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
29 <span class="col-4">{{ entry }}</span> |
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
30 <span v-if="entry === 'countries'" class="col-4">{{ |
4340 | 31 listCountries(selectedDetails[entry]) |
3523
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
32 }}</span> |
4340 | 33 <span v-else class="col-4">{{ selectedDetails[entry] }}</span> |
3523
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
34 </div> |
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
35 </div> |
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
36 </div> |
2605
11fd7ee37f10
overview2: added stretch zoom functionality
Thomas Junk <thomas.junk@intevation.de>
parents:
2602
diff
changeset
|
37 </div> |
2602
5d0e5159190f
overview2: detail components for unified log
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
38 </template> |
5d0e5159190f
overview2: detail components for unified log
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
39 |
3523
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
40 <style lang="scss" scoped> |
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
41 .comparison { |
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
42 width: 668px; |
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
43 border-top: dashed 1px #dee2e6; |
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
44 } |
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
45 |
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
46 .comparison:nth-child(odd) { |
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
47 background-color: #f8f9fa; |
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
48 } |
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
49 |
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
50 .split { |
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
51 max-height: 35vh; |
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
52 } |
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
53 |
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
54 .full { |
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
55 max-height: 70vh; |
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
56 } |
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
57 </style> |
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
58 |
2602
5d0e5159190f
overview2: detail components for unified log
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
59 <script> |
5d0e5159190f
overview2: detail components for unified log
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
60 /* This is Free Software under GNU Affero General Public License v >= 3.0 |
5d0e5159190f
overview2: detail components for unified log
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
61 * without warranty, see README.md and license for details. |
5d0e5159190f
overview2: detail components for unified log
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
62 * |
5d0e5159190f
overview2: detail components for unified log
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
63 * SPDX-License-Identifier: AGPL-3.0-or-later |
5d0e5159190f
overview2: detail components for unified log
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
64 * License-Filename: LICENSES/AGPL-3.0.txt |
5d0e5159190f
overview2: detail components for unified log
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
65 * |
5d0e5159190f
overview2: detail components for unified log
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
66 * Copyright (C) 2018 by via donau |
5d0e5159190f
overview2: detail components for unified log
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
67 * – Österreichische Wasserstraßen-Gesellschaft mbH |
5d0e5159190f
overview2: detail components for unified log
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
68 * Software engineering by Intevation GmbH |
5d0e5159190f
overview2: detail components for unified log
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
69 * |
5d0e5159190f
overview2: detail components for unified log
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
70 * Author(s): |
5d0e5159190f
overview2: detail components for unified log
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
71 * Thomas Junk <thomas.junk@intevation.de> |
5d0e5159190f
overview2: detail components for unified log
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
72 */ |
2985
1b8bb4f89227
client: removed .js and .vue extention from imports
Markus Kottlaender <markus@intevation.de>
parents:
2957
diff
changeset
|
73 import { displayError } from "@/lib/errors"; |
3044
c71373594719
client: map: prepared store to hold multiple map objects
Markus Kottlaender <markus@intevation.de>
parents:
3017
diff
changeset
|
74 import { mapState, mapGetters } from "vuex"; |
2605
11fd7ee37f10
overview2: added stretch zoom functionality
Thomas Junk <thomas.junk@intevation.de>
parents:
2602
diff
changeset
|
75 |
4340 | 76 const NODETAILS = -99; |
77 | |
2602
5d0e5159190f
overview2: detail components for unified log
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
78 export default { |
3523
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
79 data() { |
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
80 return { |
4340 | 81 showDetails: NODETAILS |
3523
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
82 }; |
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
83 }, |
2732
0ab7985ef008
import_review: fixed flakey display of logs
Thomas Junk <thomas.junk@intevation.de>
parents:
2717
diff
changeset
|
84 props: ["entry"], |
2717
5b990f612420
import_review: rename overview to review. More space for logs
Thomas Junk <thomas.junk@intevation.de>
parents:
2685
diff
changeset
|
85 mounted() { |
5b990f612420
import_review: rename overview to review. More space for logs
Thomas Junk <thomas.junk@intevation.de>
parents:
2685
diff
changeset
|
86 this.$store.commit("imports/hideAdditionalInfo"); |
5b990f612420
import_review: rename overview to review. More space for logs
Thomas Junk <thomas.junk@intevation.de>
parents:
2685
diff
changeset
|
87 }, |
2732
0ab7985ef008
import_review: fixed flakey display of logs
Thomas Junk <thomas.junk@intevation.de>
parents:
2717
diff
changeset
|
88 computed: { |
3523
b0c655e605ee
reviewdetails for stretches
Thomas Junk <thomas.junk@intevation.de>
parents:
3357
diff
changeset
|
89 ...mapState("imports", ["showAdditional", "showLogs", "details"]), |
4340 | 90 ...mapGetters("map", ["openLayersMap"]), |
91 selectedDetails() { | |
92 if (this.showDetails === NODETAILS) return []; | |
93 return this.details.summary[this.showDetails]; | |
94 } | |
2732
0ab7985ef008
import_review: fixed flakey display of logs
Thomas Junk <thomas.junk@intevation.de>
parents:
2717
diff
changeset
|
95 }, |
2605
11fd7ee37f10
overview2: added stretch zoom functionality
Thomas Junk <thomas.junk@intevation.de>
parents:
2602
diff
changeset
|
96 methods: { |
4340 | 97 listCountries(countries) { |
98 if (!countries) return ""; | |
99 return countries.join(", "); | |
100 }, | |
101 showDetailsFor(index) { | |
102 if (index === this.showDetails) { | |
103 this.showDetails = NODETAILS; | |
104 return; | |
105 } | |
106 this.showDetails = index; | |
107 }, | |
108 linkText(stretch) { | |
109 const name = stretch.objnam; | |
110 const { countries } = stretch; | |
111 const countryNames = !countries | |
112 ? "" | |
113 : `(${this.listCountries(countries)})`; | |
114 return `${name} ${countryNames}`; | |
115 }, | |
116 zoomToStretch(stretch) { | |
117 const { name } = stretch; | |
3127
0374197c384f
client: fix openLayersMap getter calls
Markus Kottlaender <markus@intevation.de>
parents:
3054
diff
changeset
|
118 this.openLayersMap() |
0374197c384f
client: fix openLayersMap getter calls
Markus Kottlaender <markus@intevation.de>
parents:
3054
diff
changeset
|
119 .getLayer("STRETCHES") |
0374197c384f
client: fix openLayersMap getter calls
Markus Kottlaender <markus@intevation.de>
parents:
3054
diff
changeset
|
120 .setVisible(true); |
2605
11fd7ee37f10
overview2: added stretch zoom functionality
Thomas Junk <thomas.junk@intevation.de>
parents:
2602
diff
changeset
|
121 this.$store |
11fd7ee37f10
overview2: added stretch zoom functionality
Thomas Junk <thomas.junk@intevation.de>
parents:
2602
diff
changeset
|
122 .dispatch("imports/loadStretch", name) |
11fd7ee37f10
overview2: added stretch zoom functionality
Thomas Junk <thomas.junk@intevation.de>
parents:
2602
diff
changeset
|
123 .then(response => { |
11fd7ee37f10
overview2: added stretch zoom functionality
Thomas Junk <thomas.junk@intevation.de>
parents:
2602
diff
changeset
|
124 if (response.data.features.length < 1) |
11fd7ee37f10
overview2: added stretch zoom functionality
Thomas Junk <thomas.junk@intevation.de>
parents:
2602
diff
changeset
|
125 throw new Error("no feaures found for: " + name); |
3356
37c024dd435e
client: import review: set selected stretch when clicking on stretch name in import details
Markus Kottlaender <markus@intevation.de>
parents:
3127
diff
changeset
|
126 this.$store.commit( |
37c024dd435e
client: import review: set selected stretch when clicking on stretch name in import details
Markus Kottlaender <markus@intevation.de>
parents:
3127
diff
changeset
|
127 "imports/selectedStretchId", |
37c024dd435e
client: import review: set selected stretch when clicking on stretch name in import details
Markus Kottlaender <markus@intevation.de>
parents:
3127
diff
changeset
|
128 response.data.features[0].id |
37c024dd435e
client: import review: set selected stretch when clicking on stretch name in import details
Markus Kottlaender <markus@intevation.de>
parents:
3127
diff
changeset
|
129 ); |
3054
1ef2f4179d30
client: map store: merged/renamed method(s)
Markus Kottlaender <markus@intevation.de>
parents:
3044
diff
changeset
|
130 this.$store.dispatch("map/moveToFeauture", { |
3017
9a408a8b74b8
client: inlined some functions that were used only once
Markus Kottlaender <markus@intevation.de>
parents:
3006
diff
changeset
|
131 feature: response.data.features[0], |
9a408a8b74b8
client: inlined some functions that were used only once
Markus Kottlaender <markus@intevation.de>
parents:
3006
diff
changeset
|
132 zoom: 17, |
9a408a8b74b8
client: inlined some functions that were used only once
Markus Kottlaender <markus@intevation.de>
parents:
3006
diff
changeset
|
133 preventZoomOut: true |
9a408a8b74b8
client: inlined some functions that were used only once
Markus Kottlaender <markus@intevation.de>
parents:
3006
diff
changeset
|
134 }); |
2605
11fd7ee37f10
overview2: added stretch zoom functionality
Thomas Junk <thomas.junk@intevation.de>
parents:
2602
diff
changeset
|
135 }) |
11fd7ee37f10
overview2: added stretch zoom functionality
Thomas Junk <thomas.junk@intevation.de>
parents:
2602
diff
changeset
|
136 .catch(error => { |
11fd7ee37f10
overview2: added stretch zoom functionality
Thomas Junk <thomas.junk@intevation.de>
parents:
2602
diff
changeset
|
137 const { status, data } = error.response; |
11fd7ee37f10
overview2: added stretch zoom functionality
Thomas Junk <thomas.junk@intevation.de>
parents:
2602
diff
changeset
|
138 displayError({ |
11fd7ee37f10
overview2: added stretch zoom functionality
Thomas Junk <thomas.junk@intevation.de>
parents:
2602
diff
changeset
|
139 title: this.$gettext("Backend Error"), |
11fd7ee37f10
overview2: added stretch zoom functionality
Thomas Junk <thomas.junk@intevation.de>
parents:
2602
diff
changeset
|
140 message: `${status}: ${data.message || data}` |
11fd7ee37f10
overview2: added stretch zoom functionality
Thomas Junk <thomas.junk@intevation.de>
parents:
2602
diff
changeset
|
141 }); |
11fd7ee37f10
overview2: added stretch zoom functionality
Thomas Junk <thomas.junk@intevation.de>
parents:
2602
diff
changeset
|
142 }); |
11fd7ee37f10
overview2: added stretch zoom functionality
Thomas Junk <thomas.junk@intevation.de>
parents:
2602
diff
changeset
|
143 } |
4340 | 144 }, |
145 NODETAILS: NODETAILS | |
2602
5d0e5159190f
overview2: detail components for unified log
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
146 }; |
5d0e5159190f
overview2: detail components for unified log
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
147 </script> |