Mercurial > gemma

changeset 4265:2596a028dc3a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Feature_info: display partial legend information for bottlenecks
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 27 Aug 2019 11:46:51 +0200
parents edfafea4b7b0
children fbe2f1aa2757
files client/src/components/identify/Identify.vue client/src/components/map/styles.js client/src/lib/classifications.js client/src/main.js
diffstat 4 files changed, 53 insertions(+), 7 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/identify/Identify.vue	Tue Aug 27 10:56:32 2019 +0200
+++ b/client/src/components/identify/Identify.vue	Tue Aug 27 11:46:51 2019 +0200
@@ -39,6 +39,19 @@
               <font-awesome-icon icon="crosshairs" />
             </a>
           </small>
+          <div
+            v-if="showBottleneckMeta(feature)"
+            class="ml-2 mb-1 text-left d-flex"
+          >
+            <font-awesome-icon
+              icon="caret-up"
+              fixed-width
+              :style="{ color: currencyColor(feature), 'font-size': 'x-large' }"
+            />
+            <small class="my-auto">
+              {{ currency(feature) }}
+            </small>
+          </div>
           <small
             v-for="prop in featureProps(feature)"
             :key="prop.key"
@@ -145,12 +158,16 @@
 import { mapState, mapGetters } from "vuex";
 import { formatter } from "./formatter";
 import { getCenter } from "ol/extent";
+import classifications from "../../lib/classifications";
+import { styleFactory } from "@/components/map/styles";
+
+const colorCodes = styleFactory().colorCodes;
 
 export default {
   name: "identify",
   computed: {
     ...mapGetters("application", ["versionStr"]),
-    ...mapState("application", ["showIdentify", "userManualUrl"]),
+    ...mapState("application", ["showIdentify", "userManualUrl", "config"]),
     ...mapGetters("map", ["filteredIdentifiedFeatures"]),
     ...mapState("map", ["currentMeasurement"]),
     identifiedLabel() {
@@ -161,6 +178,25 @@
     }
   },
   methods: {
+    currency(feature) {
+      const revisitingFactor = this.config.bn_revtime_multiplier;
+      const messagesPerState = {
+        OK: this.$gettext("Data within the revisiting time"),
+        WARNING:
+          this.$gettext("Data within revisiting treshold ") +
+          `(${revisitingFactor})`,
+        DANGER:
+          this.$gettext("Data too old. Treshold: ") + `(${revisitingFactor})`
+      };
+      return messagesPerState[classifications.surveyCurrency(feature)];
+    },
+    currencyColor(feature) {
+      return colorCodes[classifications.surveyCurrency(feature)];
+    },
+    showBottleneckMeta(feature) {
+      const result = /bottleneck/.test(feature.getId().toLowerCase());
+      return result;
+    },
     zoomTo(feature) {
       this.$store.dispatch("map/moveMap", {
         coordinates: getCenter(
--- a/client/src/components/map/styles.js	Tue Aug 27 10:56:32 2019 +0200
+++ b/client/src/components/map/styles.js	Tue Aug 27 11:46:51 2019 +0200
@@ -130,7 +130,14 @@
 };
 
 const styleFactory = function(mapId) {
+  const colorCodes = {
+    OK: "lime",
+    WARNING: "yellow",
+    DANGER: "red",
+    NEUTRAL: "white"
+  };
   return {
+    colorCodes: colorCodes,
     stretches(feature) {
       let style = styles.yellow2;
       if (feature.get("highlighted")) {
@@ -273,7 +280,8 @@
           map.getLayer("BOTTLENECKS").getVisible() &&
           feature.getId().indexOf("bottlenecks") > -1
         ) {
-          let colorUniformTriangle = classifications.surveyCurrency(feature);
+          let colorUniformTriangle =
+            colorCodes[classifications.surveyCurrency(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/lib/classifications.js	Tue Aug 27 10:56:32 2019 +0200
+++ b/client/src/lib/classifications.js	Tue Aug 27 11:46:51 2019 +0200
@@ -27,10 +27,10 @@
       bottleneck.get("revisiting_time") === null ||
       bottleneck.get("revisiting_time") === 0
     ) {
-      return "white";
+      return "NEUTRAL";
     }
     if (bottleneck.get("date_max") === null) {
-      return "red";
+      return "DANGER";
     }
     let revTime = bottleneck.get("revisiting_time") * 30.5;
     let latest = Date.parse(bottleneck.get("date_max").replace("Z", ""));
@@ -38,11 +38,11 @@
     let revTimeMultiplier =
       store.state.application.config.bn_revtime_multiplier;
     if (diff <= revTime) {
-      return "lime";
+      return "OK";
     } else if (revTime < diff && diff <= revTime * revTimeMultiplier) {
-      return "yellow";
+      return "WARNING";
     } else if (revTime * revTimeMultiplier < diff) {
-      return "red";
+      return "DANGER";
     }
   },
   gmAvailability(feature) {
--- a/client/src/main.js	Tue Aug 27 10:56:32 2019 +0200
+++ b/client/src/main.js	Tue Aug 27 11:46:51 2019 +0200
@@ -52,6 +52,7 @@
   faAngleDoubleRight,
   faBars,
   faBook,
+  faCaretUp,
   faChartArea,
   faChartBar,
   faChartLine,
@@ -122,6 +123,7 @@
   faAngleDoubleRight,
   faBars,
   faBook,
+  faCaretUp,
   faChartArea,
   faChartBar,
   faChartLine,