Mercurial > gemma

diff client/src/layers/Layers.vue @ 585:ef307bd6b5d8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refac: restructured client application To make the application more accessible for developers, the structure was reorganized. Instead of sticking to technical terminology, the application terminology is according to the domain: I.e. "map" contains everything regarding map (including store).
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 07 Sep 2018 11:13:56 +0200
parents
children d4fa28bfa6ec
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/layers/Layers.vue	Fri Sep 07 11:13:56 2018 +0200
@@ -0,0 +1,41 @@
+<template>
+  <div class="ui-element card layerselection shadow">
+    <div class="card-body">
+      <div class="headline">
+        <h4 class="card-title">Layers</h4>
+      </div>
+      <hr>
+      <div class="d-flex flex-column">
+        <Layerselect :layerindex="index" :layername="layer.name" v-for="(layer, index) in layers" :key="layer.name" :isVisible="layer.isVisible" @visibilityToggled="visibilityToggled"></Layerselect>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import "../application/assets/application.scss";
+
+.layerselection {
+  background-color: white;
+  margin-left: 0.5rem;
+}
+</style>
+
+<script>
+import Layerselect from "./Layerselect";
+import { mapGetters } from "vuex";
+export default {
+  name: "layers",
+  components: {
+    Layerselect
+  },
+  computed: {
+    ...mapGetters("mapstore", ["layers"])
+  },
+  methods: {
+    visibilityToggled(layer) {
+      this.$store.commit("mapstore/toggleVisibility", layer);
+    }
+  }
+};
+</script>