Mercurial > gemma
changeset 2952:a3017800e045
client: map legend: reduced code
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Fri, 05 Apr 2019 16:13:04 +0200 |
parents | 1ac58e024942 |
children | 3c1b9a6ee04e |
files | client/src/components/layers/Layers.vue client/src/components/layers/Layerselect.vue client/src/components/layers/LegendElement.vue |
diffstat | 3 files changed, 16 insertions(+), 28 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/layers/Layers.vue Fri Apr 05 15:59:52 2019 +0200 +++ b/client/src/components/layers/Layers.vue Fri Apr 05 16:13:04 2019 +0200 @@ -14,10 +14,9 @@ <div class="box-body small"> <Layerselect v-for="(layer, name) in layersForLegend" - :layerindex="name" - :layername="name" + :layer="layer" + :name="name" :key="name" - :isVisible="layer.data.getVisible()" ></Layerselect> </div> </div>
--- a/client/src/components/layers/Layerselect.vue Fri Apr 05 15:59:52 2019 +0200 +++ b/client/src/components/layers/Layerselect.vue Fri Apr 05 16:13:04 2019 +0200 @@ -1,22 +1,20 @@ <template> <div> - <div class="form-check d-flex flex-row flex-start selection"> + <div class="form-check d-flex flex-start"> <input class="form-check-input" @change="visibilityToggled" - :id="layername" + :id="name" type="checkbox" - :checked="isVisible" + :checked="layer.data.getVisible()" /> - <LegendElement - :layername="layername" - :layerindex="layerindex" - ></LegendElement> + <LegendElement :name="name"></LegendElement> <label - class="pointer layername form-check-label" + class="pointer layername form-check-label ml-2" @click="visibilityToggled" - >{{ layername }}</label > + {{ name }} + </label> </div> <div v-if="isVisible && isBottleneckIsolineLayer"> <img class="rounded my-1 d-block" :src="isolinesLegendImgDataURL" /> @@ -27,15 +25,6 @@ </div> </template> -<style lang="scss" scoped> -.selection { - text-align: left; -} -.layername { - margin-left: $small-offset; -} -</style> - <script> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. @@ -56,7 +45,7 @@ import { LAYERS } from "@/store/map.js"; export default { - props: ["layername", "layerindex", "isVisible"], + props: ["layer", "name"], name: "layerselect", components: { LegendElement: () => import("./LegendElement.vue") @@ -67,15 +56,15 @@ "differencesLegendImgDataURL" ]), isBottleneckIsolineLayer() { - return this.layername == LAYERS.BOTTLENECKISOLINE; + return this.name == LAYERS.BOTTLENECKISOLINE; }, isBottleneckDifferences() { - return this.layername == LAYERS.DIFFERENCES; + return this.name == LAYERS.DIFFERENCES; } }, methods: { visibilityToggled() { - this.$store.commit("map/toggleVisibilityByName", this.layername); + this.$store.commit("map/toggleVisibilityByName", this.name); } }, created() {
--- a/client/src/components/layers/LegendElement.vue Fri Apr 05 15:59:52 2019 +0200 +++ b/client/src/components/layers/LegendElement.vue Fri Apr 05 16:13:04 2019 +0200 @@ -27,7 +27,7 @@ export default { name: "legendelement", - props: ["layername", "layerindex"], + props: ["name"], data: function() { return { myMap: null, @@ -37,7 +37,7 @@ computed: { ...mapGetters("map", ["getLayerByName"]), id() { - return "legendelement" + this.layerindex; + return "legendelement-" + this.name; }, mstyle() { if (this.mapLayer && this.mapLayer.data.getStyle) { @@ -57,7 +57,7 @@ } }, mounted() { - this.mapLayer = this.getLayerByName(this.layername); + this.mapLayer = this.getLayerByName(this.name); if (this.mapLayer.data.getType() == "VECTOR") { this.initMap(); } else {