Mercurial > gemma
changeset 2107:6747a4cf3639
staging: zoom to Stretch implemented
| author | Thomas Junk <thomas.junk@intevation.de> |
|---|---|
| date | Mon, 04 Feb 2019 16:00:02 +0100 |
| parents | 2b72f5e005aa |
| children | cac5d2fba591 |
| files | client/src/components/staging/StagingDetail.vue client/src/store/imports.js |
| diffstat | 2 files changed, 105 insertions(+), 62 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/staging/StagingDetail.vue Mon Feb 04 15:49:17 2019 +0100 +++ b/client/src/components/staging/StagingDetail.vue Mon Feb 04 16:00:02 2019 +0100 @@ -17,9 +17,12 @@ >{{ data.summary["source-organization"] }} (LOS: {{ data.summary.los }})</span > - <span v-if="isStretch(data.kind.toUpperCase())">{{ - data.summary.stretch - }}</span> + <a + href="#" + @click="zoomToStretch(data.summary.stretch)" + v-if="isStretch(data.kind.toUpperCase())" + >{{ data.summary.stretch }}</a + > </div> <div class="mt-auto mb-auto small text-left type"> {{ data.kind.toUpperCase() }} @@ -89,47 +92,48 @@ <div v-else class="empty"></div> </div> </div> - <div - v-for="(bottleneck, index) in bottlenecks" - :key="index" - class="d-flex flex-row" - v-if="show && bottlenecks.length > 0" - > - <div class="d-flex flex-column"> - <div class="d-flex flex-row"> - <a @click="moveToBottleneck(index)" class="small" href="#">{{ - bottleneck.properties.objnam - }}</a> - <div - @click="showFull = !showFull" - class="small mt-auto mb-auto text-info text-left" - > - <font-awesome-icon - v-if="showFull" - icon="angle-up" - fixed-width - ></font-awesome-icon> - <font-awesome-icon - v-if="!showFull" - icon="angle-down" - fixed-width - ></font-awesome-icon> + <div v-if="show && bottlenecks.length > 0"> + <div + v-for="(bottleneck, index) in bottlenecks" + :key="index" + class="d-flex flex-row" + > + <div class="d-flex flex-column"> + <div class="d-flex flex-row"> + <a @click="moveToBottleneck(index)" class="small" href="#">{{ + bottleneck.properties.objnam + }}</a> + <div + @click="showFull = !showFull" + class="small mt-auto mb-auto text-info text-left" + > + <font-awesome-icon + v-if="showFull" + icon="angle-up" + fixed-width + ></font-awesome-icon> + <font-awesome-icon + v-if="!showFull" + icon="angle-down" + fixed-width + ></font-awesome-icon> + </div> </div> - </div> - <div class="d-flex flex-row" v-if="showFull"> - <table> - <tr - v-for="(info, index) in Object.keys(bottleneck.properties)" - :key="index" - class="mr-1 small text-muted" - > - <td class="condensed text-left">{{ info }}</td> - <td class="condensed pl-3 text-left"> - {{ bottleneck.properties[info] }} - </td> - </tr> - </table> + <div class="d-flex flex-row" v-if="showFull"> + <table> + <tr + v-for="(info, index) in Object.keys(bottleneck.properties)" + :key="index" + class="mr-1 small text-muted" + > + <td class="condensed text-left">{{ info }}</td> + <td class="condensed pl-3 text-left"> + {{ bottleneck.properties[info] }} + </td> + </tr> + </table> + </div> </div> </div> </div> @@ -202,6 +206,24 @@ } }, methods: { + zoomToStretch(name) { + this.$store + .dispatch("imports/loadStretch", name) + .then(response => { + if (response.data.features.length < 1) + throw new Error("no feaures found for: " + name); + const { coordinates } = center(response.data.features[0]).geometry; + this.moveMap(coordinates); + }) + .catch(error => { + console.log(error); + const { status, data } = error.response; + displayError({ + title: this.$gettext("Backend Error"), + message: `${status}: ${data.message || data}` + }); + }); + }, showDetails() { if (this.data.kind.toUpperCase() !== "BN") return; if (this.show) {
--- a/client/src/store/imports.js Mon Feb 04 15:49:17 2019 +0100 +++ b/client/src/store/imports.js Mon Feb 04 16:00:02 2019 +0100 @@ -34,6 +34,35 @@ }; }; +const getStretchFromWFS = filter => { + return new Promise((resolve, reject) => { + var stretchesFeatureCollectionRequest = new WFS().writeGetFeature({ + srsName: "EPSG:4326", + featureNS: "gemma", + featurePrefix: "gemma", + featureTypes: ["stretches_geoserver"], + outputFormat: "application/json", + filter: filter + }); + HTTP.post( + "/internal/wfs", + new XMLSerializer().serializeToString(stretchesFeatureCollectionRequest), + { + headers: { + "X-Gemma-Auth": localStorage.getItem("token"), + "Content-type": "text/xml; charset=UTF-8" + } + } + ) + .then(response => { + resolve(response); + }) + .catch(error => { + reject(error); + }); + }); +}; + const imports = { init, namespaced: true, @@ -69,28 +98,20 @@ } }, actions: { + loadStretch({ commit }, name) { + return new Promise((resolve, reject) => { + getStretchFromWFS(equalToFilter("name", name)) + .then(response => { + resolve(response); + }) + .catch(error => { + reject(error); + }); + }); + }, loadStretches({ commit }) { return new Promise((resolve, reject) => { - var stretchesFeatureCollectionRequest = new WFS().writeGetFeature({ - srsName: "EPSG:4326", - featureNS: "gemma", - featurePrefix: "gemma", - featureTypes: ["stretches_geoserver"], - outputFormat: "application/json", - filter: equalToFilter("staging_done", true) - }); - HTTP.post( - "/internal/wfs", - new XMLSerializer().serializeToString( - stretchesFeatureCollectionRequest - ), - { - headers: { - "X-Gemma-Auth": localStorage.getItem("token"), - "Content-type": "text/xml; charset=UTF-8" - } - } - ) + getStretchFromWFS(equalToFilter("staging_done", true)) .then(response => { if (response.data.features) { commit("setStretches", response.data.features);