Mercurial > gemma

comparison client/src/application/Morphtool.vue @ 826:90a601884ff2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: improve survey selection for Morphtool * Add backend request after a bottleneck has been selected. Show a list of survey dates and save the selected survey to the store.
author Bernhard Reiter <bernhard@intevation.de>
date Thu, 27 Sep 2018 23:19:31 +0200
parents d7ae7338872d
children 797063af6dc8
comparison
equal deleted inserted replaced
825:a5452a001b46 826:90a601884ff2
1 <template> 1 <template>
2 <div v-if="selectedBottleneck" @click="clearSelection" class="float-right ui-element d-flex shadow morphtool"> 2 <div v-if="selectedBottleneck">
3 <div v-if="surveyList" class="ui-element card card-body shadow">
4 <div class="headline">
5 <h5>{{selectedBottleneck.get("objnam")}}</h5>
6 </div>
7 <ul class="list-group">
8 <li v-for="survey of surveyList.surveys" :key="survey.data_info"
9 class="list-group-item" @click.prevent="selectSurvey(survey)">
10 <a href="#" @click.prevent=""
11 >{{survey.date_info}}</a>
12 </li>
13 </ul>
14 <div @click="clearSelection"
15 class="float-left ui-element d-flex shadow morphtoolminus">
16 <i class="fa fa-minus morphtoolsminus"></i>
17 </div>
18 </div>
19 <div v-else @click="clearSelection" class="float-right ui-element d-flex shadow morphtool">
3 <i class="fa fa-object-ungroup"></i> 20 <i class="fa fa-object-ungroup"></i>
4 </div> 21 </div>
22 </div>
5 </template> 23 </template>
6 24
7 <style lang="scss"> 25 <style lang="scss">
8 .morphtool { 26 .morphtool {
9 position: relative; 27 position: relative;
12 border-radius: $border-radius; 30 border-radius: $border-radius;
13 margin-left: $offset; 31 margin-left: $offset;
14 height: $icon-width; 32 height: $icon-width;
15 width: $icon-height; 33 width: $icon-height;
16 margin-bottom: $offset; 34 margin-bottom: $offset;
17 margin-right: 55px; 35 margin-right: $offset;
36 z-index: 2;
37 }
38 .morphtoolminus {
39 position: relative;
40 background-color: white;
41 padding: $small-offset;
42 border-radius: $border-radius;
43 height: $icon-width;
44 width: $icon-height;
18 z-index: 2; 45 z-index: 2;
19 } 46 }
20 </style> 47 </style>
21 48
22 <script> 49 <script>
23 import { mapGetters, mapState } from "vuex"; 50 import { mapGetters, mapState } from "vuex";
51
52 import { displayError } from "../application/lib/errors.js";
53 import { HTTP } from "../application/lib/http";
24 54
25 export default { 55 export default {
26 name: "morphtool", 56 name: "morphtool",
27 data() { 57 data() {
28 return { 58 return {
42 } 72 }
43 return null; 73 return null;
44 } 74 }
45 }, 75 },
46 watch: { 76 watch: {
47 selectedBottleneck: function(bottleneck) { 77 selectedBottleneck: function(bottleneckFeature) {
48 console.log("now query for", bottleneck); 78 if (bottleneckFeature) {
49 this.surveyList = [{ a: "b" }, { c: "d" }]; 79 let bottleneckName = bottleneckFeature.get("objnam");
80 if (bottleneckName) {
81 this.queryBottleneck(bottleneckName);
82 }
83 }
50 } 84 }
51 }, 85 },
52 methods: { 86 methods: {
87 queryBottleneck(name) {
88 HTTP.get("/surveys/" + name, {
89 headers: {
90 "X-Gemma-Auth": localStorage.getItem("token"),
91 "Content-type": "text/xml; charset=UTF-8"
92 }
93 })
94 .then(response => {
95 this.surveyList = response.data;
96 })
97 .catch(error => {
98 this.surveyList = null;
99 const { status, data } = error.response;
100 displayError({
101 title: "Backend Error",
102 message: `${status}: ${data.message || data}`
103 });
104 });
105 },
106 selectSurvey(survey) {
107 this.$store.commit("mapstore/setSelectedMorph", survey);
108 this.surveyList = null;
109 },
53 clearSelection() { 110 clearSelection() {
54 this.$store.commit("mapstore/setIdentifiedFeatures", []); 111 this.$store.commit("mapstore/setIdentifiedFeatures", []);
112 this.$store.commit("mapstore/setSelectedMorph", null);
113 this.surveyList = null;
55 } 114 }
56 } 115 }
57 }; 116 };
58 </script> 117 </script>