1196
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1 <template>
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
2 <div :class="searchbarContainerStyle">
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
3 <div class="input-group-prepend shadow">
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
4 <span @click="toggleSearchbar" :class="searchButtonStyle" for="search">
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
5 <i class="fa fa-search d-print-none"></i>
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
6 </span>
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
7 </div>
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
8 <div class="searchgroup flex-fill">
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
9 <input
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
10 @keyup.enter="takeFirstSearchresult"
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
11 v-if="showSearchbar"
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
12 id="search"
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
13 v-model="searchQuery"
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
14 type="text"
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
15 class="form-control ui-element search searchbar d-print-none"
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
16 >
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
17 <ul v-if="showSearchbar && searchResults !== null " class="list-group d-print-none">
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
18 <li v-for="entry of searchResults" :key="entry.name" class="list-group-item">
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
19 <a href="#" @click.prevent="moveToSearchResult(entry)">{{entry.name}}</a>
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
20 </li>
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
21 </ul>
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
22 </div>
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
23 </div>
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
24 </template>
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
25
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
26 <style lang="sass" scoped>
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
27 .searchcontainer
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
28 height: $icon-height
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
29 border-radius: 0.25rem
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
30
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
31 .searchbar-expanded
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
32 margin-left: auto
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
33 margin-right: auto
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
34 padding-left: $offset
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
35 width: $searchbar-width !important
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
36 .searchbar
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
37 border-top-left-radius: 0 !important
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
38 border-bottom-left-radius: 0 !important
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
39
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
40
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
41 .searchbar-collapsed
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
42 margin-left: auto
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
43 width: $icon-width !important
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
44 transition: $transition-fast
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
45
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
46 .searchbar
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
47 margin-left: auto
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
48 margin-right: auto
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
49 height: $icon-height !important
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
50
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
51 .searchlabel
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
52 background-color: white !important
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
53
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
54 .input-group-text
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
55 height: $icon-height
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
56 width: $icon-width
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
57
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
58 .list-group
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
59 pointer-events: auto
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
60 </style>
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
61
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
62 <script>
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
63 /*
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
64 * This is Free Software under GNU Affero General Public License v >= 3.0
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
65 * without warranty, see README.md and license for details.
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
66 *
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
67 * SPDX-License-Identifier: AGPL-3.0-or-later
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
68 * License-Filename: LICENSES/AGPL-3.0.txt
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
69 *
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
70 * Copyright (C) 2018 by via donau
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
71 * – Österreichische Wasserstraßen-Gesellschaft mbH
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
72 * Software engineering by Intevation GmbH
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
73 *
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
74 * Author(s):
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
75 * Markus Kottländer <markus.kottlaender@intevation.de>
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
76 */
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
77 import debounce from "lodash.debounce";
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
78 import { mapState } from "vuex";
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
79
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
80 import { displayError } from "../application/lib/errors.js";
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
81 import { HTTP } from "../application/lib/http";
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
82
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
83 const setFocus = () => document.querySelector("#search").focus();
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
84
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
85 export default {
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
86 name: "search",
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
87 data() {
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
88 return {
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
89 searchQuery: "",
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
90 searchQueryIsDirty: false,
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
91 searchResults: null,
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
92 isSearching: false
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
93 };
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
94 },
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
95 computed: {
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
96 ...mapState("application", ["showSearchbar"]),
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
97 searchIndicator: function() {
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
98 if (this.isSearching) {
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
99 return "⟳";
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
100 } else if (this.searchQueryIsDirty) {
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
101 return "";
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
102 } else {
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
103 return "✓";
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
104 }
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
105 },
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
106 searchbarContainerStyle() {
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
107 return [
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
108 "d-flex input-group searchcontainer",
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
109 {
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
110 "searchbar-collapsed": !this.showSearchbar,
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
111 "searchbar-expanded": this.showSearchbar
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
112 }
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
113 ];
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
114 },
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
115 searchButtonStyle() {
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
116 return [
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
117 "ui-element input-group-text p-0 d-flex justify-content-center searchlabel d-print-none",
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
118 {
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
119 rounded: !this.showSearchbar,
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
120 "rounded-left": this.showSearchbar
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
121 }
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
122 ];
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
123 }
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
124 },
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
125 watch: {
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
126 searchQuery: function() {
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
127 this.searchQueryIsDirty = true;
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
128 this.triggerSearch();
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
129 }
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
130 },
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
131 methods: {
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
132 takeFirstSearchresult() {
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
133 if (!this.searchResults || this.searchResults.length != 1) return;
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
134 this.moveToSearchResult(this.searchResults[0]);
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
135 },
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
136 triggerSearch: debounce(function() {
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
137 this.doSearch();
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
138 }, 500),
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
139 doSearch() {
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
140 this.isCalculating = true;
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
141 this.searchResults = null;
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
142
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
143 if (this.searchQuery == "") {
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
144 return;
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
145 }
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
146
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
147 HTTP.post(
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
148 "/search",
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
149 { string: this.searchQuery },
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
150 {
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
151 headers: {
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
152 "X-Gemma-Auth": localStorage.getItem("token"),
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
153 "Content-type": "text/xml; charset=UTF-8"
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
154 }
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
155 }
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
156 )
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
157 .then(response => {
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
158 // console.log("got:", response.data);
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
159 this.searchResults = response.data;
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
160 })
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
161 .catch(error => {
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
162 const { status, data } = error.response;
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
163 displayError({
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
164 title: "Backend Error",
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
165 message: `${status}: ${data.message || data}`
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
166 });
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
167 });
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
168
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
169 this.isCalculating = false;
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
170 this.searchQueryIsDirty = false;
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
171 },
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
172 moveToSearchResult(resultEntry) {
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
173 // DEBUG console.log("Moving to", resultEntry);
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
174 if (resultEntry.geom.type == "Point") {
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
175 let zoom = 11;
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
176 if (resultEntry.type === "bottleneck") zoom = 17;
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
177 if (resultEntry.type === "rhm") zoom = 15;
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
178 if (resultEntry.type === "city") zoom = 13;
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
179
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
180 this.$store.commit("map/moveMap", {
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
181 coordinates: resultEntry.geom.coordinates,
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
182 zoom,
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
183 preventZoomOut: true
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
184 });
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
185 }
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
186 // this.searchQuery = ""; // clear search query again
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
187 this.toggleSearchbar();
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
188 },
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
189 toggleSearchbar() {
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
190 if (!this.showSearchbar) {
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
191 setTimeout(setFocus, 300);
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
192 }
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
193 this.$store.commit("application/showSearchbar", !this.showSearchbar);
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
194 }
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
195 }
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
196 };
|
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
197 </script>
|