Mercurial > gemma

comparison client/src/identify/Identify.vue @ 966:6114c512508b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
comparison
equal deleted inserted replaced
965:ac2e51d5bc40 966:6114c512508b
1 <template>
2 <div class="identifymenu">
3 <div @click="collapse" class="d-flex flex-column ui-element minimizer">
4 <div :class="infoStyle">
5 <i class="fa fa-info"></i>
6 </div>
7 </div>
8 <div :class="identifyStyle">
9 <div v-if="!collapsed" class="card-body">
10 <div class="headline">
11 <h4 class="card-title">Identified</h4>
12 </div>
13 <hr>
14 <div class="d-flex flex-column features">
15 <div v-for="feature of identifiedFeatures" :key="feature.getId()">
16 <div v-if="feature.getId()">
17 {{ feature.getId().replace(/[.][^.]*$/,"") /* cut away everything from the last . to the end */}}:
18 <small v-for="(value, key) in prepareProperties(feature)" :key="key">
19 <div v-if="value">{{key}}:{{value}}</div>
20 </small>
21 </div>
22 </div>
23 </div>
24 <div class="versioninfo">
25 <hr />
26 gemma <a href="https://hg.intevation.de/gemma/file/tip">source-code</a> {{ version }}
27 <br />
28 Some data ©
29 <a href="https://www.openstreetmap.org/copyright">OpenSteetMap</a> contributors
30
31 </div>
32 </div>
33 </div>
34 </div>
35 </template>
36
37 <style lang="scss">
38 .features {
39 max-height: $identify-height;
40 overflow-y: auto;
41 margin-bottom: $x-large-offset + $large-offset;
42 }
43 .versioninfo {
44 font-size: 60%;
45 position: absolute;
46 bottom: $large-offset;
47 }
48 .identifymenu {
49 position: relative;
50 margin-right: $offset;
51 }
52 .identify {
53 background-color: white;
54 margin-left: $small-offset;
55 opacity: $slight-transparent;
56 text-align: left;
57 }
58
59 .identifycollapsed {
60 min-height: $icon-height;
61 width: $icon-width;
62 transition: $transition-fast;
63 }
64
65 .identifyexpanded {
66 width: $identify-width;
67 }
68
69 .minimizer {
70 position: absolute;
71 z-index: 2;
72 right: 0;
73 margin-top: $x-small-offset;
74 border-radius: $border-radius;
75 height: $icon-width;
76 width: $icon-height;
77 }
78 </style>
79
80 <script>
81 import { mapState } from "vuex";
82 import { version } from "../../package.json";
83
84 export default {
85 name: "identify",
86 data() {
87 return {
88 collapsed: true
89 };
90 },
91 computed: {
92 ...mapState("mapstore", ["identifiedFeatures"]),
93 identifyStyle() {
94 return {
95 "ui-element": true,
96 card: true,
97 identify: true,
98 shadow: true,
99 identifyexpanded: !this.collapsed,
100 identifycollapsed: this.collapsed
101 };
102 },
103 infoStyle() {
104 return {
105 info: true,
106 "text-info":
107 this.identifiedFeatures && this.identifiedFeatures.length > 0
108 };
109 },
110 version() {
111 return version; // version number from package.json
112 }
113 },
114 methods: {
115 collapse() {
116 this.collapsed = !this.collapsed;
117 },
118 prepareProperties(feature) {
119 // return dict object with propertyname:plainvalue prepared for display
120 var properties = feature.getProperties();
121 delete properties[feature.getGeometryName()];
122 return properties;
123 }
124 }
125 };
126 </script>