Mercurial > gemma
changeset 1066:4372a489c9ad
merge with brach crossprofile
| author | Thomas Junk <thomas.junk@intevation.de> |
|---|---|
| date | Fri, 26 Oct 2018 08:52:22 +0200 |
| parents | 7ec2133c6404 (current diff) cdee23f3ee4c (diff) |
| children | c933665b0193 |
| files | |
| diffstat | 5 files changed, 94 insertions(+), 58 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/application/Main.vue Thu Oct 25 23:16:53 2018 +0200 +++ b/client/src/application/Main.vue Fri Oct 26 08:52:22 2018 +0200 @@ -9,18 +9,12 @@ <div v-if="isSplitscreen" class="profile d-flex flex-row"> <FairwayProfile :additionalSurveys="additionalSurveys" - :minAlt="minAlt" - :maxAlt="maxAlt" - :selectedWaterLevel="selectedWaterLevel" - :fairwayCoordinates="fairwayCoordinates" - :waterLevels="waterLevels" :height="height" :width="width" :xScale="xAxis" :yScaleLeft="yAxisLeft" :yScaleRight="yAxisRight" :margin="margins" - :totalLength="totalLength" ></FairwayProfile> </div> </div>
--- a/client/src/fairway/Fairwayprofile.vue Thu Oct 25 23:16:53 2018 +0200 +++ b/client/src/fairway/Fairwayprofile.vue Fri Oct 26 08:52:22 2018 +0200 @@ -3,7 +3,7 @@ <div class="fairwayprofile"></div> <div class="additionalsurveys d-flex flex-column"> <small class="label">Available Additional Surveys</small> - <select v-model="additionalSurvey" @change="selectAdditionalSurveyData"> + <select v-model="additionalSurvey"> <option value="">None</option> <option v-for="survey in additionalSurveys" @@ -79,7 +79,7 @@ */ import * as d3 from "d3"; import { mapState } from "vuex"; -import { displayInfo } from "../application/lib/errors.js"; +import { displayError } from "../application/lib/errors.js"; const GROUND_COLOR = "#4A2F06"; @@ -92,12 +92,6 @@ "yScaleLeft", "yScaleRight", "margin", - "totalLength", - "waterLevels", - "fairwayCoordinates", - "selectedWaterLevel", - "minAlt", - "maxAlt", "additionalSurveys" ], computed: { @@ -105,8 +99,23 @@ "startPoint", "endPoint", "currentProfile", - "selectedMorph" + "selectedMorph", + "minAlt", + "maxAlt", + "totalLength", + "fairwayCoordinates", + "waterLevels", + "selectedWaterLevel" ]), + additionalSurvey: { + get() { + return this.$store.getters["fairwayprofile/additionalSurvey"]; + }, + set(value) { + this.$store.commit("fairwayprofile/setAdditionalSurvey", value); + this.selectAdditionalSurveyData(); + } + }, currentData() { const currentSurveyDate = this.selectedMorph.date_info; return this.currentProfile[currentSurveyDate]; @@ -123,7 +132,6 @@ }, data() { return { - additionalSurvey: "", wait: false }; }, @@ -149,31 +157,33 @@ }, methods: { selectAdditionalSurveyData() { - if (!this.additionalSurvey || this.wait) return; - // this.$store - // .dispatch("fairwayprofile/loadProfile", this.additionalSurvey) - // .then(() => { - // this.wait = false; - // this.drawDiagram(); - // }) - // .catch(error => { - // this.wait = false; - // let status = "ERROR"; - // let data = error; - // const response = error.response; - // if (response) { - // status = response.status; - // data = response.data; - // } - // displayError({ - // title: "Backend Error", - // message: `${status}: ${data.message || data}` - // }); - // }); - displayInfo({ - title: "Not Implemented", - message: `Currently under development` - }); + if ( + !this.additionalSurvey || + this.wait || + this.currentProfile[this.additionalSurvey] + ) { + this.drawDiagram(); + return; + } + this.$store + .dispatch("fairwayprofile/loadProfile", this.additionalSurvey) + .then(() => { + this.wait = false; + }) + .catch(error => { + this.wait = false; + let status = "ERROR"; + let data = error; + const response = error.response; + if (response) { + status = response.status; + data = response.data; + } + displayError({ + title: "Backend Error", + message: `${status}: ${data.message || data}` + }); + }); }, drawDiagram() { const chartDiv = document.querySelector(".fairwayprofile"); @@ -198,26 +208,30 @@ height, width }); - this.drawProfile({ - graph, - xScale, - yScaleRight, - currentData, - height, - width, - color: GROUND_COLOR, - strokeColor: "black" - }); + if (currentData) { + this.drawProfile({ + graph, + xScale, + yScaleRight, + currentData, + height, + width, + color: GROUND_COLOR, + strokeColor: "black", + opacity: 1 + }); + } if (additionalData) { this.drawProfile({ graph, xScale, yScaleRight, - additionalData, + currentData: additionalData, height, width, - color: "green", - strokeColor: "green" + color: GROUND_COLOR, + strokeColor: "#943007", + opacity: 0.6 }); } this.drawLabels({ @@ -341,7 +355,8 @@ currentData, height, color, - strokeColor + strokeColor, + opacity }) { for (let part of currentData) { let profileLine = d3 @@ -367,6 +382,8 @@ .attr("fill", color) .attr("stroke", color) .attr("stroke-width", 3) + .attr("stroke-opacity", opacity) + .attr("fill-opacity", opacity) .attr("d", profileArea); graph .append("path") @@ -376,6 +393,8 @@ .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-width", 3) + .attr("stroke-opacity", opacity) + .attr("fill-opacity", opacity) .attr("d", profileLine); } }
--- a/client/src/fairway/store.js Thu Oct 25 23:16:53 2018 +0200 +++ b/client/src/fairway/store.js Fri Oct 26 08:52:22 2018 +0200 @@ -24,6 +24,7 @@ const FairwayProfile = { namespaced: true, state: { + additionalSurvey: "", availableSurveys: null, totalLength: 0, minAlt: 0, @@ -39,9 +40,15 @@ getters: { length: state => { return state.totalLength; + }, + additionalSurvey: state => { + return state.additionalSurvey; } }, mutations: { + setAdditionalSurvey: (state, additionalSurvey) => { + state.additionalSurvey = additionalSurvey; + }, setSelectedMorph: (state, selectedMorph) => { state.selectedMorph = selectedMorph; }, @@ -63,9 +70,15 @@ // Use Vue.set() to make new object properties rective // https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats Vue.set(state.currentProfile, surveyDate, result.points); - state.minAlt = result.minAlt; - state.maxAlt = result.maxAlt; - state.totalLength = result.lengthPolyLine; + if (!state.minAlt || state.minAlt > result.minAlt) { + state.minAlt = result.minAlt; + } + if (!state.maxAlt || state.maxAlt < result.maxAlt) { + state.maxAlt = result.maxAlt; + } + if (!state.totalLength || state.totalLength < result.lengthPolyLine) { + state.totalLength = result.lengthPolyLine; + } }, setStartPoint: (state, start) => { state.startPoint = start; @@ -77,7 +90,14 @@ state.fairwayCoordinates = coordinates; }, clearCurrentProfile: state => { + state.additionalSurvey = ""; state.currentProfile = {}; + state.minAlt = null; + state.maxAlt = null; + state.totalLength = null; + state.fairwayCoordinates = []; + state.startPoint = null; + state.endPoint = null; } }, actions: {
--- a/client/src/map/Maplayer.vue Thu Oct 25 23:16:53 2018 +0200 +++ b/client/src/map/Maplayer.vue Fri Oct 26 08:52:22 2018 +0200 @@ -176,6 +176,7 @@ // TODO an improvement could be to check if the line intersects // with the bottleneck area's polygon before trying the server request if (this.selectedMorph) { + this.$store.commit("fairwayprofile/clearCurrentProfile"); console.log("requesting profile for", this.selectedMorph); const inputLineString = event.feature.getGeometry().clone(); inputLineString.transform("EPSG:3857", "EPSG:4326");
--- a/client/src/morphtool/Morphtool.vue Thu Oct 25 23:16:53 2018 +0200 +++ b/client/src/morphtool/Morphtool.vue Fri Oct 26 08:52:22 2018 +0200 @@ -180,6 +180,8 @@ clearSelection() { this.$store.commit("identifystore/setIdentifiedFeatures", []); this.$store.commit("fairwayprofile/setSelectedMorph", null); + this.$store.commit("fairwayprofile/clearCurrentProfile"); + this.$store.commit("application/closeSplitScreen"); this.surveyList = null; if (this.drawMode) { this.$store.commit("application/toggleDrawModeLine");