src/pages/ReversePage.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 ReverseBar from '../components/ReverseBar.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       lat: search_params.get('lat'),
  24       lon: search_params.get('lon'),
  25       zoom: (search_params.get('zoom') > 1
  26         ? Number(search_params.get('zoom'))
  27         : Number(get_config_value('Reverse_Default_Search_Zoom'))),
  28       format: 'jsonv2'
  29     };
  30
  31     if (api_request_params.lat || api_request_params.lat) {
  32
  33       fetch_from_api('reverse', api_request_params, function (data) {
  34         if (data && !data.error) {
  35           current_request_latlon.set([api_request_params.lat, api_request_params.lon]);
  36           results_store.set([data]);
  37         } else {
  38           results_store.set([]);
  39         }
  40
  41         update_html_title('Reverse result for '
  42                             + api_request_params.lat
  43                             + ','
  44                             + api_request_params.lon);
  45         document.querySelector('input[name=lat]').focus();
  46       });
  47     }
  48   }
  49
  50   let page_subscription;
  51   onMount(() => { page_subscription = page.subscribe(loaddata); });
  52   onDestroy(() => { page_subscription(); });
  53 </script>
  54
  55 <ReverseBar api_request_params={api_request_params} />
  56
  57 <div id="content">
  58   <div class="sidebar">
  59     <ResultsList reverse_search={true} />
  60   </div>
  61   <div id="map-wrapper">
  62     <Map display_minimap={true} />
  63   </div>
  64 </div>
  65
  66
  67 <style>
  68   .sidebar {
  69     width: 25%;
  70     padding: 15px;
  71     padding-top: 0;
  72     display: inline-block;
  73     float: left;
  74   }
  75
  76   #map-wrapper {
  77     position: relative;
  78     min-height: 300px;
  79     height: calc(100vh - 250pt);
  80     width: 75%;
  81     padding-right: 20px;
  82     display: inline-block;
  83     float: left;
  84   }
  85
  86   @media (max-width: 768px) {
  87     #content {
  88       top: 0;
  89       position: relative;
  90     }
  91     .sidebar {
  92       width: 100%;
  93     }
  94     #map-wrapper {
  95       height: 300px;
  96     }
  97   }
  98 </style>