src/components/SearchSection.svelte

   1 <script>
   2   import UrlSubmitForm from '../components/UrlSubmitForm.svelte';
   3   import DefaultLanguage from './DefaultLanguage.svelte';
   4   import { mapState } from '../state/MapState.svelte.js';
   5
   6   const { bStructuredSearch = false, api_request_params = {} } = $props();
   7
   8   let useViewbox = $derived(!!api_request_params.viewbox);
   9
  10   function set_bounded(e) {
  11     document.querySelector('input[name=bounded]').value = e.target.checked ? 1 : '';
  12   }
  13
  14   function set_dedupe(e) {
  15     document.querySelector('input[name=dedupe]').value = e.target.checked ? 1 : 0;
  16   }
  17
  18   function set_api_param(e) {
  19     const selector = `input[name="${CSS.escape(e.target.dataset.apiParam)}"]`;
  20     document.querySelector(selector).value = e.target.value;
  21   }
  22 </script>
  23
  24 {#snippet submitButton()}
  25 <div class="col-auto">
  26   <button type="submit" class="btn btn-primary btn-sm">Search</button>
  27   <input type="hidden"
  28          name="viewbox" value="{useViewbox ? mapState.viewboxStr : ''}" />
  29   <input type="hidden"
  30          name="dedupe" value="{api_request_params.dedupe === 0 ? 0 : 1}" />
  31   <input type="hidden"
  32          name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
  33   <input type="hidden"
  34          name="accept-language" value="{api_request_params['accept-language'] || ''}" />
  35   <input type="hidden"
  36          name="countrycodes" value="{api_request_params.countrycodes || ''}"
  37                              pattern="^[a-zA-Z]{'{2}'}(,[a-zA-Z]{'{2}'})*$" />
  38   <input type="hidden"
  39          name="limit" value="{api_request_params.limit || ''}" />
  40   <input type="hidden"
  41          name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
  42   <input type="hidden"
  43          name="layer" value="{api_request_params.layer || ''}" />
  44 </div>
  45 {/snippet}
  46
  47 {#snippet simpleSearchForm()}
  48 <div class="col-auto">
  49   <input id="q"
  50          name="q"
  51          type="text"
  52          class="form-control form-control-sm"
  53          placeholder="Search"
  54          value="{api_request_params.q || ''}" />
  55 </div>
  56 {@render submitButton()}
  57 {/snippet}
  58
  59 {#snippet structuredSearchForm()}
  60 <div class="col-auto">
  61   <input name="amenity" type="text" class="form-control form-control-sm me-1"
  62          placeholder="Amenity (name and/or type of POI)"
  63          value="{api_request_params.amenity || ''}" />
  64 </div>
  65 <div class="col-auto">
  66   <input name="street" type="text" class="form-control form-control-sm me-1"
  67          placeholder="House number/Street"
  68          value="{api_request_params.street || ''}" />
  69 </div>
  70 <div class="col-auto">
  71   <input name="city" type="text" class="form-control form-control-sm me-1"
  72          placeholder="City"
  73          value="{api_request_params.city || ''}" />
  74 </div>
  75 <div class="col-auto">
  76   <input id="county" name="county" type="text" class="form-control form-control-sm me-1"
  77          placeholder="County"
  78          value="{api_request_params.county || ''}" />
  79 </div>
  80 <div class="col-auto">
  81   <input name="state" type="text" class="form-control form-control-sm me-1"
  82          placeholder="State"
  83          value="{api_request_params.state || ''}" />
  84 </div>
  85 <div class="col-auto">
  86   <input name="country" type="text" class="form-control form-control-sm me-1"
  87          placeholder="Country"
  88          value="{api_request_params.country || ''}" />
  89 </div>
  90 <div class="col-auto">
  91   <input name="postalcode" type="text" class="form-control form-control-sm me-1"
  92          placeholder="Postal Code"
  93          value="{api_request_params.postalcode || ''}" />
  94 </div>
  95 {@render submitButton()}
  96 {/snippet}
  97
  98 <ul class="nav nav-tabs">
  99   <li class="nav-item">
 100     <a class="nav-link" class:active={!bStructuredSearch} data-bs-toggle="tab" href="#simple">
 101       Simple
 102     </a>
 103   </li>
 104   <li class="nav-item">
 105     <a class="nav-link" class:active={bStructuredSearch} data-bs-toggle="tab" href="#structured">
 106       Structured
 107     </a>
 108   </li>
 109 </ul>
 110
 111 <div class="tab-content py-2">
 112   <div class="tab-pane" class:active={!bStructuredSearch} id="simple" role="tabpanel">
 113     <UrlSubmitForm page="search" content={simpleSearchForm} />
 114   </div>
 115   <div class="tab-pane" class:active={bStructuredSearch} id="structured" role="tabpanel">
 116     <UrlSubmitForm page="search" content={structuredSearchForm} />
 117   </div>
 118 </div> <!-- /tab-content -->
 119
 120 <!-- Additional options -->
 121 <details id="searchAdvancedOptions">
 122   <summary><small>Advanced options</small></summary>
 123   <ul>
 124     <li>
 125       <div class="form-check form-check-inline">
 126         <label class="form-check-label" for="use_viewbox">apply viewbox</label>
 127         <input type="checkbox" class="form-check-input api-param-setting"
 128                id="use_viewbox" checked={api_request_params.viewbox}
 129                onchange={() => useViewbox = !useViewbox}>
 130       </div>
 131     </li>
 132
 133     <li>
 134       <div class="form-check form-check-inline">
 135         <label class="form-check-label" for="option_bounded">bounded to viewbox</label>
 136         <input type="checkbox" class="form-check-input api-param-setting"
 137                id="option_bounded" checked={!!api_request_params.bounded} onchange={set_bounded}>
 138       </div>
 139     </li>
 140
 141     <li>
 142       <div class="form-check form-check-inline">
 143         <label class="form-check-label" for="option_dedupe">deduplicate results</label>
 144         <input type="checkbox"
 145                class="form-check-input api-param-setting"
 146                id="option_dedupe"
 147                checked={api_request_params.dedupe === 0 ? 0 : 1}
 148                onchange={set_dedupe}>
 149       </div>
 150     </li>
 151
 152     <li>
 153       <label for="option_limit">Maximum number of results</label>
 154       <input type="number"
 155              class="form-control form-control-sm d-inline w-auto api-param-setting"
 156              data-api-param="limit" id="option_limit" min="1" max="50"
 157              value="{api_request_params.limit || ''}"
 158              onchange={set_api_param}>
 159     </li>
 160
 161     <li>
 162       <label for="option_polygon_threshold">Polygon simplification</label>
 163       <input type="number"
 164              class="form-control form-control-sm d-inline w-auto api-param-setting"
 165              data-api-param="polygon_threshold" id="option_polygon_threshold"
 166              min="0.0" max="1.0" step="0.001"
 167              value="{api_request_params.polygon_threshold || ''}"
 168              onchange={set_api_param}>
 169     </li>
 170
 171     <li>
 172       <label for="accept_lang">Languages</label>
 173       <input type="text" placeholder="e.g. en,zh-Hant"
 174              class="form-control form-control-sm d-inline w-auto api-param-setting"
 175              data-api-param="accept-language" id="accept_lang" size="15"
 176              value="{api_request_params['accept-language'] || ''}"
 177              onchange={set_api_param}>
 178     </li>
 179
 180     <li>
 181       <label for="option_ccode">Country Codes</label>
 182       <input type="text" placeholder="e.g. de,gb"
 183             class="form-control form-control-sm d-inline w-auto api-param-setting"
 184              data-api-param="countrycodes" id="option_ccode" size="15"
 185              value="{api_request_params.countrycodes || ''}"
 186              pattern="^[a-zA-Z]{'{2}'}(,[a-zA-Z]{'{2}'})*$"
 187              onchange={set_api_param}>
 188     </li>
 189     <li>
 190       <label for="option_layer">Layer</label>
 191       <input id="option_layer" name="layer" placeholder="e.g. address,poi,railway,natural,manmade"
 192         value="{api_request_params.layer || ''}"
 193         data-api-param="layer" onchange={set_api_param}
 194         class="form-control form-control-sm d-inline w-auto api-param-setting">
 195     </li>
 196   </ul>
 197   <DefaultLanguage />
 198 </details>
 199
 200 <style>
 201   .nav-tabs {
 202     font-size: 0.8em;
 203     margin-top: -1em;
 204   }
 205
 206   .nav-link {
 207     padding: 0.1rem 1rem;
 208   }
 209
 210   #q {
 211     width: 500px;
 212     max-width: 100%;
 213   }
 214
 215   #searchAdvancedOptions ul {
 216     list-style-type: none;
 217     padding: 0;
 218     font-size: 0.85rem;
 219   }
 220
 221   #searchAdvancedOptions li {
 222     display: inline-block;
 223     padding: 4px 10px;
 224     border-radius: 5px;
 225     border: 1px dotted #ccc;
 226     margin-right: 1em;
 227   }
 228
 229   #searchAdvancedOptions label {
 230     margin-right: 0.5em;
 231   }
 232
 233 </style>