src/pages/SearchPage.svelte

   1 <script>
   2   import { onMount, onDestroy } from 'svelte';
   3
   4   import { page, results_store, current_result_store, current_request_latlon } from '../lib/stores.js';
   5   import { get_config_value } from '../lib/config_reader.js'
   6   import { fetch_from_api, update_html_title } from '../lib/api_utils.js';
   7
   8   import SearchBar from '../components/SearchBar.svelte';
   9   import ResultsList from '../components/ResultsList.svelte';
  10   import Map from '../components/Map.svelte';
  11
  12   export let reverse_search = false;
  13
  14   let api_request_params;
  15   let bStructuredSearch;
  16
  17   function loaddata() {
  18     let search_params = new URLSearchParams(window.location.search);
  19
  20     update_html_title();
  21
  22     if (reverse_search) {
  23       api_request_params = {
  24         lat: search_params.get('lat'),
  25         lon: search_params.get('lon'),
  26         zoom: (search_params.get('zoom') > 1
  27           ? Number(search_params.get('zoom'))
  28           : Number(get_config_value('Reverse_Default_Search_Zoom'))),
  29         format: 'jsonv2'
  30       };
  31
  32       if (api_request_params.lat || api_request_params.lat) {
  33
  34         fetch_from_api('reverse', api_request_params, function(data){
  35           if (data && !data.error){
  36             current_request_latlon.set([api_request_params.lat, api_request_params.lon]);
  37             results_store.set([data]);
  38           } else {
  39             results_store.set([]);
  40           }
  41
  42           update_html_title('Reverse result for '
  43                               + api_request_params.lat
  44                               + ','
  45                               + api_request_params.lon);
  46           document.querySelector('input[name=lat]').focus();
  47         });
  48       }
  49     } else {
  50       api_request_params = {
  51         q: search_params.get('q'),
  52         street: search_params.get('street'),
  53         city: search_params.get('city'),
  54         county: search_params.get('county'),
  55         state: search_params.get('state'),
  56         country: search_params.get('country'),
  57         postalcode: search_params.get('postalcode'),
  58         polygon_geojson: get_config_value('Search_AreaPolygons', false) ? 1 : 0,
  59         viewbox: search_params.get('viewbox'),
  60         bounded: search_params.get('bounded'),
  61         dedupe: search_params.get('dedupe'),
  62         'accept-language': search_params.get('accept-language'),
  63         countrycodes: search_params.get('countrycodes'),
  64         limit: search_params.get('limit'),
  65         polygon_threshold: search_params.get('polygon_threshold'),
  66         exclude_place_ids: search_params.get('exclude_place_ids'),
  67         format: 'jsonv2'
  68       };
  69
  70       let bStructuredSearch = (api_request_params.street ||
  71                                api_request_params.city ||
  72                                api_request_params.county ||
  73                                api_request_params.state ||
  74                                api_request_params.country ||
  75                                api_request_params.postalcode);
  76
  77       if (api_request_params.q || bStructuredSearch) {
  78         fetch_from_api('search', api_request_params, function(data){
  79           results_store.set(data);
  80
  81           update_html_title('Result for ' + api_request_params.q);
  82
  83           document.querySelector('input[name=q]').focus();
  84         });
  85       }
  86     }
  87   }
  88
  89   let page_subscription;
  90   onMount(() => { page_subscription = page.subscribe(loaddata); });
  91   onDestroy(() => { page_subscription(); });
  92 </script>
  93
  94 <SearchBar reverse_search={reverse_search} api_request_params={api_request_params} bStructuredSearch={bStructuredSearch} />
  95
  96 <div id="content">
  97   <div class="sidebar">
  98     <ResultsList reverse_search={reverse_search} />
  99   </div>
 100   <div id="map-wrapper">
 101     <Map display_minimap={true} />
 102   </div>
 103 </div>
 104
 105
 106 <style>
 107   .sidebar {
 108     width: 25%;
 109     padding: 15px;
 110     padding-top: 0;
 111     display: inline-block;
 112     float: left;
 113   }
 114
 115   #map-wrapper {
 116     position: relative;
 117     min-height: 300px;
 118     height: calc(100vh - 250pt);
 119     width: 75%;
 120     padding-right: 20px;
 121     display: inline-block;
 122     float: left;
 123   }
 124
 125   @media (max-width: 768px) {
 126     #content {
 127       top: 0;
 128       position: relative;
 129     }
 130     .sidebar {
 131       width: 100%;
 132     }
 133     #map-wrapper {
 134       height: 300px;
 135     }
 136   }
 137 </style>