Mercurial > gemma

changeset 2743:4063adda3095

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: identified box: moved bbox zoom button to feature headers and removed bbox from the feature's properties list
author Markus Kottlaender <markus@intevation.de>
date Wed, 20 Mar 2019 12:10:42 +0100
parents dea556332c3a
children 7dcca9649a61
files client/src/components/identify/Identify.vue client/src/components/identify/formatter.js client/src/main.js
diffstat 3 files changed, 32 insertions(+), 13 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/identify/Identify.vue	Wed Mar 20 11:01:17 2019 +0100
+++ b/client/src/components/identify/Identify.vue	Wed Mar 20 12:10:42 2019 +0100
@@ -23,8 +23,17 @@
           v-for="feature of filteredIdentifiedFeatures"
           :key="feature.getId()"
         >
-          <small class="d-block bg-dark text-light text-center px-2 py-1">
+          <small
+            class="d-flex justify-content-between bg-dark text-light px-2 py-1"
+          >
             {{ $gettext(featureLabel(feature)) }}
+            <a
+              v-if="feature.getProperties().hasOwnProperty('bbox')"
+              @click="zoomTo(feature)"
+              class="btn btn-info btn-xs pointer rounded-0 zoom-btn"
+            >
+              <font-awesome-icon icon="crosshairs" />
+            </a>
           </small>
           <small
             v-for="prop in featureProps(feature)"
@@ -33,10 +42,7 @@
             class="d-flex justify-content-between px-2"
           >
             <b>{{ $gettext(prop.key) }}</b>
-            <span v-if="prop.key != 'bbox'">{{ prop.val }}</span>
-            <a v-else @click="zoomTo(prop.val)" href="#"
-              ><translate>Zoom to</translate></a
-            >
+            <span>{{ prop.val }}</span>
           </small>
         </div>
         <div
@@ -81,6 +87,14 @@
   max-height: 19rem;
   overflow-y: auto;
   small {
+    .zoom-btn {
+      margin-top: -0.25rem;
+      margin-right: -0.5rem;
+      margin-bottom: -0.25rem;
+      svg {
+        vertical-align: middle;
+      }
+    }
     &:nth-child(even) {
       background: #f8f8f8;
     }
@@ -125,11 +139,11 @@
     ...mapState("map", ["currentMeasurement"])
   },
   methods: {
-    zoomTo(val) {
+    zoomTo(feature) {
       displayInfo({
         message:
           "Coordinates:\n" +
-          JSON.stringify(val)
+          JSON.stringify(feature.getProperties().bbox)
             .split(",")
             .join("\n")
       });
@@ -172,16 +186,14 @@
 
       // change labels and remove unneeded properties
       // for all features
-      propsArray = propsArray.map(formatter.all);
+      propsArray = propsArray.map(formatter.all).filter(p => p);
       // feature specific
       if (
         formatter.hasOwnProperty(featureId) &&
         formatter[featureId].hasOwnProperty("props")
       ) {
-        propsArray = propsArray.map(formatter[featureId].props);
+        propsArray = propsArray.map(formatter[featureId].props).filter(p => p);
       }
-      // remove empty entries
-      propsArray = propsArray.filter(p => p);
 
       // remove underscores in labels that where not previously changed already
       propsArray = propsArray.map(prop => {
--- a/client/src/components/identify/formatter.js	Wed Mar 20 11:01:17 2019 +0100
+++ b/client/src/components/identify/formatter.js	Wed Mar 20 12:10:42 2019 +0100
@@ -7,6 +7,11 @@
     if (p.key === "date_info" || p.key === "fa_date_info") {
       p.val = new Date(p.val).toLocaleString();
     }
+
+    // remove certain props
+    let propsToRemove = ["bbox"];
+    if (propsToRemove.indexOf(p.key) !== -1) return null;
+
     return p;
   },
   bottlenecks_geoserver: {
--- a/client/src/main.js	Wed Mar 20 11:01:17 2019 +0100
+++ b/client/src/main.js	Wed Mar 20 12:10:42 2019 +0100
@@ -93,7 +93,8 @@
   faUsersCog,
   faWater,
   faWrench,
-  faRedo
+  faRedo,
+  faCrosshairs
 } from "@fortawesome/free-solid-svg-icons";
 import {
   faWindowMinimize,
@@ -155,7 +156,8 @@
   faWrench,
   faRedo,
   faWindowMinimize,
-  faWindowMaximize
+  faWindowMaximize,
+  faCrosshairs
 );
 
 // register plugins