Mercurial > gemma
diff client/src/components/layers/Layerselect.vue @ 2957:b74ebeb2bdc8
client: layers: improved structure of layer configuration
The object is now less cluttered, access to the layers is more direct, no need for helper methods
anymore.
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 08 Apr 2019 15:32:53 +0200 |
parents | 3c1b9a6ee04e |
children | 41cdff9b7f4a |
line wrap: on
line diff
--- a/client/src/components/layers/Layerselect.vue Mon Apr 08 14:53:09 2019 +0200 +++ b/client/src/components/layers/Layerselect.vue Mon Apr 08 15:32:53 2019 +0200 @@ -3,23 +3,22 @@ <div class="form-check d-flex flex-start"> <input class="form-check-input" + type="checkbox" @change="visibilityToggled" - :id="name" - type="checkbox" - :checked="layer.data.getVisible()" + :checked="layer.getVisible()" /> - <LegendElement :name="name"></LegendElement> + <LegendElement :layer="layer"></LegendElement> <label class="pointer layername form-check-label ml-2" @click="visibilityToggled" > - {{ name }} + {{ label }} </label> </div> - <div v-if="layer.data.getVisible() && isBottleneckIsolineLayer"> + <div v-if="layer.getVisible() && isBottleneckIsolineLayer"> <img class="rounded my-1 d-block" :src="isolinesLegendImgDataURL" /> </div> - <div v-if="layer.data.getVisible() && isBottleneckDifferences"> + <div v-if="layer.getVisible() && isBottleneckDifferences"> <img class="rounded my-1 d-block" :src="differencesLegendImgDataURL" /> </div> </div> @@ -42,29 +41,31 @@ */ import { HTTP } from "@/lib/http"; import { mapState } from "vuex"; -import { LAYERS } from "@/store/map.js"; export default { - props: ["layer", "name"], - name: "layerselect", + props: ["layer"], components: { LegendElement: () => import("./LegendElement.vue") }, computed: { ...mapState("map", [ + "layers", "isolinesLegendImgDataURL", "differencesLegendImgDataURL" ]), isBottleneckIsolineLayer() { - return this.name == LAYERS.BOTTLENECKISOLINE; + return this.layer == this.layers.BOTTLENECKISOLINE; }, isBottleneckDifferences() { - return this.name == LAYERS.DIFFERENCES; + return this.layer == this.layers.DIFFERENCES; + }, + label() { + return this.$gettext(this.layer.get("label")); } }, methods: { visibilityToggled() { - this.$store.commit("map/toggleVisibilityByName", this.name); + this.layer.setVisible(!this.layer.getVisible()); } }, created() {