Mercurial > gemma
view client/src/morphtool/Morphtool.vue @ 1140:2e06bc53b002
separating line/polygon/cut tools in UI
Measurements can now be made while a bottleneck and sounding data is selected.
The open layers interaction object(s) are now in the vuex store to disable them from other components (Morphtool.vue).
Line and Polygon are now to separate buttons.
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 12 Nov 2018 14:45:07 +0100 |
parents | d9e6a1f6f394 |
children | 5f98d0c9d738 |
line wrap: on
line source
<template> <div class="morphcontainer"> <div v-if="selectedBottleneck && surveys && !selectedSurvey" class="ui-element card card-body shadow"> <div class="headline"> <h4>{{ selectedBottleneck }}</h4> <hr> <div @click="clearSelection" class="float-left ui-element d-flex morphtoolminus" > <i class="fa fa-close morphtoolsminus"></i> </div> </div> <ul class="list-group surveylist"> <li v-for="survey of surveys" :key="survey.data_info" class="list-group-item" @click.prevent="$store.commit('bottlenecks/setSelectedSurvey', survey)" > <a href="#" @click.prevent>{{ survey.date_info }}</a> </li> </ul> </div> <div v-if="selectedSurvey" @click="clearSelection" class="ui-element shadow morphtool"> <div class="d-flex flex-row justify-content-between"> <i class="fa fa-close text-danger"></i> <small>Bottleneck: </small> <h6> {{ selectedBottleneck }} <small>( {{ selectedSurvey.date_info }} )</small> </h6> </div> </div> </div> </template> <style scoped lang="scss"> .headline { margin-right: $offset; margin-left: $offset; } .morphcontainer { margin-bottom: $offset; margin-left: auto; margin-right: $large-offset + $icon-width; border-radius: $border-radius; } .surveylist { text-align: left; margin-bottom: $offset !important; margin-left: $offset; margin-right: $offset; } .surveylist li { margin-left: auto; margin-right: auto; border-style: none; padding-bottom: 0rem; } .morphtool { position: relative; background-color: white; padding: $small-offset; border-radius: $border-radius; height: $icon-width; margin-right: $offset; margin-top: auto; margin-bottom: auto; z-index: 2; } .morphcontainer i { margin-right: $small-offset; } .morphtoolminus { position: absolute; top: 0; right: 0; background-color: white; padding: $small-offset; border-radius: $border-radius; height: $icon-width; width: $icon-height; z-index: 2; } </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> */ import { mapState, mapGetters } from "vuex"; export default { name: "morphtool", computed: { ...mapGetters("map", ["getLayerByName"]), ...mapState("map", ["openLayersMap", "cutTool"]), ...mapState("bottlenecks", [ "selectedBottleneck", "surveys", "selectedSurvey" ]) }, methods: { clearSelection() { this.$store.dispatch("bottlenecks/setSelectedBottleneck", null); this.$store.commit("application/showSplitscreen", false); this.$store.commit("map/cutMode", false); this.getLayerByName("Cut Tool").data.getSource().clear(); this.openLayersMap.removeInteraction(this.cutTool) } } }; </script>