Mercurial > gemma
view client/src/application/Morphtool.vue @ 836:0b994949a4a0
client: make Morphtool selection more robust
* Check if the selected features we are testing has an id before
operating on it.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Fri, 28 Sep 2018 10:17:11 +0200 |
parents | 797063af6dc8 |
children | b1489669ba52 |
line wrap: on
line source
<template> <div v-if="selectedBottleneck || selectedMorph"> <div v-if="surveyList" class="ui-element card card-body shadow"> <div class="headline"> <h5>{{selectedBottleneck.get("objnam")}}</h5> </div> <ul class="list-group"> <li v-for="survey of surveyList.surveys" :key="survey.data_info" class="list-group-item" @click.prevent="selectSurvey(survey)"> <a href="#" @click.prevent="" >{{survey.date_info}}</a> </li> </ul> <div @click="clearSelection" class="float-left ui-element d-flex shadow morphtoolminus"> <i class="fa fa-minus morphtoolsminus"></i> </div> </div> <div v-else @click="clearSelection" class="float-right ui-element d-flex shadow morphtool"> <i class="fa fa-object-ungroup"></i> </div> </div> </template> <style lang="scss"> .morphtool { position: relative; background-color: white; padding: $small-offset; border-radius: $border-radius; margin-left: $offset; height: $icon-width; width: $icon-height; margin-bottom: $offset; margin-right: $offset; z-index: 2; } .morphtoolminus { position: relative; background-color: white; padding: $small-offset; border-radius: $border-radius; height: $icon-width; width: $icon-height; z-index: 2; } </style> <script> import { mapGetters, mapState } from "vuex"; import { displayError } from "../application/lib/errors.js"; import { HTTP } from "../application/lib/http"; export default { name: "morphtool", data() { return { surveyList: null }; }, computed: { ...mapGetters("application", ["drawMode"]), ...mapState("mapstore", ["identifiedFeatures", "selectedMorph"]), selectedBottleneck: function() { if (this.identifiedFeatures) { for (let feature of this.identifiedFeatures) { let id = feature.getId(); if (id && id.replace(/[.][^.]*$/, "") === "bottlenecks") { return feature; } } } return null; } }, watch: { selectedBottleneck: function(bottleneckFeature) { if (bottleneckFeature) { let bottleneckName = bottleneckFeature.get("objnam"); if (bottleneckName) { this.queryBottleneck(bottleneckName); } } } }, methods: { queryBottleneck(name) { // DEBUG console.log("starting to query bottleneck", name); HTTP.get("/surveys/" + name, { headers: { "X-Gemma-Auth": localStorage.getItem("token"), "Content-type": "text/xml; charset=UTF-8" } }) .then(response => { this.surveyList = response.data; }) .catch(error => { this.surveyList = null; const { status, data } = error.response; displayError({ title: "Backend Error", message: `${status}: ${data.message || data}` }); }); }, selectSurvey(survey) { this.$store.commit("mapstore/setSelectedMorph", survey); this.surveyList = null; }, clearSelection() { this.$store.commit("mapstore/setIdentifiedFeatures", []); this.$store.commit("mapstore/setSelectedMorph", null); this.surveyList = null; } } }; </script>