]> git.openstreetmap.org Git - nominatim-ui.git/blob - src/pages/SearchPage.svelte
Merge remote-tracking branch 'upstream/master'
[nominatim-ui.git] / src / pages / SearchPage.svelte
1 <script>
2   import { page, results_store } from '../lib/stores.js';
3   import { fetch_from_api, update_html_title } from '../lib/api_utils.js';
4
5   import Header from '../components/Header.svelte';
6   import SearchSection from '../components/SearchSection.svelte';
7   import ResultsList from '../components/ResultsList.svelte';
8   import Map from '../components/Map.svelte';
9
10   let api_request_params;
11   let bStructuredSearch;
12   let current_result;
13
14   function loaddata(search_params) {
15     update_html_title();
16
17     api_request_params = {
18       q: search_params.get('q'),
19       street: search_params.get('street'),
20       city: search_params.get('city'),
21       county: search_params.get('county'),
22       state: search_params.get('state'),
23       country: search_params.get('country'),
24       postalcode: search_params.get('postalcode'),
25       polygon_geojson: Nominatim_Config.Search_AreaPolygons ? 1 : 0,
26       viewbox: search_params.get('viewbox'),
27       bounded: search_params.get('bounded'),
28       dedupe: search_params.get('dedupe'),
29       'accept-language': search_params.get('accept-language'),
30       countrycodes: search_params.get('countrycodes'),
31       limit: search_params.get('limit'),
32       polygon_threshold: search_params.get('polygon_threshold'),
33       exclude_place_ids: search_params.get('exclude_place_ids'),
34       format: 'jsonv2'
35     };
36
37     let anyStructuredFieldsSet = (api_request_params.street
38                                 || api_request_params.city
39                                 || api_request_params.county
40                                 || api_request_params.state
41                                 || api_request_params.country
42                                 || api_request_params.postalcode);
43
44     if (api_request_params.q || anyStructuredFieldsSet) {
45       fetch_from_api('search', api_request_params, function (data) {
46         results_store.set(data);
47
48         update_html_title('Result for ' + api_request_params.q);
49
50         document.querySelector('input[name=q]').focus();
51       });
52     } else {
53       results_store.set(undefined);
54     }
55   }
56
57   $: {
58     let pageinfo = $page;
59     if (pageinfo.tab === 'search') {
60       loaddata(pageinfo.params);
61     }
62   }
63 </script>
64
65 <Header>
66   <SearchSection api_request_params={api_request_params} bStructuredSearch={bStructuredSearch} />
67 </Header>
68
69 <div id="content">
70   <div class="sidebar">
71     <ResultsList bind:current_result reverse_search={false} />
72   </div>
73   <div id="map-wrapper">
74     <Map {current_result} display_minimap={true} />
75   </div>
76 </div>
77
78
79 <style>
80   .sidebar {
81     width: 25%;
82     min-width: 200px;
83     padding: 15px;
84     padding-top: 0;
85     display: block;
86     float: left;
87   }
88
89   #map-wrapper {
90     position: relative;
91     height: calc(100vh - 250pt);
92     min-height: 300px;
93     width: 75%;
94     padding-right: 20px;
95     display: block;
96     float: left;
97   }
98
99   @media (max-width: 768px) {
100     #content {
101       top: 0;
102       position: relative;
103     }
104     .sidebar {
105       width: 100%;
106     }
107     #map-wrapper {
108       width: 100%;
109       height: 300px;
110       padding-left: 20px;
111     }
112   }
113 </style>