annotate client/src/components/importoverview/SectionDetails.vue @ 5627:7768f14f6535 729-node-js-newer-version

Transformed scss variables into css custom properties
author Luisa Beerboom <lbeerboom@intevation.de>
date Tue, 09 May 2023 13:17:58 +0200
parents 6b054b91d9b2
children 84d01a536bec
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
3358
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1 <template>
3524
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
2 <div
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
3 :class="{
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
4 full: !showLogs,
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
5 split: showLogs
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
6 }"
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
7 >
3550
c0f8f9ba21a7 import_review: sections&stretches accept old and new format in DB
Thomas Junk <thomas.junk@intevation.de>
parents: 3526
diff changeset
8 <div v-if="!details.summary.section" class="d-flex">
3524
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
9 <UISpinnerButton
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
10 @click="showDetails = !showDetails"
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
11 :state="showDetails"
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
12 :icons="['angle-right', 'angle-down']"
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
13 classes="text-info"
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
14 />
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
15 <a @click="zoomToSection()" class="text-info pointer">{{
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
16 details.summary.objnam
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
17 }}</a>
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
18 </div>
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
19 <div>
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
20 <div v-if="showDetails">
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
21 <div
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
22 v-for="(entry, index) in Object.keys(details.summary)"
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
23 :key="index"
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
24 class="comparison row no-gutters px-4 text-left"
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
25 >
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
26 <span class="col-4">{{ entry }}</span>
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
27 <span class="col-4">{{ details.summary[entry] }}</span>
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
28 </div>
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
29 </div>
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
30 </div>
3358
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
31 </div>
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
32 </template>
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
33
3524
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
34 <style lang="scss" scoped>
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
35 .comparison {
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
36 width: 668px;
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
37 border-top: dashed 1px #dee2e6;
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
38 }
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
39
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
40 .comparison:nth-child(odd) {
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
41 background-color: #f8f9fa;
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
42 }
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
43
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
44 .split {
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
45 max-height: 35vh;
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
46 }
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
47
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
48 .full {
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
49 max-height: 70vh;
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
50 }
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
51 </style>
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
52
3358
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
53 <script>
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
54 /* This is Free Software under GNU Affero General Public License v >= 3.0
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
55 * without warranty, see README.md and license for details.
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
56 *
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
57 * SPDX-License-Identifier: AGPL-3.0-or-later
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
58 * License-Filename: LICENSES/AGPL-3.0.txt
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59 *
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60 * Copyright (C) 2018 by via donau
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 * – Österreichische Wasserstraßen-Gesellschaft mbH
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
62 * Software engineering by Intevation GmbH
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 *
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64 * Author(s):
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65 * Thomas Junk <thomas.junk@intevation.de>
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 */
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67 import { displayError } from "@/lib/errors";
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
68 import { mapState, mapGetters } from "vuex";
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
69
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
70 export default {
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
71 props: ["entry"],
3524
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
72 data() {
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
73 return {
3526
c71f1b15c5d9 default show details
Thomas Junk <thomas.junk@intevation.de>
parents: 3525
diff changeset
74 showDetails: true
3524
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
75 };
40bc7e3bc561 review details for sections
Thomas Junk <thomas.junk@intevation.de>
parents: 3358
diff changeset
76 },
3358
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
77 mounted() {
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
78 this.$store.commit("imports/hideAdditionalInfo");
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
79 },
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
80 computed: {
3525
4a31a4dbcf18 zoom function repaired
Thomas Junk <thomas.junk@intevation.de>
parents: 3524
diff changeset
81 ...mapState("imports", ["showAdditional", "showLogs", "details"]),
3358
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
82 ...mapGetters("map", ["openLayersMap"])
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
83 },
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
84 methods: {
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
85 zoomToSection() {
3525
4a31a4dbcf18 zoom function repaired
Thomas Junk <thomas.junk@intevation.de>
parents: 3524
diff changeset
86 const { name } = this.details.summary;
3358
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
87 this.openLayersMap()
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
88 .getLayer("SECTIONS")
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
89 .setVisible(true);
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
90 this.$store
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
91 .dispatch("imports/loadSection", name)
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
92 .then(response => {
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
93 if (response.data.features.length < 1)
3525
4a31a4dbcf18 zoom function repaired
Thomas Junk <thomas.junk@intevation.de>
parents: 3524
diff changeset
94 throw new Error("no features found for: " + name);
3358
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
95 this.$store.commit(
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
96 "imports/selectedSectionId",
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
97 response.data.features[0].id
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
98 );
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
99 this.$store.dispatch("map/moveToFeauture", {
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
100 feature: response.data.features[0],
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
101 zoom: 17,
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
102 preventZoomOut: true
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
103 });
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
104 })
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
105 .catch(error => {
4869
6b054b91d9b2 backend not reachable as error message etd. Login adjusted
Thomas Junk <thomas.junk@intevation.de>
parents: 4868
diff changeset
106 let message = "Backend not reachable";
4868
008bc1ae8897 exception handling
Thomas Junk <thomas.junk@intevation.de>
parents: 4454
diff changeset
107 if (error.response) {
008bc1ae8897 exception handling
Thomas Junk <thomas.junk@intevation.de>
parents: 4454
diff changeset
108 const { status, data } = error.response;
008bc1ae8897 exception handling
Thomas Junk <thomas.junk@intevation.de>
parents: 4454
diff changeset
109 message = `${status}: ${data.message || data}`;
008bc1ae8897 exception handling
Thomas Junk <thomas.junk@intevation.de>
parents: 4454
diff changeset
110 }
3358
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
111 displayError({
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
112 title: this.$gettext("Backend Error"),
4868
008bc1ae8897 exception handling
Thomas Junk <thomas.junk@intevation.de>
parents: 4454
diff changeset
113 message: message
3358
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
114 });
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
115 });
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
116 }
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
117 }
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
118 };
c0c880553cd5 client: import review: added section details (actually just the link to move the map to the feature)
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
119 </script>