Mercurial > gemma
changeset 2605:11fd7ee37f10
overview2: added stretch zoom functionality
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 12 Mar 2019 17:08:49 +0100 |
parents | 8d767359fddb |
children | e12df0bf2f8d |
files | client/src/assets/application.scss client/src/components/importoverview/AdditionalDetail.vue client/src/components/importoverview/LogDetail.vue client/src/components/importoverview/LogEntry.vue client/src/components/importoverview/StretchDetails.vue |
diffstat | 5 files changed, 88 insertions(+), 9 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/assets/application.scss Tue Mar 12 16:16:43 2019 +0100 +++ b/client/src/assets/application.scss Tue Mar 12 17:08:49 2019 +0100 @@ -179,3 +179,7 @@ padding: 0.25rem 0.1rem; font-size: 80%; } + +.empty { + margin-right: 1.25rem; +}
--- a/client/src/components/importoverview/AdditionalDetail.vue Tue Mar 12 16:16:43 2019 +0100 +++ b/client/src/components/importoverview/AdditionalDetail.vue Tue Mar 12 17:08:49 2019 +0100 @@ -1,12 +1,18 @@ <template> <div> - <FairwayDimensionDetail v-if="isFairwayDimension"></FairwayDimensionDetail> + <FairwayDimensionDetail + :entry="entry" + v-if="isFairwayDimension" + ></FairwayDimensionDetail> <ApprovedGaugeMeasurementDetail + :entry="entry" v-if="isApprovedGaugeMeasurement" ></ApprovedGaugeMeasurementDetail> - <BottleneckDetail v-if="isBottleneck"></BottleneckDetail> - <StretchDetail v-if="isStretch"></StretchDetail> - <SoundingResultDetail v-if="isSoundingResult"></SoundingResultDetail> + <BottleneckDetail :entry="entry" v-if="isBottleneck"></BottleneckDetail> + <SoundingResultDetail + :entry="entry" + v-if="isSoundingResult" + ></SoundingResultDetail> </div> </template> @@ -31,7 +37,6 @@ components: { SoundingResultDetail: () => import("./SoundingResultDetail.vue"), BottleneckDetail: () => import("./BottleneckDetail.vue"), - StretchDetail: () => import("./StretchDetails.vue"), ApprovedGaugeMeasurementDetail: () => import("./ApprovedGaugeMeasurementDetail.vue"), FairwayDimensionDetail: () => import("./FairwayDimension.vue")
--- a/client/src/components/importoverview/LogDetail.vue Tue Mar 12 16:16:43 2019 +0100 +++ b/client/src/components/importoverview/LogDetail.vue Tue Mar 12 17:08:49 2019 +0100 @@ -1,7 +1,7 @@ <template> <div> <div class="d-flex fex-row"> - <div v-if="entry.state == 'pending'"> + <div v-if="hasAdditionalInfo"> <font-awesome-icon v-if="entry.id === showAdditional" @click="toggleAdditionalInfo" @@ -17,7 +17,11 @@ fixed-width ></font-awesome-icon> <span class="text-info"><translate>Additional Info</translate></span> + <span class="text-info" v-if="isApprovedGaugeMeasurement"> + ({{ entry.summary.length }})</span + > </div> + <StretchDetail v-if="isStretch" :entry="entry"></StretchDetail> </div> <AdditionalDetail v-if="entry.id === showAdditional" @@ -71,6 +75,7 @@ name: "logdetail", props: ["entry"], components: { + StretchDetail: () => import("./StretchDetails.vue"), AdditionalDetail: () => import("./AdditionalDetail.vue"), AdditionalLog: () => import("./AdditionalLog.vue") }, @@ -91,7 +96,28 @@ } }, computed: { - ...mapState("imports", ["showAdditional", "showLogs"]) + ...mapState("imports", ["showAdditional", "showLogs"]), + kind() { + return this.entry.kind.toUpperCase(); + }, + hasAdditionalInfo() { + return this.entry.state == "pending" && this.isApprovedGaugeMeasurement; + }, + isFairwayDimension() { + return this.kind === "FD"; + }, + isApprovedGaugeMeasurement() { + return this.kind === "AGM"; + }, + isBottleneck() { + return this.kind === "BN" || this.kind === "UBN"; + }, + isStretch() { + return this.kind === "ST"; + }, + isSoundingResult() { + return this.kind === "SR"; + } } }; </script>
--- a/client/src/components/importoverview/LogEntry.vue Tue Mar 12 16:16:43 2019 +0100 +++ b/client/src/components/importoverview/LogEntry.vue Tue Mar 12 17:08:49 2019 +0100 @@ -15,6 +15,10 @@ icon="angle-right" fixed-width ></font-awesome-icon> + <div class="id"> + <span v-if="entry.id > 9">{{ entry.id }}</span> + <span v-else> {{ entry.id }}</span> + </div> <div class="kind">{{ entry.kind.toUpperCase() }}</div> <div class="enqueued">{{ entry.enqueued | surveyDate }}</div> <div class="user">{{ entry.user }}</div> @@ -135,6 +139,9 @@ .logentry { } +.id { + width: 10%; +} .kind { width: 10%; }
--- a/client/src/components/importoverview/StretchDetails.vue Tue Mar 12 16:16:43 2019 +0100 +++ b/client/src/components/importoverview/StretchDetails.vue Tue Mar 12 17:08:49 2019 +0100 @@ -1,5 +1,10 @@ <template> - <div>Stretches Detail</div> + <div> + <span class="empty"> </span> + <a @click="zoomToStretch()" class="text-info pointer">{{ + entry.summary.stretch + }}</a> + </div> </template> <script> @@ -16,8 +21,40 @@ * Author(s): * Thomas Junk <thomas.junk@intevation.de> */ +import { displayError } from "@/lib/errors.js"; +import { LAYERS } from "@/store/map.js"; + export default { - name: "stretchdetails" + name: "stretchdetails", + props: ["entry"], + methods: { + moveToExtent(feature) { + this.$store.commit("map/moveToExtent", { + feature: feature, + zoom: 17, + preventZoomOut: true + }); + }, + zoomToStretch() { + const name = this.entry.summary.stretch; + this.$store.commit("map/setLayerVisible", LAYERS.STRETCHES); + this.$store + .dispatch("imports/loadStretch", name) + .then(response => { + if (response.data.features.length < 1) + throw new Error("no feaures found for: " + name); + this.moveToExtent(response.data.features[0]); + }) + .catch(error => { + console.log(error); + const { status, data } = error.response; + displayError({ + title: this.$gettext("Backend Error"), + message: `${status}: ${data.message || data}` + }); + }); + } + } }; </script>