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