src/components/ResultsList.svelte

   1 <script>
   2   import { results_store, current_result_store } from '../lib/stores.js';
   3   import { formatLabel, detailsURL } from '../lib/helpers.js';
   4
   5   import Welcome from './Welcome.svelte';
   6   import MapIcon from './MapIcon.svelte';
   7
   8   export let reverse_search = false;
   9
  10   let aSearchResults;
  11   let iHighlightNum;
  12   let sMoreURL;
  13
  14   results_store.subscribe(data => {
  15     if (!data) { return; }
  16     aSearchResults = data;
  17     iHighlightNum = 0;
  18     current_result_store.set(aSearchResults[0]);
  19
  20
  21     let search_params = new URLSearchParams(window.location.search);
  22
  23     let aResults = data;
  24     // lonvia wrote: https://github.com/osm-search/nominatim-ui/issues/24
  25     // I would suggest to remove the guessing and always show the link. Nominatim only returns
  26     // one or two results when it believes the result to be a good enough match.
  27     // if (aResults.length >= 10) {
  28     var aExcludePlaceIds = [];
  29     if (search_params.has('exclude_place_ids')) {
  30       aExcludePlaceIds = search_params.get('exclude_place_ids').split(',');
  31     }
  32     for (var i = 0; i < aResults.length; i += 1) {
  33       aExcludePlaceIds.push(aResults[i].place_id);
  34     }
  35     var parsed_url = new URLSearchParams(window.location.search);
  36     parsed_url.set('exclude_place_ids', aExcludePlaceIds.join(','));
  37     sMoreURL = '?' + parsed_url.toString();
  38   });
  39
  40   function handleClick(e) {
  41     let result_el = e.target;
  42     if (!result_el.className.match('result')) {
  43       result_el = result_el.parentElement;
  44     }
  45     let pos = Number(result_el.dataset.position);
  46
  47     current_result_store.set(aSearchResults[pos]);
  48     iHighlightNum = pos;
  49   }
  50
  51 </script>
  52
  53 {#if aSearchResults && aSearchResults.length > 0}
  54   <div id="searchresults">
  55
  56     {#each aSearchResults as aResult, iResNum}
  57       <div class="result" class:highlight={iResNum === iHighlightNum} data-position="{iResNum}" on:click|stopPropagation={handleClick}>
  58         <div style="float:right">
  59           <MapIcon aPlace={aResult} />
  60         </div>
  61         <span class="name">{aResult.display_name}</span>
  62         <span class="type">{formatLabel(aResult)}</span>
  63         <p class="coords">{aResult.lat},{aResult.lon}</p>
  64
  65         <a class="details btn btn-outline-secondary btn-sm" href="{detailsURL(aResult)}">details</a>
  66       </div>
  67     {/each}
  68
  69     {#if sMoreURL && !reverse_search}
  70       <div class="more">
  71         <a class="btn btn-primary" href="{sMoreURL}">
  72           Search for more results
  73         </a>
  74       </div>
  75     {/if}
  76   </div>
  77 {:else if aSearchResults}
  78   {#if reverse_search}
  79     <div id="intro" class="sidebar">Search for coordinates or click anywhere on the map.</div>
  80   {:else}
  81     <div class="noresults">No search results found</div>
  82   {/if}
  83 {:else}
  84   <Welcome/>
  85 {/if}
  86
  87 <style>
  88   .result {
  89     font-size: 0.8em;
  90     margin: 5px;
  91     margin-top:0px;
  92     padding: 4px 8px;
  93     border-radius: 2px;
  94     background:#F0F7FF;
  95     border: 2px solid #D7E7FF;
  96     cursor:pointer;
  97     min-height: 5em;
  98   }
  99
 100   .result.highlight {
 101     background-color: #D9E7F7;
 102     border-color: #9DB9E4;
 103   }
 104   .result.highlight .details {
 105     margin: 10px auto;
 106     display: block;
 107     max-width: 10em;
 108     padding: 1px;
 109   }
 110   .result .type{
 111     color: gray;
 112     font-size: 0.8em;
 113   }
 114   .result .details {
 115     display: none;
 116   }
 117
 118   .result .coords {
 119     display: none;
 120   }
 121
 122   .noresults{
 123     text-align: center;
 124     padding: 1em;
 125   }
 126
 127   .more{
 128     text-align:center;
 129     margin-top: 1em;
 130   }
 131
 132   .btn-outline-secondary {
 133     background-color: white;
 134   }
 135
 136   .btn-outline-secondary:hover {
 137     color: #111;
 138   }
 139 </style>