Mercurial > gemma
changeset 2743:4063adda3095
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