Mercurial > gemma
view client/src/components/systemconfiguration/DataAccuracy.vue @ 3597:d1bbfb9635ca
client: configuration: unified styles of different config components
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 04 Jun 2019 16:54:45 +0200 |
parents | d4ff8ea19f2c |
children | 2be2880ad654 |
line wrap: on
line source
<template> <div class="d-flex flex-column pb-4"> <h5 class="py-2 px-3 mb-2 m-0"> <translate>Data Availability/Accuracy</translate> </h5> <div class="px-3 container-fluid"> <div class="row"> <div class="col-sm-6"> <h6 class="font-weight-bold"> <translate>Currency of Bottleneck Surveys</translate> </h6> <div class="d-flex text-center small"> <div class="card rounded-left"> <div class="card-header text-white bg-success">OK</div> <div class="card-body d-flex align-items-center justify-content-center" > Last survey within revisiting time. </div> </div> <div class="card border-left-0 border-right-0 rounded-0"> <div class="card-header text-white bg-warning rounded-0"> Warning </div> <div class="card-body d-flex flex-column align-items-center justify-content-center" > <div>Last survey within revisiting time</div> <div> x <input type="number" step="0.1" min="1" class="form-control form-control-sm d-inline" style="width: 70px" v-model="bn_revtime_multiplier" /> </div> </div> </div> <div class="card rounded-right"> <div class="card-header text-white bg-danger">Critical</div> <div class="card-body d-flex align-items-center justify-content-center" > <div> Last survey older than revisiting time x <b>{{ Number(bn_revtime_multiplier).toLocaleString() }}</b> </div> </div> </div> </div> </div> <div class="col-sm-6"> <h6 class="font-weight-bold"> <translate>Availability of Gauge Measurements</translate> </h6> <div class="d-flex text-center small"> <div class="card rounded-left"> <div class="card-header text-white bg-success">OK</div> <div class="card-body d-flex align-items-center justify-content-center" > <div> Latest measurement not older than <b>{{ Number(gm_latest_hours).toLocaleString() }}</b> hours and at least <b>{{ Number(gm_min_values_14d).toLocaleString() }}</b> measurements in the last 14 days </div> </div> </div> <div class="card border-left-0 border-right-0 rounded-0"> <div class="card-header text-white bg-warning rounded-0"> Warning </div> <div class="card-body d-flex flex-column align-items-center justify-content-center" > <div>Minimum number of measurements in the last 14 days:</div> <div> <input type="number" step="1" min="1" class="form-control form-control-sm d-inline" style="width: 90px" v-model="gm_min_values_14d" /> </div> </div> </div> <div class="card rounded-right"> <div class="card-header text-white bg-danger">Critical</div> <div class="card-body d-flex flex-column align-items-center justify-content-center" > <div>Latest measurement older than</div> <div> <input type="number" step="1" min="1" class="form-control form-control-sm d-inline" style="width: 70px" v-model="gm_latest_hours" /> hours </div> </div> </div> </div> </div> <div class="col-sm-6"> <h6 class="font-weight-bold"> <translate>Gauge Forecast Confidence</translate> </h6> <div class="d-flex text-center small"> <div class="card rounded-left"> <div class="card-header text-white bg-success">OK</div> <div class="card-body d-flex align-items-center justify-content-center" > <div> Confidence offset within last 24 hours less than <b >{{ Number(gm_forecast_offset_24h).toLocaleString() }} cm</b > and within last 72 hours less than <b >{{ Number(gm_forecast_offset_72h).toLocaleString() }} cm</b > </div> </div> </div> <div class="card border-left-0 border-right-0 rounded-0"> <div class="card-header text-white bg-warning rounded-0"> Warning </div> <div class="card-body d-flex flex-column align-items-center justify-content-center" > <div>Confidence offset within last 24 hours greater than:</div> <div> <input type="number" step="1" min="1" class="form-control form-control-sm d-inline" style="width: 70px" v-model="gm_forecast_offset_24h" /> cm </div> </div> </div> <div class="card rounded-right"> <div class="card-header text-white bg-danger">Critical</div> <div class="card-body d-flex flex-column align-items-center justify-content-center" > <div>Confidence offset within last 72 hours greater than:</div> <div> <input type="number" step="1" min="1" class="form-control form-control-sm d-inline" style="width: 70px" v-model="gm_forecast_offset_72h" /> cm </div> </div> </div> </div> </div> <div class="col-sm-6"> <h6 class="font-weight-bold"> <translate>Gauge Forecast vs. Reality</translate> </h6> <div class="d-flex text-center small"> <div class="card rounded-left"> <div class="card-header text-white bg-success">OK</div> <div class="card-body d-flex align-items-center justify-content-center" > <div> Nash-Sutcliffe-Coefficient for last 24 hours greater than <b>{{ Number(gm_forecast_vs_reality_nsc_24h).toLocaleString() }}</b> and for last 72 hours greater than <b >{{ Number(gm_forecast_vs_reality_nsc_72h).toLocaleString() }} cm</b > </div> </div> </div> <div class="card border-left-0 border-right-0 rounded-0"> <div class="card-header text-white bg-warning rounded-0"> Warning </div> <div class="card-body d-flex flex-column align-items-center justify-content-center" > <div> Nash-Sutcliffe-Coefficient for last 24 hours less than: </div> <div> <input type="number" step="1" class="form-control form-control-sm d-inline" style="width: 70px" v-model="gm_forecast_vs_reality_nsc_24h" /> </div> </div> </div> <div class="card rounded-right"> <div class="card-header text-white bg-danger">Critical</div> <div class="card-body d-flex flex-column align-items-center justify-content-center" > <div> Nash-Sutcliffe-Coefficient for last 72 hours less than: </div> <div> <input type="number" step="1" class="form-control form-control-sm d-inline" style="width: 70px" v-model="gm_forecast_vs_reality_nsc_72h" /> </div> </div> </div> </div> </div> </div> </div> <div class="mt-4"> <a @click.prevent="submit" class="btn btn-info btn-sm text-white"> <translate>Send</translate> </a> </div> </div> </template> <style lang="sass" scoped> .card width: 33.333% .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 </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> */ export default { data() { return { bn_revtime_multiplier: 1.5, gm_min_values_14d: 1124, gm_latest_hours: 24, gm_forecast_offset_24h: 15, gm_forecast_offset_72h: 15, gm_forecast_vs_reality_nsc_24h: -12.5, gm_forecast_vs_reality_nsc_72h: -12.5 }; }, methods: { submit() { console.log(this.bottleneck_surveys_revtime_multiplier); } } }; </script>