diff client/src/components/layers/Layers.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 a3017800e045
children 44493664d40e
line wrap: on
line diff
--- a/client/src/components/layers/Layers.vue	Mon Apr 08 14:53:09 2019 +0200
+++ b/client/src/components/layers/Layers.vue	Mon Apr 08 15:32:53 2019 +0200
@@ -12,12 +12,22 @@
         :closeCallback="close"
       />
       <div class="box-body small">
-        <Layerselect
-          v-for="(layer, name) in layersForLegend"
-          :layer="layer"
-          :name="name"
-          :key="name"
-        ></Layerselect>
+        <Layerselect :layer="layers.OPENSTREETMAP" />
+        <Layerselect :layer="layers.INLANDECDIS" />
+        <Layerselect :layer="layers.WATERWAYAREA" />
+        <Layerselect :layer="layers.STRETCHES" />
+        <Layerselect :layer="layers.FAIRWAYDIMENSIONSLOS3" />
+        <Layerselect :layer="layers.FAIRWAYDIMENSIONSLOS2" />
+        <Layerselect :layer="layers.FAIRWAYDIMENSIONSLOS1" />
+        <Layerselect :layer="layers.WATERWAYAXIS" />
+        <Layerselect :layer="layers.WATERWAYPROFILES" />
+        <Layerselect :layer="layers.BOTTLENECKS" />
+        <Layerselect :layer="layers.BOTTLENECKISOLINE" />
+        <Layerselect :layer="layers.DIFFERENCES" />
+        <Layerselect :layer="layers.BOTTLENECKSTATUS" />
+        <Layerselect :layer="layers.DISTANCEMARKS" />
+        <Layerselect :layer="layers.DISTANCEMARKSAXIS" />
+        <Layerselect :layer="layers.GAUGES" />
       </div>
     </div>
   </div>
@@ -39,10 +49,8 @@
  * Markus Kottländer <markus.kottlaender@intevation.de>
  */
 import { mapState } from "vuex";
-import { LAYERS } from "@/store/map.js";
 
 export default {
-  name: "layers",
   components: {
     Layerselect: () => import("./Layerselect")
   },
@@ -51,35 +59,12 @@
     ...mapState("application", ["showLayers"]),
     layersLabel() {
       return this.$gettext("Layers");
-    },
-    layersForLegend() {
-      let orderedLayers = {};
-      this.$options.LAYOUT.forEach(el => (orderedLayers[el] = this.layers[el]));
-      return orderedLayers;
     }
   },
   methods: {
     close() {
       this.$store.commit("application/showLayers", false);
     }
-  },
-  LAYOUT: [
-    LAYERS.OPENSTREETMAP,
-    LAYERS.INLANDECDIS,
-    LAYERS.WATERWAYAREA,
-    LAYERS.STRETCHES,
-    LAYERS.FAIRWAYDIMENSIONSLOS3,
-    LAYERS.FAIRWAYDIMENSIONSLOS2,
-    LAYERS.FAIRWAYDIMENSIONSLOS1,
-    LAYERS.WATERWAYAXIS,
-    LAYERS.WATERWAYPROFILES,
-    LAYERS.BOTTLENECKS,
-    LAYERS.BOTTLENECKISOLINE,
-    LAYERS.DIFFERENCES,
-    LAYERS.BOTTLENECKSTATUS,
-    LAYERS.DISTANCEMARKS,
-    LAYERS.DISTANCEMARKSAXIS,
-    LAYERS.GAUGES
-  ]
+  }
 };
 </script>