src/components/ResultsList.svelte

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