Mercurial > gemma

comparison client/src/morphtool/Morphtool.vue @ 1111:f106aee673e7 store-refactoring

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
selected bottleneck and surveys now handled by bottleneck store
author Markus Kottlaender <markus@intevation.de>
date Mon, 05 Nov 2018 13:12:33 +0100
parents 907321455f39
children 1b160eda22cf
comparison
equal deleted inserted replaced
1106:ca4e0cd607ce 1111:f106aee673e7
1 <template> 1 <template>
2 <div class="morphcontainer"> 2 <div class="morphcontainer">
3 <div v-if="selectedBottleneck"> 3 <div v-if="selectedBottleneck && surveys && !selectedSurvey" class="ui-element card card-body shadow">
4 <div v-if="surveyList && !drawMode" class="ui-element card card-body shadow"> 4 <div class="headline">
5 <div class="headline"> 5 <h4>{{ selectedBottleneck }}</h4>
6 <h4>{{bottleneckName}}</h4> 6 <hr>
7 <hr> 7 <div
8 <div 8 @click="clearSelection"
9 @click="clearSelection" 9 class="float-left ui-element d-flex morphtoolminus"
10 class="float-left ui-element d-flex morphtoolminus" 10 >
11 > 11 <i class="fa fa-close morphtoolsminus"></i>
12 <i class="fa fa-close morphtoolsminus"></i>
13 </div>
14 </div> 12 </div>
15 <ul class="list-group surveylist">
16 <li
17 v-for="survey of surveyList.surveys"
18 :key="survey.data_info"
19 class="list-group-item"
20 @click.prevent="selectSurvey(survey)"
21 >
22 <a href="#" @click.prevent>{{survey.date_info}}</a>
23 </li>
24 </ul>
25 </div> 13 </div>
14 <ul class="list-group surveylist">
15 <li
16 v-for="survey of surveys"
17 :key="survey.data_info"
18 class="list-group-item"
19 @click.prevent="$store.commit('bottlenecks/setSelectedSurvey', survey)"
20 >
21 <a href="#" @click.prevent>{{ survey.date_info }}</a>
22 </li>
23 </ul>
26 </div> 24 </div>
27 <div v-if="selectedMorph" @click="clearSelection" class="ui-element shadow morphtool"> 25 <div v-if="selectedSurvey" @click="clearSelection" class="ui-element shadow morphtool">
28 <div class="d-flex flex-row justify-content-between"> 26 <div class="d-flex flex-row justify-content-between">
29 <i class="fa fa-close text-danger"></i> 27 <i class="fa fa-close text-danger"></i>
30 <small>Bottleneck:&nbsp;</small> 28 <small>Bottleneck:&nbsp;</small>
31 <h6> 29 <h6>
32 {{bottleneckName}} 30 {{ selectedBottleneck }}
33 <small>( {{selectedMorph.date_info}} )</small> 31 <small>( {{ selectedSurvey.date_info }} )</small>
34 </h6> 32 </h6>
35 </div> 33 </div>
36 </div> 34 </div>
37 </div> 35 </div>
38 </template> 36 </template>
104 * Software engineering by Intevation GmbH 102 * Software engineering by Intevation GmbH
105 * 103 *
106 * Author(s): 104 * Author(s):
107 * Thomas Junk <thomas.junk@intevation.de> 105 * Thomas Junk <thomas.junk@intevation.de>
108 */ 106 */
109 import { mapState } from "vuex"; 107 import { mapState, mapGetters } from "vuex";
110 108
111 import { displayError } from "../application/lib/errors.js"; 109 import { displayError } from "../application/lib/errors.js";
112 import { HTTP } from "../application/lib/http"; 110 import { HTTP } from "../application/lib/http";
113 111
114 export default { 112 export default {
115 name: "morphtool", 113 name: "morphtool",
116 data() {
117 return {
118 surveyList: null,
119 bottleneckName: ""
120 };
121 },
122 computed: { 114 computed: {
123 ...mapState("application", ["drawMode"]), 115 ...mapState("application", ["drawMode"]),
124 ...mapState("identifystore", ["identifiedFeatures"]), 116 ...mapState("bottlenecks", ["selectedBottleneck", "surveys", "selectedSurvey"])
125 ...mapState("fairwayprofile", ["selectedMorph"]),
126 selectedBottleneck: function() {
127 if (this.identifiedFeatures && !this.drawMode) {
128 for (let feature of this.identifiedFeatures) {
129 let id = feature.getId();
130 // RegExp.prototype.test() works with number, str and undefined
131 if (/^bottlenecks\./.test(id)) {
132 this.$store.commit("fairwayprofile/setSelectedMorph", null);
133 return feature;
134 }
135 }
136 }
137 return null;
138 }
139 },
140 watch: {
141 selectedBottleneck: function(bottleneckFeature) {
142 if (bottleneckFeature) {
143 let bottleneckName = bottleneckFeature.get("objnam");
144 if (bottleneckName) {
145 this.bottleneckName = bottleneckName;
146 this.queryBottleneck(bottleneckName);
147 }
148 }
149 }
150 }, 117 },
151 methods: { 118 methods: {
152 queryBottleneck(name) {
153 // DEBUG console.log("starting to query bottleneck", name);
154 HTTP.get("/surveys/" + name, {
155 headers: {
156 "X-Gemma-Auth": localStorage.getItem("token"),
157 "Content-type": "text/xml; charset=UTF-8"
158 }
159 })
160 .then(response => {
161 this.surveyList = response.data;
162 this.$store.commit(
163 "fairwayprofile/setAvailableSurveys",
164 response.data
165 );
166 })
167 .catch(error => {
168 this.surveyList = null;
169 const { status, data } = error.response;
170 displayError({
171 title: "Backend Error",
172 message: `${status}: ${data.message || data}`
173 });
174 });
175 },
176 selectSurvey(survey) {
177 this.$store.commit("fairwayprofile/setSelectedMorph", survey);
178 this.surveyList = null;
179 },
180 clearSelection() { 119 clearSelection() {
181 this.$store.commit("identifystore/setIdentifiedFeatures", []); 120 this.$store.dispatch("bottlenecks/setSelectedBottleneck", null);
182 this.$store.commit("fairwayprofile/setSelectedMorph", null);
183 this.$store.commit("fairwayprofile/clearCurrentProfile");
184 this.$store.commit("application/closeSplitScreen"); 121 this.$store.commit("application/closeSplitScreen");
185 this.surveyList = null;
186 if (this.drawMode) { 122 if (this.drawMode) {
187 this.$store.commit("application/toggleDrawModeLine"); 123 this.$store.commit("application/toggleDrawModeLine");
188 } 124 }
189 } 125 }
190 } 126 }