Mercurial > gemma

annotate client/src/bottlenecks/Bottlenecks.vue @ 1077:c58608084c11

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
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>