Mercurial > gemma

annotate client/src/layers/Identify.vue @ 793:073394629ec6

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: add measurement and improve identify * Only display features that have an Id in the identify box, because during the drawmode, after the first click, there is an additional feature that has no Id. Probably this is the point. * Add setting an Id to the feature that is drawn, which makes it show up in the identify box. * Add code to add the length of the drawn line to the store and a rounded value to the feature property. This creates a simple measurement tool, if the feature box is shown.
author Bernhard Reiter <bernhard@intevation.de>
date Thu, 27 Sep 2018 10:02:39 +0200
parents 1d8ccdb532de
children 383fac3e5d1e
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
770
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
1 <template>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
2 <div class="identifymenu">
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
3 <div @click="collapse" class="d-flex flex-column ui-element minimizer">
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
4 <div>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
5 <i class="fa fa-info"></i>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
6 </div>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
7 </div>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
8 <div :class="identifyStyle">
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
9 <div v-if="!collapsed" class="card-body">
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
10 <div class="headline">
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
11 <h4 class="card-title">Identified</h4>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
12 </div>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
13 <hr>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
14 <div class="d-flex flex-column">
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
15 <div v-for="feature of identifiedFeatures" :key="feature.getId()">
793
073394629ec6 client: add measurement and improve identify
Bernhard Reiter <bernhard@intevation.de>
parents: 785
diff changeset
16 <div v-if="feature.getId()">
073394629ec6 client: add measurement and improve identify
Bernhard Reiter <bernhard@intevation.de>
parents: 785
diff changeset
17 {{ feature.getId().replace(/[.][^.]*$/,"") /* cut away everything from the last . to the end */}}:
073394629ec6 client: add measurement and improve identify
Bernhard Reiter <bernhard@intevation.de>
parents: 785
diff changeset
18 <small v-for="(value, key) in prepareProperties(feature)" :key="key">
073394629ec6 client: add measurement and improve identify
Bernhard Reiter <bernhard@intevation.de>
parents: 785
diff changeset
19 <div v-if="value">{{key}}:{{value}}</div>
073394629ec6 client: add measurement and improve identify
Bernhard Reiter <bernhard@intevation.de>
parents: 785
diff changeset
20 </small>
073394629ec6 client: add measurement and improve identify
Bernhard Reiter <bernhard@intevation.de>
parents: 785
diff changeset
21 </div>
770
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
22 </div>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
23 </div>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
24 </div>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
25 </div>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
26 </div>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
27 </template>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
28
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
29 <style lang="scss">
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
30 .identifymenu {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
31 position: relative;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
32 margin-right: $offset;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
33 }
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
34 .identify {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
35 background-color: white;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
36 margin-left: $small-offset;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
37 opacity: $slight-transparent;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
38 }
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
39
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
40 .identifycollapsed {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
41 height: $icon-height;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
42 width: $icon-width;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
43 transition: $transition-fast;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
44 }
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
45
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
46 .identifyexpanded {
771
6d214b3bed35 client: improve identify box' dynamic sizing
Bernhard Reiter <bernhard@intevation.de>
parents: 770
diff changeset
47 min-height: $identify-height;
770
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
48 width: $identify-width;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
49 }
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
50
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
51 .minimizer {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
52 position: absolute;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
53 z-index: 2;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
54 right: 0;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
55 margin-top: $x-small-offset;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
56 border-radius: $border-radius;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
57 height: $icon-width;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
58 width: $icon-height;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
59 }
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
60 </style>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
61
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
62 <script>
782
cb6dc630c702 client: improve identify code
Bernhard Reiter <bernhard@intevation.de>
parents: 771
diff changeset
63 import { mapState } from "vuex";
770
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
64
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
65 export default {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
66 name: "identify",
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
67 data() {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
68 return {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
69 collapsed: true
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
70 };
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
71 },
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
72 computed: {
785
1d8ccdb532de client: remove code warning (minor)
Bernhard Reiter <bernhard@intevation.de>
parents: 782
diff changeset
73 ...mapState("mapstore", ["identifiedFeatures"]),
770
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
74 identifyStyle() {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
75 return {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
76 "ui-element": true,
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
77 card: true,
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
78 identify: true,
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
79 shadow: true,
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
80 identifyexpanded: !this.collapsed,
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
81 identifycollapsed: this.collapsed
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
82 };
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
83 }
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
84 },
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
85 methods: {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
86 collapse() {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
87 this.collapsed = !this.collapsed;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
88 },
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
89 prepareProperties(feature) {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
90 // return dict object with propertyname:plainvalue prepared for display
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
91 var properties = feature.getProperties();
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
92 delete properties[feature.getGeometryName()];
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
93 return properties;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
94 }
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
95 }
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
96 };
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
97 </script>