]> git.openstreetmap.org Git - nominatim-ui.git/blob - src/components/SearchSectionDetails.svelte
938b48bd8a2b5239c4c3742c2442cde813a65f36
[nominatim-ui.git] / src / components / SearchSectionDetails.svelte
1 <script>
2   import { refresh_page } from '../lib/stores.js';
3
4   export let api_request_params = {};
5
6   function handleFormSubmit(event) {
7     let form_el = event.target;
8     let val = form_el.querySelector('input[type=edit]').value.trim();
9     let type_and_id_match = val.match(/^\s*([NWR])(\d+)\s*$/i)
10                             || val.match(/\/(relation|way|node)\/(\d+)\s*$/);
11
12     var params = new URLSearchParams();
13     if (type_and_id_match) {
14       params.set('osmtype', type_and_id_match[1].charAt(0).toUpperCase());
15       params.set('osmid', type_and_id_match[2]);
16     } else if (val.match(/^\d+$/)) {
17       params.set('place_id', val);
18     } else {
19       alert('invalid input');
20       return;
21     }
22
23     refresh_page('details', params);
24   }
25 </script>
26
27 <form on:submit|preventDefault={handleFormSubmit} class="form-inline" action="details.html">
28   <input type="edit"
29          class="form-control form-control-sm"
30          pattern="^[NWR]?[0-9]+$|.*openstreetmap.*"
31          value="{api_request_params.osmtype || ''}{api_request_params.osmid || ''}{api_request_params.place_id || ''}" />
32   <input type="submit" class="btn btn-primary btn-sm" value="Show" />
33 </form>
34 <small class="form-text text-muted">
35   OSM type+id (<em>N123</em>, <em>W123</em>, <em>R123</em>),
36   Place id (<em>1234</em>) or
37   URL (<em>https://openstreetmap.org/way/123</em>)
38 </small>
39
40 <style>
41   form .form-control{
42     margin-right: 5px;
43     width: 30em;
44   }
45   .form-text em {
46     font-family: monospace;
47     font-style: normal;
48   }
49 </style>