Mercurial > gemma
annotate client/src/application/Search.vue @ 1240:9b0a7b3ea297
inport sounding results
| author | Thomas Junk <thomas.junk@intevation.de> |
|---|---|
| date | Tue, 20 Nov 2018 17:37:30 +0100 |
| parents | 315e618a29fd |
| children | 3c84035b1f1b |
| 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 > |
|
1231
315e618a29fd
improved search styling
Markus Kottlaender <markus@intevation.de>
parents:
1230
diff
changeset
|
17 <div v-if="showSearchbar && searchResults !== null && !showInContextBox" class="searchresults border-top ui-element bg-white rounded-bottom d-print-none"> |
|
315e618a29fd
improved search styling
Markus Kottlaender <markus@intevation.de>
parents:
1230
diff
changeset
|
18 <div v-for="entry of searchResults" :key="entry.name" class="border-top py-2"> |
|
315e618a29fd
improved search styling
Markus Kottlaender <markus@intevation.de>
parents:
1230
diff
changeset
|
19 <a href="#" @click.prevent="moveToSearchResult(entry)">{{ entry.name }}</a> |
|
315e618a29fd
improved search styling
Markus Kottlaender <markus@intevation.de>
parents:
1230
diff
changeset
|
20 </div> |
|
315e618a29fd
improved search styling
Markus Kottlaender <markus@intevation.de>
parents:
1230
diff
changeset
|
21 </div> |
| 1196 | 22 </div> |
| 23 </div> | |
| 24 </template> | |
| 25 | |
| 26 <style lang="sass" scoped> | |
| 27 .searchcontainer | |
| 28 height: $icon-height | |
| 29 | |
| 30 .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
|
31 min-width: 600px |
| 1196 | 32 .searchbar |
| 33 border-top-left-radius: 0 !important | |
| 34 border-bottom-left-radius: 0 !important | |
| 35 | |
| 36 .searchbar-collapsed | |
| 37 width: $icon-width !important | |
| 38 transition: $transition-fast | |
| 39 | |
| 40 .searchbar | |
| 41 height: $icon-height !important | |
|
1204
ddfdf440da24
made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents:
1201
diff
changeset
|
42 box-shadow: none !important |
|
ddfdf440da24
made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents:
1201
diff
changeset
|
43 &.rounded-top-right |
|
ddfdf440da24
made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents:
1201
diff
changeset
|
44 border-radius: 0 !important |
|
1213
9d93968db2cd
replaced custom css with bootstrap classes
Markus Kottlaender <markus@intevation.de>
parents:
1207
diff
changeset
|
45 border-top-right-radius: $border-radius !important |
| 1196 | 46 |
| 47 .searchlabel | |
|
1204
ddfdf440da24
made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents:
1201
diff
changeset
|
48 &.rounded-top-left |
|
ddfdf440da24
made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents:
1201
diff
changeset
|
49 border-radius: 0 !important |
|
1213
9d93968db2cd
replaced custom css with bootstrap classes
Markus Kottlaender <markus@intevation.de>
parents:
1207
diff
changeset
|
50 border-top-left-radius: $border-radius !important |
| 1196 | 51 |
| 52 .input-group-text | |
| 53 height: $icon-height | |
| 54 width: $icon-width | |
| 55 | |
|
1231
315e618a29fd
improved search styling
Markus Kottlaender <markus@intevation.de>
parents:
1230
diff
changeset
|
56 .searchresults |
|
315e618a29fd
improved search styling
Markus Kottlaender <markus@intevation.de>
parents:
1230
diff
changeset
|
57 margin-left: -31px |
|
315e618a29fd
improved search styling
Markus Kottlaender <markus@intevation.de>
parents:
1230
diff
changeset
|
58 max-height: 20rem |
|
1204
ddfdf440da24
made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents:
1201
diff
changeset
|
59 overflow: auto |
|
1231
315e618a29fd
improved search styling
Markus Kottlaender <markus@intevation.de>
parents:
1230
diff
changeset
|
60 > div:first-child |
|
315e618a29fd
improved search styling
Markus Kottlaender <markus@intevation.de>
parents:
1230
diff
changeset
|
61 border-top: 0 !important |
| 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: { | |
|
1230
957907eaaa72
implemented context sensitive box below search bar (see: issue224)
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
97 ...mapState("application", ["showSearchbar", "showInContextBox"]), |
|
1204
ddfdf440da24
made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents:
1201
diff
changeset
|
98 searchQuery: { |
|
ddfdf440da24
made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents:
1201
diff
changeset
|
99 get() { |
|
ddfdf440da24
made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents:
1201
diff
changeset
|
100 return this.$store.state.application.searchQuery; |
|
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 set(value) { |
|
ddfdf440da24
made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents:
1201
diff
changeset
|
103 this.$store.commit("application/searchQuery", value); |
|
ddfdf440da24
made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents:
1201
diff
changeset
|
104 } |
|
ddfdf440da24
made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents:
1201
diff
changeset
|
105 }, |
| 1196 | 106 searchIndicator: function() { |
| 107 if (this.isSearching) { | |
| 108 return "⟳"; | |
| 109 } else if (this.searchQueryIsDirty) { | |
| 110 return ""; | |
| 111 } else { | |
| 112 return "✓"; | |
| 113 } | |
| 114 }, | |
| 115 searchbarContainerStyle() { | |
| 116 return [ | |
|
1217
ba8cd80d68b6
made more use of bootstrap classes instead of custom css
Markus Kottlaender <markus@intevation.de>
parents:
1213
diff
changeset
|
117 "input-group searchcontainer ml-3 shadow", |
| 1196 | 118 { |
| 119 "searchbar-collapsed": !this.showSearchbar, | |
|
1204
ddfdf440da24
made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents:
1201
diff
changeset
|
120 "searchbar-expanded": this.showSearchbar, |
|
1230
957907eaaa72
implemented context sensitive box below search bar (see: issue224)
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
121 "d-flex": this.showInContextBox !== "imports", |
|
957907eaaa72
implemented context sensitive box below search bar (see: issue224)
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
122 "d-none": this.showInContextBox === "imports" |
| 1196 | 123 } |
| 124 ]; | |
| 125 }, | |
|
1204
ddfdf440da24
made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents:
1201
diff
changeset
|
126 searchInputStyle() { |
|
ddfdf440da24
made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents:
1201
diff
changeset
|
127 return [ |
|
ddfdf440da24
made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents:
1201
diff
changeset
|
128 "form-control ui-element search searchbar d-print-none border-0", |
|
1231
315e618a29fd
improved search styling
Markus Kottlaender <markus@intevation.de>
parents:
1230
diff
changeset
|
129 { "rounded-top-right": this.showInContextBox || this.searchResults } |
|
1204
ddfdf440da24
made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents:
1201
diff
changeset
|
130 ]; |
|
ddfdf440da24
made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents:
1201
diff
changeset
|
131 }, |
| 1196 | 132 searchButtonStyle() { |
| 133 return [ | |
|
1217
ba8cd80d68b6
made more use of bootstrap classes instead of custom css
Markus Kottlaender <markus@intevation.de>
parents:
1213
diff
changeset
|
134 "ui-element input-group-text p-0 d-flex border-0 justify-content-center searchlabel bg-white d-print-none", |
| 1196 | 135 { |
| 136 rounded: !this.showSearchbar, | |
|
1204
ddfdf440da24
made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents:
1201
diff
changeset
|
137 "rounded-left": this.showSearchbar, |
|
1231
315e618a29fd
improved search styling
Markus Kottlaender <markus@intevation.de>
parents:
1230
diff
changeset
|
138 "rounded-top-left": |
|
315e618a29fd
improved search styling
Markus Kottlaender <markus@intevation.de>
parents:
1230
diff
changeset
|
139 this.showSearchbar && (this.showInContextBox || this.searchResults) |
| 1196 | 140 } |
| 141 ]; | |
| 142 } | |
| 143 }, | |
| 144 watch: { | |
| 145 searchQuery: function() { | |
| 146 this.searchQueryIsDirty = true; | |
| 147 this.triggerSearch(); | |
| 148 } | |
| 149 }, | |
| 150 methods: { | |
| 151 takeFirstSearchresult() { | |
| 152 if (!this.searchResults || this.searchResults.length != 1) return; | |
| 153 this.moveToSearchResult(this.searchResults[0]); | |
| 154 }, | |
| 155 triggerSearch: debounce(function() { | |
| 156 this.doSearch(); | |
| 157 }, 500), | |
| 158 doSearch() { | |
| 159 this.isCalculating = true; | |
| 160 this.searchResults = null; | |
| 161 | |
| 162 if (this.searchQuery == "") { | |
| 163 return; | |
| 164 } | |
| 165 | |
| 166 HTTP.post( | |
| 167 "/search", | |
| 168 { string: this.searchQuery }, | |
| 169 { | |
| 170 headers: { | |
| 171 "X-Gemma-Auth": localStorage.getItem("token"), | |
| 172 "Content-type": "text/xml; charset=UTF-8" | |
| 173 } | |
| 174 } | |
| 175 ) | |
| 176 .then(response => { | |
| 177 // console.log("got:", response.data); | |
| 178 this.searchResults = response.data; | |
| 179 }) | |
| 180 .catch(error => { | |
| 181 const { status, data } = error.response; | |
| 182 displayError({ | |
| 183 title: "Backend Error", | |
| 184 message: `${status}: ${data.message || data}` | |
| 185 }); | |
| 186 }); | |
| 187 | |
| 188 this.isCalculating = false; | |
| 189 this.searchQueryIsDirty = false; | |
| 190 }, | |
| 191 moveToSearchResult(resultEntry) { | |
| 192 // DEBUG console.log("Moving to", resultEntry); | |
| 193 if (resultEntry.geom.type == "Point") { | |
| 194 let zoom = 11; | |
| 195 if (resultEntry.type === "bottleneck") zoom = 17; | |
| 196 if (resultEntry.type === "rhm") zoom = 15; | |
| 197 if (resultEntry.type === "city") zoom = 13; | |
| 198 | |
| 199 this.$store.commit("map/moveMap", { | |
| 200 coordinates: resultEntry.geom.coordinates, | |
| 201 zoom, | |
| 202 preventZoomOut: true | |
| 203 }); | |
| 204 } | |
| 205 // this.searchQuery = ""; // clear search query again | |
| 206 this.toggleSearchbar(); | |
| 207 }, | |
| 208 toggleSearchbar() { | |
|
1230
957907eaaa72
implemented context sensitive box below search bar (see: issue224)
Markus Kottlaender <markus@intevation.de>
parents:
1217
diff
changeset
|
209 if (!this.showInContextBox) { |
|
1204
ddfdf440da24
made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents:
1201
diff
changeset
|
210 if (!this.showSearchbar) { |
|
ddfdf440da24
made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents:
1201
diff
changeset
|
211 setTimeout(setFocus, 300); |
|
ddfdf440da24
made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents:
1201
diff
changeset
|
212 } |
|
ddfdf440da24
made searchbar contextual
Markus Kottlaender <markus@intevation.de>
parents:
1201
diff
changeset
|
213 this.$store.commit("application/showSearchbar", !this.showSearchbar); |
| 1196 | 214 } |
| 215 } | |
| 216 } | |
| 217 }; | |
| 218 </script> |