Mercurial > gemma
comparison client/src/components/identify/Identify.vue @ 2371:045bac575294
client: fixed broken previous commit
I forgot to add/remove files.... gnarf sry.
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 21 Feb 2019 15:22:10 +0100 |
parents | |
children | 20e4efa64320 |
comparison
equal
deleted
inserted
replaced
2370:7fe2f5d334dc | 2371:045bac575294 |
---|---|
1 <template> | |
2 <div | |
3 :class="[ | |
4 'box ui-element rounded bg-white text-nowrap', | |
5 { expanded: showIdentify } | |
6 ]" | |
7 > | |
8 <div style="width: 18rem"> | |
9 <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> | |
10 <font-awesome-icon icon="info" class="mr-2"></font-awesome-icon> | |
11 <translate>Identified</translate> | |
12 <font-awesome-icon | |
13 icon="times" | |
14 class="ml-auto text-muted" | |
15 @click="$store.commit('application/showIdentify', false)" | |
16 ></font-awesome-icon> | |
17 </h6> | |
18 <div class="features flex-grow-1 text-left"> | |
19 <div v-if="currentMeasurement"> | |
20 <small class="d-block bg-dark text-light text-center px-2 py-1"> | |
21 {{ $gettext("Measurement") }} | |
22 </small> | |
23 <small class="d-flex justify-content-between px-2"> | |
24 <b> | |
25 {{ currentMeasurement.quantity }} | |
26 </b> | |
27 {{ currentMeasurement.value }} {{ currentMeasurement.unitSymbol }} | |
28 </small> | |
29 </div> | |
30 <div | |
31 v-for="feature of filteredIdentifiedFeatures" | |
32 :key="feature.getId()" | |
33 > | |
34 <small class="d-block bg-dark text-light text-center px-2 py-1"> | |
35 {{ $gettext(featureLabel(feature)) }} | |
36 </small> | |
37 <small | |
38 v-for="prop in featureProps(feature)" | |
39 :key="prop.key" | |
40 v-if="prop.val" | |
41 class="d-flex justify-content-between px-2" | |
42 > | |
43 <b>{{ $gettext(prop.key) }}</b> | |
44 {{ prop.val }} | |
45 </small> | |
46 </div> | |
47 <div | |
48 v-if="!currentMeasurement && !filteredIdentifiedFeatures.length" | |
49 class="text-muted small text-center my-auto py-3 px-2" | |
50 > | |
51 <translate>No features identified.</translate> | |
52 </div> | |
53 </div> | |
54 <div class="versioninfo border-top p-3 text-left"> | |
55 <span v-translate="{ license: 'AGPL-3.0-or-later' }"> | |
56 This app uses <i>gemma</i>, which is Free Software under <br /> | |
57 %{ license } without warranty, see docs for details. | |
58 </span> | |
59 <br /> | |
60 <a href="https://hg.intevation.de/gemma/file/tip"> | |
61 <translate>source-code</translate> | |
62 </a> | |
63 {{ versionStr }} <br />© via donau. ⓔ Intevation. <br /> | |
64 <span v-translate="{ name: 'OpenSteetMap' }" | |
65 >Some data © | |
66 <a href="https://www.openstreetmap.org/copyright">%{ name }</a> | |
67 contributors. | |
68 </span> | |
69 <br /> | |
70 <span v-translate="{ geoLicense: 'CC-BY-4.0' }"> | |
71 Uses | |
72 <a href="https://download.geonames.org/export/dump/readme.txt" | |
73 >GeoNames</a | |
74 > | |
75 under %{ geoLicense }. | |
76 </span> | |
77 <translate>Generated PDFs use font: </translate> | |
78 <a href="http://libertine-fonts.org">LinBiolinum</a> | |
79 </div> | |
80 </div> | |
81 </div> | |
82 </template> | |
83 | |
84 <style lang="scss" scoped> | |
85 .features { | |
86 max-height: 19rem; | |
87 overflow-y: auto; | |
88 small:nth-child(even) { | |
89 background: #f2f2f2; | |
90 } | |
91 } | |
92 | |
93 .versioninfo { | |
94 font-size: 60%; | |
95 white-space: normal; | |
96 } | |
97 </style> | |
98 | |
99 <script> | |
100 /* This is Free Software under GNU Affero General Public License v >= 3.0 | |
101 * without warranty, see README.md and license for details. | |
102 * | |
103 * SPDX-License-Identifier: AGPL-3.0-or-later | |
104 * License-Filename: LICENSES/AGPL-3.0.txt | |
105 * | |
106 * Copyright (C) 2018, 2019 by via donau | |
107 * – Österreichische Wasserstraßen-Gesellschaft mbH | |
108 * Software engineering by Intevation GmbH | |
109 * | |
110 * Author(s): | |
111 * Thomas Junk <thomas.junk@intevation.de> | |
112 * Bernhard E. Reiter <bernhard.reiter@intevation.de> | |
113 * Markus Kottländer <markus.kottlaender@intevation.de> | |
114 */ | |
115 import { mapState, mapGetters } from "vuex"; | |
116 import { formatter } from "./formatter"; | |
117 | |
118 export default { | |
119 name: "identify", | |
120 computed: { | |
121 ...mapGetters("application", ["versionStr"]), | |
122 ...mapState("application", ["showIdentify"]), | |
123 ...mapGetters("map", ["filteredIdentifiedFeatures"]), | |
124 ...mapState("map", ["currentMeasurement"]) | |
125 }, | |
126 methods: { | |
127 featureId(feature) { | |
128 // cut away everything from the last . to the end | |
129 return feature.getId().replace(/[.][^.]*$/, ""); | |
130 }, | |
131 featureLabel(feature) { | |
132 if (formatter.hasOwnProperty(this.featureId(feature))) { | |
133 return formatter[this.featureId(feature)].label; | |
134 } | |
135 return this.featureId(feature); | |
136 }, | |
137 featureProps(feature) { | |
138 // create array with {key, val} objects | |
139 let propsArray = []; | |
140 Object.keys(feature.getProperties()).forEach(key => { | |
141 // avoid cyclic object value | |
142 if (key !== feature.getGeometryName()) | |
143 propsArray.push({ key, val: feature.getProperties()[key] }); | |
144 }); | |
145 | |
146 // change labels and remove unneeded properties | |
147 if (formatter.hasOwnProperty(this.featureId(feature))) { | |
148 propsArray = propsArray | |
149 .map(formatter[this.featureId(feature)].props) | |
150 .filter(p => p); // remove empty entries | |
151 } | |
152 | |
153 // remove underscores in labels that where not previously changed already | |
154 propsArray = propsArray.map(prop => { | |
155 return { key: prop.key.replace(/_/g, " "), val: prop.val }; | |
156 }); | |
157 | |
158 return propsArray; | |
159 } | |
160 } | |
161 }; | |
162 </script> |