]> git.openstreetmap.org Git - nominatim-ui.git/blob - src/components/SearchSection.svelte
fix Svelte accessibily linter warnings, no more autofocus
[nominatim-ui.git] / src / components / SearchSection.svelte
1 <script>
2   import UrlSubmitForm from '../components/UrlSubmitForm.svelte';
3
4   import { map_store } from '../lib/stores.js';
5   import { get } from 'svelte/store';
6
7   export let bStructuredSearch = false;
8   export let api_request_params = {};
9   let sViewBox;
10   let lat;
11   let lon;
12
13   function map_viewbox_as_string(map) {
14     var bounds = map.getBounds();
15     var west = bounds.getWest();
16     var east = bounds.getEast();
17
18     if ((east - west) >= 360) { // covers more than whole planet
19       west = map.getCenter().lng - 179.999;
20       east = map.getCenter().lng + 179.999;
21     }
22     east = L.latLng(77, east).wrap().lng;
23     west = L.latLng(77, west).wrap().lng;
24
25     return [
26       west.toFixed(5), // left
27       bounds.getNorth().toFixed(5), // top
28       east.toFixed(5), // right
29       bounds.getSouth().toFixed(5) // bottom
30     ].join(',');
31   }
32
33   function set_viewbox(map) {
34     let use_viewbox = document.getElementById('use_viewbox');
35     if (use_viewbox && use_viewbox.checked) {
36       sViewBox = map_viewbox_as_string(map);
37     } else {
38       sViewBox = '';
39     }
40   }
41
42   function update_reverse_link(map) {
43     let center_lat_lng = map.wrapLatLng(map.getCenter());
44     lat = center_lat_lng.lat.toFixed(5);
45     lon = center_lat_lng.lng.toFixed(5);
46   }
47
48   map_store.subscribe(map => {
49     if (!map) { return; }
50
51     map.on('move', function () {
52       set_viewbox(map);
53       update_reverse_link(map);
54     });
55
56     map.on('load', function () {
57       set_viewbox(map);
58       update_reverse_link(map);
59     });
60   });
61
62   function reset_viewbox() {
63     let map = get(map_store);
64     if (map) { set_viewbox(map); }
65   }
66
67   function set_bounded(e) {
68     document.querySelector('input[name=bounded]').value = e.target.checked ? 1 : '';
69   }
70
71   function set_dedupe(e) {
72     document.querySelector('input[name=dedupe]').value = e.target.checked ? 1 : 0;
73   }
74
75   function set_api_param(e) {
76     document.querySelector('input[name=' + e.target.dataset.apiParam + ']').value = e.target.value;
77   }
78 </script>
79
80 <ul class="nav nav-tabs">
81   <li class="nav-item">
82     <a class="nav-link" class:active={!bStructuredSearch} data-bs-toggle="tab" href="#simple">
83       Simple
84     </a>
85   </li>
86   <li class="nav-item">
87     <a class="nav-link" class:active={bStructuredSearch} data-bs-toggle="tab" href="#structured">
88       Structured
89     </a>
90   </li>
91 </ul>
92
93 <div class="tab-content py-2">
94   <div class="tab-pane" class:active={!bStructuredSearch} id="simple" role="tabpanel">
95     <UrlSubmitForm page="search">
96       <div class="col-auto">
97         <input id="q"
98                name="q"
99                type="text"
100                class="form-control form-control-sm"
101                placeholder="Search"
102                value="{api_request_params.q || ''}" />
103       </div>
104       <div class="col-auto">
105         <button type="submit" class="btn btn-primary btn-sm mx-1">Search</button>
106         <input type="hidden"
107                name="viewbox" value="{sViewBox || ''}" />
108         <input type="hidden"
109                name="dedupe" value="{api_request_params.dedupe === 0 ? 0 : 1}" />
110         <input type="hidden"
111                name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
112         <input type="hidden"
113                name="accept-language"value="{api_request_params['accept-language'] || ''}" />
114         <input type="hidden"
115                name="countrycodes" value="{api_request_params.countrycodes || ''}"
116                                    pattern="^[a-zA-Z]{'{2}'}(,[a-zA-Z]{'{2}'})*$" />
117         <input type="hidden"
118                name="limit" value="{api_request_params.limit || ''}" />
119         <input type="hidden"
120                name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
121       </div>
122     </UrlSubmitForm>
123   </div>
124   <div class="tab-pane" class:active={bStructuredSearch} id="structured" role="tabpanel">
125     <UrlSubmitForm page="search">
126       <div class="col-auto">
127         <input name="street" type="text" class="form-control form-control-sm me-1"
128                placeholder="House number/Street"
129                value="{api_request_params.street || ''}" />
130       </div>
131       <div class="col-auto">
132         <input name="city" type="text" class="form-control form-control-sm me-1"
133                placeholder="City"
134                value="{api_request_params.city || ''}" />
135       </div>
136       <div class="col-auto">
137         <input id="county" name="county" type="text" class="form-control form-control-sm me-1"
138                placeholder="County"
139                value="{api_request_params.county || ''}" />
140       </div>
141       <div class="col-auto">
142         <input name="state" type="text" class="form-control form-control-sm me-1"
143                placeholder="State"
144                value="{api_request_params.state || ''}" />
145       </div>
146       <div class="col-auto">
147         <input name="country" type="text" class="form-control form-control-sm me-1"
148                placeholder="Country"
149                value="{api_request_params.country || ''}" />
150       </div>
151       <div class="col-auto">
152         <input name="postalcode" type="text" class="form-control form-control-sm me-1"
153                placeholder="Postal Code"
154                value="{api_request_params.postalcode || ''}" />
155       </div>
156       <div class="col-auto">
157         <button type="submit" class="btn btn-primary btn-sm">Search</button>
158         <input type="hidden"
159                name="viewbox" value="{sViewBox || ''}" />
160         <input type="hidden"
161                name="dedupe" value="{api_request_params.dedupe === 0 ? 0 : 1}" />
162         <input type="hidden"
163                name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
164         <input type="hidden"
165                name="accept-language" value="{api_request_params['accept-language'] || ''}" />
166         <input type="hidden"
167                name="countrycodes" value="{api_request_params.countrycodes || ''}"
168                                    pattern="^[a-zA-Z]{'{2}'}(,[a-zA-Z]{'{2}'})*$" />
169         <input type="hidden"
170                name="limit" value="{api_request_params.limit || ''}" />
171         <input type="hidden"
172                name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
173       </div>
174     </UrlSubmitForm>
175   </div>
176 </div> <!-- /tab-content -->
177
178 <!-- Additional options -->
179 <details id="searchAdvancedOptions">
180   <summary><small>Advanced options</small></summary>
181   <ul>
182     <li>
183       <div class="form-check form-check-inline">
184         <label class="form-check-label" for="use_viewbox">apply viewbox</label>
185         <input type="checkbox" class="form-check-input api-param-setting"
186                id="use_viewbox" checked={api_request_params.viewbox} on:change={reset_viewbox}>
187       </div>
188     </li>
189
190     <li>
191       <div class="form-check form-check-inline">
192         <label class="form-check-label" for="option_bounded">bounded to viewbox</label>
193         <input type="checkbox" class="form-check-input api-param-setting"
194                id="option_bounded" checked={!!api_request_params.bounded} on:change={set_bounded}>
195       </div>
196     </li>
197
198     <li>
199       <div class="form-check form-check-inline">
200         <label class="form-check-label" for="option_dedupe">deduplicate results</label>
201         <input type="checkbox"
202                class="form-check-input api-param-setting"
203                id="option_dedupe"
204                checked={api_request_params.dedupe === 0 ? 0 : 1}
205                on:change={set_dedupe}>
206       </div>
207     </li>
208
209     <li>
210       <label for="option_limit">Maximum number of results</label>
211       <input type="number"
212              class="form-control form-control-sm d-inline w-auto api-param-setting"
213              data-api-param="limit" id="option_limit" min="1" max="50"
214              value="{api_request_params.limit || ''}"
215              on:change={set_api_param}>
216     </li>
217
218     <li>
219       <label for="option_polygon_threshold">Polygon simplification</label>
220       <input type="number"
221              class="form-control form-control-sm d-inline w-auto api-param-setting"
222              data-api-param="polygon_threshold" id="option_polygon_threshold"
223              min="0.0" max="1.0" step="0.001"
224              value="{api_request_params.polygon_threshold || ''}"
225              on:change={set_api_param}>
226     </li>
227
228     <li>
229       <label for="accept_lang">Languages</label>
230       <input type="text" placeholder="e.g. en,zh-Hant"
231              class="form-control form-control-sm d-inline w-auto api-param-setting"
232              data-api-param="accept-language" id="accept_lang" size="15"
233              value="{api_request_params['accept-language'] || ''}"
234              on:change={set_api_param}>
235     </li>
236
237     <li>
238       <label for="option_ccode">Country Codes</label>
239       <input type="text" placeholder="e.g. de,gb"
240             class="form-control form-control-sm d-inline w-auto api-param-setting"
241              data-api-param="countrycodes" id="option_ccode" size="15"
242              value="{api_request_params.countrycodes || ''}"
243              pattern="^[a-zA-Z]{'{2}'}(,[a-zA-Z]{'{2}'})*$"
244              on:change={set_api_param}>
245     </li>
246   </ul>
247 </details>
248
249 <style>
250   .nav-tabs {
251     font-size: 0.8em;
252     margin-top: -1em;
253   }
254
255   .nav-link {
256     padding: 0.1rem 1rem;
257   }
258
259   #q {
260     width: 500px;
261     max-width: 100%;
262   }
263
264   #searchAdvancedOptions ul {
265     list-style-type: none;
266     padding: 0;
267     font-size: 0.85rem;
268   }
269
270   #searchAdvancedOptions li {
271     display: inline-block;
272     padding: 4px 10px;
273     border-radius: 5px;
274     border: 1px dotted #ccc;
275     margin-right: 1em;
276   }
277
278   #searchAdvancedOptions label {
279     margin-right: 0.5em;
280   }
281
282 </style>