src/pages/SearchPage.svelte

   1 <script>
   2   import { onMount, onDestroy } from 'svelte';
   3
   4   import { page, results_store } 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   let api_request_params;
  13   let bStructuredSearch;
  14   let current_result;
  15
  16   function loaddata() {
  17     let search_params = new URLSearchParams(window.location.search);
  18
  19     update_html_title();
  20
  21     api_request_params = {
  22       q: search_params.get('q'),
  23       street: search_params.get('street'),
  24       city: search_params.get('city'),
  25       county: search_params.get('county'),
  26       state: search_params.get('state'),
  27       country: search_params.get('country'),
  28       postalcode: search_params.get('postalcode'),
  29       polygon_geojson: get_config_value('Search_AreaPolygons', false) ? 1 : 0,
  30       viewbox: search_params.get('viewbox'),
  31       bounded: search_params.get('bounded'),
  32       dedupe: search_params.get('dedupe'),
  33       'accept-language': search_params.get('accept-language'),
  34       countrycodes: search_params.get('countrycodes'),
  35       limit: search_params.get('limit'),
  36       polygon_threshold: search_params.get('polygon_threshold'),
  37       exclude_place_ids: search_params.get('exclude_place_ids'),
  38       format: 'jsonv2'
  39     };
  40
  41     let anyStructuredFieldsSet = (api_request_params.street
  42                                 || api_request_params.city
  43                                 || api_request_params.county
  44                                 || api_request_params.state
  45                                 || api_request_params.country
  46                                 || api_request_params.postalcode);
  47
  48     if (api_request_params.q || anyStructuredFieldsSet) {
  49       fetch_from_api('search', api_request_params, function (data) {
  50         results_store.set(data);
  51
  52         update_html_title('Result for ' + api_request_params.q);
  53
  54         document.querySelector('input[name=q]').focus();
  55       });
  56     }
  57   }
  58
  59   let page_subscription;
  60   onMount(() => { page_subscription = page.subscribe(loaddata); });
  61   onDestroy(() => { page_subscription(); });
  62 </script>
  63
  64 <SearchBar api_request_params={api_request_params} bStructuredSearch={bStructuredSearch} />
  65
  66 <div id="content">
  67   <div class="sidebar">
  68     <ResultsList bind:current_result reverse_search={false} />
  69   </div>
  70   <div id="map-wrapper">
  71     <Map {current_result} display_minimap={true} />
  72   </div>
  73 </div>
  74
  75
  76 <style>
  77   .sidebar {
  78     width: 25%;
  79     padding: 15px;
  80     padding-top: 0;
  81     display: inline-block;
  82     float: left;
  83   }
  84
  85   #map-wrapper {
  86     position: relative;
  87     min-height: 300px;
  88     height: calc(100vh - 250pt);
  89     width: 75%;
  90     padding-right: 20px;
  91     display: inline-block;
  92     float: left;
  93   }
  94
  95   @media (max-width: 768px) {
  96     #content {
  97       top: 0;
  98       position: relative;
  99     }
 100     .sidebar {
 101       width: 100%;
 102     }
 103     #map-wrapper {
 104       height: 300px;
 105     }
 106   }
 107 </style>