Mercurial > gemma
annotate client/src/components/Bottlenecks.vue @ 2871:2cdf43c84a8c
client: aligned width of searchbar and content box
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Fri, 29 Mar 2019 14:23:06 +0100 |
parents | 21eb85cdfe45 |
children | b9a6abef9f1c |
rev | line source |
---|---|
1276
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1 <template> |
1350
58d41573e530
staging: now with real data from backend
Thomas Junk <thomas.junk@intevation.de>
parents:
1299
diff
changeset
|
2 <div> |
2387
f185503ef35a
client: unified box's header styles by creating a reusable component
Markus Kottlaender <markus@intevation.de>
parents:
2154
diff
changeset
|
3 <UIBoxHeader |
f185503ef35a
client: unified box's header styles by creating a reusable component
Markus Kottlaender <markus@intevation.de>
parents:
2154
diff
changeset
|
4 icon="ship" |
2760
c6fba10926cc
client:correct a set of strings marking
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2739
diff
changeset
|
5 :title="bottlenecksLabel" |
2387
f185503ef35a
client: unified box's header styles by creating a reusable component
Markus Kottlaender <markus@intevation.de>
parents:
2154
diff
changeset
|
6 :closeCallback="$parent.close" |
f185503ef35a
client: unified box's header styles by creating a reusable component
Markus Kottlaender <markus@intevation.de>
parents:
2154
diff
changeset
|
7 /> |
2462
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
8 <UITableHeader |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
9 :columns="[ |
2871
2cdf43c84a8c
client: aligned width of searchbar and content box
Markus Kottlaender <markus@intevation.de>
parents:
2779
diff
changeset
|
10 { id: 'properties.name', title: `${nameLabel}`, width: '200px' }, |
2cdf43c84a8c
client: aligned width of searchbar and content box
Markus Kottlaender <markus@intevation.de>
parents:
2779
diff
changeset
|
11 { |
2cdf43c84a8c
client: aligned width of searchbar and content box
Markus Kottlaender <markus@intevation.de>
parents:
2779
diff
changeset
|
12 id: 'properties.responsible_country', |
2cdf43c84a8c
client: aligned width of searchbar and content box
Markus Kottlaender <markus@intevation.de>
parents:
2779
diff
changeset
|
13 title: `${countryLabel}`, |
2cdf43c84a8c
client: aligned width of searchbar and content box
Markus Kottlaender <markus@intevation.de>
parents:
2779
diff
changeset
|
14 width: '80px' |
2cdf43c84a8c
client: aligned width of searchbar and content box
Markus Kottlaender <markus@intevation.de>
parents:
2779
diff
changeset
|
15 }, |
2462
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
16 { |
2738
add2d47c2567
client: tables: implemented simple default sorting
Markus Kottlaender <markus@intevation.de>
parents:
2541
diff
changeset
|
17 id: 'properties.current', |
2779
21eb85cdfe45
Client: improve a set of strings marking for translations
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2760
diff
changeset
|
18 title: `${latestmeasurementLabel}`, |
2871
2cdf43c84a8c
client: aligned width of searchbar and content box
Markus Kottlaender <markus@intevation.de>
parents:
2779
diff
changeset
|
19 width: '150px' |
2462
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
20 }, |
2871
2cdf43c84a8c
client: aligned width of searchbar and content box
Markus Kottlaender <markus@intevation.de>
parents:
2779
diff
changeset
|
21 { id: 'properties.from', title: `${chainageLabel}`, width: '150px' } |
2462
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
22 ]" |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
23 /> |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
24 <UITableBody |
2738
add2d47c2567
client: tables: implemented simple default sorting
Markus Kottlaender <markus@intevation.de>
parents:
2541
diff
changeset
|
25 :data="filteredBottlenecks() | sortTable(sortColumn, sortDirection)" |
2462
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
26 :maxHeight="(showSplitscreen ? 18 : 35) + 'rem'" |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
27 :active="openBottleneck" |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
28 v-slot="{ item: bottleneck }" |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
29 > |
2871
2cdf43c84a8c
client: aligned width of searchbar and content box
Markus Kottlaender <markus@intevation.de>
parents:
2779
diff
changeset
|
30 <div class="table-cell truncate text-left" style="width: 200px"> |
2462
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
31 <a href="#" @click="selectBottleneck(bottleneck)">{{ |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
32 bottleneck.properties.name |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
33 }}</a> |
1350
58d41573e530
staging: now with real data from backend
Thomas Junk <thomas.junk@intevation.de>
parents:
1299
diff
changeset
|
34 </div> |
2871
2cdf43c84a8c
client: aligned width of searchbar and content box
Markus Kottlaender <markus@intevation.de>
parents:
2779
diff
changeset
|
35 <div class="table-cell text-center" style="width: 80px"> |
2cdf43c84a8c
client: aligned width of searchbar and content box
Markus Kottlaender <markus@intevation.de>
parents:
2779
diff
changeset
|
36 {{ bottleneck.properties.responsible_country }} |
2cdf43c84a8c
client: aligned width of searchbar and content box
Markus Kottlaender <markus@intevation.de>
parents:
2779
diff
changeset
|
37 </div> |
2cdf43c84a8c
client: aligned width of searchbar and content box
Markus Kottlaender <markus@intevation.de>
parents:
2779
diff
changeset
|
38 <div class="table-cell" style="width: 150px"> |
2541
468c8dc796cf
client: convert lib helper functions to Vue filters
Markus Kottlaender <markus@intevation.de>
parents:
2462
diff
changeset
|
39 {{ bottleneck.properties.current | surveyDate }} |
2462
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
40 </div> |
2871
2cdf43c84a8c
client: aligned width of searchbar and content box
Markus Kottlaender <markus@intevation.de>
parents:
2779
diff
changeset
|
41 <div class="table-cell" style="width: 150px"> |
2462
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
42 {{ |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
43 displayCurrentChainage( |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
44 bottleneck.properties.from, |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
45 bottleneck.properties.to |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
46 ) |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
47 }} |
1350
58d41573e530
staging: now with real data from backend
Thomas Junk <thomas.junk@intevation.de>
parents:
1299
diff
changeset
|
48 </div> |
2871
2cdf43c84a8c
client: aligned width of searchbar and content box
Markus Kottlaender <markus@intevation.de>
parents:
2779
diff
changeset
|
49 <div |
2cdf43c84a8c
client: aligned width of searchbar and content box
Markus Kottlaender <markus@intevation.de>
parents:
2779
diff
changeset
|
50 class="table-cell pr-0 text-right d-flex flex-column" |
2cdf43c84a8c
client: aligned width of searchbar and content box
Markus Kottlaender <markus@intevation.de>
parents:
2779
diff
changeset
|
51 style="width: 30px" |
2cdf43c84a8c
client: aligned width of searchbar and content box
Markus Kottlaender <markus@intevation.de>
parents:
2779
diff
changeset
|
52 > |
2462
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
53 <a |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
54 class="text-info mt-auto mb-auto mr-2" |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
55 @click="loadSurveys(bottleneck)" |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
56 v-if="bottleneck.properties.current" |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
57 > |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
58 <font-awesome-icon |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
59 class="pointer" |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
60 icon="spinner" |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
61 fixed-width |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
62 spin |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
63 v-if="loading === bottleneck" |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
64 ></font-awesome-icon> |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
65 <font-awesome-icon |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
66 class="pointer" |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
67 icon="angle-down" |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
68 fixed-width |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
69 v-if="loading !== bottleneck && openBottleneck !== bottleneck" |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
70 ></font-awesome-icon> |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
71 <font-awesome-icon |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
72 class="pointer" |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
73 icon="angle-up" |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
74 fixed-width |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
75 v-if="loading !== bottleneck && openBottleneck === bottleneck" |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
76 ></font-awesome-icon> |
1449 | 77 </a> |
1350
58d41573e530
staging: now with real data from backend
Thomas Junk <thomas.junk@intevation.de>
parents:
1299
diff
changeset
|
78 </div> |
58d41573e530
staging: now with real data from backend
Thomas Junk <thomas.junk@intevation.de>
parents:
1299
diff
changeset
|
79 <div |
2871
2cdf43c84a8c
client: aligned width of searchbar and content box
Markus Kottlaender <markus@intevation.de>
parents:
2779
diff
changeset
|
80 :class="['p-0', 'surveys', { open: openBottleneck === bottleneck }]" |
2cdf43c84a8c
client: aligned width of searchbar and content box
Markus Kottlaender <markus@intevation.de>
parents:
2779
diff
changeset
|
81 style="width: 100%" |
1350
58d41573e530
staging: now with real data from backend
Thomas Junk <thomas.junk@intevation.de>
parents:
1299
diff
changeset
|
82 > |
2462
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
83 <a |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
84 href="#" |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
85 class="d-inline-block px-3 py-2" |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
86 v-for="(survey, index) in openBottleneckSurveys" |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
87 :key="index" |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
88 @click="selectSurvey(survey, bottleneck)" |
1449 | 89 > |
2541
468c8dc796cf
client: convert lib helper functions to Vue filters
Markus Kottlaender <markus@intevation.de>
parents:
2462
diff
changeset
|
90 {{ survey.date_info | surveyDate }} |
2462
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
91 </a> |
1350
58d41573e530
staging: now with real data from backend
Thomas Junk <thomas.junk@intevation.de>
parents:
1299
diff
changeset
|
92 </div> |
2462
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
93 </UITableBody> |
1350
58d41573e530
staging: now with real data from backend
Thomas Junk <thomas.junk@intevation.de>
parents:
1299
diff
changeset
|
94 </div> |
1276
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
95 </template> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
96 |
2462
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
97 <style lang="sass" scoped> |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
98 .table-body |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
99 .row |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
100 > div:not(:last-child) |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
101 transition: background-color 0.3s, color 0.3s |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
102 &.active |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
103 > div:not(:last-child) |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
104 background-color: $color-info |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
105 color: #fff |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
106 a |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
107 color: #fff !important |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
108 .surveys |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
109 border-bottom: solid 1px $color-info |
2871
2cdf43c84a8c
client: aligned width of searchbar and content box
Markus Kottlaender <markus@intevation.de>
parents:
2779
diff
changeset
|
110 .table-cell |
2cdf43c84a8c
client: aligned width of searchbar and content box
Markus Kottlaender <markus@intevation.de>
parents:
2779
diff
changeset
|
111 padding: 0 3px |
2cdf43c84a8c
client: aligned width of searchbar and content box
Markus Kottlaender <markus@intevation.de>
parents:
2779
diff
changeset
|
112 border-right: solid 1px #dee2e6 |
2cdf43c84a8c
client: aligned width of searchbar and content box
Markus Kottlaender <markus@intevation.de>
parents:
2779
diff
changeset
|
113 &:last-child |
2cdf43c84a8c
client: aligned width of searchbar and content box
Markus Kottlaender <markus@intevation.de>
parents:
2779
diff
changeset
|
114 border-right: none |
2462
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
115 .surveys |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
116 overflow: hidden |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
117 max-height: 0 |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
118 &.open |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
119 overflow-y: auto |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
120 max-height: 5rem |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
121 </style> |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
122 |
1276
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
123 <script> |
1362
ca33ad696594
remove the first empyty lines
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1299
diff
changeset
|
124 /* This is Free Software under GNU Affero General Public License v >= 3.0 |
1276
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
125 * without warranty, see README.md and license for details. |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
126 * |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
127 * SPDX-License-Identifier: AGPL-3.0-or-later |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
128 * License-Filename: LICENSES/AGPL-3.0.txt |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
129 * |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
130 * Copyright (C) 2018 by via donau |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
131 * – Österreichische Wasserstraßen-Gesellschaft mbH |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
132 * Software engineering by Intevation GmbH |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
133 * |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
134 * Author(s): |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
135 * Markus Kottländer <markus.kottlaender@intevation.de> |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
136 */ |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
137 import { mapState } from "vuex"; |
1613
f2d24dceecc7
refac: cleanup import paths
Thomas Junk <thomas.junk@intevation.de>
parents:
1560
diff
changeset
|
138 import { HTTP } from "@/lib/http"; |
2738
add2d47c2567
client: tables: implemented simple default sorting
Markus Kottlaender <markus@intevation.de>
parents:
2541
diff
changeset
|
139 import { displayError } from "@/lib/errors"; |
add2d47c2567
client: tables: implemented simple default sorting
Markus Kottlaender <markus@intevation.de>
parents:
2541
diff
changeset
|
140 import { sortTable } from "@/lib/mixins"; |
1276
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
141 |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
142 export default { |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
143 name: "bottlenecks", |
2738
add2d47c2567
client: tables: implemented simple default sorting
Markus Kottlaender <markus@intevation.de>
parents:
2541
diff
changeset
|
144 mixins: [sortTable], |
1276
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
145 data() { |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
146 return { |
2738
add2d47c2567
client: tables: implemented simple default sorting
Markus Kottlaender <markus@intevation.de>
parents:
2541
diff
changeset
|
147 sortColumn: "properties.name", |
1276
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
148 openBottleneck: null, |
1415
d4fc5f3c1252
improved style of bottleneck list
Markus Kottlaender <markus@intevation.de>
parents:
1403
diff
changeset
|
149 openBottleneckSurveys: null, |
d4fc5f3c1252
improved style of bottleneck list
Markus Kottlaender <markus@intevation.de>
parents:
1403
diff
changeset
|
150 loading: null |
1276
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
151 }; |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
152 }, |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
153 computed: { |
1403
f7139b814a6c
improved bottleneck box height
Markus Kottlaender <markus@intevation.de>
parents:
1402
diff
changeset
|
154 ...mapState("application", [ |
f7139b814a6c
improved bottleneck box height
Markus Kottlaender <markus@intevation.de>
parents:
1402
diff
changeset
|
155 "searchQuery", |
f7139b814a6c
improved bottleneck box height
Markus Kottlaender <markus@intevation.de>
parents:
1402
diff
changeset
|
156 "showSearchbarLastState", |
f7139b814a6c
improved bottleneck box height
Markus Kottlaender <markus@intevation.de>
parents:
1402
diff
changeset
|
157 "showSplitscreen" |
f7139b814a6c
improved bottleneck box height
Markus Kottlaender <markus@intevation.de>
parents:
1402
diff
changeset
|
158 ]), |
2436
64ff5984351e
client: renamed store property
Markus Kottlaender <markus@intevation.de>
parents:
2435
diff
changeset
|
159 ...mapState("bottlenecks", ["bottlenecksList"]), |
2760
c6fba10926cc
client:correct a set of strings marking
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2739
diff
changeset
|
160 bottlenecksLabel() { |
c6fba10926cc
client:correct a set of strings marking
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2739
diff
changeset
|
161 return this.$gettext("Bottlenecks"); |
c6fba10926cc
client:correct a set of strings marking
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2739
diff
changeset
|
162 }, |
2871
2cdf43c84a8c
client: aligned width of searchbar and content box
Markus Kottlaender <markus@intevation.de>
parents:
2779
diff
changeset
|
163 countryLabel() { |
2cdf43c84a8c
client: aligned width of searchbar and content box
Markus Kottlaender <markus@intevation.de>
parents:
2779
diff
changeset
|
164 return this.$gettext("Country"); |
2cdf43c84a8c
client: aligned width of searchbar and content box
Markus Kottlaender <markus@intevation.de>
parents:
2779
diff
changeset
|
165 }, |
2779
21eb85cdfe45
Client: improve a set of strings marking for translations
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2760
diff
changeset
|
166 nameLabel() { |
21eb85cdfe45
Client: improve a set of strings marking for translations
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2760
diff
changeset
|
167 return this.$gettext("Name"); |
21eb85cdfe45
Client: improve a set of strings marking for translations
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2760
diff
changeset
|
168 }, |
21eb85cdfe45
Client: improve a set of strings marking for translations
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2760
diff
changeset
|
169 latestmeasurementLabel() { |
21eb85cdfe45
Client: improve a set of strings marking for translations
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2760
diff
changeset
|
170 return this.$gettext("Latest Measurement"); |
21eb85cdfe45
Client: improve a set of strings marking for translations
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2760
diff
changeset
|
171 }, |
21eb85cdfe45
Client: improve a set of strings marking for translations
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2760
diff
changeset
|
172 chainageLabel() { |
21eb85cdfe45
Client: improve a set of strings marking for translations
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2760
diff
changeset
|
173 return this.$gettext("Chainage"); |
21eb85cdfe45
Client: improve a set of strings marking for translations
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2760
diff
changeset
|
174 }, |
1299
2738a6ae9ad8
fontawesome 4 -> 5
Markus Kottlaender <markus@intevation.de>
parents:
1282
diff
changeset
|
175 sortIcon() { |
2738a6ae9ad8
fontawesome 4 -> 5
Markus Kottlaender <markus@intevation.de>
parents:
1282
diff
changeset
|
176 return this.sortDirection === "ASC" |
2738a6ae9ad8
fontawesome 4 -> 5
Markus Kottlaender <markus@intevation.de>
parents:
1282
diff
changeset
|
177 ? "sort-amount-down" |
2738a6ae9ad8
fontawesome 4 -> 5
Markus Kottlaender <markus@intevation.de>
parents:
1282
diff
changeset
|
178 : "sort-amount-up"; |
1276
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
179 } |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
180 }, |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
181 methods: { |
2738
add2d47c2567
client: tables: implemented simple default sorting
Markus Kottlaender <markus@intevation.de>
parents:
2541
diff
changeset
|
182 filteredBottlenecks() { |
add2d47c2567
client: tables: implemented simple default sorting
Markus Kottlaender <markus@intevation.de>
parents:
2541
diff
changeset
|
183 return this.bottlenecksList.filter(bn => { |
add2d47c2567
client: tables: implemented simple default sorting
Markus Kottlaender <markus@intevation.de>
parents:
2541
diff
changeset
|
184 return bn.properties.name |
add2d47c2567
client: tables: implemented simple default sorting
Markus Kottlaender <markus@intevation.de>
parents:
2541
diff
changeset
|
185 .toLowerCase() |
add2d47c2567
client: tables: implemented simple default sorting
Markus Kottlaender <markus@intevation.de>
parents:
2541
diff
changeset
|
186 .includes(this.searchQuery.toLowerCase()); |
add2d47c2567
client: tables: implemented simple default sorting
Markus Kottlaender <markus@intevation.de>
parents:
2541
diff
changeset
|
187 }); |
1276
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
188 }, |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
189 selectSurvey(survey, bottleneck) { |
1516
6b3756676bbe
refac: bottlenecks and surveydata are now retrieved via promises
Thomas Junk <thomas.junk@intevation.de>
parents:
1512
diff
changeset
|
190 this.$store |
6b3756676bbe
refac: bottlenecks and surveydata are now retrieved via promises
Thomas Junk <thomas.junk@intevation.de>
parents:
1512
diff
changeset
|
191 .dispatch( |
6b3756676bbe
refac: bottlenecks and surveydata are now retrieved via promises
Thomas Junk <thomas.junk@intevation.de>
parents:
1512
diff
changeset
|
192 "bottlenecks/setSelectedBottleneck", |
6b3756676bbe
refac: bottlenecks and surveydata are now retrieved via promises
Thomas Junk <thomas.junk@intevation.de>
parents:
1512
diff
changeset
|
193 bottleneck.properties.name |
6b3756676bbe
refac: bottlenecks and surveydata are now retrieved via promises
Thomas Junk <thomas.junk@intevation.de>
parents:
1512
diff
changeset
|
194 ) |
6b3756676bbe
refac: bottlenecks and surveydata are now retrieved via promises
Thomas Junk <thomas.junk@intevation.de>
parents:
1512
diff
changeset
|
195 .then(() => { |
6b3756676bbe
refac: bottlenecks and surveydata are now retrieved via promises
Thomas Junk <thomas.junk@intevation.de>
parents:
1512
diff
changeset
|
196 this.$store.commit("bottlenecks/selectedSurvey", survey); |
6b3756676bbe
refac: bottlenecks and surveydata are now retrieved via promises
Thomas Junk <thomas.junk@intevation.de>
parents:
1512
diff
changeset
|
197 }) |
6b3756676bbe
refac: bottlenecks and surveydata are now retrieved via promises
Thomas Junk <thomas.junk@intevation.de>
parents:
1512
diff
changeset
|
198 .then(() => { |
2136
3138d60dd1a6
moveToExtent substitutes moveMap where easy doable
Thomas Junk <thomas.junk@intevation.de>
parents:
1613
diff
changeset
|
199 this.$store.commit("map/moveToExtent", { |
3138d60dd1a6
moveToExtent substitutes moveMap where easy doable
Thomas Junk <thomas.junk@intevation.de>
parents:
1613
diff
changeset
|
200 feature: bottleneck, |
1516
6b3756676bbe
refac: bottlenecks and surveydata are now retrieved via promises
Thomas Junk <thomas.junk@intevation.de>
parents:
1512
diff
changeset
|
201 zoom: 17, |
6b3756676bbe
refac: bottlenecks and surveydata are now retrieved via promises
Thomas Junk <thomas.junk@intevation.de>
parents:
1512
diff
changeset
|
202 preventZoomOut: true |
6b3756676bbe
refac: bottlenecks and surveydata are now retrieved via promises
Thomas Junk <thomas.junk@intevation.de>
parents:
1512
diff
changeset
|
203 }); |
6b3756676bbe
refac: bottlenecks and surveydata are now retrieved via promises
Thomas Junk <thomas.junk@intevation.de>
parents:
1512
diff
changeset
|
204 }); |
1417
bd9253eec499
select bottleneck when clicked in bottleneck list
Markus Kottlaender <markus@intevation.de>
parents:
1415
diff
changeset
|
205 }, |
bd9253eec499
select bottleneck when clicked in bottleneck list
Markus Kottlaender <markus@intevation.de>
parents:
1415
diff
changeset
|
206 selectBottleneck(bottleneck) { |
1516
6b3756676bbe
refac: bottlenecks and surveydata are now retrieved via promises
Thomas Junk <thomas.junk@intevation.de>
parents:
1512
diff
changeset
|
207 this.$store |
6b3756676bbe
refac: bottlenecks and surveydata are now retrieved via promises
Thomas Junk <thomas.junk@intevation.de>
parents:
1512
diff
changeset
|
208 .dispatch( |
6b3756676bbe
refac: bottlenecks and surveydata are now retrieved via promises
Thomas Junk <thomas.junk@intevation.de>
parents:
1512
diff
changeset
|
209 "bottlenecks/setSelectedBottleneck", |
6b3756676bbe
refac: bottlenecks and surveydata are now retrieved via promises
Thomas Junk <thomas.junk@intevation.de>
parents:
1512
diff
changeset
|
210 bottleneck.properties.name |
6b3756676bbe
refac: bottlenecks and surveydata are now retrieved via promises
Thomas Junk <thomas.junk@intevation.de>
parents:
1512
diff
changeset
|
211 ) |
6b3756676bbe
refac: bottlenecks and surveydata are now retrieved via promises
Thomas Junk <thomas.junk@intevation.de>
parents:
1512
diff
changeset
|
212 .then(() => { |
6b3756676bbe
refac: bottlenecks and surveydata are now retrieved via promises
Thomas Junk <thomas.junk@intevation.de>
parents:
1512
diff
changeset
|
213 this.$store.commit("bottlenecks/setFirstSurveySelected"); |
6b3756676bbe
refac: bottlenecks and surveydata are now retrieved via promises
Thomas Junk <thomas.junk@intevation.de>
parents:
1512
diff
changeset
|
214 }) |
6b3756676bbe
refac: bottlenecks and surveydata are now retrieved via promises
Thomas Junk <thomas.junk@intevation.de>
parents:
1512
diff
changeset
|
215 .then(() => { |
2136
3138d60dd1a6
moveToExtent substitutes moveMap where easy doable
Thomas Junk <thomas.junk@intevation.de>
parents:
1613
diff
changeset
|
216 this.$store.commit("map/moveToExtent", { |
3138d60dd1a6
moveToExtent substitutes moveMap where easy doable
Thomas Junk <thomas.junk@intevation.de>
parents:
1613
diff
changeset
|
217 feature: bottleneck, |
1516
6b3756676bbe
refac: bottlenecks and surveydata are now retrieved via promises
Thomas Junk <thomas.junk@intevation.de>
parents:
1512
diff
changeset
|
218 zoom: 17, |
6b3756676bbe
refac: bottlenecks and surveydata are now retrieved via promises
Thomas Junk <thomas.junk@intevation.de>
parents:
1512
diff
changeset
|
219 preventZoomOut: true |
6b3756676bbe
refac: bottlenecks and surveydata are now retrieved via promises
Thomas Junk <thomas.junk@intevation.de>
parents:
1512
diff
changeset
|
220 }); |
6b3756676bbe
refac: bottlenecks and surveydata are now retrieved via promises
Thomas Junk <thomas.junk@intevation.de>
parents:
1512
diff
changeset
|
221 }); |
1276
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
222 }, |
2462
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
223 loadSurveys(bottleneck) { |
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
224 if (bottleneck === this.openBottleneck) { |
1276
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
225 this.openBottleneck = null; |
2462
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
226 this.openBottleneckSurveys = null; |
1276
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
227 } else { |
2462
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
228 this.loading = bottleneck; |
1276
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
229 |
2462
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
230 HTTP.get("/surveys/" + bottleneck.properties.name, { |
1276
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
231 headers: { |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
232 "X-Gemma-Auth": localStorage.getItem("token"), |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
233 "Content-type": "text/xml; charset=UTF-8" |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
234 } |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
235 }) |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
236 .then(response => { |
1449 | 237 this.openBottleneckSurveys = response.data.surveys.sort((a, b) => { |
238 return a.date_info < b.date_info ? 1 : -1; | |
239 }); | |
2462
9ae2a2f758bb
client: make use of new table header/body components
Markus Kottlaender <markus@intevation.de>
parents:
2436
diff
changeset
|
240 this.openBottleneck = bottleneck; |
1276
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
241 }) |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
242 .catch(error => { |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
243 const { status, data } = error.response; |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
244 displayError({ |
1460 | 245 title: this.$gettext("Backend Error"), |
1276
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
246 message: `${status}: ${data.message || data}` |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
247 }); |
1415
d4fc5f3c1252
improved style of bottleneck list
Markus Kottlaender <markus@intevation.de>
parents:
1403
diff
changeset
|
248 }) |
d4fc5f3c1252
improved style of bottleneck list
Markus Kottlaender <markus@intevation.de>
parents:
1403
diff
changeset
|
249 .finally(() => (this.loading = null)); |
1276
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
250 } |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
251 }, |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
252 displayCurrentChainage(from, to) { |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
253 return from / 10 + " - " + to / 10; |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
254 } |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
255 }, |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
256 mounted() { |
2435
3679d604645e
client: renamed store action
Markus Kottlaender <markus@intevation.de>
parents:
2387
diff
changeset
|
257 this.$store.dispatch("bottlenecks/loadBottlenecksList"); |
1276
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
258 } |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
259 }; |
aec9ed491dad
more cleanup in client/src
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
260 </script> |