src/components/ResultsList.svelte

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