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()