Mercurial > gemma
changeset 1394:b350b0b5cb6c
refactored fairwayprofile cross cuts
moved all profile relevant data into Fairwayprofile.vue
fixed width calculation of diagram
fix bug when switching between sounding data
fixed display/styling issue
code cleanup
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Wed, 28 Nov 2018 11:48:45 +0100 |
parents | efd77496de75 |
children | 210e9f16f8a0 |
files | client/src/components/map/Main.vue client/src/components/map/Maplayer.vue client/src/components/map/contextbox/Bottlenecks.vue client/src/components/map/fairway/Fairwayprofile.vue client/src/components/map/fairway/Profiles.vue client/src/store/bottlenecks.js client/src/store/fairway.js |
diffstat | 7 files changed, 77 insertions(+), 145 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/map/Main.vue Wed Nov 28 11:35:14 2018 +0100 +++ b/client/src/components/map/Main.vue Wed Nov 28 11:48:45 2018 +0100 @@ -1,11 +1,7 @@ <template> <div class="main d-flex flex-column"> - <Maplayer :split="showSplitscreen"></Maplayer> - <FairwayProfile - :xScale="xAxis" - :yScaleLeft="yAxisLeft" - :yScaleRight="yAxisRight" - ></FairwayProfile> + <Maplayer></Maplayer> + <FairwayProfile></FairwayProfile> </div> </template> @@ -26,46 +22,12 @@ import Maplayer from "./Maplayer"; import FairwayProfile from "./fairway/Fairwayprofile"; -import { mapState } from "vuex"; export default { name: "mainview", components: { Maplayer, FairwayProfile - }, - computed: { - ...mapState("application", ["showSplitscreen"]), - ...mapState("fairwayprofile", [ - "minAlt", - "maxAlt", - "totalLength", - "selectedWaterLevel" - ]), - ...mapState("bottlenecks", ["surveys", "selectedSurvey"]), - xAxis() { - return [this.xScale.x, this.xScale.y]; - }, - yAxisLeft() { - const hi = Math.max(this.maxAlt, this.selectedWaterLevel); - return [this.yScaleLeft.lo, hi]; - }, - yAxisRight() { - const DELTA = this.maxAlt * 1.1 - this.maxAlt; - return [this.maxAlt * 1 + DELTA, -DELTA]; - }, - yScaleLeft() { - return { - lo: this.minAlt, - hi: this.maxAlt - }; - }, - xScale() { - return { - x: 0, - y: this.totalLength - }; - } } }; </script>
--- a/client/src/components/map/Maplayer.vue Wed Nov 28 11:35:14 2018 +0100 +++ b/client/src/components/map/Maplayer.vue Wed Nov 28 11:48:45 2018 +0100 @@ -49,7 +49,6 @@ /* eslint-disable no-console */ export default { name: "maplayer", - props: ["split"], data() { return { projection: "EPSG:3857" @@ -66,10 +65,11 @@ "cutTool" ]), ...mapState("bottlenecks", ["selectedSurvey"]), + ...mapState("application", ["showSplitscreen"]), mapStyle() { return { - mapfull: !this.split, - mapsplit: this.split, + mapfull: !this.showSplitscreen, + mapsplit: this.showSplitscreen, nocursor: this.hasActiveInteractions }; }, @@ -238,7 +238,7 @@ } }, watch: { - split() { + showSplitscreen() { const map = this.openLayersMap; this.$nextTick(() => { map && map.updateSize();
--- a/client/src/components/map/contextbox/Bottlenecks.vue Wed Nov 28 11:35:14 2018 +0100 +++ b/client/src/components/map/contextbox/Bottlenecks.vue Wed Nov 28 11:48:45 2018 +0100 @@ -150,7 +150,7 @@ "bottlenecks/setSelectedBottleneck", bottleneck.properties.name ); - this.$store.commit("bottlenecks/setSelectedSurvey", survey); + this.$store.commit("bottlenecks/selectedSurvey", survey); this.moveToBottleneck(bottleneck); }, moveToBottleneck(bottleneck) {
--- a/client/src/components/map/fairway/Fairwayprofile.vue Wed Nov 28 11:35:14 2018 +0100 +++ b/client/src/components/map/fairway/Fairwayprofile.vue Wed Nov 28 11:48:45 2018 +0100 @@ -86,17 +86,14 @@ */ import * as d3 from "d3"; import { mapState, mapGetters } from "vuex"; -import { displayError } from "../../../lib/errors.js"; import debounce from "debounce"; const GROUND_COLOR = "#4A2F06"; export default { name: "fairwayprofile", - props: ["xScale", "yScaleLeft", "yScaleRight"], data() { return { - wait: false, coordinatesInput: "", coordinatesSelect: null, cutLabel: "", @@ -113,37 +110,33 @@ }, computed: { ...mapGetters("map", ["getLayerByName"]), + ...mapGetters("fairwayprofile", ["totalLength"]), ...mapState("application", ["showSplitscreen"]), ...mapState("fairwayprofile", [ "startPoint", "endPoint", "currentProfile", + "additionalSurvey", "minAlt", "maxAlt", - "totalLength", "fairwayCoordinates", "waterLevels", "selectedWaterLevel", "previousCuts", "profileLoading" ]), - ...mapState("bottlenecks", ["selectedBottleneck", "selectedSurvey", "surveysLoading"]), - additionalSurvey: { - get() { - return this.$store.getters["fairwayprofile/additionalSurvey"]; - }, - set(value) { - this.$store.commit("fairwayprofile/additionalSurvey", value); - this.selectAdditionalSurveyData(); - } - }, + ...mapState("bottlenecks", [ + "selectedBottleneck", + "selectedSurvey", + "surveysLoading" + ]), currentData() { if ( !this.selectedSurvey || !this.currentProfile.hasOwnProperty(this.selectedSurvey.date_info) ) return []; - return this.currentProfile[this.selectedSurvey.date_info]; + return this.currentProfile[this.selectedSurvey.date_info].points; }, additionalData() { if ( @@ -151,13 +144,24 @@ !this.currentProfile.hasOwnProperty(this.additionalSurvey.date_info) ) return []; - return this.currentProfile[this.additionalSurvey.date_info]; + return this.currentProfile[this.additionalSurvey.date_info].points; }, waterColor() { const result = this.waterLevels.find( x => x.level === this.selectedWaterLevel ); return result.color; + }, + xScale() { + return [0, this.totalLength]; + }, + yScaleLeft() { + const hi = Math.max(this.maxAlt, this.selectedWaterLevel); + return [this.minAlt, hi]; + }, + yScaleRight() { + const DELTA = this.maxAlt * 1.1 - this.maxAlt; + return [this.maxAlt * 1 + DELTA, -DELTA]; } }, watch: { @@ -184,35 +188,6 @@ } }, methods: { - selectAdditionalSurveyData() { - if ( - !this.additionalSurvey || - this.wait || - this.currentProfile[this.additionalSurvey.date_info] - ) { - 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() { this.coordinatesSelect = null; const chartDiv = document.querySelector(".fairwayprofile"); @@ -225,19 +200,14 @@ const height = this.height - this.margin.top - 2 * this.margin.bottom; const currentData = this.currentData; const additionalData = this.additionalData; - const { - xScale, - yScaleRight, - yScaleLeft, - graph - } = this.generateCoordinates(svg, height, width); - this.drawWaterlevel({ - graph, - xScale, - yScaleRight, + const { xScale, yScaleRight, graph } = this.generateCoordinates( + svg, height, width - }); + ); + this.drawWaterlevel({ graph, xScale, yScaleRight, height }); + this.drawLabels({ graph, height }); + this.drawFairway({ graph, xScale, yScaleRight }); if (currentData) { this.drawProfile({ graph, @@ -245,7 +215,6 @@ yScaleRight, currentData, height, - width, color: GROUND_COLOR, strokeColor: "black", opacity: 1 @@ -258,28 +227,11 @@ yScaleRight, currentData: additionalData, height, - width, color: GROUND_COLOR, strokeColor: "#943007", opacity: 0.6 }); } - this.drawLabels({ - graph, - xScale, - yScaleLeft, - currentData, - height, - width - }); - this.drawFairway({ - graph, - xScale, - yScaleRight, - currentData, - height, - width - }); }, drawFairway({ graph, xScale, yScaleRight }) { for (let coordinates of this.fairwayCoordinates) {
--- a/client/src/components/map/fairway/Profiles.vue Wed Nov 28 11:35:14 2018 +0100 +++ b/client/src/components/map/fairway/Profiles.vue Wed Nov 28 11:48:45 2018 +0100 @@ -185,7 +185,6 @@ return this.$store.state.bottlenecks.selectedBottleneck; }, set(name) { - this.loading = true; this.$store.dispatch("bottlenecks/setSelectedBottleneck", name); } }, @@ -194,7 +193,8 @@ return this.$store.state.bottlenecks.selectedSurvey; }, set(survey) { - this.$store.commit("bottlenecks/setSelectedSurvey", survey); + this.$store.commit("fairwayprofile/additionalSurvey", null); + this.$store.commit("bottlenecks/selectedSurvey", survey); } }, additionalSurvey: { @@ -234,13 +234,10 @@ this.selectedBottleneck + " (" + new Date().toISOString() + ")"; }, selectedSurvey(survey) { - this.$store.commit("fairwayprofile/additionalSurvey", null); - if (survey) { - this.$store.dispatch("fairwayprofile/loadProfile", survey); - } + this.loadProfile(survey); }, additionalSurvey(survey) { - if (survey) this.$store.dispatch("fairwayprofile/loadProfile", survey); + this.loadProfile(survey); }, coordinatesSelect(newValue) { if (newValue) { @@ -250,6 +247,16 @@ } }, methods: { + loadProfile(survey) { + if (survey) { + this.$store.commit("fairwayprofile/profileLoading", true); + this.$store + .dispatch("fairwayprofile/loadProfile", survey) + .finally(() => + this.$store.commit("fairwayprofile/profileLoading", false) + ); + } + }, toggleCutTool() { if (this.selectedSurvey) { this.cutTool.setActive(!this.cutTool.getActive());
--- a/client/src/store/bottlenecks.js Wed Nov 28 11:35:14 2018 +0100 +++ b/client/src/store/bottlenecks.js Wed Nov 28 11:48:45 2018 +0100 @@ -41,7 +41,7 @@ setSurveys(state, surveys) { state.surveys = surveys; }, - setSelectedSurvey(state, survey) { + selectedSurvey(state, survey) { state.selectedSurvey = survey; }, surveysLoading: (state, loading) => { @@ -54,7 +54,7 @@ name ) { if (name !== state.selectedBottleneck) { - commit("setSelectedSurvey", null); + commit("selectedSurvey", null); commit("fairwayprofile/clearCurrentProfile", null, { root: true }); commit("application/showSplitscreen", false, { root: true }); rootState.map.cutTool.setActive(false); @@ -103,12 +103,12 @@ const surveys = response.data.surveys.sort( (a, b) => (a.date_info < b.date_info ? 1 : -1) ); - commit("setSelectedSurvey", surveys[0]); + commit("selectedSurvey", surveys[0]); commit("setSurveys", surveys); }) .catch(error => { commit("setSurveys", []); - commit("setSelectedSurvey", null); + commit("selectedSurvey", null); const { status, data } = error.response; displayError({ title: "Backend Error",
--- a/client/src/store/fairway.js Wed Nov 28 11:35:14 2018 +0100 +++ b/client/src/store/fairway.js Wed Nov 28 11:48:45 2018 +0100 @@ -28,7 +28,6 @@ const init = () => { return { additionalSurvey: null, - totalLength: 0, minAlt: 0, maxAlt: 0, currentProfile: {}, @@ -47,8 +46,11 @@ namespaced: true, state: init(), getters: { - length: state => { - return state.totalLength; + totalLength: state => { + const keys = Object.keys(state.currentProfile); + return keys.length + ? Math.max(...keys.map(x => state.currentProfile[x].length)) + : 0; }, additionalSurvey: state => { return state.additionalSurvey; @@ -72,16 +74,16 @@ const result = prepareProfile({ geoJSON, startPoint, endPoint }); // 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); + Vue.set(state.currentProfile, surveyDate, { + points: result.points, + length: 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; @@ -122,7 +124,6 @@ loadProfile({ commit, state }, survey) { if (state.startPoint && state.endPoint) { return new Promise((resolve, reject) => { - commit("profileLoading", true); const profileLine = new LineString([ state.startPoint, state.endPoint @@ -144,8 +145,7 @@ }) .catch(error => { reject(error); - }) - .finally(() => commit("profileLoading", false)); + }); }); } }, @@ -165,7 +165,6 @@ // TODO an improvement could be to check if the line intersects // with the bottleneck area's polygon before trying the server request if (rootState.bottlenecks.selectedSurvey) { - commit("clearCurrentProfile"); const inputLineString = cut.getGeometry().clone(); inputLineString.transform("EPSG:3857", "EPSG:4326"); const [start, end] = inputLineString @@ -174,7 +173,18 @@ commit("setStartPoint", start); commit("setEndPoint", end); const profileLine = new LineString([start, end]); - dispatch("loadProfile", rootState.bottlenecks.selectedSurvey) + + const profileLoaders = [ + dispatch("loadProfile", rootState.bottlenecks.selectedSurvey) + ]; + if (rootState.fairwayprofile.additionalSurvey) { + profileLoaders.push( + dispatch("loadProfile", rootState.fairwayprofile.additionalSurvey) + ); + } + + commit("profileLoading", true); + Promise.all(profileLoaders) .then(() => { rootState.map.cutTool.setActive(false); rootGetters["map/getVSourceByName"]( @@ -200,15 +210,16 @@ } ); }) - .then(() => { - commit("application/showSplitscreen", true, { root: true }); - }) .catch(error => { const { status, data } = error.response; displayError({ title: "Backend Error", message: `${status}: ${data.message || data}` }); + }) + .finally(() => { + commit("application/showSplitscreen", true, { root: true }); + commit("profileLoading", false); }); } },