annotate client/src/components/Layerselect.vue @ 531:9c036b32c852

refac: Layer selection componentized POC from 22cca659e40b splitted into a layerselection component and iterative rendering. Now more vuelike.
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 28 Aug 2018 12:53:56 +0200
parents
children 505656a9947f
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
531
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
1 <template>
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
2 <div class="d-flex">
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
3 <label :for="layername">{{this.layername}}</label>
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
4 <input @change="visibilityToggled"
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
5 :id="layername"
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
6 type="checkbox"
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
7 :checked="isVisible">
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
8 </div>
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
9 </template>
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
10
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
11 <style lang="sass">
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
12
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
13 </style>
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
14
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
15
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
16 <script>
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
17 export default {
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
18 props: ["layername", "layerindex", "isVisible"],
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
19 name: "layerselect",
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
20 methods: {
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
21 visibilityToggled() {
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
22 this.$emit("visibilityToggled", this.layerindex);
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
23 }
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
24 }
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
25 };
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
26 </script>