Mercurial > gemma
view client/src/components/systemconfiguration/DataAccuracy.vue @ 4231:6f31a99cd92d
clinet: fix translations process and update source strings
* move strings for translations from *.po files to the component itself to let gettext() mark only the strings without the html elements.
(make makemessages complains to have html elements in the .po files and stops the process).
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Wed, 21 Aug 2019 11:13:12 +0200 |
parents | 851c0ccba59b |
children | 30f26bf7ff24 |
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>Currency 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" class="form-control form-control-sm mx-1" style="width: 55px" v-model="config.gm_latest_hours" /> <translate>days.</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 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 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> </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>