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() {