Mercurial > gemma
changeset 4436:a66275cf4490
identify: gm availability infotext improved. More 2 come
| author | Thomas Junk <thomas.junk@intevation.de> |
|---|---|
| date | Thu, 19 Sep 2019 12:50:49 +0200 |
| parents | 033685fe1355 |
| children | a075da82e875 |
| files | client/src/components/identify/Identify.vue client/src/lib/classifications.js |
| diffstat | 2 files changed, 37 insertions(+), 15 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/identify/Identify.vue Thu Sep 19 11:32:18 2019 +0200 +++ b/client/src/components/identify/Identify.vue Thu Sep 19 12:50:49 2019 +0200 @@ -41,7 +41,7 @@ </small> <div v-if="showBottleneckMeta(feature)" - class="ml-2 mb-1 text-left d-flex flex-column" + class="ml-1 mb-1 text-left d-flex flex-column" > <div> <font-awesome-icon @@ -62,7 +62,7 @@ </div> <div v-if="showGaugeMeta(feature)" - class="ml-2 mb-1 text-left d-flex flex-column" + class="ml-1 mb-1 text-left d-flex flex-column" > <div class="d-flex"> <div class="d-flex flex-column"> @@ -87,9 +87,15 @@ }" /> </div> - <small class="my-auto"> - {{ gmAvailability(feature) }} - </small> + <div class="d-flex flex-column"> + <small + v-for="(line, index) in gmAvailability(feature)" + class="bg-white my-auto text-wrap" + :key="index" + > + {{ line }} + </small> + </div> </div> <div> <font-awesome-icon @@ -226,8 +232,9 @@ import { mapState, mapGetters } from "vuex"; import { formatter } from "./formatter"; import { getCenter } from "ol/extent"; -import classifications from "../../lib/classifications"; +import classifications from "@/lib/classifications"; import { styleFactory } from "@/components/map/styles"; +import filters from "@/lib/filters"; const { recencyColorCodes, @@ -364,18 +371,32 @@ gmAvailability(feature) { const latestInHours = this.config.gm_latest_hours; const measurementsIn14D = this.config.gm_min_values_14d; + const gauge = classifications.getGauge(feature); + const lastMeasureDate = filters.surveyDate(gauge.get("gm_measuredate")); + const in14Days = gauge.get("gm_n_14d"); const messagesPerState = { - OK: - this.$gettext("Avail: Last measurement <") + - ` ${latestInHours} (${measurementsIn14D} in 14d)`, - WARNING: - this.$gettext("Avail: Below treshold") + - `: ${measurementsIn14D} in 14d`, - DANGER: + OK: [ + this.$gettext("Avail: Last measurement from") + `${lastMeasureDate}`, + this.$gettext("Measurement is within") + ` ${latestInHours}h`, + `${in14Days} / ${measurementsIn14D} ${this.$gettext( + "measurements" + )} in 14d` + ], + WARNING: [ + this.$gettext("Avail: Below treshold"), + `${in14Days} / ${measurementsIn14D} ${this.$gettext( + "measurements" + )} in 14d` + ], + DANGER: [ this.$gettext("Avail: Latest measurement older than") + - ` ${latestInHours} d` + ` ${latestInHours} d`, + `(${lastMeasureDate})` + ] }; - return messagesPerState[[classifications.gmAvailability(feature)]]; + let result = classifications.gmAvailability(feature); + result = "OK"; + return messagesPerState[result]; }, gmAvailabilityColor(feature) { return gmAvailabilityColorCodes[classifications.gmAvailability(feature)];