Mercurial > gemma

comparison client/src/bottlenecks/Bottlenecks.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 67e9355e7a58
children 595654ad3f66
comparison
equal deleted inserted replaced
1106:ca4e0cd607ce 1111:f106aee673e7
28 <a href="#" class="d-block" @click="moveToBottleneck(bottleneck)"> 28 <a href="#" class="d-block" @click="moveToBottleneck(bottleneck)">
29 {{ bottleneck.properties.name }} 29 {{ bottleneck.properties.name }}
30 </a> 30 </a>
31 </div> 31 </div>
32 <div class="col-2"> 32 <div class="col-2">
33 {{ displayCurrentSurvey(bottleneck) }} 33 {{ displayCurrentSurvey(bottleneck.properties.current) }}
34 </div> 34 </div>
35 <div class="col-3"> 35 <div class="col-3">
36 {{ displayCurrentChainage(bottleneck) }} 36 {{ displayCurrentChainage(bottleneck.properties.from, bottleneck.properties.from) }}
37 </div> 37 </div>
38 <div class="col-2 text-right"> 38 <div class="col-2 text-right">
39 <button type="button" class="btn btn-sm btn-outline-secondary" @click="toggleBottleneck(bottleneck)"> 39 <button type="button" class="btn btn-sm btn-outline-secondary" @click="toggleBottleneck(bottleneck.properties.name)">
40 <i class="fa fa-angle-down"></i> 40 <i class="fa fa-angle-down"></i>
41 </button> 41 </button>
42 </div> 42 </div>
43 <div :class="['col-12', 'surveys', {open: selectedBottleneck === bottleneck}]"> 43 <div :class="['col-12', 'surveys', {open: openBottleneck === bottleneck.properties.name}]">
44 <a href="#" class="d-block p-2" v-for="(survey, index) in surveys[bottleneck.properties.name]" :key="index" @click="selectSurvey(survey, bottleneck)"> 44 <a href="#" class="d-block p-2" v-for="(survey, index) in openBottleneckSurveys" :key="index" @click="selectSurvey(survey, bottleneck)">
45 {{ survey.date_info }} 45 {{ survey.date_info }}
46 </a> 46 </a>
47 </div> 47 </div>
48 </div> 48 </div>
49 </div> 49 </div>
75 data() { 75 data() {
76 return { 76 return {
77 search: "", 77 search: "",
78 sortColumn: "name", 78 sortColumn: "name",
79 sortDirection: "ASC", 79 sortDirection: "ASC",
80 selectedBottleneck: null, 80 openBottleneck: null,
81 surveys: {} 81 openBottleneckSurveys: null
82 }; 82 };
83 }, 83 },
84 computed: { 84 computed: {
85 ...mapState("application", ["bottlenecksCollapsed"]), 85 ...mapState("application", ["bottlenecksCollapsed"]),
86 ...mapState("bottlenecks", ["bottlenecks"]), 86 ...mapState("bottlenecks", ["bottlenecks"]),
151 return 0; 151 return 0;
152 } 152 }
153 }); 153 });
154 }, 154 },
155 selectSurvey(survey, bottleneck) { 155 selectSurvey(survey, bottleneck) {
156 this.$store.commit("fairwayprofile/setSelectedMorph", survey); 156 this.$store.dispatch("bottlenecks/setSelectedBottleneck", bottleneck.properties.name);
157 this.$store.commit("fairwayprofile/setAvailableSurveys", { 157 this.$store.commit("bottlenecks/setSelectedSurvey", survey);
158 surveys: this.surveys[bottleneck.properties.name]
159 });
160 this.moveToBottleneck(bottleneck); 158 this.moveToBottleneck(bottleneck);
161 }, 159 },
162 moveToBottleneck(bottleneck) { 160 moveToBottleneck(bottleneck) {
163 // TODO: make this central, duplicates code from application/Topbar.vue 161 // TODO: make this central, duplicates code from application/Topbar.vue
164 let view = this.openLayersMap.getView(); 162 let view = this.openLayersMap.getView();
177 }, 175 },
178 sortBy(column) { 176 sortBy(column) {
179 this.sortColumn = column; 177 this.sortColumn = column;
180 this.sortDirection = this.sortDirection === "ASC" ? "DESC" : "ASC"; 178 this.sortDirection = this.sortDirection === "ASC" ? "DESC" : "ASC";
181 }, 179 },
182 toggleBottleneck(bottleneck) { 180 toggleBottleneck(name) {
183 if (bottleneck === this.selectedBottleneck) { 181 this.openBottleneckSurveys = null;
184 this.selectedBottleneck = null; 182 if (name === this.openBottleneck) {
183 this.openBottleneck = null;
185 } else { 184 } else {
186 HTTP.get("/surveys/" + bottleneck.properties.name, { 185 this.openBottleneck = name;
186
187 HTTP.get("/surveys/" + name, {
187 headers: { 188 headers: {
188 "X-Gemma-Auth": localStorage.getItem("token"), 189 "X-Gemma-Auth": localStorage.getItem("token"),
189 "Content-type": "text/xml; charset=UTF-8" 190 "Content-type": "text/xml; charset=UTF-8"
190 } 191 }
191 }) 192 })
192 .then(response => { 193 .then(response => {
193 this.surveys[bottleneck.properties.name] = response.data.surveys; 194 this.openBottleneckSurveys = response.data.surveys;
194 this.selectedBottleneck = bottleneck;
195 }) 195 })
196 .catch(error => { 196 .catch(error => {
197 const { status, data } = error.response; 197 const { status, data } = error.response;
198 displayError({ 198 displayError({
199 title: "Backend Error", 199 title: "Backend Error",
200 message: `${status}: ${data.message || data}` 200 message: `${status}: ${data.message || data}`
201 }); 201 });
202 }); 202 });
203 } 203 }
204 }, 204 },
205 displayCurrentSurvey(bottleneck) { 205 displayCurrentSurvey(current) {
206 const current = bottleneck.properties.current;
207 return current ? current.substr(0, current.length - 1) : ""; 206 return current ? current.substr(0, current.length - 1) : "";
208 }, 207 },
209 displayCurrentChainage(bottleneck) { 208 displayCurrentChainage(from, to) {
210 return ( 209 return (
211 bottleneck.properties.from / 10 + " - " + bottleneck.properties.to / 10 210 from / 10 + " - " + to / 10
212 ); 211 );
213 } 212 }
214 }, 213 },
215 mounted() { 214 mounted() {
216 this.$store.dispatch("bottlenecks/loadBottlenecks"); 215 this.$store.dispatch("bottlenecks/loadBottlenecks");