Mercurial > gemma

comparison client/src/morphtool/Morphtool.vue @ 962:d7f34791b18d

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refac: moved linetool and morphtool
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 17 Oct 2018 15:22:21 +0200
parents client/src/application/Morphtool.vue@8a80ef09a62c
children 3da707172772
comparison
equal deleted inserted replaced
960:e23ae2c83427 962:d7f34791b18d
1 <template>
2 <div v-if="selectedBottleneck || selectedMorph" class="morphcontainer">
3 <div v-if="surveyList && !drawMode" class="ui-element card card-body shadow">
4 <div class="headline">
5 <h4>{{selectedBottleneck.get("objnam")}}</h4>
6 <hr>
7 <div @click="clearSelection" class="float-left ui-element d-flex morphtoolminus">
8 <i class="fa fa-close morphtoolsminus"></i>
9 </div>
10 </div>
11 <ul class="list-group surveylist">
12 <li v-for="survey of surveyList.surveys" :key="survey.data_info" class="list-group-item" @click.prevent="selectSurvey(survey)">
13 <a href="#" @click.prevent="">{{survey.date_info}}</a>
14 </li>
15 </ul>
16 </div>
17 <div v-if="selectedMorph" @click="clearSelection" class="ui-element shadow morphtool">
18 <div class="d-flex flex-row justify-content-between">
19 <i class="fa fa-close text-danger"></i>
20 <small>Bottleneck:&nbsp;</small>
21 <h6>{{selectedBottleneck.get("objnam")}} <small>( {{selectedMorph.date_info}} )</small></h6>
22 </div>
23 </div>
24 </div>
25 </template>
26
27 <style scoped lang="scss">
28 .headline {
29 margin-right: $offset;
30 margin-left: $offset;
31 }
32 .morphcontainer {
33 margin-bottom: $offset;
34 margin-left: auto;
35 margin-right: $large-offset + $icon-width;
36 border-radius: $border-radius;
37 }
38 .surveylist {
39 text-align: left;
40 margin-bottom: $offset !important;
41 margin-left: $offset;
42 margin-right: $offset;
43 }
44
45 .surveylist li {
46 margin-left: auto;
47 margin-right: auto;
48 border-style: none;
49 padding-bottom: 0rem;
50 }
51
52 .morphtool {
53 position: relative;
54 background-color: white;
55 padding: $small-offset;
56 border-radius: $border-radius;
57 height: $icon-width;
58 margin-right: $offset;
59 margin-top: auto;
60 margin-bottom: auto;
61 z-index: 2;
62 }
63
64 .morphcontainer i {
65 margin-right: $small-offset;
66 }
67
68 .morphtoolminus {
69 position: absolute;
70 top: 0;
71 right: 0;
72 background-color: white;
73 padding: $small-offset;
74 border-radius: $border-radius;
75 height: $icon-width;
76 width: $icon-height;
77 z-index: 2;
78 }
79 </style>
80
81 <script>
82 import { mapGetters, mapState } from "vuex";
83
84 import { displayError } from "../application/lib/errors.js";
85 import { HTTP } from "../application/lib/http";
86
87 export default {
88 name: "morphtool",
89 data() {
90 return {
91 surveyList: null
92 };
93 },
94 computed: {
95 ...mapGetters("application", ["drawMode"]),
96 ...mapState("mapstore", ["identifiedFeatures", "selectedMorph"]),
97 selectedBottleneck: function() {
98 if (this.identifiedFeatures && !this.drawMode) {
99 for (let feature of this.identifiedFeatures) {
100 let id = feature.getId();
101 // RegExp.prototype.test() works with number, str and undefined
102 if (/^bottlenecks\./.test(id)) {
103 this.$store.commit("mapstore/setSelectedMorph", null);
104 return feature;
105 }
106 }
107 }
108 return null;
109 }
110 },
111 watch: {
112 selectedBottleneck: function(bottleneckFeature) {
113 if (bottleneckFeature) {
114 let bottleneckName = bottleneckFeature.get("objnam");
115 if (bottleneckName) {
116 this.queryBottleneck(bottleneckName);
117 }
118 }
119 }
120 },
121 methods: {
122 queryBottleneck(name) {
123 // DEBUG console.log("starting to query bottleneck", name);
124 HTTP.get("/surveys/" + name, {
125 headers: {
126 "X-Gemma-Auth": localStorage.getItem("token"),
127 "Content-type": "text/xml; charset=UTF-8"
128 }
129 })
130 .then(response => {
131 this.surveyList = response.data;
132 })
133 .catch(error => {
134 this.surveyList = null;
135 const { status, data } = error.response;
136 displayError({
137 title: "Backend Error",
138 message: `${status}: ${data.message || data}`
139 });
140 });
141 },
142 selectSurvey(survey) {
143 this.$store.commit("mapstore/setSelectedMorph", survey);
144 this.surveyList = null;
145 },
146 clearSelection() {
147 this.$store.commit("mapstore/setIdentifiedFeatures", []);
148 this.$store.commit("mapstore/setSelectedMorph", null);
149 this.surveyList = null;
150 if (this.drawMode) {
151 this.$store.commit("application/toggleDrawModeLine");
152 }
153 }
154 }
155 };
156 </script>