Mercurial > gemma
changeset 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 | edfafea4b7b0 |
children | fbe2f1aa2757 |
files | client/src/components/identify/Identify.vue client/src/components/map/styles.js client/src/lib/classifications.js client/src/main.js |
diffstat | 4 files changed, 53 insertions(+), 7 deletions(-) [+] |
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(
--- a/client/src/components/map/styles.js Tue Aug 27 10:56:32 2019 +0200 +++ b/client/src/components/map/styles.js Tue Aug 27 11:46:51 2019 +0200 @@ -130,7 +130,14 @@ }; const styleFactory = function(mapId) { + const colorCodes = { + OK: "lime", + WARNING: "yellow", + DANGER: "red", + NEUTRAL: "white" + }; return { + colorCodes: colorCodes, stretches(feature) { let style = styles.yellow2; if (feature.get("highlighted")) { @@ -273,7 +280,8 @@ map.getLayer("BOTTLENECKS").getVisible() && feature.getId().indexOf("bottlenecks") > -1 ) { - let colorUniformTriangle = classifications.surveyCurrency(feature); + let colorUniformTriangle = + colorCodes[classifications.surveyCurrency(feature)]; let frame = `<polyline points='16,0 32,28 0,28 16,0' stroke='grey' stroke-width='1' fill='${colorUniformTriangle}'/>`; let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='28'><g>${frame}</g></svg>`; s.push(
--- a/client/src/lib/classifications.js Tue Aug 27 10:56:32 2019 +0200 +++ b/client/src/lib/classifications.js Tue Aug 27 11:46:51 2019 +0200 @@ -27,10 +27,10 @@ bottleneck.get("revisiting_time") === null || bottleneck.get("revisiting_time") === 0 ) { - return "white"; + return "NEUTRAL"; } if (bottleneck.get("date_max") === null) { - return "red"; + return "DANGER"; } let revTime = bottleneck.get("revisiting_time") * 30.5; let latest = Date.parse(bottleneck.get("date_max").replace("Z", "")); @@ -38,11 +38,11 @@ let revTimeMultiplier = store.state.application.config.bn_revtime_multiplier; if (diff <= revTime) { - return "lime"; + return "OK"; } else if (revTime < diff && diff <= revTime * revTimeMultiplier) { - return "yellow"; + return "WARNING"; } else if (revTime * revTimeMultiplier < diff) { - return "red"; + return "DANGER"; } }, gmAvailability(feature) {
--- a/client/src/main.js Tue Aug 27 10:56:32 2019 +0200 +++ b/client/src/main.js Tue Aug 27 11:46:51 2019 +0200 @@ -52,6 +52,7 @@ faAngleDoubleRight, faBars, faBook, + faCaretUp, faChartArea, faChartBar, faChartLine, @@ -122,6 +123,7 @@ faAngleDoubleRight, faBars, faBook, + faCaretUp, faChartArea, faChartBar, faChartLine,