# HG changeset patch # User Markus Kottlaender # Date 1541491925 -3600 # Node ID 6d4cc4389c8fbd222c6502801e44fcf367f105e4 # Parent 7e788814cbde8875e3ea2e4ef8b2505e402cfd8a# Parent ef7c102497b870a4be9edf8862b4d533ae18901b merged default into store-refactoring diff -r ef7c102497b8 -r 6d4cc4389c8f client/src/application/Main.vue --- a/client/src/application/Main.vue Tue Nov 06 07:30:49 2018 +0100 +++ b/client/src/application/Main.vue Tue Nov 06 09:12:05 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() { diff -r ef7c102497b8 -r 6d4cc4389c8f client/src/application/Topbar.vue --- a/client/src/application/Topbar.vue Tue Nov 06 07:30:49 2018 +0100 +++ b/client/src/application/Topbar.vue Tue Nov 06 09:12:05 2018 +0100 @@ -140,7 +140,7 @@ }; }, computed: { - ...mapState("mapstore", ["openLayersMap"]), + ...mapState("map", ["openLayersMap"]), ...mapState("fairwayprofile", ["currentProfile"]), searchIndicator: function() { if (this.isSearching) { diff -r ef7c102497b8 -r 6d4cc4389c8f client/src/bottlenecks/Bottlenecks.vue --- a/client/src/bottlenecks/Bottlenecks.vue Tue Nov 06 07:30:49 2018 +0100 +++ b/client/src/bottlenecks/Bottlenecks.vue Tue Nov 06 09:12:05 2018 +0100 @@ -30,18 +30,18 @@
- {{ displayCurrentSurvey(bottleneck) }} + {{ displayCurrentSurvey(bottleneck.properties.current) }}
- {{ displayCurrentChainage(bottleneck) }} + {{ displayCurrentChainage(bottleneck.properties.from, bottleneck.properties.from) }}
-
-
- +
+ {{ survey.date_info }}
@@ -77,14 +77,14 @@ search: "", sortColumn: "name", sortDirection: "ASC", - selectedBottleneck: null, - surveys: {} + openBottleneck: null, + openBottleneckSurveys: null }; }, computed: { ...mapState("application", ["bottlenecksCollapsed"]), ...mapState("bottlenecks", ["bottlenecks"]), - ...mapState("mapstore", ["openLayersMap"]), + ...mapState("map", ["openLayersMap"]), ...mapGetters("application", ["sidebarCollapsed"]), bottlenecksStyle() { return { @@ -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 ); } }, diff -r ef7c102497b8 -r 6d4cc4389c8f client/src/fairway/Fairwayprofile.vue --- a/client/src/fairway/Fairwayprofile.vue Tue Nov 06 07:30:49 2018 +0100 +++ b/client/src/fairway/Fairwayprofile.vue Tue Nov 06 09:12:05 2018 +0100 @@ -8,6 +8,7 @@ @@ -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; diff -r ef7c102497b8 -r 6d4cc4389c8f client/src/identify/Identify.vue --- a/client/src/identify/Identify.vue Tue Nov 06 07:30:49 2018 +0100 +++ b/client/src/identify/Identify.vue Tue Nov 06 09:12:05 2018 +0100 @@ -109,7 +109,7 @@ }, computed: { ...mapGetters("application", ["versionStr"]), - ...mapState("identifystore", ["identifiedFeatures", "currentMeasurement"]), + ...mapState("map", ["identifiedFeatures", "currentMeasurement"]), identifyStyle() { return { "ui-element": true, diff -r ef7c102497b8 -r 6d4cc4389c8f client/src/layers/Layers.vue --- a/client/src/layers/Layers.vue Tue Nov 06 07:30:49 2018 +0100 +++ b/client/src/layers/Layers.vue Tue Nov 06 09:12:05 2018 +0100 @@ -80,7 +80,7 @@ Layerselect }, computed: { - ...mapGetters("mapstore", ["layers"]), + ...mapGetters("map", ["layers"]), layerSelectStyle() { return { "ui-element": true, @@ -97,7 +97,7 @@ this.collapsed = !this.collapsed; }, visibilityToggled(layer) { - this.$store.commit("mapstore/toggleVisibility", layer); + this.$store.commit("map/toggleVisibility", layer); } } }; diff -r ef7c102497b8 -r 6d4cc4389c8f client/src/layers/LegendElement.vue --- a/client/src/layers/LegendElement.vue Tue Nov 06 07:30:49 2018 +0100 +++ b/client/src/layers/LegendElement.vue Tue Nov 06 09:12:05 2018 +0100 @@ -37,7 +37,7 @@ }; }, computed: { - ...mapGetters("mapstore", ["getLayerByName"]), + ...mapGetters("map", ["getLayerByName"]), id() { return "legendelement" + this.layerindex; }, diff -r ef7c102497b8 -r 6d4cc4389c8f client/src/linetool/Linetool.vue --- a/client/src/linetool/Linetool.vue Tue Nov 06 07:30:49 2018 +0100 +++ b/client/src/linetool/Linetool.vue Tue Nov 06 09:12:05 2018 +0100 @@ -1,5 +1,5 @@ @@ -44,24 +44,23 @@ export default { name: "linetool", methods: { - drawLine() { - if (!this.selectedMorph && this.drawMode === "LineString") { - this.$store.commit("application/activateDrawModePolygon"); + cycleDrawMode() { + if (!this.selectedSurvey && this.drawMode === "LineString") { + this.$store.commit("map/activateDrawModePolygon"); } else { - this.$store.commit("application/toggleDrawModeLine"); + this.$store.commit("map/toggleDrawModeLine"); } } }, computed: { - ...mapState("application", ["drawMode"]), - ...mapState("identifystore", ["identifiedFeatures"]), - ...mapState("fairwayprofile", ["selectedMorph"]), + ...mapState("map", ["identifiedFeatures", "drawMode"]), + ...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 }; } diff -r ef7c102497b8 -r 6d4cc4389c8f client/src/map/Maplayer.vue --- a/client/src/map/Maplayer.vue Tue Nov 06 07:30:49 2018 +0100 +++ b/client/src/map/Maplayer.vue Tue Nov 06 09:12:05 2018 +0100 @@ -71,10 +71,9 @@ }; }, computed: { - ...mapGetters("mapstore", ["layers", "getLayerByName"]), - ...mapState("application", ["drawMode"]), - ...mapState("mapstore", ["openLayersMap"]), - ...mapState("fairwayprofile", ["selectedMorph"]), + ...mapGetters("map", ["layers", "getLayerByName"]), + ...mapState("map", ["openLayersMap", "drawMode"]), + ...mapState("bottlenecks", ["selectedSurvey"]), mapStyle() { return { mapfull: !this.split, @@ -124,7 +123,7 @@ return styles; }, removeCurrentInteraction() { - this.$store.commit("identifystore/setCurrentMeasurement", null); + this.$store.commit("map/setCurrentMeasurement", null); this.vectorSource.clear(); this.openLayersMap.removeInteraction(this.interaction); this.interaction = null; @@ -138,7 +137,7 @@ }); draw.on("drawstart", () => { this.vectorSource.clear(); - this.$store.commit("identifystore/setCurrentMeasurement", null); + this.$store.commit("map/setCurrentMeasurement", null); // we are not setting an id here, to avoid the regular identify to // pick it up // event.feature.setId("drawn.1"); // unique id for new feature @@ -152,14 +151,14 @@ // also place the a rounded areaSize in a property, // so identify will show it if (areaSize > 100000) { - this.$store.commit("identifystore/setCurrentMeasurement", { + this.$store.commit("map/setCurrentMeasurement", { quantity: "Area", unitSymbol: "km²", // convert into 1 km² == 1000*1000 m² and round to 1000 m² value: Math.round(areaSize / 1000) / 1000 }); } else { - this.$store.commit("identifystore/setCurrentMeasurement", { + this.$store.commit("map/setCurrentMeasurement", { quantity: "Area", unitSymbol: "m²", value: Math.round(areaSize) @@ -168,7 +167,7 @@ } if (this.drawMode === "LineString") { const length = getLength(event.feature.getGeometry()); - this.$store.commit("identifystore/setCurrentMeasurement", { + this.$store.commit("map/setCurrentMeasurement", { quantity: "Length", unitSymbol: "m", value: Math.round(length * 10) / 10 @@ -178,9 +177,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 +189,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" @@ -242,10 +241,21 @@ this.openLayersMap.addInteraction(interaction); }, identify(coordinate, pixel) { - this.$store.commit("identifystore/setIdentifiedFeatures", []); + this.$store.commit("map/setIdentifiedFeatures", []); // checking our WFS layers var features = this.openLayersMap.getFeaturesAtPixel(pixel); - this.$store.commit("identifystore/setIdentifiedFeatures", features); + if (features) { + this.$store.commit("map/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 +394,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"); @@ -411,7 +421,7 @@ projection: this.projection }) }); - this.$store.commit("mapstore/setOpenLayersMap", map); + this.$store.commit("map/setOpenLayersMap", map); // TODO make display of layers more dynamic, e.g. from a list diff -r ef7c102497b8 -r 6d4cc4389c8f client/src/morphtool/Morphtool.vue --- a/client/src/morphtool/Morphtool.vue Tue Nov 06 07:30:49 2018 +0100 +++ b/client/src/morphtool/Morphtool.vue Tue Nov 06 09:12:05 2018 +0100 @@ -1,36 +1,34 @@