diff client/src/components/identify/Identify.vue @ 4265:2596a028dc3a

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 57c38087fe18
children fbe2f1aa2757
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(