Mercurial > gemma

annotate client/src/components/map/Search.vue @ 1399:8e2c9e518440

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
improved search style - added icons for search result types - added missing box-shadow - improved style when hovering search results
author Markus Kottlaender <markus@intevation.de>
date Wed, 28 Nov 2018 15:45:56 +0100
parents d6dc4bcf55d3
children c8fe86d1c270
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
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>
1361
ea3a89a1813a remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
8 <div :class="['searchgroup', {'searchgroup-collapsed': !showSearchbar}]">
ea3a89a1813a remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
9 <input
ea3a89a1813a remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
10 @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
11 id="search"
ea3a89a1813a remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
12 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
13 type="text"
ea3a89a1813a remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
14 :class="searchInputStyle"
ea3a89a1813a remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
15 >
ea3a89a1813a remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
16 </div>
ea3a89a1813a remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
17 <div
ea3a89a1813a remove trailing whitespace, add headers for Makefile, add the missed authors
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
18 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
19 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
20 >
1399
8e2c9e518440 improved search style
Markus Kottlaender <markus@intevation.de>
parents: 1398
diff changeset
21 <div v-for="entry of searchResults" :key="entry.name" class="border-top text-left">
8e2c9e518440 improved search style
Markus Kottlaender <markus@intevation.de>
parents: 1398
diff changeset
22 <a href="#" @click.prevent="moveToSearchResult(entry)" class="p-2 d-block text-nowrap">
8e2c9e518440 improved search style
Markus Kottlaender <markus@intevation.de>
parents: 1398
diff changeset
23 <font-awesome-icon icon="ship" v-if="entry.type === 'bottleneck'" class="mr-1" fixed-width />
8e2c9e518440 improved search style
Markus Kottlaender <markus@intevation.de>
parents: 1398
diff changeset
24 <font-awesome-icon icon="water" v-if="entry.type === 'rhm'" class="mr-1" fixed-width />
8e2c9e518440 improved search style
Markus Kottlaender <markus@intevation.de>
parents: 1398
diff changeset
25 <font-awesome-icon icon="city" v-if="entry.type === 'city'" class="mr-1" fixed-width />
8e2c9e518440 improved search style
Markus Kottlaender <markus@intevation.de>
parents: 1398
diff changeset
26 {{ entry.name }}
8e2c9e518440 improved search style
Markus Kottlaender <markus@intevation.de>
parents: 1398
diff changeset
27 </a>
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 </div>
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
31 </template>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
32
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
33 <style lang="sass" scoped>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
34 .searchcontainer
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
35 opacity: $slight-transparent
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
36 .searchbar
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
37 border-top-left-radius: 0 !important
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
38 border-bottom-left-radius: 0 !important
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
39
1286
ac6edfb83cf1 improved contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1282
diff changeset
40 .searchgroup
ac6edfb83cf1 improved contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1282
diff changeset
41 margin-left: -3px
ac6edfb83cf1 improved contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1282
diff changeset
42 transition: width 0.3s
ac6edfb83cf1 improved contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1282
diff changeset
43 width: 571px
ac6edfb83cf1 improved contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1282
diff changeset
44 overflow: hidden
ac6edfb83cf1 improved contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1282
diff changeset
45
ac6edfb83cf1 improved contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1282
diff changeset
46 .searchgroup-collapsed
ac6edfb83cf1 improved contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1282
diff changeset
47 width: 0
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
48
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
49 .searchbar
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
50 height: $icon-height !important
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
51 box-shadow: none !important
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
52 &.rounded-top-right
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
53 border-radius: 0 !important
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
54 border-top-right-radius: $border-radius !important
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
55
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
56 .searchlabel
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
57 &.rounded-top-left
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
58 border-radius: 0 !important
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59 border-top-left-radius: $border-radius !important
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 .input-group-text
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
62 height: $icon-height
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 width: $icon-width
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65 .input-group-prepend
1299
2738a6ae9ad8 fontawesome 4 -> 5
Markus Kottlaender <markus@intevation.de>
parents: 1286
diff changeset
66 svg path
2738a6ae9ad8 fontawesome 4 -> 5
Markus Kottlaender <markus@intevation.de>
parents: 1286
diff changeset
67 fill: #666
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
68
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
69 .searchresults
1399
8e2c9e518440 improved search style
Markus Kottlaender <markus@intevation.de>
parents: 1398
diff changeset
70 box-shadow: $shadow-xs
1286
ac6edfb83cf1 improved contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1282
diff changeset
71 top: $icon-height
ac6edfb83cf1 improved contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1282
diff changeset
72 left: 0
ac6edfb83cf1 improved contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1282
diff changeset
73 right: 0
1398
d6dc4bcf55d3 increased max-height for search results box
Markus Kottlaender <markus@intevation.de>
parents: 1362
diff changeset
74 max-height: 24rem
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
75 overflow: auto
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
76 > div:first-child
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
77 border-top: 0 !important
1399
8e2c9e518440 improved search style
Markus Kottlaender <markus@intevation.de>
parents: 1398
diff changeset
78 a
8e2c9e518440 improved search style
Markus Kottlaender <markus@intevation.de>
parents: 1398
diff changeset
79 text-decoration: none
8e2c9e518440 improved search style
Markus Kottlaender <markus@intevation.de>
parents: 1398
diff changeset
80 &:hover
8e2c9e518440 improved search style
Markus Kottlaender <markus@intevation.de>
parents: 1398
diff changeset
81 background: #f8f8f8
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
82 </style>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
83
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
84 <script>
1362
ca33ad696594 remove the first empyty lines
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1361
diff changeset
85 /* 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
86 * 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
87 *
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
88 * SPDX-License-Identifier: AGPL-3.0-or-later
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
89 * 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
90 *
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
91 * Copyright (C) 2018 by via donau
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
92 * – Österreichische Wasserstraßen-Gesellschaft mbH
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
93 * 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
94 *
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
95 * Author(s):
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
96 * Markus Kottländer <markus.kottlaender@intevation.de>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
97 */
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
98 import debounce from "lodash.debounce";
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
99 import { mapState } from "vuex";
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
100
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
101 import { displayError } from "../../lib/errors.js";
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
102 import { HTTP } from "../../lib/http";
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
103
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
104 const setFocus = () => document.querySelector("#search").focus();
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
105
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
106 export default {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
107 name: "search",
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
108 data() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
109 return {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
110 searchQueryIsDirty: false,
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
111 searchResults: null,
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
112 isSearching: false
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
113 };
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
114 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
115 computed: {
1282
a7dd8a3356fc fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1272
diff changeset
116 ...mapState("application", [
a7dd8a3356fc fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1272
diff changeset
117 "showSearchbar",
a7dd8a3356fc fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1272
diff changeset
118 "showContextBox",
a7dd8a3356fc fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1272
diff changeset
119 "contextBoxContent"
a7dd8a3356fc fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1272
diff changeset
120 ]),
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
121 searchQuery: {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
122 get() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
123 return this.$store.state.application.searchQuery;
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
124 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
125 set(value) {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
126 this.$store.commit("application/searchQuery", value);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
127 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
128 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
129 searchIndicator: function() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
130 if (this.isSearching) {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
131 return "⟳";
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
132 } else if (this.searchQueryIsDirty) {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
133 return "";
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
134 } else {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
135 return "✓";
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
136 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
137 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
138 searchbarContainerStyle() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
139 return [
1282
a7dd8a3356fc fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1272
diff changeset
140 "input-group searchcontainer shadow-xs",
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
141 {
1282
a7dd8a3356fc fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1272
diff changeset
142 "d-flex": this.contextBoxContent !== "imports",
1286
ac6edfb83cf1 improved contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1282
diff changeset
143 "d-none": this.contextBoxContent === "imports" && this.showContextBox
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
144 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
145 ];
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
146 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
147 searchInputStyle() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
148 return [
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
149 "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
150 { "rounded-top-right": this.showContextBox || this.searchResults }
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
151 ];
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 searchButtonStyle() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
154 return [
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
155 "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
156 {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
157 rounded: !this.showSearchbar,
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
158 "rounded-left": this.showSearchbar,
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
159 "rounded-top-left":
1282
a7dd8a3356fc fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1272
diff changeset
160 this.showSearchbar && (this.showContextBox || this.searchResults)
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
161 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
162 ];
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
163 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
164 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
165 watch: {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
166 searchQuery: function() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
167 this.searchQueryIsDirty = true;
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
168 this.triggerSearch();
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 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
171 methods: {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
172 takeFirstSearchresult() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
173 if (!this.searchResults || this.searchResults.length != 1) return;
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
174 this.moveToSearchResult(this.searchResults[0]);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
175 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
176 triggerSearch: debounce(function() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
177 this.doSearch();
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
178 }, 500),
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
179 doSearch() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
180 this.isCalculating = true;
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
181 this.searchResults = null;
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 if (this.searchQuery == "") {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
184 return;
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
185 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
186
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
187 HTTP.post(
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
188 "/search",
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
189 { string: this.searchQuery },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
190 {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
191 headers: {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
192 "X-Gemma-Auth": localStorage.getItem("token"),
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
193 "Content-type": "text/xml; charset=UTF-8"
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
194 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
195 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
196 )
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
197 .then(response => {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
198 // console.log("got:", response.data);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
199 this.searchResults = response.data;
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 .catch(error => {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
202 const { status, data } = error.response;
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
203 displayError({
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
204 title: "Backend Error",
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
205 message: `${status}: ${data.message || data}`
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
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
209 this.isCalculating = false;
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
210 this.searchQueryIsDirty = false;
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 moveToSearchResult(resultEntry) {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
213 // DEBUG console.log("Moving to", resultEntry);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
214 if (resultEntry.geom.type == "Point") {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
215 let zoom = 11;
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
216 if (resultEntry.type === "bottleneck") zoom = 17;
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
217 if (resultEntry.type === "rhm") zoom = 15;
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
218 if (resultEntry.type === "city") zoom = 13;
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 this.$store.commit("map/moveMap", {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
221 coordinates: resultEntry.geom.coordinates,
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
222 zoom,
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
223 preventZoomOut: true
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 // this.searchQuery = ""; // clear search query again
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
227 this.toggleSearchbar();
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
228 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
229 toggleSearchbar() {
1282
a7dd8a3356fc fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1272
diff changeset
230 if (!this.showContextBox) {
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
231 if (!this.showSearchbar) {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
232 setTimeout(setFocus, 300);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
233 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
234 this.$store.commit("application/showSearchbar", !this.showSearchbar);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
235 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
236 }
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 };
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
239 </script>