Mercurial > gemma

comparison client/src/components/identify/Identify.vue @ 4436:a66275cf4490

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 9842812b92e0
children 04bdc1f444bc
comparison
equal deleted inserted replaced
4435:033685fe1355 4436:a66275cf4490
39 <font-awesome-icon icon="crosshairs" /> 39 <font-awesome-icon icon="crosshairs" />
40 </a> 40 </a>
41 </small> 41 </small>
42 <div 42 <div
43 v-if="showBottleneckMeta(feature)" 43 v-if="showBottleneckMeta(feature)"
44 class="ml-2 mb-1 text-left d-flex flex-column" 44 class="ml-1 mb-1 text-left d-flex flex-column"
45 > 45 >
46 <div> 46 <div>
47 <font-awesome-icon 47 <font-awesome-icon
48 icon="caret-up" 48 icon="caret-up"
49 fixed-width 49 fixed-width
60 <small><translate>According gauge data:</translate></small> 60 <small><translate>According gauge data:</translate></small>
61 </div> 61 </div>
62 </div> 62 </div>
63 <div 63 <div
64 v-if="showGaugeMeta(feature)" 64 v-if="showGaugeMeta(feature)"
65 class="ml-2 mb-1 text-left d-flex flex-column" 65 class="ml-1 mb-1 text-left d-flex flex-column"
66 > 66 >
67 <div class="d-flex"> 67 <div class="d-flex">
68 <div class="d-flex flex-column"> 68 <div class="d-flex flex-column">
69 <font-awesome-icon 69 <font-awesome-icon
70 icon="caret-up" 70 icon="caret-up"
85 position: 'relative', 85 position: 'relative',
86 top: '-0.45em' 86 top: '-0.45em'
87 }" 87 }"
88 /> 88 />
89 </div> 89 </div>
90 <small class="my-auto"> 90 <div class="d-flex flex-column">
91 {{ gmAvailability(feature) }} 91 <small
92 </small> 92 v-for="(line, index) in gmAvailability(feature)"
93 class="bg-white my-auto text-wrap"
94 :key="index"
95 >
96 {{ line }}
97 </small>
98 </div>
93 </div> 99 </div>
94 <div> 100 <div>
95 <font-awesome-icon 101 <font-awesome-icon
96 icon="caret-up" 102 icon="caret-up"
97 fixed-width 103 fixed-width
224 * Markus Kottländer <markus.kottlaender@intevation.de> 230 * Markus Kottländer <markus.kottlaender@intevation.de>
225 */ 231 */
226 import { mapState, mapGetters } from "vuex"; 232 import { mapState, mapGetters } from "vuex";
227 import { formatter } from "./formatter"; 233 import { formatter } from "./formatter";
228 import { getCenter } from "ol/extent"; 234 import { getCenter } from "ol/extent";
229 import classifications from "../../lib/classifications"; 235 import classifications from "@/lib/classifications";
230 import { styleFactory } from "@/components/map/styles"; 236 import { styleFactory } from "@/components/map/styles";
237 import filters from "@/lib/filters";
231 238
232 const { 239 const {
233 recencyColorCodes, 240 recencyColorCodes,
234 gmAvailabilityColorCodes, 241 gmAvailabilityColorCodes,
235 forecastAccuracyColorCodes, 242 forecastAccuracyColorCodes,
362 return this.gaugeStatusColor; 369 return this.gaugeStatusColor;
363 }, 370 },
364 gmAvailability(feature) { 371 gmAvailability(feature) {
365 const latestInHours = this.config.gm_latest_hours; 372 const latestInHours = this.config.gm_latest_hours;
366 const measurementsIn14D = this.config.gm_min_values_14d; 373 const measurementsIn14D = this.config.gm_min_values_14d;
374 const gauge = classifications.getGauge(feature);
375 const lastMeasureDate = filters.surveyDate(gauge.get("gm_measuredate"));
376 const in14Days = gauge.get("gm_n_14d");
367 const messagesPerState = { 377 const messagesPerState = {
368 OK: 378 OK: [
369 this.$gettext("Avail: Last measurement <") + 379 this.$gettext("Avail: Last measurement from") + `${lastMeasureDate}`,
370 ` ${latestInHours} (${measurementsIn14D} in 14d)`, 380 this.$gettext("Measurement is within") + ` ${latestInHours}h`,
371 WARNING: 381 `${in14Days} / ${measurementsIn14D} ${this.$gettext(
372 this.$gettext("Avail: Below treshold") + 382 "measurements"
373 `: ${measurementsIn14D} in 14d`, 383 )} in 14d`
374 DANGER: 384 ],
385 WARNING: [
386 this.$gettext("Avail: Below treshold"),
387 `${in14Days} / ${measurementsIn14D} ${this.$gettext(
388 "measurements"
389 )} in 14d`
390 ],
391 DANGER: [
375 this.$gettext("Avail: Latest measurement older than") + 392 this.$gettext("Avail: Latest measurement older than") +
376 ` ${latestInHours} d` 393 ` ${latestInHours} d`,
394 `(${lastMeasureDate})`
395 ]
377 }; 396 };
378 return messagesPerState[[classifications.gmAvailability(feature)]]; 397 let result = classifications.gmAvailability(feature);
398 result = "OK";
399 return messagesPerState[result];
379 }, 400 },
380 gmAvailabilityColor(feature) { 401 gmAvailabilityColor(feature) {
381 return gmAvailabilityColorCodes[classifications.gmAvailability(feature)]; 402 return gmAvailabilityColorCodes[classifications.gmAvailability(feature)];
382 }, 403 },
383 forecastAccuracy(feature) { 404 forecastAccuracy(feature) {