# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1559650790 -7200
# Node ID a0964fd608ae73e7b24bfcf13bc755df23bcf817
# Parent  062dc9b54b86417c3078e8b4e697ad9ce7562bc9
client: configuration: prepared UI for data quality thresholds configuration

diff -r 062dc9b54b86 -r a0964fd608ae client/src/components/systemconfiguration/DataAccuracy.vue
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/systemconfiguration/DataAccuracy.vue	Tue Jun 04 14:19:50 2019 +0200
@@ -0,0 +1,291 @@
+<template>
+  <div class="d-flex flex-column mt-4 pt-4 border-top">
+    <div class="d-flex flex-row justify-content-between">
+      <h5><translate>Data Availability/Accuracy</translate></h5>
+    </div>
+    <div class="mt-1">
+      <h6 class="font-weight-bold">
+        <translate>Currency of Bottleneck Surveys</translate>
+      </h6>
+
+      <div class="d-flex text-center">
+        <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>
+
+      <h6 class="mt-4 font-weight-bold">
+        <translate>Availability of Gauge Measurements</translate>
+      </h6>
+
+      <div class="d-flex text-center">
+        <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>
+
+      <h6 class="mt-4 font-weight-bold">
+        <translate>Gauge Forecast Confidence</translate>
+      </h6>
+
+      <div class="d-flex text-center">
+        <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>
+
+      <h6 class="mt-4 font-weight-bold">
+        <translate>Gauge Forecast vs. Reality</translate>
+      </h6>
+
+      <div class="d-flex text-center">
+        <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 class="mt-4">
+        <a @click.prevent="submit" class="btn btn-info text-white">
+          <translate>Send</translate>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="sass" scoped>
+.card
+  width: 33%
+.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>