Mercurial > gemma
changeset 4293:dbd8d2416da7
Identify: Improve legend for gauges
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 30 Aug 2019 13:36:18 +0200 |
parents | 18a34d9b289c |
children | c8b18408cc55 |
files | client/src/components/identify/Identify.vue |
diffstat | 1 files changed, 48 insertions(+), 3 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/identify/Identify.vue Fri Aug 30 12:36:27 2019 +0200 +++ b/client/src/components/identify/Identify.vue Fri Aug 30 13:36:18 2019 +0200 @@ -59,6 +59,11 @@ <div> <small><translate>According gauge data:</translate></small> </div> + </div> + <div + v-if="showGaugeMeta(feature)" + class="ml-2 mb-1 text-left d-flex flex-column" + > <div> <font-awesome-icon icon="caret-up" @@ -77,12 +82,12 @@ icon="caret-up" fixed-width :style="{ - color: gaugeStatusColor, + color: getGaugeStatusColor(feature), 'font-size': 'x-large' }" /> <small class="my-auto"> - {{ gaugeStatusText }} + {{ getGaugeStatusText(feature) }} </small> </div> <div> @@ -221,6 +226,7 @@ name: "identify", data() { return { + refGaugeStatus: "", gaugeStatus: "" }; }, @@ -249,6 +255,20 @@ NEUTRAL: this.$gettext("Nash-Sutcliffe not available") }; return messagesPerState[this.gaugeStatus]; + }, + refGaugeStatusColor() { + return forecastVsRealityColorCodes[this.refGaugeStatus]; + }, + refGaugeStatusText() { + const nsc24 = this.config.gm_forecast_vs_reality_nsc_24h; + const nsc72 = this.config.gm_forecast_vs_reality_nsc_72h; + const messagesPerState = { + OK: this.$gettext("Nash-Sutcliffe") + `>${nsc24} /24h >${nsc72} / 72h`, + WARNING: this.$gettext("Nash-Sutcliffe") + ` < ${nsc72}`, + DANGER: this.$gettext("Nash-Sutcliffe") + ` < ${nsc24}`, + NEUTRAL: this.$gettext("Nash-Sutcliffe not available") + }; + return messagesPerState[this.refGaugeStatus]; } }, watch: { @@ -256,6 +276,19 @@ const bottlecks = this.filteredIdentifiedFeatures.filter(f => /bottleneck/.test(f.id_) ); + const gauges = this.filteredIdentifiedFeatures.filter(f => + /gauge/.test(f.id_) + ); + if (gauges.length > 0) { + const isrs = gauges[0].get("isrs_code"); + this.$store + .dispatch("gauges/getNashSutcliffeForISRS", isrs) + .then(response => { + this.gaugeStatus = classifications.calcForecastVsRealityForNSC( + response + ); + }); + } if (bottlecks.length > 0) { const gauge = this.gauges.find( g => g.properties.objname === bottlecks[0].get("gauge_objname") @@ -264,7 +297,7 @@ this.$store .dispatch("gauges/getNashSutcliffeForISRS", isrs) .then(response => { - this.gaugeStatus = classifications.calcForecastVsRealityForNSC( + this.refGaugeStatus = classifications.calcForecastVsRealityForNSC( response ); }); @@ -272,6 +305,14 @@ } }, methods: { + getGaugeStatusText(feature) { + if (/bottleneck/.test(feature.getId())) return this.refGaugeStatusText; + return this.gaugeStatusText; + }, + getGaugeStatusColor(feature) { + if (/bottleneck/.test(feature.getId())) return this.refGaugeStatusColor; + return this.gaugeStatusColor; + }, gmAvailability(feature) { const latestInHours = this.config.gm_latest_hours; const measurementsIn14D = this.config.gm_min_values_14d; @@ -327,6 +368,10 @@ const result = /bottleneck/.test(feature.getId().toLowerCase()); return result; }, + showGaugeMeta(feature) { + const result = /bottleneck|gauge/.test(feature.getId().toLowerCase()); + return result; + }, zoomTo(feature) { this.$store.dispatch("map/moveMap", { coordinates: getCenter(