Mercurial > gemma
view client/src/components/systemconfiguration/DataAccuracy.vue @ 5259:680be197844d
Merged branch new-fwa.
author | Sascha Wilde <wilde@intevation.de> |
---|---|
date | Wed, 13 May 2020 11:28:34 +0200 |
parents | 41dd97f8c905 |
children | 84d01a536bec |
line wrap: on
line source
<template> <div class="d-flex flex-column py-4"> <div class="px-3 container-fluid"> <div class="row"> <div class="col-sm-6 d-flex flex-column"> <h6 class="font-weight-bold"> <translate>Recency of Bottleneck Surveys</translate> </h6> <div class="d-flex flex-grow-1 text-center small"> <div class="card rounded-left"> <div class="card-header">OK</div> <div class="card-body d-flex align-items-center justify-content-center" > <translate >The latest survey is within the revisiting time of the respective bottleneck.</translate > </div> </div> <div class="card border-left-0 border-right-0 rounded-0"> <div class="card-header rounded-0"> Warning </div> <div class="card-body d-flex flex-column align-items-center justify-content-center" > <div class="form-inline justify-content-center"> <translate>The latest survey is within</translate> <input type="number" step="0.1" min="1" class="form-control form-control-sm mx-1" style="width: 60px" v-model="config.bn_revtime_multiplier" /> <translate>times the revisiting time.</translate> </div> </div> </div> <div class="card rounded-right"> <div class="card-header">Critical</div> <div class="card-body d-flex align-items-center justify-content-center" > <span v-translate="{ multiplier: Number( config.bn_revtime_multiplier ).toLocaleString() }" >The latest survey is older than <b>%{multiplier}</b> times the revisiting time.</span > </div> </div> </div> </div> <div class="col-sm-6 d-flex flex-column"> <h6 class="font-weight-bold"> <translate>Availability of Gauge Measurements</translate> </h6> <div class="d-flex flex-grow-1 text-center small"> <div class="card rounded-left"> <div class="card-header">OK</div> <div class="card-body d-flex align-items-center justify-content-center" > <span v-translate="{ hours: Number(config.gm_latest_hours).toLocaleString(), values: Number(config.gm_min_values_14d).toLocaleString() }" >The latest measurement is not older than <b>%{hours}</b> hours and there are at least <b>%{values}</b> measurements in the last 14 days.</span > </div> </div> <div class="card border-left-0 border-right-0 rounded-0"> <div class="card-header rounded-0"> Warning </div> <div class="card-body d-flex flex-column align-items-center justify-content-center" > <div class="form-inline justify-content-center"> <translate>There are less than</translate> <input type="number" step="1" min="1" class="form-control form-control-sm mx-1" style="width: 70px" v-model="config.gm_min_values_14d" /> <translate>measurements in the last 14 days.</translate> </div> </div> </div> <div class="card rounded-right"> <div class="card-header">Critical</div> <div class="card-body d-flex flex-column align-items-center justify-content-center" > <div class="form-inline justify-content-center"> <translate>The latest measurement is older than</translate> <input type="number" step="1" min="1" max="336" class="form-control form-control-sm mx-1" style="width: 55px" v-model="config.gm_latest_hours" /> <translate>hours.</translate> </div> </div> </div> </div> </div> <div class="col-sm-6 d-flex flex-column"> <h6 class="font-weight-bold mt-3"> <translate>Gauge Forecast vs. Reality</translate> </h6> <div class="d-flex flex-grow-1 text-center small"> <div class="card rounded-left"> <div class="card-header">OK</div> <div class="card-body d-flex align-items-center justify-content-center" > <span v-translate="{ nsc24: Number( config.gm_forecast_vs_reality_nsc_24h ).toLocaleString(), nsc72: Number( config.gm_forecast_vs_reality_nsc_72h ).toLocaleString() }" >The Nash-Sutcliffe coefficient is greater than <b>%{nsc24}</b> for last 24 hours and greater than <b>%{nsc72}</b> for last 72 hours.</span > </div> </div> <div class="card border-left-0 border-right-0 rounded-0"> <div class="card-header rounded-0"> Warning </div> <div class="card-body d-flex flex-column align-items-center justify-content-center" > <div class="form-inline justify-content-center"> <translate >The Nash-Sutcliffe coefficient for last 72 hours is less than</translate > <input type="number" step="0.1" class="form-control form-control-sm mx-1" style="width: 70px" v-model="config.gm_forecast_vs_reality_nsc_72h" /> </div> </div> </div> <div class="card rounded-right"> <div class="card-header">Critical</div> <div class="card-body d-flex flex-column align-items-center justify-content-center" > <div class="form-inline justify-content-center"> <translate >The Nash-Sutcliffe coefficient for last 24 hours is less than</translate > <input type="number" step="0.1" class="form-control form-control-sm mx-1" style="width: 70px" v-model="config.gm_forecast_vs_reality_nsc_24h" /> </div> </div> </div> </div> </div> <div class="col-sm-6 d-flex flex-column"> <h6 class="font-weight-bold mt-3"> <translate>Gauge Forecast Confidence</translate> </h6> <div class="d-flex flex-grow-1 text-center small"> <div class="card rounded-left"> <div class="card-header">OK</div> <div class="card-body d-flex align-items-center justify-content-center" > <span v-translate="{ gm24: Number( config.gm_forecast_offset_24h ).toLocaleString(), gm72: Number(config.gm_forecast_offset_72h).toLocaleString() }" >The highest confidence value is less than <b>%{gm24} cm</b> within the last 24 hours and less than <b>%{gm72} cm</b> within last 72 hours.</span > </div> </div> <div class="card border-left-0 border-right-0 rounded-0"> <div class="card-header rounded-0"> Warning </div> <div class="card-body d-flex flex-column align-items-center justify-content-center" > <div class="form-inline justify-content-center"> <translate >The highest confidence value within the last 72 hours is greater than</translate > <input type="number" step="1" min="1" class="form-control form-control-sm mx-1" style="width: 55px" v-model="config.gm_forecast_offset_72h" /> cm. </div> </div> </div> <div class="card rounded-right"> <div class="card-header">Critical</div> <div class="card-body d-flex flex-column align-items-center justify-content-center" > <div class="form-inline justify-content-center"> <translate >The highest confidence value within the last 24 hours is greater than</translate > <input type="number" step="1" min="1" class="form-control form-control-sm mx-1" style="width: 55px" v-model="config.gm_forecast_offset_24h" /> cm. </div> </div> </div> </div> </div> </div> </div> <div class="px-3 mt-4"> <a @click.prevent="submit" class="btn btn-info btn-sm text-white"> <translate>Send</translate> </a> <a @click.prevent="reset" class="btn btn-outline-info btn-sm ml-2"> <translate>Reset to defaults</translate> </a> </div> </div> </template> <style lang="sass" scoped> .card width: 33.333% &:nth-child(1) > .card-header border-bottom: solid 2px #28a745 &:nth-child(2) > .card-header border-bottom: solid 2px #ffc107 &:nth-child(3) > .card-header border-bottom: solid 2px #dc3545 .rounded-left, .rounded-left .card-header border-top-right-radius: 0 border-bottom-right-radius: 0 .rounded-right, .rounded-right .card-header border-top-left-radius: 0 border-bottom-left-radius: 0 .card-header padding: 0.25rem .card-body padding: 0.5rem .form-control-sm height: 24px font-size: 12px </style> <script> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. * * SPDX-License-Identifier: AGPL-3.0-or-later * License-Filename: LICENSES/AGPL-3.0.txt * * Copyright (C) 2018 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * * Author(s): * Markus Kottländer <markus@intevation.de> */ import { mapState } from "vuex"; import defaults from "./defaults"; export default { computed: { ...mapState("application", ["config"]) }, methods: { reset() { this.config.bn_revtime_multiplier = defaults.bn_revtime_multiplier; this.config.gm_min_values_14d = defaults.gm_min_values_14d; this.config.gm_latest_hours = defaults.gm_latest_hours; this.config.gm_forecast_offset_24h = defaults.gm_forecast_offset_24h; this.config.gm_forecast_offset_72h = defaults.gm_forecast_offset_72h; this.config.gm_forecast_vs_reality_nsc_24h = defaults.gm_forecast_vs_reality_nsc_24h; this.config.gm_forecast_vs_reality_nsc_72h = defaults.gm_forecast_vs_reality_nsc_72h; }, submit() { this.$store.dispatch("application/saveConfig", { bn_revtime_multiplier: this.config.bn_revtime_multiplier, gm_latest_hours: this.config.gm_latest_hours, gm_min_values_14d: this.config.gm_min_values_14d, gm_forecast_offset_24h: this.config.gm_forecast_offset_24h, gm_forecast_offset_72h: this.config.gm_forecast_offset_72h, gm_forecast_vs_reality_nsc_24h: this.config .gm_forecast_vs_reality_nsc_24h, gm_forecast_vs_reality_nsc_72h: this.config .gm_forecast_vs_reality_nsc_72h }); } } }; </script>