Mercurial > gemma
changeset 2960:41cdff9b7f4a
client: layer legend: removed unnecessary methods, added method for legend image loading and added error handling
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 08 Apr 2019 16:25:17 +0200 |
parents | 3fabb5dfb10e |
children | 5bc941d9ec43 |
files | client/src/components/layers/Layerselect.vue |
diffstat | 1 files changed, 39 insertions(+), 45 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/layers/Layerselect.vue Mon Apr 08 16:23:41 2019 +0200 +++ b/client/src/components/layers/Layerselect.vue Mon Apr 08 16:25:17 2019 +0200 @@ -15,10 +15,10 @@ {{ label }} </label> </div> - <div v-if="layer.getVisible() && isBottleneckIsolineLayer"> + <div v-if="layer.getVisible() && layer === layers.BOTTLENECKISOLINE"> <img class="rounded my-1 d-block" :src="isolinesLegendImgDataURL" /> </div> - <div v-if="layer.getVisible() && isBottleneckDifferences"> + <div v-if="layer.getVisible() && layer === layers.DIFFERENCES"> <img class="rounded my-1 d-block" :src="differencesLegendImgDataURL" /> </div> </div> @@ -40,12 +40,13 @@ * * Bernhard Reiter <bernhard.reiter@intevation.de> */ import { HTTP } from "@/lib/http"; +import { displayError } from "@/lib/errors"; import { mapState } from "vuex"; export default { props: ["layer"], components: { - LegendElement: () => import("./LegendElement.vue") + LegendElement: () => import("./LegendElement") }, computed: { ...mapState("map", [ @@ -53,12 +54,6 @@ "isolinesLegendImgDataURL", "differencesLegendImgDataURL" ]), - isBottleneckIsolineLayer() { - return this.layer == this.layers.BOTTLENECKISOLINE; - }, - isBottleneckDifferences() { - return this.layer == this.layers.DIFFERENCES; - }, label() { return this.$gettext(this.layer.get("label")); } @@ -66,46 +61,45 @@ methods: { visibilityToggled() { this.layer.setVisible(!this.layer.getVisible()); + }, + loadLegendImage(layer, storeTarget) { + HTTP.get( + `/internal/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=${layer}&legend_options=columns:4;fontAntiAliasing:true`, + { + headers: { + Accept: "image/png", + "X-Gemma-Auth": localStorage.getItem("token") + }, + responseType: "blob" + } + ) + .then(response => { + const reader = new FileReader(); + reader.onload = event => { + this.$store.commit("map/" + storeTarget, event.target.result); + }; + reader.readAsDataURL(response.data); + }) + .catch(error => { + displayError({ + title: this.$gettext("Backend Error"), + message: `${error.response.status}: ${error.response.statusText}` + }); + }); } }, created() { - // fetch legend image for bottleneck isolines - // directly read it as dataURL so it is reusable later - if (this.isBottleneckIsolineLayer) { - const src = - "/internal/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=sounding_results_contour_lines_geoserver&legend_options=columns:4;fontAntiAliasing:true"; - HTTP.get(src, { - headers: { - Accept: "image/png", - "X-Gemma-Auth": localStorage.getItem("token") - }, - responseType: "blob" - }).then(response => { - var that = this; - const reader = new FileReader(); - reader.onload = function() { - that.$store.commit("map/isolinesLegendImgDataURL", this.result); - }; - reader.readAsDataURL(response.data); - }); + if (this.layer === this.layers.BOTTLENECKISOLINE) { + this.loadLegendImage( + "sounding_results_contour_lines_geoserver", + "isolinesLegendImgDataURL" + ); } - if (this.isBottleneckDifferences) { - const src = - "/internal/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=sounding_differences&legend_options=columns:4;fontAntiAliasing:true"; - HTTP.get(src, { - headers: { - Accept: "image/png", - "X-Gemma-Auth": localStorage.getItem("token") - }, - responseType: "blob" - }).then(response => { - var that = this; - const reader = new FileReader(); - reader.onload = function() { - that.$store.commit("map/differencesLegendImgDataURL", this.result); - }; - reader.readAsDataURL(response.data); - }); + if (this.layer === this.layers.DIFFERENCES) { + this.loadLegendImage( + "sounding_differences", + "differencesLegendImgDataURL" + ); } } };