Mercurial > gemma

annotate client/src/components/Search.vue @ 1797:67340ceecc5f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
feat: define sections and stretches etd
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 14 Jan 2019 17:12:12 +0100
parents c344849538c0
children 3138d60dd1a6
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>
1449
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
8 <div
1480
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
9 :class="[
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
10 'searchgroup',
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
11 {
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
12 'searchgroup-collapsed': !showSearchbar,
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
13 big:
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
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
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
18 }
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
19 ]"
1449
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
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
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
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
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
33 <div
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
34 v-for="entry of searchResults"
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
35 :key="entry.name"
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
36 class="border-top text-left"
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
37 >
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
38 <a
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
39 href="#"
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
40 @click.prevent="moveToSearchResult(entry)"
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
41 class="p-2 d-block text-nowrap"
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
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
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
49 <font-awesome-icon
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
50 icon="water"
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
51 v-if="entry.type === 'rhm'"
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
52 class="mr-1"
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
53 fixed-width
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
54 />
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
55 <font-awesome-icon
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
56 icon="city"
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
57 v-if="entry.type === 'city'"
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
58 class="mr-1"
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
59 fixed-width
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
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
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
68 <style lang="scss" scoped>
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
69 .searchcontainer {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
70 opacity: 0.96;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
71 }
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
72
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
73 .searchcontainer .searchbar {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
74 border-top-left-radius: 0 !important;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
75 border-bottom-left-radius: 0 !important;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
76 }
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
77
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
78 .searchgroup {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
79 margin-left: -3px;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
80 transition: width 0.3s;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
81 width: 300px;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
82 overflow: hidden;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
83 }
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
84
1449
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
85 .searchgroup.big {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
86 width: 571px;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
87 }
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
88
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
89 .searchgroup-collapsed {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
90 width: 0;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
91 }
1286
ac6edfb83cf1 improved contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1282
diff changeset
92
1449
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
93 .searchbar {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
94 height: 2rem !important;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
95 box-shadow: none !important;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
96 }
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
97
1449
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
98 .searchbar.rounded-top-right {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
99 border-radius: 0 !important;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
100 border-top-right-radius: 0.25rem !important;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
101 }
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
102
1449
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
103 .searchlabel.rounded-top-left {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
104 border-radius: 0 !important;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
105 border-top-left-radius: 0.25rem !important;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
106 }
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
107
1449
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
108 .input-group-text {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
109 height: 2rem;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
110 width: 2rem;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
111 }
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
112
1449
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
113 .input-group-prepend svg path {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
114 fill: #666;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
115 }
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
116
1449
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
117 .searchresults {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
118 box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
119 top: 2rem;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
120 left: 0;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
121 right: 0;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
122 max-height: 24rem;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
123 overflow: auto;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
124 }
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
125
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
126 .searchresults > div:first-child {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
127 border-top: 0 !important;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
128 }
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
129
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
130 .searchresults a {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
131 text-decoration: none;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
132 }
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
133
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
134 .searchresults a:hover {
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
135 background: #f8f8f8;
bb47531bdd22 sass to scss
Thomas Junk <thomas.junk@intevation.de>
parents: 1441
diff changeset
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
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
273 this.$store.commit("map/moveMap", {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
274 coordinates: resultEntry.geom.coordinates,
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
275 zoom,
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
276 preventZoomOut: true
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 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
279 // this.searchQuery = ""; // clear search query again
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
280 this.toggleSearchbar();
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
281 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
282 toggleSearchbar() {
1282
a7dd8a3356fc fixed contextBox animations
Markus Kottlaender <markus@intevation.de>
parents: 1272
diff changeset
283 if (!this.showContextBox) {
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
284 if (!this.showSearchbar) {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
285 setTimeout(setFocus, 300);
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
286 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
287 this.$store.commit("application/showSearchbar", !this.showSearchbar);
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 };
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
292 </script>