src/pages/SearchPage.svelte

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