Mercurial > gemma
annotate client/src/identify/Identify.vue @ 966:6114c512508b
refac: extracted indentify from layers
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 17 Oct 2018 15:47:38 +0200 |
parents | client/src/layers/Identify.vue@7bf089e32b2d |
children | 3da707172772 |
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"> |
966
6114c512508b
refac: extracted indentify from layers
Thomas Junk <thomas.junk@intevation.de>
parents:
953
diff
changeset
|
4 <div :class="infoStyle"> |
770
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> |
884
616418a6adde
fix: overflow behaviour of identify menu fixed
Thomas Junk <thomas.junk@intevation.de>
parents:
816
diff
changeset
|
14 <div class="d-flex flex-column features"> |
798
383fac3e5d1e
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
793
diff
changeset
|
15 <div v-for="feature of identifiedFeatures" :key="feature.getId()"> |
383fac3e5d1e
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
793
diff
changeset
|
16 <div v-if="feature.getId()"> |
383fac3e5d1e
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
793
diff
changeset
|
17 {{ feature.getId().replace(/[.][^.]*$/,"") /* cut away everything from the last . to the end */}}: |
383fac3e5d1e
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
793
diff
changeset
|
18 <small v-for="(value, key) in prepareProperties(feature)" :key="key"> |
383fac3e5d1e
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
793
diff
changeset
|
19 <div v-if="value">{{key}}:{{value}}</div> |
383fac3e5d1e
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
793
diff
changeset
|
20 </small> |
383fac3e5d1e
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
793
diff
changeset
|
21 </div> |
793
073394629ec6
client: add measurement and improve identify
Bernhard Reiter <bernhard@intevation.de>
parents:
785
diff
changeset
|
22 </div> |
770
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
23 </div> |
806
5ef542130865
client: add info section
Bernhard Reiter <bernhard@intevation.de>
parents:
798
diff
changeset
|
24 <div class="versioninfo"> |
966
6114c512508b
refac: extracted indentify from layers
Thomas Junk <thomas.junk@intevation.de>
parents:
953
diff
changeset
|
25 <hr /> |
6114c512508b
refac: extracted indentify from layers
Thomas Junk <thomas.junk@intevation.de>
parents:
953
diff
changeset
|
26 gemma <a href="https://hg.intevation.de/gemma/file/tip">source-code</a> {{ version }} |
6114c512508b
refac: extracted indentify from layers
Thomas Junk <thomas.junk@intevation.de>
parents:
953
diff
changeset
|
27 <br /> |
6114c512508b
refac: extracted indentify from layers
Thomas Junk <thomas.junk@intevation.de>
parents:
953
diff
changeset
|
28 Some data © |
884
616418a6adde
fix: overflow behaviour of identify menu fixed
Thomas Junk <thomas.junk@intevation.de>
parents:
816
diff
changeset
|
29 <a href="https://www.openstreetmap.org/copyright">OpenSteetMap</a> contributors |
806
5ef542130865
client: add info section
Bernhard Reiter <bernhard@intevation.de>
parents:
798
diff
changeset
|
30 |
5ef542130865
client: add info section
Bernhard Reiter <bernhard@intevation.de>
parents:
798
diff
changeset
|
31 </div> |
770
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
32 </div> |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
33 </div> |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
34 </div> |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
35 </template> |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
36 |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
37 <style lang="scss"> |
884
616418a6adde
fix: overflow behaviour of identify menu fixed
Thomas Junk <thomas.junk@intevation.de>
parents:
816
diff
changeset
|
38 .features { |
911
86278692c30c
UI: Identify Tool, nicer dynamic height.
Sascha Wilde <wilde@intevation.de>
parents:
908
diff
changeset
|
39 max-height: $identify-height; |
891
074ce4891466
fix: selection of profile data only when not in draw mode
Thomas Junk <thomas.junk@intevation.de>
parents:
884
diff
changeset
|
40 overflow-y: auto; |
884
616418a6adde
fix: overflow behaviour of identify menu fixed
Thomas Junk <thomas.junk@intevation.de>
parents:
816
diff
changeset
|
41 margin-bottom: $x-large-offset + $large-offset; |
616418a6adde
fix: overflow behaviour of identify menu fixed
Thomas Junk <thomas.junk@intevation.de>
parents:
816
diff
changeset
|
42 } |
806
5ef542130865
client: add info section
Bernhard Reiter <bernhard@intevation.de>
parents:
798
diff
changeset
|
43 .versioninfo { |
816
cd79f62794dd
client: prepare survey selection
Bernhard Reiter <bernhard@intevation.de>
parents:
806
diff
changeset
|
44 font-size: 60%; |
884
616418a6adde
fix: overflow behaviour of identify menu fixed
Thomas Junk <thomas.junk@intevation.de>
parents:
816
diff
changeset
|
45 position: absolute; |
616418a6adde
fix: overflow behaviour of identify menu fixed
Thomas Junk <thomas.junk@intevation.de>
parents:
816
diff
changeset
|
46 bottom: $large-offset; |
806
5ef542130865
client: add info section
Bernhard Reiter <bernhard@intevation.de>
parents:
798
diff
changeset
|
47 } |
770
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
48 .identifymenu { |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
49 position: relative; |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
50 margin-right: $offset; |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
51 } |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
52 .identify { |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
53 background-color: white; |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
54 margin-left: $small-offset; |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
55 opacity: $slight-transparent; |
798
383fac3e5d1e
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
793
diff
changeset
|
56 text-align: left; |
770
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
57 } |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
58 |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
59 .identifycollapsed { |
884
616418a6adde
fix: overflow behaviour of identify menu fixed
Thomas Junk <thomas.junk@intevation.de>
parents:
816
diff
changeset
|
60 min-height: $icon-height; |
770
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
61 width: $icon-width; |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
62 transition: $transition-fast; |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
63 } |
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 .identifyexpanded { |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
66 width: $identify-width; |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
67 } |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
68 |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
69 .minimizer { |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
70 position: absolute; |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
71 z-index: 2; |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
72 right: 0; |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
73 margin-top: $x-small-offset; |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
74 border-radius: $border-radius; |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
75 height: $icon-width; |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
76 width: $icon-height; |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
77 } |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
78 </style> |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
79 |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
80 <script> |
782
cb6dc630c702
client: improve identify code
Bernhard Reiter <bernhard@intevation.de>
parents:
771
diff
changeset
|
81 import { mapState } from "vuex"; |
966
6114c512508b
refac: extracted indentify from layers
Thomas Junk <thomas.junk@intevation.de>
parents:
953
diff
changeset
|
82 import { version } from "../../package.json"; |
770
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 export default { |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
85 name: "identify", |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
86 data() { |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
87 return { |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
88 collapsed: true |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
89 }; |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
90 }, |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
91 computed: { |
785
1d8ccdb532de
client: remove code warning (minor)
Bernhard Reiter <bernhard@intevation.de>
parents:
782
diff
changeset
|
92 ...mapState("mapstore", ["identifiedFeatures"]), |
770
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
93 identifyStyle() { |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
94 return { |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
95 "ui-element": true, |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
96 card: true, |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
97 identify: true, |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
98 shadow: true, |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
99 identifyexpanded: !this.collapsed, |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
100 identifycollapsed: this.collapsed |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
101 }; |
941
8a80ef09a62c
client: improve identify
Bernhard Reiter <bernhard@intevation.de>
parents:
911
diff
changeset
|
102 }, |
8a80ef09a62c
client: improve identify
Bernhard Reiter <bernhard@intevation.de>
parents:
911
diff
changeset
|
103 infoStyle() { |
8a80ef09a62c
client: improve identify
Bernhard Reiter <bernhard@intevation.de>
parents:
911
diff
changeset
|
104 return { |
8a80ef09a62c
client: improve identify
Bernhard Reiter <bernhard@intevation.de>
parents:
911
diff
changeset
|
105 info: true, |
8a80ef09a62c
client: improve identify
Bernhard Reiter <bernhard@intevation.de>
parents:
911
diff
changeset
|
106 "text-info": |
8a80ef09a62c
client: improve identify
Bernhard Reiter <bernhard@intevation.de>
parents:
911
diff
changeset
|
107 this.identifiedFeatures && this.identifiedFeatures.length > 0 |
8a80ef09a62c
client: improve identify
Bernhard Reiter <bernhard@intevation.de>
parents:
911
diff
changeset
|
108 }; |
953
7bf089e32b2d
display version number from package.json in info panel
Markus Kottlaender <markus@intevation.de>
parents:
941
diff
changeset
|
109 }, |
7bf089e32b2d
display version number from package.json in info panel
Markus Kottlaender <markus@intevation.de>
parents:
941
diff
changeset
|
110 version() { |
7bf089e32b2d
display version number from package.json in info panel
Markus Kottlaender <markus@intevation.de>
parents:
941
diff
changeset
|
111 return version; // version number from package.json |
966
6114c512508b
refac: extracted indentify from layers
Thomas Junk <thomas.junk@intevation.de>
parents:
953
diff
changeset
|
112 } |
770
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
113 }, |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
114 methods: { |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
115 collapse() { |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
116 this.collapsed = !this.collapsed; |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
117 }, |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
118 prepareProperties(feature) { |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
119 // 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
|
120 var properties = feature.getProperties(); |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
121 delete properties[feature.getGeometryName()]; |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
122 return properties; |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
123 } |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
124 } |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
125 }; |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff
changeset
|
126 </script> |