Mercurial > gemma

annotate client/src/bottlenecks/Bottlenecks.vue @ 1143:846e336d8ee5

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
merge
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 12 Nov 2018 15:00:45 +0100
parents dc3f0277628a 2fda33d55d81
children 5f98d0c9d738
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>
1123
d9e6a1f6f394 moved all collapse flags for UI elements to store
Markus Kottlaender <markus@intevation.de>
parents: 1113
diff changeset
2 <div :class="bottlenecksStyle" :style="'left: ' + (showSidebar ? '17rem' : '64px')">
d9e6a1f6f394 moved all collapse flags for UI elements to store
Markus Kottlaender <markus@intevation.de>
parents: 1113
diff changeset
3 <div @click="$store.commit('application/showBottlenecks', !showBottlenecks);" class="ui-element close-bottlenecks">
1055
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" />
1092
d47b69baacfa added chainage column to bottleneck list
Markus Kottlaender <markus@intevation.de>
parents: 1090
diff changeset
10 <div class="row p-2 border-top text-left small">
1090
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
11 <div class="col-5">
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
12 <a href="#" @click="sortBy('name')" class="sort-link">Name</a>
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
13 <i :class="sortClass" v-if="sortColumn === 'name'"></i>
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
14 </div>
1092
d47b69baacfa added chainage column to bottleneck list
Markus Kottlaender <markus@intevation.de>
parents: 1090
diff changeset
15 <div class="col-2">
1090
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
16 <a href="#" @click="sortBy('latestMeasurement')" class="sort-link">Latest Measurement</a>
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
17 <i :class="sortClass" v-if="sortColumn === 'latestMeasurement'"></i>
1077
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
18 </div>
1092
d47b69baacfa added chainage column to bottleneck list
Markus Kottlaender <markus@intevation.de>
parents: 1090
diff changeset
19 <div class="col-3">
d47b69baacfa added chainage column to bottleneck list
Markus Kottlaender <markus@intevation.de>
parents: 1090
diff changeset
20 <a href="#" @click="sortBy('chainage')" class="sort-link">Chainage</a>
d47b69baacfa added chainage column to bottleneck list
Markus Kottlaender <markus@intevation.de>
parents: 1090
diff changeset
21 <i :class="sortClass" v-if="sortColumn === 'chainage'"></i>
d47b69baacfa added chainage column to bottleneck list
Markus Kottlaender <markus@intevation.de>
parents: 1090
diff changeset
22 </div>
1090
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
23 <div class="col-2"></div>
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
24 </div>
1092
d47b69baacfa added chainage column to bottleneck list
Markus Kottlaender <markus@intevation.de>
parents: 1090
diff changeset
25 <div class="bottleneck-list small text-left">
1090
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
26 <div v-for="bottleneck in filteredAndSortedBottlenecks()" :key="bottleneck.properties.name" class="border-top row mx-0 py-2">
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
27 <div class="col-5 text-left">
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
28 <a href="#" class="d-block" @click="moveToBottleneck(bottleneck)">
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
29 {{ bottleneck.properties.name }}
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
30 </a>
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
31 </div>
1092
d47b69baacfa added chainage column to bottleneck list
Markus Kottlaender <markus@intevation.de>
parents: 1090
diff changeset
32 <div class="col-2">
1111
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1101
diff changeset
33 {{ displayCurrentSurvey(bottleneck.properties.current) }}
1090
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
34 </div>
1092
d47b69baacfa added chainage column to bottleneck list
Markus Kottlaender <markus@intevation.de>
parents: 1090
diff changeset
35 <div class="col-3">
1111
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1101
diff changeset
36 {{ displayCurrentChainage(bottleneck.properties.from, bottleneck.properties.from) }}
1092
d47b69baacfa added chainage column to bottleneck list
Markus Kottlaender <markus@intevation.de>
parents: 1090
diff changeset
37 </div>
1090
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
38 <div class="col-2 text-right">
1111
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1101
diff changeset
39 <button type="button" class="btn btn-sm btn-outline-secondary" @click="toggleBottleneck(bottleneck.properties.name)">
1090
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
40 <i class="fa fa-angle-down"></i>
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
41 </button>
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
42 </div>
1111
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1101
diff changeset
43 <div :class="['col-12', 'surveys', {open: openBottleneck === bottleneck.properties.name}]">
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1101
diff changeset
44 <a href="#" class="d-block p-2" v-for="(survey, index) in openBottleneckSurveys" :key="index" @click="selectSurvey(survey, bottleneck)">
1090
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
45 {{ survey.date_info }}
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
46 </a>
1077
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
47 </div>
1055
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
48 </div>
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
49 </div>
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
50 </div>
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
51 </template>
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 <script>
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
54 /*
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
55 * 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
56 * without warranty, see README.md and license for details.
1090
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
57 *
1055
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
58 * SPDX-License-Identifier: AGPL-3.0-or-later
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59 * License-Filename: LICENSES/AGPL-3.0.txt
1090
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
60 *
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
61 * Copyright (C) 2018 by via donau
1055
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
62 * – Österreichische Wasserstraßen-Gesellschaft mbH
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 * Software engineering by Intevation GmbH
1090
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
64 *
1055
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65 * Author(s):
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 * Markus Kottländer <markus.kottlaender@intevation.de>
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67 */
1079
5979b63cce9d prevent overlapping of sidebar menu and bottleneck list
Markus Kottlaender <markus@intevation.de>
parents: 1077
diff changeset
68 import { mapState, mapGetters } from "vuex";
1055
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
69 import { fromLonLat } from "ol/proj";
1077
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
70 import { HTTP } from "../application/lib/http";
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
71 import { displayError } from "../application/lib/errors.js";
1055
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
72
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
73 export default {
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
74 name: "bottlenecks",
1077
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
75 data() {
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
76 return {
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
77 search: "",
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
78 sortColumn: "name",
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
79 sortDirection: "ASC",
1111
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1101
diff changeset
80 openBottleneck: null,
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1101
diff changeset
81 openBottleneckSurveys: null
1077
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
82 };
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
83 },
1055
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
84 computed: {
1123
d9e6a1f6f394 moved all collapse flags for UI elements to store
Markus Kottlaender <markus@intevation.de>
parents: 1113
diff changeset
85 ...mapState("application", ["showBottlenecks", "showSidebar"]),
1055
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
86 ...mapState("bottlenecks", ["bottlenecks"]),
1113
595654ad3f66 renamed mapstore to map (like other stores)
Markus Kottlaender <markus@intevation.de>
parents: 1111
diff changeset
87 ...mapState("map", ["openLayersMap"]),
1055
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
88 bottlenecksStyle() {
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
89 return {
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
90 "ui-element": true,
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
91 bottlenecks: true,
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
92 overlay: true,
1123
d9e6a1f6f394 moved all collapse flags for UI elements to store
Markus Kottlaender <markus@intevation.de>
parents: 1113
diff changeset
93 bottleneckscollapsed: !this.showBottlenecks,
d9e6a1f6f394 moved all collapse flags for UI elements to store
Markus Kottlaender <markus@intevation.de>
parents: 1113
diff changeset
94 bottlenecksextended: this.showBottlenecks,
1055
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
95 shadow: true
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
96 };
1077
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 sortClass() {
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
99 return {
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
100 fa: true,
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
101 "fa-sort-amount-asc": this.sortDirection === "ASC",
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
102 "fa-sort-amount-desc": this.sortDirection === "DESC",
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
103 "ml-1": true
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
104 };
1055
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
105 }
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
106 },
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
107 methods: {
1090
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
108 filteredAndSortedBottlenecks() {
1101
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
109 return this.bottlenecks
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
110 .filter(bn => {
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
111 return bn.properties.name
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
112 .toLowerCase()
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
113 .includes(this.search.toLowerCase());
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
114 })
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
115 .sort((bnA, bnB) => {
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
116 switch (this.sortColumn) {
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
117 case "name":
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
118 if (
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
119 bnA.properties.name.toLowerCase() <
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
120 bnB.properties.name.toLowerCase()
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
121 )
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
122 return this.sortDirection === "ASC" ? -1 : 1;
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
123 if (
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
124 bnA.properties.name.toLowerCase() >
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
125 bnB.properties.name.toLowerCase()
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
126 )
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
127 return this.sortDirection === "ASC" ? 1 : -1;
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
128 return 0;
1090
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
129
1101
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
130 case "latestMeasurement": {
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
131 if (
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
132 (bnA.properties.current || "") < (bnB.properties.current || "")
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
133 )
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
134 return this.sortDirection === "ASC" ? -1 : 1;
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
135 if (
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
136 (bnA.properties.current || "") > (bnB.properties.current || "")
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
137 )
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
138 return this.sortDirection === "ASC" ? 1 : -1;
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
139 return 0;
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
140 }
1090
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
141
1101
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
142 case "chainage":
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
143 if (bnA.properties.from < bnB.properties.from)
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
144 return this.sortDirection === "ASC" ? -1 : 1;
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
145 if (bnA.properties.from > bnB.properties.from)
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
146 return this.sortDirection === "ASC" ? 1 : -1;
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
147 return 0;
1092
d47b69baacfa added chainage column to bottleneck list
Markus Kottlaender <markus@intevation.de>
parents: 1090
diff changeset
148
1101
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
149 default:
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
150 return 0;
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
151 }
67e9355e7a58 fix lint errors
Markus Kottlaender <markus@intevation.de>
parents: 1092
diff changeset
152 });
1090
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
153 },
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
154 selectSurvey(survey, bottleneck) {
1142
dc3f0277628a feat: Importqueue listing (Proof of concept)
Thomas Junk <thomas.junk@intevation.de>
parents: 1123
diff changeset
155 this.$store.dispatch(
dc3f0277628a feat: Importqueue listing (Proof of concept)
Thomas Junk <thomas.junk@intevation.de>
parents: 1123
diff changeset
156 "bottlenecks/setSelectedBottleneck",
dc3f0277628a feat: Importqueue listing (Proof of concept)
Thomas Junk <thomas.junk@intevation.de>
parents: 1123
diff changeset
157 bottleneck.properties.name
dc3f0277628a feat: Importqueue listing (Proof of concept)
Thomas Junk <thomas.junk@intevation.de>
parents: 1123
diff changeset
158 );
1111
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1101
diff changeset
159 this.$store.commit("bottlenecks/setSelectedSurvey", survey);
1090
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
160 this.moveToBottleneck(bottleneck);
1077
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
161 },
1055
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
162 moveToBottleneck(bottleneck) {
1077
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
163 // TODO: make this central, duplicates code from application/Topbar.vue
1090
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
164 let view = this.openLayersMap.getView();
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
165 const currentZoom = view.getZoom();
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
166 const newZoom = Math.max(17, currentZoom);
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
167 view.animate(
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
168 {
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
169 zoom: newZoom,
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
170 center: fromLonLat(
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
171 bottleneck.geometry.coordinates,
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
172 view.getProjection()
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
173 )
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
174 },
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
175 700
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
176 );
1077
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
177 },
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
178 sortBy(column) {
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
179 this.sortColumn = column;
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
180 this.sortDirection = this.sortDirection === "ASC" ? "DESC" : "ASC";
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
181 },
1111
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1101
diff changeset
182 toggleBottleneck(name) {
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1101
diff changeset
183 this.openBottleneckSurveys = null;
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1101
diff changeset
184 if (name === this.openBottleneck) {
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1101
diff changeset
185 this.openBottleneck = null;
1090
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
186 } else {
1111
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1101
diff changeset
187 this.openBottleneck = name;
1142
dc3f0277628a feat: Importqueue listing (Proof of concept)
Thomas Junk <thomas.junk@intevation.de>
parents: 1123
diff changeset
188
1111
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1101
diff changeset
189 HTTP.get("/surveys/" + name, {
1090
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
190 headers: {
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
191 "X-Gemma-Auth": localStorage.getItem("token"),
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
192 "Content-type": "text/xml; charset=UTF-8"
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
193 }
1077
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
194 })
1090
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
195 .then(response => {
1111
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1101
diff changeset
196 this.openBottleneckSurveys = response.data.surveys;
1090
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
197 })
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
198 .catch(error => {
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
199 const { status, data } = error.response;
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
200 displayError({
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
201 title: "Backend Error",
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
202 message: `${status}: ${data.message || data}`
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
203 });
1077
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
204 });
1090
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
205 }
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
206 },
1111
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1101
diff changeset
207 displayCurrentSurvey(current) {
1090
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
208 return current ? current.substr(0, current.length - 1) : "";
1092
d47b69baacfa added chainage column to bottleneck list
Markus Kottlaender <markus@intevation.de>
parents: 1090
diff changeset
209 },
1111
f106aee673e7 selected bottleneck and surveys now handled by bottleneck store
Markus Kottlaender <markus@intevation.de>
parents: 1101
diff changeset
210 displayCurrentChainage(from, to) {
1142
dc3f0277628a feat: Importqueue listing (Proof of concept)
Thomas Junk <thomas.junk@intevation.de>
parents: 1123
diff changeset
211 return from / 10 + " - " + to / 10;
1055
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
212 }
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
213 },
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
214 mounted() {
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
215 this.$store.dispatch("bottlenecks/loadBottlenecks");
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
216 }
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
217 };
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
218 </script>
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
219
1139
2fda33d55d81 scoped css
Markus Kottlaender <markus@intevation.de>
parents: 1123
diff changeset
220 <style lang="scss" scoped>
1055
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
221 .bottlenecks {
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
222 position: absolute;
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
223 z-index: -2;
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
224 top: $offset;
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
225 background-color: #ffffff;
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
226 padding-top: $offset;
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
227 opacity: $slight-transparent;
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
228 border-radius: $border-radius;
1090
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
229 transition: left 0.3s ease;
1079
5979b63cce9d prevent overlapping of sidebar menu and bottleneck list
Markus Kottlaender <markus@intevation.de>
parents: 1077
diff changeset
230 overflow: hidden;
5979b63cce9d prevent overlapping of sidebar menu and bottleneck list
Markus Kottlaender <markus@intevation.de>
parents: 1077
diff changeset
231 background: #fff;
1055
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
232 }
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
233
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
234 .bottleneckscollapsed {
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
235 width: 0;
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
236 height: 0;
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
237 transition: $transition-fast;
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
238 }
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
239
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
240 .bottlenecksextended {
1090
dbf0221b1cf1 bottleneck list uses different wfs endpoint now
Markus Kottlaender <markus@intevation.de>
parents: 1087
diff changeset
241 width: 600px;
1055
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
242 }
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
243
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
244 .close-bottlenecks {
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
245 position: absolute;
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
246 z-index: 2;
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
247 right: 0;
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
248 top: 7px;
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
249 border-radius: $border-radius;
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
250 height: $icon-width;
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
251 width: $icon-height;
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
252 display: none;
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
253 }
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
254
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
255 .bottlenecksextended .close-bottlenecks {
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
256 display: block;
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
257 }
1077
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
258
1080
264d328f9ebb made bottleneck list scrollable
Markus Kottlaender <markus@intevation.de>
parents: 1079
diff changeset
259 .bottleneck-list {
264d328f9ebb made bottleneck list scrollable
Markus Kottlaender <markus@intevation.de>
parents: 1079
diff changeset
260 overflow-y: auto;
264d328f9ebb made bottleneck list scrollable
Markus Kottlaender <markus@intevation.de>
parents: 1079
diff changeset
261 max-height: 500px;
264d328f9ebb made bottleneck list scrollable
Markus Kottlaender <markus@intevation.de>
parents: 1079
diff changeset
262 }
264d328f9ebb made bottleneck list scrollable
Markus Kottlaender <markus@intevation.de>
parents: 1079
diff changeset
263
1077
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
264 .surveys {
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
265 max-height: 0;
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
266 overflow: hidden;
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
267 transition: max-height 0.3s ease;
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
268 }
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
269
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
270 .surveys.open {
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
271 max-height: 999px;
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
272 }
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
273
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
274 .sort-link {
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
275 color: #444;
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
276 font-weight: bold;
c58608084c11 finished bottleneck list (search, sort, sounding data)
Markus Kottlaender <markus@intevation.de>
parents: 1060
diff changeset
277 }
1055
1ff8c072df18 WIP: Bottleneck list/table
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
278 </style>