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

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
comparison
equal deleted inserted replaced
584:8b66a10aaf8a 585:ef307bd6b5d8
1 <template>
2 <div class="ui-element card layerselection shadow">
3 <div class="card-body">
4 <div class="headline">
5 <h4 class="card-title">Layers</h4>
6 </div>
7 <hr>
8 <div class="d-flex flex-column">
9 <Layerselect :layerindex="index" :layername="layer.name" v-for="(layer, index) in layers" :key="layer.name" :isVisible="layer.isVisible" @visibilityToggled="visibilityToggled"></Layerselect>
10 </div>
11 </div>
12 </div>
13 </template>
14
15 <style lang="scss">
16 @import "../application/assets/application.scss";
17
18 .layerselection {
19 background-color: white;
20 margin-left: 0.5rem;
21 }
22 </style>
23
24 <script>
25 import Layerselect from "./Layerselect";
26 import { mapGetters } from "vuex";
27 export default {
28 name: "layers",
29 components: {
30 Layerselect
31 },
32 computed: {
33 ...mapGetters("mapstore", ["layers"])
34 },
35 methods: {
36 visibilityToggled(layer) {
37 this.$store.commit("mapstore/toggleVisibility", layer);
38 }
39 }
40 };
41 </script>