src/components/SearchSection.svelte

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