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