Mercurial > gemma
annotate client/src/bottlenecks/Bottlenecks.vue @ 1077:c58608084c11
finished bottleneck list (search, sort, sounding data)
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Fri, 26 Oct 2018 14:04:37 +0200 |
parents | c9badb264d16 |
children | 5979b63cce9d |
rev | line source |
---|---|
1055
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1 <template> |
1077
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
2 <div :class="bottlenecksStyle" style="overflow: hidden; background: #fff;"> |
1055
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
3 <div @click="$store.commit('application/toggleBottlenecks');" class="ui-element close-bottlenecks"> |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
4 <i class="fa fa-close"></i> |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
5 </div> |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
6 |
1077
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
7 <h4>Bottlenecks</h4> |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
8 <hr class="mb-0"> |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
9 <input type="text" v-model="search" placeholder="Search Bottleneck..." class="border-0 w-100 p-2" /> |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
10 <div class="bottleneck-table d-flex flex-column"> |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
11 <div class="d-flex flex-row p-2 border-top"> |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
12 <div> |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
13 <a href="#" @click="sortBy('name')" class="sort-link">Name</a> |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
14 <i :class="sortClass" v-if="sortColumn === 'name'"></i> |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
15 </div> |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
16 <!--<div> |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
17 <a href="#" @click="sortBy('latestMeasurement')">Latest Measurement</a> |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
18 <i :class="sortClass" v-if="sortColumn === 'latestMeasurement'"></i> |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
19 </div>--> |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
20 <div></div> |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
21 </div> |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
22 <div class="d-flex flex-column"> |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
23 <div v-for="bottleneck in filteredAndSortedBottlenecks" :key="bottleneck.name" class="border-top"> |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
24 <div class="d-flex flex-row justify-content-between p-2"> |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
25 <div> |
1055
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
26 <a href="#" class="d-block" @click="moveToBottleneck(bottleneck)"> |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
27 {{ bottleneck.name }} |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
28 </a> |
1077
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
29 </div> |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
30 <!--<td>2018-10-25</td>--> |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
31 <div class="text-right"> |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
32 <button type="button" class="btn btn-sm btn-outline-secondary" @click="queryBottleneck(bottleneck)"> |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
33 <i class="fa fa-angle-down"></i> |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
34 </button> |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
35 </div> |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
36 </div> |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
37 <div :class="['surveys', {open: selectedBottleneck === bottleneck}]"> |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
38 <a href="#" class="d-block p-2 border-top" v-for="(survey, index) in surveys[bottleneck.name]" :key="index" @click="selectSurvey(survey)"> |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
39 {{ survey.date_info }} |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
40 </a> |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
41 </div> |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
42 </div> |
1055
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
43 </div> |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
44 </div> |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
45 </div> |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
46 </template> |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
47 |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
48 <script> |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
49 /* |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
50 * This is Free Software under GNU Affero General Public License v >= 3.0 |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
51 * without warranty, see README.md and license for details. |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
52 * |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
53 * SPDX-License-Identifier: AGPL-3.0-or-later |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
54 * License-Filename: LICENSES/AGPL-3.0.txt |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
55 * |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
56 * Copyright (C) 2018 by via donau |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
57 * – Österreichische Wasserstraßen-Gesellschaft mbH |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
58 * Software engineering by Intevation GmbH |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
59 * |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
60 * Author(s): |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
61 * Markus Kottländer <markus.kottlaender@intevation.de> |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
62 */ |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
63 import { mapState } from "vuex"; |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
64 import { fromLonLat } from "ol/proj"; |
1077
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
65 import { HTTP } from "../application/lib/http"; |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
66 import { displayError } from "../application/lib/errors.js"; |
1055
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
67 |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
68 export default { |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
69 name: "bottlenecks", |
1077
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
70 data() { |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
71 return { |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
72 search: "", |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
73 sortColumn: "name", |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
74 sortDirection: "ASC", |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
75 selectedBottleneck: null, |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
76 surveys: {} |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
77 }; |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
78 }, |
1055
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
79 computed: { |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
80 ...mapState("application", ["bottlenecksCollapsed"]), |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
81 ...mapState("bottlenecks", ["bottlenecks"]), |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
82 ...mapState("mapstore", ["openLayersMap"]), |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
83 bottlenecksStyle() { |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
84 return { |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
85 "ui-element": true, |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
86 bottlenecks: true, |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
87 overlay: true, |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
88 bottleneckscollapsed: this.bottlenecksCollapsed, |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
89 bottlenecksextended: !this.bottlenecksCollapsed, |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
90 shadow: true |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
91 }; |
1077
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
92 }, |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
93 filteredAndSortedBottlenecks() { |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
94 return this.bottlenecks |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
95 .filter(bn => { |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
96 return bn.name.toLowerCase().includes(this.search.toLowerCase()); |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
97 }) |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
98 .sort((bnA, bnB) => { |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
99 switch (this.sortColumn) { |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
100 case "name": |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
101 if (bnA.name.toLowerCase() < bnB.name.toLowerCase()) |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
102 return this.sortDirection === "ASC" ? -1 : 1; |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
103 if (bnA.name.toLowerCase() > bnB.name.toLowerCase()) |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
104 return this.sortDirection === "ASC" ? 1 : -1; |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
105 return 0; |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
106 default: |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
107 return 0; |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
108 } |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
109 }); |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
110 }, |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
111 sortClass() { |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
112 return { |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
113 fa: true, |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
114 "fa-sort-amount-asc": this.sortDirection === "ASC", |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
115 "fa-sort-amount-desc": this.sortDirection === "DESC", |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
116 "ml-1": true |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
117 }; |
1055
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
118 } |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
119 }, |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
120 methods: { |
1077
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
121 selectSurvey(survey) { |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
122 this.$store.commit("fairwayprofile/setSelectedMorph", survey); |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
123 this.moveToBottleneck(this.selectedBottleneck); |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
124 }, |
1055
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
125 moveToBottleneck(bottleneck) { |
1077
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
126 // TODO: make this central, duplicates code from application/Topbar.vue |
1055
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
127 if (bottleneck.geom.type == "Point") { |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
128 let view = this.openLayersMap.getView(); |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
129 const currentZoom = view.getZoom(); |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
130 const newZoom = Math.max(17, currentZoom); |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
131 view.animate( |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
132 { |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
133 zoom: newZoom, |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
134 center: fromLonLat( |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
135 bottleneck.geom.coordinates, |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
136 view.getProjection() |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
137 ) |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
138 }, |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
139 700 |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
140 ); |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
141 } |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
142 this.$store.commit("application/toggleBottlenecks"); |
1077
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
143 }, |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
144 sortBy(column) { |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
145 this.sortColumn = column; |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
146 this.sortDirection = this.sortDirection === "ASC" ? "DESC" : "ASC"; |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
147 }, |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
148 queryBottleneck(bottleneck) { |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
149 HTTP.get("/surveys/" + bottleneck.name, { |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
150 headers: { |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
151 "X-Gemma-Auth": localStorage.getItem("token"), |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
152 "Content-type": "text/xml; charset=UTF-8" |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
153 } |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
154 }) |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
155 .then(response => { |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
156 this.surveys[bottleneck.name] = response.data.surveys; |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
157 this.selectedBottleneck = |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
158 this.selectedBottleneck === bottleneck ? null : bottleneck; |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
159 }) |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
160 .catch(error => { |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
161 const { status, data } = error.response; |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
162 displayError({ |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
163 title: "Backend Error", |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
164 message: `${status}: ${data.message || data}` |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
165 }); |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
166 }); |
1055
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
167 } |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
168 }, |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
169 mounted() { |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
170 this.$store.dispatch("bottlenecks/loadBottlenecks"); |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
171 } |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
172 }; |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
173 </script> |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
174 |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
175 <style lang="scss"> |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
176 .bottlenecks { |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
177 position: absolute; |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
178 z-index: -2; |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
179 top: $offset; |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
180 left: 64px; |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
181 background-color: #ffffff; |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
182 padding-top: $offset; |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
183 opacity: $slight-transparent; |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
184 border-radius: $border-radius; |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
185 } |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
186 |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
187 .bottleneckscollapsed { |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
188 width: 0; |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
189 height: 0; |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
190 transition: $transition-fast; |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
191 } |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
192 |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
193 .bottlenecksextended { |
1060
c9badb264d16
client: fix eslint issues.
Bernhard Reiter <bernhard@intevation.de>
parents:
1055
diff
changeset
|
194 width: 500px; |
1055
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
195 } |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
196 |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
197 .close-bottlenecks { |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
198 position: absolute; |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
199 z-index: 2; |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
200 right: 0; |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
201 top: 7px; |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
202 border-radius: $border-radius; |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
203 height: $icon-width; |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
204 width: $icon-height; |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
205 display: none; |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
206 } |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
207 |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
208 .bottlenecksextended .close-bottlenecks { |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
209 display: block; |
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
210 } |
1077
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
211 |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
212 .surveys { |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
213 max-height: 0; |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
214 overflow: hidden; |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
215 transition: max-height 0.3s ease; |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
216 } |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
217 |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
218 .surveys.open { |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
219 max-height: 999px; |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
220 } |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
221 |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
222 .sort-link { |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
223 color: #444; |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
224 font-weight: bold; |
c58608084c11
finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents:
1060
diff
changeset
|
225 } |
1055
1ff8c072df18
WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
226 </style> |