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