src/pages/SearchPage.svelte

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