src/components/ResultsList.svelte

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