Mercurial > gemma
changeset 1092:d47b69baacfa
added chainage column to bottleneck list
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 30 Oct 2018 12:01:53 +0100 |
parents | 4489e96fb2b4 |
children | 31b36ef00784 80b47f5d41c3 |
files | client/src/bottlenecks/Bottlenecks.vue |
diffstat | 1 files changed, 22 insertions(+), 10 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/bottlenecks/Bottlenecks.vue Tue Oct 30 11:36:58 2018 +0100 +++ b/client/src/bottlenecks/Bottlenecks.vue Tue Oct 30 12:01:53 2018 +0100 @@ -7,27 +7,34 @@ <h4>Bottlenecks</h4> <hr class="mb-0"> <input type="text" v-model="search" placeholder="Search Bottleneck..." class="border-0 w-100 p-2" /> - <div class="row p-2 border-top"> + <div class="row p-2 border-top text-left small"> <div class="col-5"> <a href="#" @click="sortBy('name')" class="sort-link">Name</a> <i :class="sortClass" v-if="sortColumn === 'name'"></i> </div> - <div class="col-5"> + <div class="col-2"> <a href="#" @click="sortBy('latestMeasurement')" class="sort-link">Latest Measurement</a> <i :class="sortClass" v-if="sortColumn === 'latestMeasurement'"></i> </div> + <div class="col-3"> + <a href="#" @click="sortBy('chainage')" class="sort-link">Chainage</a> + <i :class="sortClass" v-if="sortColumn === 'chainage'"></i> + </div> <div class="col-2"></div> </div> - <div class="bottleneck-list"> + <div class="bottleneck-list small text-left"> <div v-for="bottleneck in filteredAndSortedBottlenecks()" :key="bottleneck.properties.name" class="border-top row mx-0 py-2"> <div class="col-5 text-left"> <a href="#" class="d-block" @click="moveToBottleneck(bottleneck)"> {{ bottleneck.properties.name }} </a> </div> - <div class="col-5"> + <div class="col-2"> {{ displayCurrentSurvey(bottleneck) }} </div> + <div class="col-3"> + {{ displayCurrentChainage(bottleneck) }} + </div> <div class="col-2 text-right"> <button type="button" class="btn btn-sm btn-outline-secondary" @click="toggleBottleneck(bottleneck)"> <i class="fa fa-angle-down"></i> @@ -101,14 +108,9 @@ methods: { filteredAndSortedBottlenecks() { return this.bottlenecks.filter(bn => { - const foundInName = bn.properties.name + return bn.properties.name .toLowerCase() .includes(this.search.toLowerCase()); - const latestMeasurement = (bn.properties.current || ''); - const foundInLatestMeasurement = latestMeasurement - .substr(0, latestMeasurement.length - 1) - .includes(this.search.toLowerCase()); - return foundInName || foundInLatestMeasurement; }).sort((bnA, bnB) => { switch (this.sortColumn) { case "name": @@ -133,6 +135,13 @@ return this.sortDirection === "ASC" ? 1 : -1; return 0; + case "chainage": + if (bnA.properties.from < bnB.properties.from) + return this.sortDirection === "ASC" ? -1 : 1; + if (bnA.properties.from > bnB.properties.from) + return this.sortDirection === "ASC" ? 1 : -1; + return 0; + default: return 0; } @@ -191,6 +200,9 @@ displayCurrentSurvey(bottleneck) { const current = bottleneck.properties.current; return current ? current.substr(0, current.length - 1) : ""; + }, + displayCurrentChainage(bottleneck) { + return (bottleneck.properties.from / 10) + " - " + (bottleneck.properties.to / 10); } }, mounted() {