changeset 4279:30f26bf7ff24

Reordering of elements In order to improve user experience the configuration of avail, forceast vs. real and accuracy was changed in such a way, that it now mirrors the optics of the displayed triangle. The order in the identify tool was changed accordingly 1) avail 2) forcast vs. real 3) accuracy "Currency" was cleaned up to "recency"
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 29 Aug 2019 15:04:02 +0200
parents 1d4e588a61df
children 2f2dbd3ebaea
files client/src/components/identify/Identify.vue client/src/components/map/styles.js client/src/components/systemconfiguration/DataAccuracy.vue client/src/lib/classifications.js
diffstat 4 files changed, 89 insertions(+), 89 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/identify/Identify.vue	Thu Aug 29 09:42:34 2019 +0200
+++ b/client/src/components/identify/Identify.vue	Thu Aug 29 15:04:02 2019 +0200
@@ -64,19 +64,6 @@
                 icon="caret-up"
                 fixed-width
                 :style="{
-                  color: forecastAccuracyColor(feature),
-                  'font-size': 'x-large'
-                }"
-              />
-              <small class="my-auto">
-                {{ forecastAccuracy(feature) }}
-              </small>
-            </div>
-            <div>
-              <font-awesome-icon
-                icon="caret-up"
-                fixed-width
-                :style="{
                   color: gmAvailabilityColor(feature),
                   'font-size': 'x-large'
                 }"
@@ -98,6 +85,19 @@
                 {{ forecastVsReality(feature) }}
               </small>
             </div>
+            <div>
+              <font-awesome-icon
+                icon="caret-up"
+                fixed-width
+                :style="{
+                  color: forecastAccuracyColor(feature),
+                  'font-size': 'x-large'
+                }"
+              />
+              <small class="my-auto">
+                {{ forecastAccuracy(feature) }}
+              </small>
+            </div>
           </div>
           <div>
             <small
@@ -294,10 +294,10 @@
         DANGER:
           this.$gettext("Data too old. Treshold:") + ` (${revisitingFactor})`
       };
-      return messagesPerState[classifications.surveyCurrency(feature)];
+      return messagesPerState[classifications.surveyRecency(feature)];
     },
     recencyColor(feature) {
-      return recencyColorCodes[classifications.surveyCurrency(feature)];
+      return recencyColorCodes[classifications.surveyRecency(feature)];
     },
     showBottleneckMeta(feature) {
       const result = /bottleneck/.test(feature.getId().toLowerCase());
--- a/client/src/components/map/styles.js	Thu Aug 29 09:42:34 2019 +0200
+++ b/client/src/components/map/styles.js	Thu Aug 29 15:04:02 2019 +0200
@@ -308,7 +308,7 @@
           feature.getId().indexOf("bottlenecks") > -1
         ) {
           let colorUniformTriangle =
-            recencyColorCodes[classifications.surveyCurrency(feature)];
+            recencyColorCodes[classifications.surveyRecency(feature)];
           let frame = `<polyline points='16,0 32,28 0,28 16,0' stroke='grey' stroke-width='1' fill='${colorUniformTriangle}'/>`;
           let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='28'><g>${frame}</g></svg>`;
           s.push(
--- a/client/src/components/systemconfiguration/DataAccuracy.vue	Thu Aug 29 09:42:34 2019 +0200
+++ b/client/src/components/systemconfiguration/DataAccuracy.vue	Thu Aug 29 15:04:02 2019 +0200
@@ -4,7 +4,7 @@
       <div class="row">
         <div class="col-sm-6 d-flex flex-column">
           <h6 class="font-weight-bold">
-            <translate>Currency of Bottleneck Surveys</translate>
+            <translate>Recency of Bottleneck Surveys</translate>
           </h6>
           <div class="d-flex flex-grow-1 text-center small">
             <div class="card rounded-left">
@@ -122,6 +122,77 @@
         </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">
@@ -193,77 +264,6 @@
             </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>
 
--- a/client/src/lib/classifications.js	Thu Aug 29 09:42:34 2019 +0200
+++ b/client/src/lib/classifications.js	Thu Aug 29 15:04:02 2019 +0200
@@ -32,7 +32,7 @@
 };
 
 export default {
-  surveyCurrency(bottleneck) {
+  surveyRecency(bottleneck) {
     if (
       bottleneck.get("revisiting_time") === null ||
       bottleneck.get("revisiting_time") === 0