Mercurial > gemma

comparison client/src/bottlenecks/Bottlenecks.vue @ 1204:ddfdf440da24

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
made searchbar contextual if bottlenecks are open search bar refers to that list if imports are open search bar is hidden
author Markus Kottlaender <markus@intevation.de>
date Mon, 19 Nov 2018 11:23:00 +0100
parents d61be0d972d8
children 70116d392387
comparison
equal deleted inserted replaced
1201:37889ae85133 1204:ddfdf440da24
1 <template> 1 <template>
2 <div :class="bottlenecksStyle"> 2 <div :class="bottlenecksStyle">
3 <div @click="$store.commit('application/showBottlenecks', !showBottlenecks);" class="ui-element close-bottlenecks"> 3 <div @click="closeBottlenecks" class="ui-element close-bottlenecks">
4 <i class="fa fa-close"></i> 4 <i class="fa fa-close"></i>
5 </div> 5 </div>
6 6
7 <h4>Bottlenecks</h4> 7 <h4>Bottlenecks</h4>
8 <hr class="mb-0"> 8 <hr class="mb-0">
9 <input type="text" v-model="search" placeholder="Search Bottleneck..." class="border-0 w-100 p-2" /> 9 <div class="row p-2 text-left small">
10 <div class="row p-2 border-top text-left small">
11 <div class="col-5"> 10 <div class="col-5">
12 <a href="#" @click="sortBy('name')" class="sort-link">Name</a> 11 <a href="#" @click="sortBy('name')" class="sort-link">Name</a>
13 <i :class="sortClass" v-if="sortColumn === 'name'"></i> 12 <i :class="sortClass" v-if="sortColumn === 'name'"></i>
14 </div> 13 </div>
15 <div class="col-2"> 14 <div class="col-2">
71 70
72 export default { 71 export default {
73 name: "bottlenecks", 72 name: "bottlenecks",
74 data() { 73 data() {
75 return { 74 return {
76 search: "",
77 sortColumn: "name", 75 sortColumn: "name",
78 sortDirection: "ASC", 76 sortDirection: "ASC",
79 openBottleneck: null, 77 openBottleneck: null,
80 openBottleneckSurveys: null 78 openBottleneckSurveys: null
81 }; 79 };
82 }, 80 },
83 computed: { 81 computed: {
84 ...mapState("application", ["showBottlenecks", "showSidebar"]), 82 ...mapState("application", [
83 "showBottlenecks",
84 "showSidebar",
85 "searchQuery"
86 ]),
85 ...mapState("bottlenecks", ["bottlenecks"]), 87 ...mapState("bottlenecks", ["bottlenecks"]),
86 ...mapState("map", ["openLayersMap"]), 88 ...mapState("map", ["openLayersMap"]),
87 bottlenecksStyle() { 89 bottlenecksStyle() {
88 return [ 90 return [
89 "ui-element shadow bottlenecks", 91 "ui-element shadow bottlenecks border-top",
90 { 92 {
91 bottleneckscollapsed: !this.showBottlenecks, 93 bottleneckscollapsed: !this.showBottlenecks,
92 bottlenecksextended: this.showBottlenecks 94 bottlenecksextended: this.showBottlenecks
93 } 95 }
94 ]; 96 ];
107 filteredAndSortedBottlenecks() { 109 filteredAndSortedBottlenecks() {
108 return this.bottlenecks 110 return this.bottlenecks
109 .filter(bn => { 111 .filter(bn => {
110 return bn.properties.name 112 return bn.properties.name
111 .toLowerCase() 113 .toLowerCase()
112 .includes(this.search.toLowerCase()); 114 .includes(this.searchQuery.toLowerCase());
113 }) 115 })
114 .sort((bnA, bnB) => { 116 .sort((bnA, bnB) => {
115 switch (this.sortColumn) { 117 switch (this.sortColumn) {
116 case "name": 118 case "name":
117 if ( 119 if (
192 message: `${status}: ${data.message || data}` 194 message: `${status}: ${data.message || data}`
193 }); 195 });
194 }); 196 });
195 } 197 }
196 }, 198 },
199 closeBottlenecks() {
200 this.$store.commit("application/showBottlenecks", false);
201 this.$store.commit("application/showSearchbar", false);
202 },
197 displayCurrentSurvey(current) { 203 displayCurrentSurvey(current) {
198 return current ? current.substr(0, current.length - 1) : ""; 204 return current ? current.substr(0, current.length - 1) : "";
199 }, 205 },
200 displayCurrentChainage(from, to) { 206 displayCurrentChainage(from, to) {
201 return from / 10 + " - " + to / 10; 207 return from / 10 + " - " + to / 10;
211 .bottlenecks 217 .bottlenecks
212 position: relative 218 position: relative
213 background-color: #ffffff 219 background-color: #ffffff
214 padding-top: $offset 220 padding-top: $offset
215 opacity: $slight-transparent 221 opacity: $slight-transparent
216 border-radius: $border-radius 222 border-bottom-left-radius: $border-radius
223 border-bottom-right-radius: $border-radius
217 transition: left 0.3s ease 224 transition: left 0.3s ease
218 overflow: hidden 225 overflow: hidden
219 background: #fff 226 background: #fff
220 margin-left: $offset 227 margin-left: $offset
221 228