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