Mercurial > gemma
changeset 1111:f106aee673e7 store-refactoring
selected bottleneck and surveys now handled by bottleneck store
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 05 Nov 2018 13:12:33 +0100 |
parents | ca4e0cd607ce |
children | 2c3d32322126 |
files | client/src/application/Main.vue client/src/bottlenecks/Bottlenecks.vue client/src/fairway/Fairwayprofile.vue client/src/linetool/Linetool.vue client/src/map/Maplayer.vue client/src/morphtool/Morphtool.vue client/src/store/bottlenecks.js client/src/store/fairway.js |
diffstat | 8 files changed, 139 insertions(+), 149 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/application/Main.vue Fri Nov 02 14:51:14 2018 +0100 +++ b/client/src/application/Main.vue Mon Nov 05 13:12:33 2018 +0100 @@ -70,14 +70,14 @@ "totalLength", "waterLevels", "fairwayCoordinates", - "selectedWaterLevel", - "availableSurveys", - "selectedMorph" + "selectedWaterLevel" ]), + ...mapState("bottlenecks", ["surveys", "selectedSurvey"]), additionalSurveys() { - if (!this.availableSurveys) return []; - return this.availableSurveys.surveys.filter(x => { - return x.date_info !== this.selectedMorph.date_info; + if (!this.surveys) return []; + if (!this.selectedSurvey) return this.surveys; + return this.surveys.filter(survey => { + return survey.date_info !== this.selectedSurvey.date_info; }); }, xAxis() {
--- a/client/src/bottlenecks/Bottlenecks.vue Fri Nov 02 14:51:14 2018 +0100 +++ b/client/src/bottlenecks/Bottlenecks.vue Mon Nov 05 13:12:33 2018 +0100 @@ -30,18 +30,18 @@ </a> </div> <div class="col-2"> - {{ displayCurrentSurvey(bottleneck) }} + {{ displayCurrentSurvey(bottleneck.properties.current) }} </div> <div class="col-3"> - {{ displayCurrentChainage(bottleneck) }} + {{ displayCurrentChainage(bottleneck.properties.from, bottleneck.properties.from) }} </div> <div class="col-2 text-right"> - <button type="button" class="btn btn-sm btn-outline-secondary" @click="toggleBottleneck(bottleneck)"> + <button type="button" class="btn btn-sm btn-outline-secondary" @click="toggleBottleneck(bottleneck.properties.name)"> <i class="fa fa-angle-down"></i> </button> </div> - <div :class="['col-12', 'surveys', {open: selectedBottleneck === bottleneck}]"> - <a href="#" class="d-block p-2" v-for="(survey, index) in surveys[bottleneck.properties.name]" :key="index" @click="selectSurvey(survey, bottleneck)"> + <div :class="['col-12', 'surveys', {open: openBottleneck === bottleneck.properties.name}]"> + <a href="#" class="d-block p-2" v-for="(survey, index) in openBottleneckSurveys" :key="index" @click="selectSurvey(survey, bottleneck)"> {{ survey.date_info }} </a> </div> @@ -77,8 +77,8 @@ search: "", sortColumn: "name", sortDirection: "ASC", - selectedBottleneck: null, - surveys: {} + openBottleneck: null, + openBottleneckSurveys: null }; }, computed: { @@ -153,10 +153,8 @@ }); }, selectSurvey(survey, bottleneck) { - this.$store.commit("fairwayprofile/setSelectedMorph", survey); - this.$store.commit("fairwayprofile/setAvailableSurveys", { - surveys: this.surveys[bottleneck.properties.name] - }); + this.$store.dispatch("bottlenecks/setSelectedBottleneck", bottleneck.properties.name); + this.$store.commit("bottlenecks/setSelectedSurvey", survey); this.moveToBottleneck(bottleneck); }, moveToBottleneck(bottleneck) { @@ -179,19 +177,21 @@ this.sortColumn = column; this.sortDirection = this.sortDirection === "ASC" ? "DESC" : "ASC"; }, - toggleBottleneck(bottleneck) { - if (bottleneck === this.selectedBottleneck) { - this.selectedBottleneck = null; + toggleBottleneck(name) { + this.openBottleneckSurveys = null; + if (name === this.openBottleneck) { + this.openBottleneck = null; } else { - HTTP.get("/surveys/" + bottleneck.properties.name, { + this.openBottleneck = name; + + HTTP.get("/surveys/" + name, { headers: { "X-Gemma-Auth": localStorage.getItem("token"), "Content-type": "text/xml; charset=UTF-8" } }) .then(response => { - this.surveys[bottleneck.properties.name] = response.data.surveys; - this.selectedBottleneck = bottleneck; + this.openBottleneckSurveys = response.data.surveys; }) .catch(error => { const { status, data } = error.response; @@ -202,13 +202,12 @@ }); } }, - displayCurrentSurvey(bottleneck) { - const current = bottleneck.properties.current; + displayCurrentSurvey(current) { return current ? current.substr(0, current.length - 1) : ""; }, - displayCurrentChainage(bottleneck) { + displayCurrentChainage(from, to) { return ( - bottleneck.properties.from / 10 + " - " + bottleneck.properties.to / 10 + from / 10 + " - " + to / 10 ); } },
--- a/client/src/fairway/Fairwayprofile.vue Fri Nov 02 14:51:14 2018 +0100 +++ b/client/src/fairway/Fairwayprofile.vue Mon Nov 05 13:12:33 2018 +0100 @@ -8,6 +8,7 @@ <option v-for="survey in additionalSurveys" :key="survey.date_info" + :value="survey" >{{survey.date_info}}</option> </select> <small class="mt-2"> @@ -99,7 +100,6 @@ "startPoint", "endPoint", "currentProfile", - "selectedMorph", "minAlt", "maxAlt", "totalLength", @@ -107,6 +107,7 @@ "waterLevels", "selectedWaterLevel" ]), + ...mapState("bottlenecks", ["selectedSurvey"]), additionalSurvey: { get() { return this.$store.getters["fairwayprofile/additionalSurvey"]; @@ -117,11 +118,18 @@ } }, currentData() { - const currentSurveyDate = this.selectedMorph.date_info; - return this.currentProfile[currentSurveyDate]; + if ( + !this.selectedSurvey || + !this.currentProfile.hasOwnProperty(this.selectedSurvey.date_info) + ) return []; + return this.currentProfile[this.selectedSurvey.date_info]; }, additionalData() { - return this.currentProfile[this.additionalSurvey]; + if ( + !this.additionalSurvey || + !this.currentProfile.hasOwnProperty(this.additionalSurvey.date_info) + ) return []; + return this.currentProfile[this.additionalSurvey.date_info]; }, waterColor() { const result = this.waterLevels.find( @@ -160,7 +168,7 @@ if ( !this.additionalSurvey || this.wait || - this.currentProfile[this.additionalSurvey] + this.currentProfile[this.additionalSurvey.date_info] ) { this.drawDiagram(); return;
--- a/client/src/linetool/Linetool.vue Fri Nov 02 14:51:14 2018 +0100 +++ b/client/src/linetool/Linetool.vue Mon Nov 05 13:12:33 2018 +0100 @@ -45,7 +45,7 @@ name: "linetool", methods: { drawLine() { - if (!this.selectedMorph && this.drawMode === "LineString") { + if (!this.selectedSurvey && this.drawMode === "LineString") { this.$store.commit("application/activateDrawModePolygon"); } else { this.$store.commit("application/toggleDrawModeLine"); @@ -55,13 +55,13 @@ computed: { ...mapState("application", ["drawMode"]), ...mapState("identifystore", ["identifiedFeatures"]), - ...mapState("fairwayprofile", ["selectedMorph"]), + ...mapState("bottlenecks", ["selectedSurvey"]), icon() { return { fa: true, - "fa-area-chart": this.selectedMorph, - "fa-edit": !this.selectedMorph && this.drawMode === "Polygon", - "fa-pencil": !this.selectedMorph && this.drawMode !== "Polygon", + "fa-area-chart": this.selectedSurvey, + "fa-edit": !this.selectedSurvey && this.drawMode === "Polygon", + "fa-pencil": !this.selectedSurvey && this.drawMode !== "Polygon", inverted: this.drawMode }; }
--- a/client/src/map/Maplayer.vue Fri Nov 02 14:51:14 2018 +0100 +++ b/client/src/map/Maplayer.vue Mon Nov 05 13:12:33 2018 +0100 @@ -74,7 +74,7 @@ ...mapGetters("mapstore", ["layers", "getLayerByName"]), ...mapState("application", ["drawMode"]), ...mapState("mapstore", ["openLayersMap"]), - ...mapState("fairwayprofile", ["selectedMorph"]), + ...mapState("bottlenecks", ["selectedSurvey"]), mapStyle() { return { mapfull: !this.split, @@ -178,9 +178,9 @@ // if a survey has been selected, request a profile // 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) { + if (this.selectedSurvey) { this.$store.commit("fairwayprofile/clearCurrentProfile"); - console.log("requesting profile for", this.selectedMorph); + console.log("requesting profile for", this.selectedSurvey); const inputLineString = event.feature.getGeometry().clone(); inputLineString.transform("EPSG:3857", "EPSG:4326"); const [start, end] = inputLineString @@ -190,7 +190,7 @@ this.$store.commit("fairwayprofile/setEndPoint", end); const profileLine = new LineString([start, end]); this.$store - .dispatch("fairwayprofile/loadProfile", this.selectedMorph.date_info) + .dispatch("fairwayprofile/loadProfile", this.selectedSurvey) .then(() => { var vectorSource = this.getLayerByName( "Fairway Dimensions" @@ -245,7 +245,18 @@ this.$store.commit("identifystore/setIdentifiedFeatures", []); // checking our WFS layers var features = this.openLayersMap.getFeaturesAtPixel(pixel); - this.$store.commit("identifystore/setIdentifiedFeatures", features); + if (features) { + this.$store.commit("identifystore/setIdentifiedFeatures", features); + + // get selected bottleneck from identified features + for (let feature of features) { + let id = feature.getId(); + // RegExp.prototype.test() works with number, str and undefined + if (/^bottlenecks\./.test(id)) { + this.$store.dispatch("bottlenecks/setSelectedBottleneck", feature.get("objnam")); + } + } + } // DEBUG output and example how to remove the GeometryName /* @@ -384,11 +395,11 @@ map.updateSize(); }); }, - selectedMorph(newSelectedMorph) { - if (newSelectedMorph) { + selectedSurvey(newSelectedSurvey) { + if (newSelectedSurvey) { this.updateBottleneckFilter( - newSelectedMorph.bottleneck_id, - newSelectedMorph.date_info + newSelectedSurvey.bottleneck_id, + newSelectedSurvey.date_info ); } else { this.updateBottleneckFilter("does_not_exist", "1999-10-01");
--- a/client/src/morphtool/Morphtool.vue Fri Nov 02 14:51:14 2018 +0100 +++ b/client/src/morphtool/Morphtool.vue Mon Nov 05 13:12:33 2018 +0100 @@ -1,36 +1,34 @@ <template> <div class="morphcontainer"> - <div v-if="selectedBottleneck"> - <div v-if="surveyList && !drawMode" class="ui-element card card-body shadow"> - <div class="headline"> - <h4>{{bottleneckName}}</h4> - <hr> - <div - @click="clearSelection" - class="float-left ui-element d-flex morphtoolminus" - > - <i class="fa fa-close morphtoolsminus"></i> - </div> + <div v-if="selectedBottleneck && surveys && !selectedSurvey" class="ui-element card card-body shadow"> + <div class="headline"> + <h4>{{ selectedBottleneck }}</h4> + <hr> + <div + @click="clearSelection" + class="float-left ui-element d-flex morphtoolminus" + > + <i class="fa fa-close morphtoolsminus"></i> </div> - <ul class="list-group surveylist"> - <li - v-for="survey of surveyList.surveys" - :key="survey.data_info" - class="list-group-item" - @click.prevent="selectSurvey(survey)" - > - <a href="#" @click.prevent>{{survey.date_info}}</a> - </li> - </ul> </div> + <ul class="list-group surveylist"> + <li + v-for="survey of surveys" + :key="survey.data_info" + class="list-group-item" + @click.prevent="$store.commit('bottlenecks/setSelectedSurvey', survey)" + > + <a href="#" @click.prevent>{{ survey.date_info }}</a> + </li> + </ul> </div> - <div v-if="selectedMorph" @click="clearSelection" class="ui-element shadow morphtool"> + <div v-if="selectedSurvey" @click="clearSelection" class="ui-element shadow morphtool"> <div class="d-flex flex-row justify-content-between"> <i class="fa fa-close text-danger"></i> <small>Bottleneck: </small> <h6> - {{bottleneckName}} - <small>( {{selectedMorph.date_info}} )</small> + {{ selectedBottleneck }} + <small>( {{ selectedSurvey.date_info }} )</small> </h6> </div> </div> @@ -106,83 +104,21 @@ * Author(s): * Thomas Junk <thomas.junk@intevation.de> */ -import { mapState } from "vuex"; +import { mapState, mapGetters } from "vuex"; import { displayError } from "../application/lib/errors.js"; import { HTTP } from "../application/lib/http"; export default { name: "morphtool", - data() { - return { - surveyList: null, - bottleneckName: "" - }; - }, computed: { ...mapState("application", ["drawMode"]), - ...mapState("identifystore", ["identifiedFeatures"]), - ...mapState("fairwayprofile", ["selectedMorph"]), - selectedBottleneck: function() { - if (this.identifiedFeatures && !this.drawMode) { - for (let feature of this.identifiedFeatures) { - let id = feature.getId(); - // RegExp.prototype.test() works with number, str and undefined - if (/^bottlenecks\./.test(id)) { - this.$store.commit("fairwayprofile/setSelectedMorph", null); - return feature; - } - } - } - return null; - } - }, - watch: { - selectedBottleneck: function(bottleneckFeature) { - if (bottleneckFeature) { - let bottleneckName = bottleneckFeature.get("objnam"); - if (bottleneckName) { - this.bottleneckName = bottleneckName; - this.queryBottleneck(bottleneckName); - } - } - } + ...mapState("bottlenecks", ["selectedBottleneck", "surveys", "selectedSurvey"]) }, methods: { - queryBottleneck(name) { - // DEBUG console.log("starting to query bottleneck", name); - HTTP.get("/surveys/" + name, { - headers: { - "X-Gemma-Auth": localStorage.getItem("token"), - "Content-type": "text/xml; charset=UTF-8" - } - }) - .then(response => { - this.surveyList = response.data; - this.$store.commit( - "fairwayprofile/setAvailableSurveys", - response.data - ); - }) - .catch(error => { - this.surveyList = null; - const { status, data } = error.response; - displayError({ - title: "Backend Error", - message: `${status}: ${data.message || data}` - }); - }); - }, - selectSurvey(survey) { - this.$store.commit("fairwayprofile/setSelectedMorph", survey); - this.surveyList = null; - }, clearSelection() { - this.$store.commit("identifystore/setIdentifiedFeatures", []); - this.$store.commit("fairwayprofile/setSelectedMorph", null); - this.$store.commit("fairwayprofile/clearCurrentProfile"); + this.$store.dispatch("bottlenecks/setSelectedBottleneck", null); this.$store.commit("application/closeSplitScreen"); - this.surveyList = null; if (this.drawMode) { this.$store.commit("application/toggleDrawModeLine"); }
--- a/client/src/store/bottlenecks.js Fri Nov 02 14:51:14 2018 +0100 +++ b/client/src/store/bottlenecks.js Mon Nov 05 13:12:33 2018 +0100 @@ -14,18 +14,39 @@ */ import { HTTP } from "../application/lib/http"; import { WFS } from "ol/format.js"; +import { displayError } from "../application/lib/errors.js"; const Bottlenecks = { namespaced: true, state: { - bottlenecks: [] + bottlenecks: [], + selectedBottleneck: null, + surveys: [], + selectedSurvey: null }, mutations: { setBottlenecks: (state, bottlenecks) => { state.bottlenecks = bottlenecks; + }, + setSelectedBottleneck: (state, name) => { + state.selectedBottleneck = name; + }, + setSurveys(state, surveys) { + state.surveys = surveys; + }, + setSelectedSurvey(state, survey) { + state.selectedSurvey = survey; } }, actions: { + setSelectedBottleneck({ state, commit, dispatch }, name) { + if (name !== state.selectedBottleneck) { + commit("setSelectedSurvey", null); + commit("fairwayprofile/clearCurrentProfile", null, { root: true }); + } + commit("setSelectedBottleneck", name); + dispatch("querySurveys", name); + }, loadBottlenecks({ commit }) { var bottleneckFeatureCollectionRequest = new WFS().writeGetFeature({ srsName: "EPSG:4326", @@ -49,6 +70,29 @@ ).then(response => { commit("setBottlenecks", response.data.features); }); + }, + querySurveys({ commit }, name) { + if (name) { + HTTP.get("/surveys/" + name, { + headers: { + "X-Gemma-Auth": localStorage.getItem("token"), + "Content-type": "text/xml; charset=UTF-8" + } + }) + .then(response => { + commit("setSurveys", response.data.surveys); + }) + .catch(error => { + commit("setSurveys", []); + const { status, data } = error.response; + displayError({ + title: "Backend Error", + message: `${status}: ${data.message || data}` + }); + }); + } else { + commit("setSurveys", []); + } } } };
--- a/client/src/store/fairway.js Fri Nov 02 14:51:14 2018 +0100 +++ b/client/src/store/fairway.js Mon Nov 05 13:12:33 2018 +0100 @@ -25,7 +25,6 @@ namespaced: true, state: { additionalSurvey: "", - availableSurveys: null, totalLength: 0, minAlt: 0, maxAlt: 0, @@ -34,8 +33,7 @@ selectedWaterLevel: DEMOLEVEL, fairwayCoordinates: [], startPoint: null, - endPoint: null, - selectedMorph: null + endPoint: null }, getters: { length: state => { @@ -49,12 +47,6 @@ setAdditionalSurvey: (state, additionalSurvey) => { state.additionalSurvey = additionalSurvey; }, - setSelectedMorph: (state, selectedMorph) => { - state.selectedMorph = selectedMorph; - }, - setAvailableSurveys: (state, surveys) => { - state.availableSurveys = surveys; - }, setSelectedWaterLevel: (state, level) => { state.selectedWaterLevel = level; }, @@ -101,13 +93,13 @@ } }, actions: { - loadProfile({ commit, state }, date_info) { + loadProfile({ commit, state }, survey) { return new Promise((resolve, reject) => { const profileLine = new LineString([state.startPoint, state.endPoint]); const geoJSON = generateFeatureRequest( profileLine, - state.selectedMorph.bottleneck_id, - date_info + survey.bottleneck_id, + survey.date_info ); HTTP.post("/cross", geoJSON, { headers: { "X-Gemma-Auth": localStorage.getItem("token") } @@ -115,7 +107,7 @@ .then(response => { commit("profileLoaded", { response: response, - surveyDate: date_info + surveyDate: survey.date_info }); resolve(response); })