Mercurial > gemma

comparison client/src/components/staging/StagingDetail.vue @ 2107:6747a4cf3639

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
staging: zoom to Stretch implemented
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 04 Feb 2019 16:00:02 +0100
parents c9af355d4a2c
children cac5d2fba591
comparison
equal deleted inserted replaced
2106:2b72f5e005aa 2107:6747a4cf3639
15 > 15 >
16 <span v-if="isFairwayDimension(data.kind.toUpperCase())" 16 <span v-if="isFairwayDimension(data.kind.toUpperCase())"
17 >{{ data.summary["source-organization"] }} (LOS: 17 >{{ data.summary["source-organization"] }} (LOS:
18 {{ data.summary.los }})</span 18 {{ data.summary.los }})</span
19 > 19 >
20 <span v-if="isStretch(data.kind.toUpperCase())">{{ 20 <a
21 data.summary.stretch 21 href="#"
22 }}</span> 22 @click="zoomToStretch(data.summary.stretch)"
23 v-if="isStretch(data.kind.toUpperCase())"
24 >{{ data.summary.stretch }}</a
25 >
23 </div> 26 </div>
24 <div class="mt-auto mb-auto small text-left type"> 27 <div class="mt-auto mb-auto small text-left type">
25 {{ data.kind.toUpperCase() }} 28 {{ data.kind.toUpperCase() }}
26 </div> 29 </div>
27 <div v-if="data.summary" class="mt-auto mb-auto small text-left date"> 30 <div v-if="data.summary" class="mt-auto mb-auto small text-left date">
87 </div> 90 </div>
88 </div> 91 </div>
89 <div v-else class="empty"></div> 92 <div v-else class="empty"></div>
90 </div> 93 </div>
91 </div> 94 </div>
92 <div 95 <div v-if="show && bottlenecks.length > 0">
93 v-for="(bottleneck, index) in bottlenecks" 96 <div
94 :key="index" 97 v-for="(bottleneck, index) in bottlenecks"
95 class="d-flex flex-row" 98 :key="index"
96 v-if="show && bottlenecks.length > 0" 99 class="d-flex flex-row"
97 > 100 >
98 <div class="d-flex flex-column"> 101 <div class="d-flex flex-column">
99 <div class="d-flex flex-row"> 102 <div class="d-flex flex-row">
100 <a @click="moveToBottleneck(index)" class="small" href="#">{{ 103 <a @click="moveToBottleneck(index)" class="small" href="#">{{
101 bottleneck.properties.objnam 104 bottleneck.properties.objnam
102 }}</a> 105 }}</a>
103 <div 106 <div
104 @click="showFull = !showFull" 107 @click="showFull = !showFull"
105 class="small mt-auto mb-auto text-info text-left" 108 class="small mt-auto mb-auto text-info text-left"
106 > 109 >
107 <font-awesome-icon 110 <font-awesome-icon
108 v-if="showFull" 111 v-if="showFull"
109 icon="angle-up" 112 icon="angle-up"
110 fixed-width 113 fixed-width
111 ></font-awesome-icon> 114 ></font-awesome-icon>
112 <font-awesome-icon 115 <font-awesome-icon
113 v-if="!showFull" 116 v-if="!showFull"
114 icon="angle-down" 117 icon="angle-down"
115 fixed-width 118 fixed-width
116 ></font-awesome-icon> 119 ></font-awesome-icon>
120 </div>
117 </div> 121 </div>
118 </div> 122
119 123 <div class="d-flex flex-row" v-if="showFull">
120 <div class="d-flex flex-row" v-if="showFull"> 124 <table>
121 <table> 125 <tr
122 <tr 126 v-for="(info, index) in Object.keys(bottleneck.properties)"
123 v-for="(info, index) in Object.keys(bottleneck.properties)" 127 :key="index"
124 :key="index" 128 class="mr-1 small text-muted"
125 class="mr-1 small text-muted" 129 >
126 > 130 <td class="condensed text-left">{{ info }}</td>
127 <td class="condensed text-left">{{ info }}</td> 131 <td class="condensed pl-3 text-left">
128 <td class="condensed pl-3 text-left"> 132 {{ bottleneck.properties[info] }}
129 {{ bottleneck.properties[info] }} 133 </td>
130 </td> 134 </tr>
131 </tr> 135 </table>
132 </table> 136 </div>
133 </div> 137 </div>
134 </div> 138 </div>
135 </div> 139 </div>
136 </div> 140 </div>
137 </template> 141 </template>
200 this.showDetails(); 204 this.showDetails();
201 } 205 }
202 } 206 }
203 }, 207 },
204 methods: { 208 methods: {
209 zoomToStretch(name) {
210 this.$store
211 .dispatch("imports/loadStretch", name)
212 .then(response => {
213 if (response.data.features.length < 1)
214 throw new Error("no feaures found for: " + name);
215 const { coordinates } = center(response.data.features[0]).geometry;
216 this.moveMap(coordinates);
217 })
218 .catch(error => {
219 console.log(error);
220 const { status, data } = error.response;
221 displayError({
222 title: this.$gettext("Backend Error"),
223 message: `${status}: ${data.message || data}`
224 });
225 });
226 },
205 showDetails() { 227 showDetails() {
206 if (this.data.kind.toUpperCase() !== "BN") return; 228 if (this.data.kind.toUpperCase() !== "BN") return;
207 if (this.show) { 229 if (this.show) {
208 this.show = false; 230 this.show = false;
209 return; 231 return;