Mercurial > gemma
changeset 2608:13377f2a5c42
overview2: agm details prototype implemented
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 13 Mar 2019 09:45:29 +0100 |
parents | ee60096c7eb6 |
children | 546ed93a9829 |
files | client/src/components/importoverview/AdditionalDetail.vue client/src/components/importoverview/AdditionalLog.vue client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue client/src/components/importoverview/LogDetail.vue client/src/components/importoverview/SoundingResultDetail.vue client/src/store/imports.js |
diffstat | 6 files changed, 157 insertions(+), 20 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/importoverview/AdditionalDetail.vue Tue Mar 12 17:13:04 2019 +0100 +++ b/client/src/components/importoverview/AdditionalDetail.vue Wed Mar 13 09:45:29 2019 +0100 @@ -9,10 +9,6 @@ v-if="isApprovedGaugeMeasurement" ></ApprovedGaugeMeasurementDetail> <BottleneckDetail :entry="entry" v-if="isBottleneck"></BottleneckDetail> - <SoundingResultDetail - :entry="entry" - v-if="isSoundingResult" - ></SoundingResultDetail> </div> </template> @@ -35,7 +31,6 @@ name: "additionaldetail", props: ["entry"], components: { - SoundingResultDetail: () => import("./SoundingResultDetail.vue"), BottleneckDetail: () => import("./BottleneckDetail.vue"), ApprovedGaugeMeasurementDetail: () => import("./ApprovedGaugeMeasurementDetail.vue"), @@ -53,12 +48,6 @@ }, isBottleneck() { return this.kind === "BN" || this.kind === "UBN"; - }, - isStretch() { - return this.kind === "ST"; - }, - isSoundingResult() { - return this.kind === "SR"; } } };
--- a/client/src/components/importoverview/AdditionalLog.vue Tue Mar 12 17:13:04 2019 +0100 +++ b/client/src/components/importoverview/AdditionalLog.vue Wed Mar 13 09:45:29 2019 +0100 @@ -58,6 +58,11 @@ </script> <style lang="scss" scoped> +.additionallog { + width: 600px; + max-height: 20vh; + overflow-y: auto; +} .kind { width: 30px; }
--- a/client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue Tue Mar 12 17:13:04 2019 +0100 +++ b/client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue Wed Mar 13 09:45:29 2019 +0100 @@ -1,5 +1,89 @@ <template> - <div>AGM</div> + <div class="diffs"> + <div v-for="(result, index) in entry.summary" :key="index"> + <div class="pl-3 d-flex flex-row"> + <span v-if="result.versions.length == 1" class="agmcode text-left" + ><small + >{{ result["fk-gauge-id"] }} <translate>( New )</translate></small + ></span + > + <span v-if="result.versions.length == 2" class="agmcode text-left" + ><small>{{ result["fk-gauge-id"] }}</small></span + > + <span class="agmdetail text-left" + ><small>{{ result["measure-date"] | dateTime }}</small></span + > + <div + @click="toggleDiff(index)" + class="small ml-auto mt-auto mb-auto text-info text-left" + > + <font-awesome-icon + class="pointer" + v-if="showDiff == index" + icon="angle-up" + fixed-width + ></font-awesome-icon> + <font-awesome-icon + class="pointer" + v-if="showDiff != index" + icon="angle-down" + fixed-width + ></font-awesome-icon> + </div> + </div> + <div v-if="showDiff == index" class="pl-3 d-flex flex-row"> + <div> + <div class="d-flex flex-row pl-3 text-left"> + <div class="header border-bottom agmdetailskeys"> + <small><translate>Value</translate></small> + </div> + <div + v-if="result.versions.length == 2" + class="header border-bottom agmdetailsvalues" + > + <small><translate>Old</translate></small> + </div> + <div class="header border-bottom agmdetailsvalues"> + <small><translate>New</translate></small> + </div> + </div> + <div + class="d-flex flex-row pl-3 text-left" + v-for="(entry, index) in Object.keys(result.versions[0])" + :key="index" + > + <div + v-if=" + result.versions.length == 1 || + result.versions[0][entry] != result.versions[1][entry] + " + class="agmdetailskeys" + > + <small>{{ entry }}</small> + </div> + <div + v-if=" + result.versions.length == 1 || + result.versions[0][entry] != result.versions[1][entry] + " + class="agmdetailsvalues" + > + <small>{{ result.versions[0][entry] }}</small> + </div> + <div + v-if=" + result.versions.length == 2 && + result.versions[0][entry] != result.versions[1][entry] + " + class="agmdetailsvalues" + > + <small>{{ result.versions[1][entry] }}</small> + </div> + </div> + </div> + </div> + </div> + </div> </template> <script> @@ -16,9 +100,33 @@ * Author(s): * Thomas Junk <thomas.junk@intevation.de> */ + +const NODIFF = -1; + export default { - name: "agmdetails" + name: "agmdetails", + props: ["entry"], + data() { + return { + showDiff: NODIFF + }; + }, + methods: { + toggleDiff(number) { + if (this.showDiff !== number || this.showDiff == NODIFF) { + this.showDiff = number; + } else { + this.showDiff = NODIFF; + } + } + } }; </script> -<style></style> +<style lang="scss" scoped> +.diffs { + width: 615px; + max-height: 20vh; + overflow-y: auto; +} +</style>
--- a/client/src/components/importoverview/LogDetail.vue Tue Mar 12 17:13:04 2019 +0100 +++ b/client/src/components/importoverview/LogDetail.vue Wed Mar 13 09:45:29 2019 +0100 @@ -20,8 +20,19 @@ <span class="text-info" v-if="isApprovedGaugeMeasurement"> ({{ entry.summary.length }})</span > + <span v-if="isBottleneck" class="text-left">{{ + data.summary.bottlenecks.length + }}</span> + <span class="text-left" v-if="isFairwayDimension" + >{{ entry.summary["source-organization"] }} (LOS: + {{ entry.summary.los }})</span + > </div> <StretchDetail v-if="isStretch" :entry="entry"></StretchDetail> + <SoundingResultDetail + :entry="entry" + v-if="isSoundingResult" + ></SoundingResultDetail> </div> <AdditionalDetail v-if="entry.id === showAdditional" @@ -48,7 +59,7 @@ <AdditionalLog v-if="entry.id === showLogs" - class="ml-4 d-flex flex-row" + class="ml-4 d-flex flex-row mr-1" :entry="entry" ></AdditionalLog> </div> @@ -75,6 +86,7 @@ name: "logdetail", props: ["entry"], components: { + SoundingResultDetail: () => import("./SoundingResultDetail.vue"), StretchDetail: () => import("./StretchDetails.vue"), AdditionalDetail: () => import("./AdditionalDetail.vue"), AdditionalLog: () => import("./AdditionalLog.vue")
--- a/client/src/components/importoverview/SoundingResultDetail.vue Tue Mar 12 17:13:04 2019 +0100 +++ b/client/src/components/importoverview/SoundingResultDetail.vue Wed Mar 13 09:45:29 2019 +0100 @@ -1,5 +1,10 @@ <template> - <div>SoundingResult</div> + <div> + <span class="empty"></span> + <a @click="zoomTo()" class="text-info pointer"> + {{ entry.summary.bottleneck }} + </a> + </div> </template> <script> @@ -17,7 +22,27 @@ * Thomas Junk <thomas.junk@intevation.de> */ export default { - name: "soundingresultdetails" + name: "soundingresultdetails", + props: ["entry"], + methods: { + moveMap(coordinates) { + this.$store.commit("map/moveMap", { + coordinates: coordinates, + zoom: 17, + preventZoomOut: true + }); + }, + zoomTo() { + const { lat, lon, bottleneck, date } = this.entry.summary; + const coordinates = [lat, lon]; + this.moveMap(coordinates); + this.$store + .dispatch("bottlenecks/setSelectedBottleneck", bottleneck) + .then(() => { + this.$store.commit("bottlenecks/setSelectedSurveyByDate", date); + }); + } + } }; </script>
--- a/client/src/store/imports.js Tue Mar 12 17:13:04 2019 +0100 +++ b/client/src/store/imports.js Wed Mar 13 09:45:29 2019 +0100 @@ -25,7 +25,6 @@ }; const NODETAILS = -1; -const NODIFF = -1; // initial state const init = () => { @@ -40,8 +39,7 @@ logsVisible: true, show: NODETAILS, showAdditional: NODETAILS, - showLogs: NODETAILS, - showDiff: NODIFF + showLogs: NODETAILS }; };