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