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