Mercurial > gemma

comparison client/src/components/importoverview/StretchDetails.vue @ 4340:4d0a09ae0828

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
STSH: Review
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 06 Sep 2019 11:15:49 +0200
parents c0f8f9ba21a7
children 69166db6ba8a
comparison
equal deleted inserted replaced
4339:46d97ada1ce7 4340:4d0a09ae0828
3 :class="{ 3 :class="{
4 full: !showLogs, 4 full: !showLogs,
5 split: showLogs 5 split: showLogs
6 }" 6 }"
7 > 7 >
8 <div v-if="!details.summary.stretch" class="d-flex"> 8 <div v-if="details.summary.length > 0" class="d-flex flex-column">
9 <UISpinnerButton 9 <div
10 @click="showDetails = !showDetails" 10 class="d-flex"
11 :state="showDetails" 11 v-for="(stretch, index) in details.summary"
12 :icons="['angle-right', 'angle-down']" 12 :key="index"
13 classes="text-info"
14 />
15 <a @click="zoomToStretch()" class="text-info pointer"
16 >{{ details.summary.objnam }} (
17 {{ details.summary.countries.join(", ") }} )</a
18 > 13 >
19 </div> 14 <UISpinnerButton
20 <div> 15 @click="showDetailsFor(index)"
21 <div v-if="showDetails"> 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">
22 <div 24 <div
23 v-for="(entry, index) in Object.keys(details.summary)" 25 v-for="(entry, index) in Object.keys(selectedDetails)"
24 :key="index" 26 :key="index"
25 class="comparison row no-gutters px-4 text-left" 27 class="d-flex comparison row no-gutters px-4 text-left"
26 > 28 >
27 <span class="col-4">{{ entry }}</span> 29 <span class="col-4">{{ entry }}</span>
28 <span v-if="entry === 'countries'" class="col-4">{{ 30 <span v-if="entry === 'countries'" class="col-4">{{
29 details.summary[entry].join(", ") 31 listCountries(selectedDetails[entry])
30 }}</span> 32 }}</span>
31 <span v-else class="col-4">{{ details.summary[entry] }}</span> 33 <span v-else class="col-4">{{ selectedDetails[entry] }}</span>
32 </div> 34 </div>
33 </div> 35 </div>
34 </div> 36 </div>
35 </div> 37 </div>
36 </template> 38 </template>
69 * Thomas Junk <thomas.junk@intevation.de> 71 * Thomas Junk <thomas.junk@intevation.de>
70 */ 72 */
71 import { displayError } from "@/lib/errors"; 73 import { displayError } from "@/lib/errors";
72 import { mapState, mapGetters } from "vuex"; 74 import { mapState, mapGetters } from "vuex";
73 75
76 const NODETAILS = -99;
77
74 export default { 78 export default {
75 data() { 79 data() {
76 return { 80 return {
77 showDetails: true 81 showDetails: NODETAILS
78 }; 82 };
79 }, 83 },
80 props: ["entry"], 84 props: ["entry"],
81 mounted() { 85 mounted() {
82 this.$store.commit("imports/hideAdditionalInfo"); 86 this.$store.commit("imports/hideAdditionalInfo");
83 }, 87 },
84 computed: { 88 computed: {
85 ...mapState("imports", ["showAdditional", "showLogs", "details"]), 89 ...mapState("imports", ["showAdditional", "showLogs", "details"]),
86 ...mapGetters("map", ["openLayersMap"]) 90 ...mapGetters("map", ["openLayersMap"]),
91 selectedDetails() {
92 if (this.showDetails === NODETAILS) return [];
93 return this.details.summary[this.showDetails];
94 }
87 }, 95 },
88 methods: { 96 methods: {
89 zoomToStretch() { 97 listCountries(countries) {
90 const { name } = this.details.summary; 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;
91 this.openLayersMap() 118 this.openLayersMap()
92 .getLayer("STRETCHES") 119 .getLayer("STRETCHES")
93 .setVisible(true); 120 .setVisible(true);
94 this.$store 121 this.$store
95 .dispatch("imports/loadStretch", name) 122 .dispatch("imports/loadStretch", name)
113 title: this.$gettext("Backend Error"), 140 title: this.$gettext("Backend Error"),
114 message: `${status}: ${data.message || data}` 141 message: `${status}: ${data.message || data}`
115 }); 142 });
116 }); 143 });
117 } 144 }
118 } 145 },
146 NODETAILS: NODETAILS
119 }; 147 };
120 </script> 148 </script>