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