Mercurial > gemma
changeset 4271:315474a66589
Map: refreshing layers triggers reloading of styles
| author | Thomas Junk <thomas.junk@intevation.de> |
|---|---|
| date | Wed, 28 Aug 2019 11:06:47 +0200 |
| parents | e4d6c6339cb4 |
| children | dd8ec623b969 |
| files | client/src/components/layers/Layers.vue client/src/components/map/Map.vue client/src/store/map.js |
| diffstat | 3 files changed, 128 insertions(+), 104 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/layers/Layers.vue Tue Aug 27 17:07:16 2019 +0200 +++ b/client/src/components/layers/Layers.vue Wed Aug 28 11:06:47 2019 +0200 @@ -86,8 +86,12 @@ this.$store.commit("application/showLayers", false); }, refreshLayers() { + this.$store.commit("map/startRefreshLayers"); this.$store.commit("gauges/deleteNashSutcliffeCache"); this.$store.dispatch("map/refreshLayers"); + this.$nextTick(() => { + this.$store.commit("map/finishRefreshLayers"); + }); } } };
--- a/client/src/components/map/Map.vue Tue Aug 27 17:07:16 2019 +0200 +++ b/client/src/components/map/Map.vue Wed Aug 28 11:06:47 2019 +0200 @@ -59,7 +59,13 @@ }; }, computed: { - ...mapState("map", ["initialLoad", "extent", "syncedMaps", "syncedView"]), + ...mapState("map", [ + "initialLoad", + "extent", + "syncedMaps", + "syncedView", + "ongoingRefresh" + ]), ...mapState("bottlenecks", ["selectedSurvey"]), ...mapState("fairwayprofile", ["additionalSurvey"]), ...mapState("application", ["paneSetup", "paneRotate", "config"]), @@ -82,6 +88,10 @@ } }, watch: { + ongoingRefresh() { + if (this.ongoingRefresh) return; + this.loadStyles(); + }, paneSetup() { this.$nextTick(() => this.map.updateSize()); }, @@ -243,6 +253,110 @@ }); this.$store.dispatch("map/openLayersMap", this.map); this.$store.dispatch("map/initIdentifyTool", this.map); + }, + loadStyles() { + // load configured bottleneck colors + HTTP.get("/system/settings", { + headers: { "X-Gemma-Auth": localStorage.getItem("token") } + }) + .then(response => { + let btlnStrokeC = response.data.bottlenecks_stroke, + btlnFillC = response.data.bottlenecks_fill, + strFillC = response.data.stretches_fill, + strStrokeC = response.data.stretches_stroke, + secStrokeC = response.data.sections_stroke, + secFillC = response.data.sections_fill, + fwd1StrokeC = response.data.fairwaydimensionslos1_stroke, + fwd1FillC = response.data.fairwaydimensionslos1_fill, + fwd2StrokeC = response.data.fairwaydimensionslos2_stroke, + fwd2FillC = response.data.fairwaydimensionslos2_fill, + fwd3StrokeC = response.data.fairwaydimensionslos3_stroke, + fwd3FillC = response.data.fairwaydimensionslos3_fill, + wwpStokeC = response.data.waterwayprofiles_stroke; + let btlnStyle = new Style({ + stroke: new Stroke({ + color: btlnStrokeC, + width: 4 + }), + fill: new Fill({ + color: btlnFillC + }) + }), + strStyle = new Style({ + stroke: new Stroke({ + color: strStrokeC, + width: 2 + }), + fill: new Fill({ + color: strFillC + }) + }), + secStyle = new Style({ + stroke: new Stroke({ + color: secStrokeC, + width: 5 + }), + fill: new Fill({ + color: secFillC + }) + }), + fwd1Style = new Style({ + stroke: new Stroke({ + lineDash: [2, 4], + lineCap: "round", + color: fwd1StrokeC, + width: 2 + }), + fill: new Fill({ + color: fwd1FillC + }) + }), + fwd2Style = new Style({ + stroke: new Stroke({ + lineDash: [3, 6], + lineCap: "round", + color: fwd2StrokeC, + width: 2 + }), + fill: new Fill({ + color: fwd2FillC + }) + }), + fwd3Style = new Style({ + stroke: new Stroke({ + color: fwd3StrokeC, + width: 2 + }), + fill: new Fill({ + color: fwd3FillC + }) + }), + wwpStyle = new Style({ + stroke: new Stroke({ + color: wwpStokeC, + lineDash: [5, 5], + width: 2 + }) + }); + this.layers.get("WATERWAYPROFILES").setStyle(wwpStyle); + this.layers + .get("FAIRWAYDIMENSIONSLOS1") + .setStyle(() => [fwd1Style, styles.textFW1]); + this.layers + .get("FAIRWAYDIMENSIONSLOS2") + .setStyle(() => [fwd2Style, styles.textFW2]); + this.layers + .get("FAIRWAYDIMENSIONSLOS3") + .setStyle(() => [fwd3Style, styles.textFW3]); + this.layers.get("SECTIONS").setStyle(secStyle); + this.layers.get("STRETCHES").setStyle(strStyle); + this.layers.get("BOTTLENECKS").setStyle(btlnStyle); + this.$store.commit("gauges/deleteNashSutcliffeCache"); + this.$store.dispatch("map/refreshLayers"); + }) + .catch(error => { + console.log(error); + }); } }, mounted() { @@ -271,108 +385,7 @@ this.additionalSurvey.date_info ); } - // load configured bottleneck colors - HTTP.get("/system/settings", { - headers: { "X-Gemma-Auth": localStorage.getItem("token") } - }) - .then(response => { - let btlnStrokeC = response.data.bottlenecks_stroke, - btlnFillC = response.data.bottlenecks_fill, - strFillC = response.data.stretches_fill, - strStrokeC = response.data.stretches_stroke, - secStrokeC = response.data.sections_stroke, - secFillC = response.data.sections_fill, - fwd1StrokeC = response.data.fairwaydimensionslos1_stroke, - fwd1FillC = response.data.fairwaydimensionslos1_fill, - fwd2StrokeC = response.data.fairwaydimensionslos2_stroke, - fwd2FillC = response.data.fairwaydimensionslos2_fill, - fwd3StrokeC = response.data.fairwaydimensionslos3_stroke, - fwd3FillC = response.data.fairwaydimensionslos3_fill, - wwpStokeC = response.data.waterwayprofiles_stroke; - let btlnStyle = new Style({ - stroke: new Stroke({ - color: btlnStrokeC, - width: 4 - }), - fill: new Fill({ - color: btlnFillC - }) - }), - strStyle = new Style({ - stroke: new Stroke({ - color: strStrokeC, - width: 2 - }), - fill: new Fill({ - color: strFillC - }) - }), - secStyle = new Style({ - stroke: new Stroke({ - color: secStrokeC, - width: 5 - }), - fill: new Fill({ - color: secFillC - }) - }), - fwd1Style = new Style({ - stroke: new Stroke({ - lineDash: [2, 4], - lineCap: "round", - color: fwd1StrokeC, - width: 2 - }), - fill: new Fill({ - color: fwd1FillC - }) - }), - fwd2Style = new Style({ - stroke: new Stroke({ - lineDash: [3, 6], - lineCap: "round", - color: fwd2StrokeC, - width: 2 - }), - fill: new Fill({ - color: fwd2FillC - }) - }), - fwd3Style = new Style({ - stroke: new Stroke({ - color: fwd3StrokeC, - width: 2 - }), - fill: new Fill({ - color: fwd3FillC - }) - }), - wwpStyle = new Style({ - stroke: new Stroke({ - color: wwpStokeC, - lineDash: [5, 5], - width: 2 - }) - }); - this.layers.get("WATERWAYPROFILES").setStyle(wwpStyle); - this.layers - .get("FAIRWAYDIMENSIONSLOS1") - .setStyle(() => [fwd1Style, styles.textFW1]); - this.layers - .get("FAIRWAYDIMENSIONSLOS2") - .setStyle(() => [fwd2Style, styles.textFW2]); - this.layers - .get("FAIRWAYDIMENSIONSLOS3") - .setStyle(() => [fwd3Style, styles.textFW3]); - this.layers.get("SECTIONS").setStyle(secStyle); - this.layers.get("STRETCHES").setStyle(strStyle); - this.layers.get("BOTTLENECKS").setStyle(btlnStyle); - this.$store.commit("gauges/deleteNashSutcliffeCache"); - this.$store.dispatch("map/refreshLayers"); - }) - .catch(error => { - console.log(error); - }); + this.loadStyles(); }) .catch(error => { const { status, data } = error.response;
--- a/client/src/store/map.js Tue Aug 27 17:07:16 2019 +0200 +++ b/client/src/store/map.js Wed Aug 28 11:06:47 2019 +0200 @@ -48,7 +48,8 @@ polygonToolEnabled: false, cutToolEnabled: false, isolinesLegendImgDataURL: "", - differencesLegendImgDataURL: "" + differencesLegendImgDataURL: "", + ongoingRefresh: false }; }; @@ -67,6 +68,12 @@ } }, mutations: { + startRefreshLayers: state => { + state.ongoingRefresh = true; + }, + finishRefreshLayers: state => { + state.ongoingRefresh = false; + }, initialLoad: (state, initialLoad) => { state.initialLoad = initialLoad; },