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