Mercurial > gemma

comparison client/src/components/Bottlenecks.vue @ 2462:9ae2a2f758bb

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: make use of new table header/body components
author Markus Kottlaender <markus@intevation.de>
date Mon, 04 Mar 2019 14:50:23 +0100
parents 64ff5984351e
children 468c8dc796cf
comparison
equal deleted inserted replaced
2461:b60efa7d4cee 2462:9ae2a2f758bb
3 <UIBoxHeader 3 <UIBoxHeader
4 icon="ship" 4 icon="ship"
5 title="Bottlenecks" 5 title="Bottlenecks"
6 :closeCallback="$parent.close" 6 :closeCallback="$parent.close"
7 /> 7 />
8 <div class="row p-2 text-left small"> 8 <UITableHeader
9 <div class="col-5"> 9 :columns="[
10 <a href="#" @click="sortBy('name')" class="sort-link"> 10 { id: 'name', title: 'Name', class: 'col-4' },
11 <translate>Name</translate> 11 {
12 id: 'latestMeasurement',
13 title: 'Latest Measurement',
14 class: 'col-3'
15 },
16 { id: 'chainage', title: 'Chainage', class: 'col-3' }
17 ]"
18 @sortingChanged="sortBy"
19 />
20 <UITableBody
21 :data="filteredAndSortedBottlenecks()"
22 :maxHeight="(showSplitscreen ? 18 : 35) + 'rem'"
23 :active="openBottleneck"
24 v-slot="{ item: bottleneck }"
25 >
26 <div class="col-4 py-2 text-left">
27 <a href="#" @click="selectBottleneck(bottleneck)">{{
28 bottleneck.properties.name
29 }}</a>
30 </div>
31 <div class="col-3 py-2">
32 {{ formatSurveyDate(bottleneck.properties.current) }}
33 </div>
34 <div class="col-3 py-2">
35 {{
36 displayCurrentChainage(
37 bottleneck.properties.from,
38 bottleneck.properties.to
39 )
40 }}
41 </div>
42 <div class="col-2 pr-0 text-right d-flex flex-column">
43 <a
44 class="text-info mt-auto mb-auto mr-2"
45 @click="loadSurveys(bottleneck)"
46 v-if="bottleneck.properties.current"
47 >
48 <font-awesome-icon
49 class="pointer"
50 icon="spinner"
51 fixed-width
52 spin
53 v-if="loading === bottleneck"
54 ></font-awesome-icon>
55 <font-awesome-icon
56 class="pointer"
57 icon="angle-down"
58 fixed-width
59 v-if="loading !== bottleneck && openBottleneck !== bottleneck"
60 ></font-awesome-icon>
61 <font-awesome-icon
62 class="pointer"
63 icon="angle-up"
64 fixed-width
65 v-if="loading !== bottleneck && openBottleneck === bottleneck"
66 ></font-awesome-icon>
12 </a> 67 </a>
13 <font-awesome-icon 68 </div>
14 :icon="sortIcon" 69 <div
15 class="ml-1" 70 :class="[
16 v-if="sortColumn === 'name'" 71 'col-12 p-0',
17 ></font-awesome-icon> 72 'surveys',
18 </div> 73 { open: openBottleneck === bottleneck }
19 <div class="col-2"> 74 ]"
20 <a href="#" @click="sortBy('latestMeasurement')" class="sort-link"> 75 >
21 <translate>Latest</translate> <br /> 76 <a
22 <translate>Measurement</translate> 77 href="#"
78 class="d-inline-block px-3 py-2"
79 v-for="(survey, index) in openBottleneckSurveys"
80 :key="index"
81 @click="selectSurvey(survey, bottleneck)"
82 >
83 {{ formatSurveyDate(survey.date_info) }}
23 </a> 84 </a>
24 <font-awesome-icon 85 </div>
25 :icon="sortIcon" 86 </UITableBody>
26 class="ml-1"
27 v-if="sortColumn === 'latestMeasurement'"
28 ></font-awesome-icon>
29 </div>
30 <div class="col-3">
31 <a href="#" @click="sortBy('chainage')" class="sort-link">
32 <translate>Chainage</translate>
33 </a>
34 <font-awesome-icon
35 :icon="sortIcon"
36 class="ml-1"
37 v-if="sortColumn === 'chainage'"
38 ></font-awesome-icon>
39 </div>
40 <div class="col-2"></div>
41 </div>
42 <div
43 class="bottleneck-list small text-left"
44 :style="'max-height: ' + (showSplitscreen ? 18 : 35) + 'rem'"
45 v-if="filteredAndSortedBottlenecks().length"
46 >
47 <div
48 v-for="bottleneck in filteredAndSortedBottlenecks()"
49 :key="bottleneck.properties.name"
50 class="border-top row bottleneck-row mx-0"
51 >
52 <div class="col-5 py-2 text-left">
53 <a href="#" @click="selectBottleneck(bottleneck)">{{
54 bottleneck.properties.name
55 }}</a>
56 </div>
57 <div class="col-2 py-2">
58 {{ formatSurveyDate(bottleneck.properties.current) }}
59 </div>
60 <div class="col-3 py-2">
61 {{
62 displayCurrentChainage(
63 bottleneck.properties.from,
64 bottleneck.properties.to
65 )
66 }}
67 </div>
68 <div class="col-2 pr-0 text-right d-flex flex-column">
69 <a
70 class="text-info mt-auto mb-auto mr-2"
71 @click="loadSurveys(bottleneck.properties.name)"
72 v-if="bottleneck.properties.current"
73 >
74 <font-awesome-icon
75 class="pointer"
76 icon="spinner"
77 fixed-width
78 spin
79 v-if="loading === bottleneck.properties.name"
80 ></font-awesome-icon>
81 <font-awesome-icon
82 class="pointer"
83 icon="angle-down"
84 fixed-width
85 v-if="
86 loading !== bottleneck.properties.name &&
87 openBottleneck !== bottleneck.properties.name
88 "
89 ></font-awesome-icon>
90 <font-awesome-icon
91 class="pointer"
92 icon="angle-up"
93 fixed-width
94 v-if="
95 loading !== bottleneck.properties.name &&
96 openBottleneck === bottleneck.properties.name
97 "
98 ></font-awesome-icon>
99 </a>
100 </div>
101 <div
102 :class="[
103 'col-12 p-0',
104 'surveys',
105 { open: openBottleneck === bottleneck.properties.name }
106 ]"
107 >
108 <a
109 href="#"
110 class="d-block px-3 py-2"
111 v-for="(survey, index) in openBottleneckSurveys"
112 :key="index"
113 @click="selectSurvey(survey, bottleneck)"
114 >{{ formatSurveyDate(survey.date_info) }}</a
115 >
116 </div>
117 </div>
118 </div>
119 <div v-else class="small text-center py-3 border-top">
120 <translate>No results.</translate>
121 </div>
122 </div> 87 </div>
123 </template> 88 </template>
89
90 <style lang="sass" scoped>
91 .table-body
92 .row
93 > div:not(:last-child)
94 transition: background-color 0.3s, color 0.3s
95 &.active
96 > div:not(:last-child)
97 background-color: $color-info
98 color: #fff
99 a
100 color: #fff !important
101 .surveys
102 border-bottom: solid 1px $color-info
103 .surveys
104 overflow: hidden
105 max-height: 0
106 &.open
107 overflow-y: auto
108 max-height: 5rem
109 </style>
124 110
125 <script> 111 <script>
126 /* This is Free Software under GNU Affero General Public License v >= 3.0 112 /* This is Free Software under GNU Affero General Public License v >= 3.0
127 * without warranty, see README.md and license for details. 113 * without warranty, see README.md and license for details.
128 * 114 *
247 zoom: 17, 233 zoom: 17,
248 preventZoomOut: true 234 preventZoomOut: true
249 }); 235 });
250 }); 236 });
251 }, 237 },
252 sortBy(column) { 238 sortBy(sorting) {
253 this.sortColumn = column; 239 this.sortColumn = sorting.sortColumn;
254 this.sortDirection = this.sortDirection === "ASC" ? "DESC" : "ASC"; 240 this.sortDirection = sorting.sortDirection;
255 }, 241 },
256 loadSurveys(name) { 242 loadSurveys(bottleneck) {
257 this.openBottleneckSurveys = null; 243 if (bottleneck === this.openBottleneck) {
258 if (name === this.openBottleneck) {
259 this.openBottleneck = null; 244 this.openBottleneck = null;
245 this.openBottleneckSurveys = null;
260 } else { 246 } else {
261 this.openBottleneck = name; 247 this.loading = bottleneck;
262 this.loading = name; 248
263 249 HTTP.get("/surveys/" + bottleneck.properties.name, {
264 HTTP.get("/surveys/" + name, {
265 headers: { 250 headers: {
266 "X-Gemma-Auth": localStorage.getItem("token"), 251 "X-Gemma-Auth": localStorage.getItem("token"),
267 "Content-type": "text/xml; charset=UTF-8" 252 "Content-type": "text/xml; charset=UTF-8"
268 } 253 }
269 }) 254 })
270 .then(response => { 255 .then(response => {
271 this.openBottleneckSurveys = response.data.surveys.sort((a, b) => { 256 this.openBottleneckSurveys = response.data.surveys.sort((a, b) => {
272 return a.date_info < b.date_info ? 1 : -1; 257 return a.date_info < b.date_info ? 1 : -1;
273 }); 258 });
259 this.openBottleneck = bottleneck;
274 }) 260 })
275 .catch(error => { 261 .catch(error => {
276 const { status, data } = error.response; 262 const { status, data } = error.response;
277 displayError({ 263 displayError({
278 title: this.$gettext("Backend Error"), 264 title: this.$gettext("Backend Error"),
289 mounted() { 275 mounted() {
290 this.$store.dispatch("bottlenecks/loadBottlenecksList"); 276 this.$store.dispatch("bottlenecks/loadBottlenecksList");
291 } 277 }
292 }; 278 };
293 </script> 279 </script>
294
295 <style lang="scss" scoped>
296 .bottleneck-list {
297 overflow-y: auto;
298 }
299
300 .bottleneck-list .bottleneck-row a {
301 text-decoration: none;
302 }
303
304 .bottleneck-list .bottleneck-row:hover {
305 background: #fbfbfb;
306 }
307
308 .surveys {
309 max-height: 0;
310 min-height: 0;
311 overflow: hidden;
312 }
313
314 .surveys a:hover {
315 background: #f3f3f3;
316 }
317
318 .surveys.open {
319 max-height: 250px;
320 overflow: auto;
321 }
322
323 .sort-link {
324 color: #444;
325 font-weight: bold;
326 }
327 </style>