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.has('dedupe') || search_params.get('dedupe') === '1') ? 1 : 0,
  29       'accept-language': search_params.get('accept-language'),
  30       countrycodes: search_params.get('countrycodes'),
  31       layer: search_params.get('layer'),
  32       limit: search_params.get('limit'),
  33       polygon_threshold: search_params.get('polygon_threshold'),
  34       exclude_place_ids: search_params.get('exclude_place_ids'),
  35       format: 'jsonv2'
  36     };
  37
  38     let anyStructuredFieldsSet = (api_request_params.street
  39                                 || api_request_params.city
  40                                 || api_request_params.county
  41                                 || api_request_params.state
  42                                 || api_request_params.country
  43                                 || api_request_params.postalcode);
  44
  45     if (api_request_params.q || anyStructuredFieldsSet) {
  46       fetch_from_api('search', api_request_params, function (data) {
  47         results_store.set(data);
  48
  49         if (anyStructuredFieldsSet) {
  50           update_html_title('Result for ' + [
  51             api_request_params.street,
  52             api_request_params.city,
  53             api_request_params.county,
  54             api_request_params.state,
  55             api_request_params.country,
  56             api_request_params.postalcode
  57           ].filter((text) => text && text.length > 1).join(', '));
  58
  59           document.querySelector(".nav-tabs a[href='#structured']").click();
  60           document.querySelector('input[name=street]').focus();
  61         } else {
  62           update_html_title('Result for ' + api_request_params.q);
  63
  64           document.querySelector('input[name=q]').focus();
  65         }
  66       });
  67     } else {
  68       results_store.set(undefined);
  69     }
  70   }
  71
  72   $: {
  73     let pageinfo = $page;
  74     if (pageinfo.tab === 'search') {
  75       loaddata(pageinfo.params);
  76     }
  77   }
  78 </script>
  79
  80 <Header>
  81   <SearchSection api_request_params={api_request_params} bStructuredSearch={bStructuredSearch} />
  82 </Header>
  83
  84 <div id="content">
  85   <div class="sidebar">
  86     <ResultsList bind:current_result reverse_search={false} />
  87   </div>
  88   <div id="map-wrapper">
  89     <Map {current_result} display_minimap={true} />
  90   </div>
  91 </div>
  92
  93
  94 <style>
  95   .sidebar {
  96     width: 25%;
  97     min-width: 200px;
  98     padding: 15px;
  99     padding-top: 0;
 100     display: block;
 101     float: left;
 102   }
 103
 104   #map-wrapper {
 105     position: relative;
 106     height: calc(100vh - 250pt);
 107     min-height: 300px;
 108     width: 75%;
 109     padding-right: 20px;
 110     display: block;
 111     float: left;
 112   }
 113
 114   @media (max-width: 768px) {
 115     #content {
 116       top: 0;
 117       position: relative;
 118     }
 119     .sidebar {
 120       width: 100%;
 121     }
 122     #map-wrapper {
 123       width: 100%;
 124       height: 300px;
 125       padding-left: 20px;
 126     }
 127   }
 128 </style>