Mercurial > gemma
annotate client/src/components/Search.vue @ 2282:2e40909a975d
clean searchbar when context is changed
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 15 Feb 2019 11:55:56 +0100 |
parents | 3138d60dd1a6 |
children | 1169f18a0f11 |
rev | line source |
---|---|
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1 <template> |
1361
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1299
diff
changeset
|
2 <div :class="searchbarContainerStyle"> |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1299
diff
changeset
|
3 <div class="input-group-prepend m-0 d-print-none"> |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1299
diff
changeset
|
4 <span @click="toggleSearchbar" :class="searchButtonStyle" for="search"> |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1299
diff
changeset
|
5 <font-awesome-icon icon="search"></font-awesome-icon> |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1299
diff
changeset
|
6 </span> |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
7 </div> |
1449 | 8 <div |
1480 | 9 :class="[ |
10 'searchgroup', | |
11 { | |
12 'searchgroup-collapsed': !showSearchbar, | |
13 big: | |
14 showContextBox && | |
1797
67340ceecc5f
feat: define sections and stretches etd
Thomas Junk <thomas.junk@intevation.de>
parents:
1670
diff
changeset
|
15 ['bottlenecks', 'staging', 'stretches'].indexOf( |
67340ceecc5f
feat: define sections and stretches etd
Thomas Junk <thomas.junk@intevation.de>
parents:
1670
diff
changeset
|
16 contextBoxContent |
67340ceecc5f
feat: define sections and stretches etd
Thomas Junk <thomas.junk@intevation.de>
parents:
1670
diff
changeset
|
17 ) !== -1 |
1480 | 18 } |
19 ]" | |
1449 | 20 > |
1361
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1299
diff
changeset
|
21 <input |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1299
diff
changeset
|
22 @keyup.enter="takeFirstSearchresult" |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1299
diff
changeset
|
23 id="search" |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1299
diff
changeset
|
24 v-model="searchQuery" |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1299
diff
changeset
|
25 type="text" |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1299
diff
changeset
|
26 :class="searchInputStyle" |
1480 | 27 /> |
1361
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1299
diff
changeset
|
28 </div> |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1299
diff
changeset
|
29 <div |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1299
diff
changeset
|
30 v-if="showSearchbar && searchResults !== null && !showContextBox" |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1299
diff
changeset
|
31 class="searchresults border-top ui-element bg-white rounded-bottom d-print-none position-absolute" |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1299
diff
changeset
|
32 > |
1480 | 33 <div |
34 v-for="entry of searchResults" | |
35 :key="entry.name" | |
36 class="border-top text-left" | |
37 > | |
38 <a | |
39 href="#" | |
40 @click.prevent="moveToSearchResult(entry)" | |
41 class="p-2 d-block text-nowrap" | |
42 > | |
1441
a4554e942954
Client: add a set of marked translations
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1425
diff
changeset
|
43 <font-awesome-icon |
a4554e942954
Client: add a set of marked translations
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1425
diff
changeset
|
44 icon="ship" |
a4554e942954
Client: add a set of marked translations
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1425
diff
changeset
|
45 v-if="entry.type === 'bottleneck'" |
a4554e942954
Client: add a set of marked translations
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1425
diff
changeset
|
46 class="mr-1" |
a4554e942954
Client: add a set of marked translations
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1425
diff
changeset
|
47 fixed-width |
a4554e942954
Client: add a set of marked translations
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1425
diff
changeset
|
48 /> |
1480 | 49 <font-awesome-icon |
50 icon="water" | |
51 v-if="entry.type === 'rhm'" | |
52 class="mr-1" | |
53 fixed-width | |
54 /> | |
55 <font-awesome-icon | |
56 icon="city" | |
57 v-if="entry.type === 'city'" | |
58 class="mr-1" | |
59 fixed-width | |
60 /> | |
1399
8e2c9e518440
improved search style
Markus Kottlaender <markus@intevation.de>
parents:
1398
diff
changeset
|
61 {{ entry.name }} |
8e2c9e518440
improved search style
Markus Kottlaender <markus@intevation.de>
parents:
1398
diff
changeset
|
62 </a> |
1361
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1299
diff
changeset
|
63 </div> |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1299
diff
changeset
|
64 </div> |
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1299
diff
changeset
|
65 </div> |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
66 </template> |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
67 |
1449 | 68 <style lang="scss" scoped> |
69 .searchcontainer { | |
70 opacity: 0.96; | |
71 } | |
72 | |
73 .searchcontainer .searchbar { | |
74 border-top-left-radius: 0 !important; | |
75 border-bottom-left-radius: 0 !important; | |
76 } | |
77 | |
78 .searchgroup { | |
79 margin-left: -3px; | |
80 transition: width 0.3s; | |
81 width: 300px; | |
82 overflow: hidden; | |
83 } | |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
84 |
1449 | 85 .searchgroup.big { |
86 width: 571px; | |
87 } | |
88 | |
89 .searchgroup-collapsed { | |
90 width: 0; | |
91 } | |
1286
ac6edfb83cf1
improved contextBox animations
Markus Kottlaender <markus@intevation.de>
parents:
1282
diff
changeset
|
92 |
1449 | 93 .searchbar { |
94 height: 2rem !important; | |
95 box-shadow: none !important; | |
96 } | |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
97 |
1449 | 98 .searchbar.rounded-top-right { |
99 border-radius: 0 !important; | |
100 border-top-right-radius: 0.25rem !important; | |
101 } | |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
102 |
1449 | 103 .searchlabel.rounded-top-left { |
104 border-radius: 0 !important; | |
105 border-top-left-radius: 0.25rem !important; | |
106 } | |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
107 |
1449 | 108 .input-group-text { |
109 height: 2rem; | |
110 width: 2rem; | |
111 } | |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
112 |
1449 | 113 .input-group-prepend svg path { |
114 fill: #666; | |
115 } | |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
116 |
1449 | 117 .searchresults { |
118 box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2); | |
119 top: 2rem; | |
120 left: 0; | |
121 right: 0; | |
122 max-height: 24rem; | |
123 overflow: auto; | |
124 } | |
125 | |
126 .searchresults > div:first-child { | |
127 border-top: 0 !important; | |
128 } | |
129 | |
130 .searchresults a { | |
131 text-decoration: none; | |
132 } | |
133 | |
134 .searchresults a:hover { | |
135 background: #f8f8f8; | |
136 } | |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
137 </style> |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
138 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
139 <script> |
1362
ca33ad696594
remove the first empyty lines
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1361
diff
changeset
|
140 /* This is Free Software under GNU Affero General Public License v >= 3.0 |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
141 * without warranty, see README.md and license for details. |
1361
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1299
diff
changeset
|
142 * |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
143 * SPDX-License-Identifier: AGPL-3.0-or-later |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
144 * License-Filename: LICENSES/AGPL-3.0.txt |
1361
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1299
diff
changeset
|
145 * |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
146 * Copyright (C) 2018 by via donau |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
147 * – Österreichische Wasserstraßen-Gesellschaft mbH |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
148 * Software engineering by Intevation GmbH |
1361
ea3a89a1813a
remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1299
diff
changeset
|
149 * |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
150 * Author(s): |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
151 * Markus Kottländer <markus.kottlaender@intevation.de> |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
152 */ |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
153 import debounce from "lodash.debounce"; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
154 import { mapState } from "vuex"; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
155 |
1613
f2d24dceecc7
refac: cleanup import paths
Thomas Junk <thomas.junk@intevation.de>
parents:
1558
diff
changeset
|
156 import { displayError } from "@/lib/errors.js"; |
f2d24dceecc7
refac: cleanup import paths
Thomas Junk <thomas.junk@intevation.de>
parents:
1558
diff
changeset
|
157 import { HTTP } from "@/lib/http"; |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
158 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
159 const setFocus = () => document.querySelector("#search").focus(); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
160 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
161 export default { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
162 name: "search", |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
163 data() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
164 return { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
165 searchQueryIsDirty: false, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
166 searchResults: null, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
167 isSearching: false |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
168 }; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
169 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
170 computed: { |
1282
a7dd8a3356fc
fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents:
1272
diff
changeset
|
171 ...mapState("application", [ |
a7dd8a3356fc
fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents:
1272
diff
changeset
|
172 "showSearchbar", |
a7dd8a3356fc
fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents:
1272
diff
changeset
|
173 "showContextBox", |
a7dd8a3356fc
fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents:
1272
diff
changeset
|
174 "contextBoxContent" |
a7dd8a3356fc
fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents:
1272
diff
changeset
|
175 ]), |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
176 searchQuery: { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
177 get() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
178 return this.$store.state.application.searchQuery; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
179 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
180 set(value) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
181 this.$store.commit("application/searchQuery", value); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
182 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
183 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
184 searchIndicator: function() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
185 if (this.isSearching) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
186 return "⟳"; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
187 } else if (this.searchQueryIsDirty) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
188 return ""; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
189 } else { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
190 return "✓"; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
191 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
192 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
193 searchbarContainerStyle() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
194 return [ |
1282
a7dd8a3356fc
fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents:
1272
diff
changeset
|
195 "input-group searchcontainer shadow-xs", |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
196 { |
1282
a7dd8a3356fc
fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents:
1272
diff
changeset
|
197 "d-flex": this.contextBoxContent !== "imports", |
1286
ac6edfb83cf1
improved contextBox animations
Markus Kottlaender <markus@intevation.de>
parents:
1282
diff
changeset
|
198 "d-none": this.contextBoxContent === "imports" && this.showContextBox |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
199 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
200 ]; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
201 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
202 searchInputStyle() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
203 return [ |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
204 "form-control ui-element search searchbar d-print-none border-0", |
1282
a7dd8a3356fc
fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents:
1272
diff
changeset
|
205 { "rounded-top-right": this.showContextBox || this.searchResults } |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
206 ]; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
207 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
208 searchButtonStyle() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
209 return [ |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
210 "ui-element input-group-text p-0 d-flex border-0 justify-content-center searchlabel bg-white d-print-none", |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
211 { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
212 rounded: !this.showSearchbar, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
213 "rounded-left": this.showSearchbar, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
214 "rounded-top-left": |
1282
a7dd8a3356fc
fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents:
1272
diff
changeset
|
215 this.showSearchbar && (this.showContextBox || this.searchResults) |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
216 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
217 ]; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
218 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
219 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
220 watch: { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
221 searchQuery: function() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
222 this.searchQueryIsDirty = true; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
223 this.triggerSearch(); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
224 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
225 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
226 methods: { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
227 takeFirstSearchresult() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
228 if (!this.searchResults || this.searchResults.length != 1) return; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
229 this.moveToSearchResult(this.searchResults[0]); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
230 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
231 triggerSearch: debounce(function() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
232 this.doSearch(); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
233 }, 500), |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
234 doSearch() { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
235 this.isCalculating = true; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
236 this.searchResults = null; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
237 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
238 if (this.searchQuery == "") { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
239 return; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
240 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
241 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
242 HTTP.post( |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
243 "/search", |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
244 { string: this.searchQuery }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
245 { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
246 headers: { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
247 "X-Gemma-Auth": localStorage.getItem("token"), |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
248 "Content-type": "text/xml; charset=UTF-8" |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
249 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
250 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
251 ) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
252 .then(response => { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
253 this.searchResults = response.data; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
254 }) |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
255 .catch(error => { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
256 const { status, data } = error.response; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
257 displayError({ |
1441
a4554e942954
Client: add a set of marked translations
Fadi Abbud <fadi.abbud@intevation.de>
parents:
1425
diff
changeset
|
258 title: this.$gettext("Backend Error"), |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
259 message: `${status}: ${data.message || data}` |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
260 }); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
261 }); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
262 |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
263 this.isCalculating = false; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
264 this.searchQueryIsDirty = false; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
265 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
266 moveToSearchResult(resultEntry) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
267 if (resultEntry.geom.type == "Point") { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
268 let zoom = 11; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
269 if (resultEntry.type === "bottleneck") zoom = 17; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
270 if (resultEntry.type === "rhm") zoom = 15; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
271 if (resultEntry.type === "city") zoom = 13; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
272 this.$store.commit("map/moveMap", { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
273 coordinates: resultEntry.geom.coordinates, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
274 zoom, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
275 preventZoomOut: true |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
276 }); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
277 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
278 // this.searchQuery = ""; // clear search query again |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
279 this.toggleSearchbar(); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
280 }, |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
281 toggleSearchbar() { |
1282
a7dd8a3356fc
fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents:
1272
diff
changeset
|
282 if (!this.showContextBox) { |
1272
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
283 if (!this.showSearchbar) { |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
284 setTimeout(setFocus, 300); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
285 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
286 this.$store.commit("application/showSearchbar", !this.showSearchbar); |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
287 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
288 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
289 } |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
290 }; |
bc55ffaeb639
cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
291 </script> |