Mercurial > gemma

comparison client/src/components/identify/Identify.vue @ 2743:4063adda3095

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: identified box: moved bbox zoom button to feature headers and removed bbox from the feature's properties list
author Markus Kottlaender <markus@intevation.de>
date Wed, 20 Mar 2019 12:10:42 +0100
parents 3c2ac140ad30
children fb5deecb77f1
comparison
equal deleted inserted replaced
2742:dea556332c3a 2743:4063adda3095
21 </div> 21 </div>
22 <div 22 <div
23 v-for="feature of filteredIdentifiedFeatures" 23 v-for="feature of filteredIdentifiedFeatures"
24 :key="feature.getId()" 24 :key="feature.getId()"
25 > 25 >
26 <small class="d-block bg-dark text-light text-center px-2 py-1"> 26 <small
27 class="d-flex justify-content-between bg-dark text-light px-2 py-1"
28 >
27 {{ $gettext(featureLabel(feature)) }} 29 {{ $gettext(featureLabel(feature)) }}
30 <a
31 v-if="feature.getProperties().hasOwnProperty('bbox')"
32 @click="zoomTo(feature)"
33 class="btn btn-info btn-xs pointer rounded-0 zoom-btn"
34 >
35 <font-awesome-icon icon="crosshairs" />
36 </a>
28 </small> 37 </small>
29 <small 38 <small
30 v-for="prop in featureProps(feature)" 39 v-for="prop in featureProps(feature)"
31 :key="prop.key" 40 :key="prop.key"
32 v-if="prop.val" 41 v-if="prop.val"
33 class="d-flex justify-content-between px-2" 42 class="d-flex justify-content-between px-2"
34 > 43 >
35 <b>{{ $gettext(prop.key) }}</b> 44 <b>{{ $gettext(prop.key) }}</b>
36 <span v-if="prop.key != 'bbox'">{{ prop.val }}</span> 45 <span>{{ prop.val }}</span>
37 <a v-else @click="zoomTo(prop.val)" href="#"
38 ><translate>Zoom to</translate></a
39 >
40 </small> 46 </small>
41 </div> 47 </div>
42 <div 48 <div
43 v-if="!currentMeasurement && !filteredIdentifiedFeatures.length" 49 v-if="!currentMeasurement && !filteredIdentifiedFeatures.length"
44 class="text-muted small text-center my-auto py-3 px-2" 50 class="text-muted small text-center my-auto py-3 px-2"
79 <style lang="scss" scoped> 85 <style lang="scss" scoped>
80 .features { 86 .features {
81 max-height: 19rem; 87 max-height: 19rem;
82 overflow-y: auto; 88 overflow-y: auto;
83 small { 89 small {
90 .zoom-btn {
91 margin-top: -0.25rem;
92 margin-right: -0.5rem;
93 margin-bottom: -0.25rem;
94 svg {
95 vertical-align: middle;
96 }
97 }
84 &:nth-child(even) { 98 &:nth-child(even) {
85 background: #f8f8f8; 99 background: #f8f8f8;
86 } 100 }
87 &:hover { 101 &:hover {
88 background: #eeeeee; 102 background: #eeeeee;
123 ...mapState("application", ["showIdentify"]), 137 ...mapState("application", ["showIdentify"]),
124 ...mapGetters("map", ["filteredIdentifiedFeatures"]), 138 ...mapGetters("map", ["filteredIdentifiedFeatures"]),
125 ...mapState("map", ["currentMeasurement"]) 139 ...mapState("map", ["currentMeasurement"])
126 }, 140 },
127 methods: { 141 methods: {
128 zoomTo(val) { 142 zoomTo(feature) {
129 displayInfo({ 143 displayInfo({
130 message: 144 message:
131 "Coordinates:\n" + 145 "Coordinates:\n" +
132 JSON.stringify(val) 146 JSON.stringify(feature.getProperties().bbox)
133 .split(",") 147 .split(",")
134 .join("\n") 148 .join("\n")
135 }); 149 });
136 }, 150 },
137 close() { 151 close() {
170 } 184 }
171 }); 185 });
172 186
173 // change labels and remove unneeded properties 187 // change labels and remove unneeded properties
174 // for all features 188 // for all features
175 propsArray = propsArray.map(formatter.all); 189 propsArray = propsArray.map(formatter.all).filter(p => p);
176 // feature specific 190 // feature specific
177 if ( 191 if (
178 formatter.hasOwnProperty(featureId) && 192 formatter.hasOwnProperty(featureId) &&
179 formatter[featureId].hasOwnProperty("props") 193 formatter[featureId].hasOwnProperty("props")
180 ) { 194 ) {
181 propsArray = propsArray.map(formatter[featureId].props); 195 propsArray = propsArray.map(formatter[featureId].props).filter(p => p);
182 } 196 }
183 // remove empty entries
184 propsArray = propsArray.filter(p => p);
185 197
186 // remove underscores in labels that where not previously changed already 198 // remove underscores in labels that where not previously changed already
187 propsArray = propsArray.map(prop => { 199 propsArray = propsArray.map(prop => {
188 return { key: prop.key.replace(/_/g, " "), val: prop.val }; 200 return { key: prop.key.replace(/_/g, " "), val: prop.val };
189 }); 201 });