Mercurial > gemma
diff 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 |
line wrap: on
line diff
--- a/client/src/components/identify/Identify.vue Tue Aug 27 10:56:32 2019 +0200 +++ b/client/src/components/identify/Identify.vue Tue Aug 27 11:46:51 2019 +0200 @@ -39,6 +39,19 @@ <font-awesome-icon icon="crosshairs" /> </a> </small> + <div + v-if="showBottleneckMeta(feature)" + class="ml-2 mb-1 text-left d-flex" + > + <font-awesome-icon + icon="caret-up" + fixed-width + :style="{ color: currencyColor(feature), 'font-size': 'x-large' }" + /> + <small class="my-auto"> + {{ currency(feature) }} + </small> + </div> <small v-for="prop in featureProps(feature)" :key="prop.key" @@ -145,12 +158,16 @@ import { mapState, mapGetters } from "vuex"; import { formatter } from "./formatter"; import { getCenter } from "ol/extent"; +import classifications from "../../lib/classifications"; +import { styleFactory } from "@/components/map/styles"; + +const colorCodes = styleFactory().colorCodes; export default { name: "identify", computed: { ...mapGetters("application", ["versionStr"]), - ...mapState("application", ["showIdentify", "userManualUrl"]), + ...mapState("application", ["showIdentify", "userManualUrl", "config"]), ...mapGetters("map", ["filteredIdentifiedFeatures"]), ...mapState("map", ["currentMeasurement"]), identifiedLabel() { @@ -161,6 +178,25 @@ } }, methods: { + currency(feature) { + const revisitingFactor = this.config.bn_revtime_multiplier; + const messagesPerState = { + OK: this.$gettext("Data within the revisiting time"), + WARNING: + this.$gettext("Data within revisiting treshold ") + + `(${revisitingFactor})`, + DANGER: + this.$gettext("Data too old. Treshold: ") + `(${revisitingFactor})` + }; + return messagesPerState[classifications.surveyCurrency(feature)]; + }, + currencyColor(feature) { + return colorCodes[classifications.surveyCurrency(feature)]; + }, + showBottleneckMeta(feature) { + const result = /bottleneck/.test(feature.getId().toLowerCase()); + return result; + }, zoomTo(feature) { this.$store.dispatch("map/moveMap", { coordinates: getCenter(