Mercurial > gemma
view client/src/morphtool/Morphtool.vue @ 1002:99d27dc9db5e persistent-import-queue
fix: Morphtool works again
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 22 Oct 2018 17:34:59 +0200 |
parents | 26ca04caa330 |
children | 9d4af4b1c5c8 |
line wrap: on
line source
<template> <div v-if="selectedBottleneck || selectedMorph" class="morphcontainer"> <div v-if="surveyList && !drawMode" class="ui-element card card-body shadow"> <div class="headline"> <h4>{{bottleneckName}}</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 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> <div v-if="selectedMorph" @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>{{bottleneckName}} <small>( {{selectedMorph.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> 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, bottleneckName: "" }; }, computed: { ...mapGetters("application", ["drawMode"]), ...mapState("identifystore", ["identifiedFeatures"]), ...mapState("morphstore", ["selectedMorph"]), selectedBottleneck: function() { if (this.identifiedFeatures && !this.drawMode) { for (let feature of this.identifiedFeatures) { let id = feature.getId(); // RegExp.prototype.test() works with number, str and undefined if (/^bottlenecks\./.test(id)) { this.$store.commit("morphstore/setSelectedMorph", null); return feature; } } } return null; } }, watch: { selectedBottleneck: function(bottleneckFeature) { if (bottleneckFeature) { let bottleneckName = bottleneckFeature.get("objnam"); if (bottleneckName) { this.bottleneckName = 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("morphstore/setSelectedMorph", survey); this.surveyList = null; }, clearSelection() { this.$store.commit("identifystore/setIdentifiedFeatures", []); this.$store.commit("morphstore/setSelectedMorph", null); this.surveyList = null; if (this.drawMode) { this.$store.commit("application/toggleDrawModeLine"); } } } }; </script>