Mercurial > gemma
comparison client/src/components/identify/Identify.vue @ 4265:2596a028dc3a
Feature_info: display partial legend information for bottlenecks
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 27 Aug 2019 11:46:51 +0200 |
parents | 57c38087fe18 |
children | fbe2f1aa2757 |
comparison
equal
deleted
inserted
replaced
4264:edfafea4b7b0 | 4265:2596a028dc3a |
---|---|
37 class="btn btn-info btn-xs pointer rounded-0 zoom-btn" | 37 class="btn btn-info btn-xs pointer rounded-0 zoom-btn" |
38 > | 38 > |
39 <font-awesome-icon icon="crosshairs" /> | 39 <font-awesome-icon icon="crosshairs" /> |
40 </a> | 40 </a> |
41 </small> | 41 </small> |
42 <div | |
43 v-if="showBottleneckMeta(feature)" | |
44 class="ml-2 mb-1 text-left d-flex" | |
45 > | |
46 <font-awesome-icon | |
47 icon="caret-up" | |
48 fixed-width | |
49 :style="{ color: currencyColor(feature), 'font-size': 'x-large' }" | |
50 /> | |
51 <small class="my-auto"> | |
52 {{ currency(feature) }} | |
53 </small> | |
54 </div> | |
42 <small | 55 <small |
43 v-for="prop in featureProps(feature)" | 56 v-for="prop in featureProps(feature)" |
44 :key="prop.key" | 57 :key="prop.key" |
45 v-if="prop.val" | 58 v-if="prop.val" |
46 class="d-flex justify-content-between px-2" | 59 class="d-flex justify-content-between px-2" |
143 * Markus Kottländer <markus.kottlaender@intevation.de> | 156 * Markus Kottländer <markus.kottlaender@intevation.de> |
144 */ | 157 */ |
145 import { mapState, mapGetters } from "vuex"; | 158 import { mapState, mapGetters } from "vuex"; |
146 import { formatter } from "./formatter"; | 159 import { formatter } from "./formatter"; |
147 import { getCenter } from "ol/extent"; | 160 import { getCenter } from "ol/extent"; |
161 import classifications from "../../lib/classifications"; | |
162 import { styleFactory } from "@/components/map/styles"; | |
163 | |
164 const colorCodes = styleFactory().colorCodes; | |
148 | 165 |
149 export default { | 166 export default { |
150 name: "identify", | 167 name: "identify", |
151 computed: { | 168 computed: { |
152 ...mapGetters("application", ["versionStr"]), | 169 ...mapGetters("application", ["versionStr"]), |
153 ...mapState("application", ["showIdentify", "userManualUrl"]), | 170 ...mapState("application", ["showIdentify", "userManualUrl", "config"]), |
154 ...mapGetters("map", ["filteredIdentifiedFeatures"]), | 171 ...mapGetters("map", ["filteredIdentifiedFeatures"]), |
155 ...mapState("map", ["currentMeasurement"]), | 172 ...mapState("map", ["currentMeasurement"]), |
156 identifiedLabel() { | 173 identifiedLabel() { |
157 return this.$gettext("Identified Features"); | 174 return this.$gettext("Identified Features"); |
158 }, | 175 }, |
159 usermanualFilename() { | 176 usermanualFilename() { |
160 return this.$gettext("User Manual"); | 177 return this.$gettext("User Manual"); |
161 } | 178 } |
162 }, | 179 }, |
163 methods: { | 180 methods: { |
181 currency(feature) { | |
182 const revisitingFactor = this.config.bn_revtime_multiplier; | |
183 const messagesPerState = { | |
184 OK: this.$gettext("Data within the revisiting time"), | |
185 WARNING: | |
186 this.$gettext("Data within revisiting treshold ") + | |
187 `(${revisitingFactor})`, | |
188 DANGER: | |
189 this.$gettext("Data too old. Treshold: ") + `(${revisitingFactor})` | |
190 }; | |
191 return messagesPerState[classifications.surveyCurrency(feature)]; | |
192 }, | |
193 currencyColor(feature) { | |
194 return colorCodes[classifications.surveyCurrency(feature)]; | |
195 }, | |
196 showBottleneckMeta(feature) { | |
197 const result = /bottleneck/.test(feature.getId().toLowerCase()); | |
198 return result; | |
199 }, | |
164 zoomTo(feature) { | 200 zoomTo(feature) { |
165 this.$store.dispatch("map/moveMap", { | 201 this.$store.dispatch("map/moveMap", { |
166 coordinates: getCenter( | 202 coordinates: getCenter( |
167 feature | 203 feature |
168 .getGeometry() | 204 .getGeometry() |