Mercurial > gemma
view client/src/identify/Identify.vue @ 1071:f8f398e36e38
client: improve area measurement
* Change way of transfering data for display towards using the store
where different quantities, symbols can be used. This way we do not
depend on the identify tool to find our feature. It avoids the problem
that the final click on a snap to point for an area may not hit our
feshly drawn feature.
At the same time it will get easier to display the measurement result
in a different way, like translating the quantity.
Right now it is displayed on top of the identified box.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Fri, 26 Oct 2018 10:31:52 +0200 |
parents | 7ec2133c6404 |
children | 2c3d32322126 |
line wrap: on
line source
<template> <div class="identifymenu"> <div @click="collapse" class="d-flex flex-column ui-element minimizer"> <div :class="infoStyle"> <i class="fa fa-info"></i> </div> </div> <div :class="identifyStyle"> <div v-if="!collapsed" class="card-body"> <div class="headline"> <h4 class="card-title">Identified</h4> </div> <hr> <div class="d-flex flex-column features"> <small v-if="currentMeasurement"> {{ currentMeasurement.quantity }} ({{ currentMeasurement.unitSymbol }}): {{ currentMeasurement.value }} </small> <div v-for="feature of identifiedFeatures" :key="feature.getId()"> <div v-if="feature.getId()"> {{ feature.getId().replace(/[.][^.]*$/,"") /* cut away everything from the last . to the end */}}: <small v-for="(value, key) in prepareProperties(feature)" :key="key"> <div v-if="value">{{key}}:{{value}}</div> </small> </div> </div> </div> <div class="versioninfo"> <hr /> gemma <a href="https://hg.intevation.de/gemma/file/tip">source-code</a> {{ versionStr }} <br /> Some data © <a href="https://www.openstreetmap.org/copyright">OpenSteetMap</a> contributors </div> </div> </div> </div> </template> <style lang="scss"> .features { max-height: $identify-height; overflow-y: auto; margin-bottom: $x-large-offset + $large-offset; } .versioninfo { font-size: 60%; position: absolute; bottom: $large-offset; } .identifymenu { position: relative; margin-right: $offset; } .identify { background-color: white; margin-left: $small-offset; opacity: $slight-transparent; text-align: left; } .identifycollapsed { min-height: $icon-height; width: $icon-width; transition: $transition-fast; } .identifyexpanded { width: $identify-width; } .minimizer { position: absolute; z-index: 2; right: 0; margin-top: $x-small-offset; border-radius: $border-radius; height: $icon-width; width: $icon-height; } </style> <script> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. * * SPDX-License-Identifier: AGPL-3.0-or-later * License-Filename: LICENSES/AGPL-3.0.txt * * Copyright (C) 2018 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * * Author(s): * Thomas Junk <thomas.junk@intevation.de> * Bernhard E. Reiter <bernhard.reiter@intevation.de> */ import { mapState } from "vuex"; import { mapGetters } from "vuex"; export default { name: "identify", data() { return { collapsed: true }; }, computed: { ...mapGetters("application", ["versionStr"]), ...mapState("identifystore", ["identifiedFeatures", "currentMeasurement"]), identifyStyle() { return { "ui-element": true, card: true, identify: true, shadow: true, identifyexpanded: !this.collapsed, identifycollapsed: this.collapsed }; }, infoStyle() { return { info: true, "text-info": this.identifiedFeatures && this.identifiedFeatures.length > 0 }; } }, methods: { collapse() { this.collapsed = !this.collapsed; }, prepareProperties(feature) { // return dict object with propertyname:plainvalue prepared for display var properties = feature.getProperties(); delete properties[feature.getGeometryName()]; return properties; } } }; </script>