src/components/SearchSection.svelte

   1 <script>
   2   import UrlSubmitForm from '../components/UrlSubmitForm.svelte';
   3
   4   import { map_store } from '../lib/stores.js';
   5   import { get } from 'svelte/store';
   6
   7   export let bStructuredSearch = false;
   8   export let api_request_params = {};
   9   let sViewBox;
  10   let lat;
  11   let lon;
  12
  13   function map_viewbox_as_string(map) {
  14     var bounds = map.getBounds();
  15     var west = bounds.getWest();
  16     var east = bounds.getEast();
  17
  18     if ((east - west) >= 360) { // covers more than whole planet
  19       west = map.getCenter().lng - 179.999;
  20       east = map.getCenter().lng + 179.999;
  21     }
  22     east = L.latLng(77, east).wrap().lng;
  23     west = L.latLng(77, west).wrap().lng;
  24
  25     return [
  26       west.toFixed(5), // left
  27       bounds.getNorth().toFixed(5), // top
  28       east.toFixed(5), // right
  29       bounds.getSouth().toFixed(5) // bottom
  30     ].join(',');
  31   }
  32
  33   function set_viewbox(map) {
  34     let use_viewbox = document.getElementById('use_viewbox');
  35     if (use_viewbox && use_viewbox.checked) {
  36       sViewBox = map_viewbox_as_string(map);
  37     } else {
  38       sViewBox = '';
  39     }
  40   }
  41
  42   function update_reverse_link(map) {
  43     let center_lat_lng = map.wrapLatLng(map.getCenter());
  44     lat = center_lat_lng.lat.toFixed(5);
  45     lon = center_lat_lng.lng.toFixed(5);
  46   }
  47
  48   map_store.subscribe(map => {
  49     if (!map) { return; }
  50
  51     map.on('move', function () {
  52       set_viewbox(map);
  53       update_reverse_link(map);
  54     });
  55
  56     map.on('load', function () {
  57       set_viewbox(map);
  58       update_reverse_link(map);
  59     });
  60   });
  61
  62   function reset_viewbox() {
  63     let map = get(map_store);
  64     if (map) { set_viewbox(map); }
  65   }
  66
  67   function set_bounded(e) {
  68     document.querySelector('input[name=bounded]').value = e.target.checked ? 1 : '';
  69   }
  70
  71   function set_dedupe(e) {
  72     document.querySelector('input[name=dedupe]').value = e.target.checked ? 1 : 0;
  73   }
  74
  75   function set_api_param(e) {
  76     document.querySelector('input[name=' + e.target.dataset.apiParam + ']').value = e.target.value;
  77   }
  78 </script>
  79
  80 <ul class="nav nav-tabs">
  81   <li class="nav-item">
  82     <a class="nav-link" class:active={!bStructuredSearch} data-bs-toggle="tab" href="#simple">
  83       Simple
  84     </a>
  85   </li>
  86   <li class="nav-item">
  87     <a class="nav-link" class:active={bStructuredSearch} data-bs-toggle="tab" href="#structured">
  88       Structured
  89     </a>
  90   </li>
  91 </ul>
  92
  93 <div class="tab-content py-2">
  94   <div class="tab-pane" class:active={!bStructuredSearch} id="simple" role="tabpanel">
  95     <UrlSubmitForm page="search">
  96       <div class="col-auto">
  97         <input id="q"
  98                name="q"
  99                type="text"
 100                class="form-control form-control-sm"
 101                placeholder="Search"
 102                value="{api_request_params.q || ''}" />
 103       </div>
 104       <div class="col-auto">
 105         <button type="submit" class="btn btn-primary btn-sm mx-1">Search</button>
 106         <input type="hidden"
 107                name="viewbox" value="{sViewBox || ''}" />
 108         <input type="hidden"
 109                name="dedupe" value="{api_request_params.dedupe === 0 ? 0 : 1}" />
 110         <input type="hidden"
 111                name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
 112         <input type="hidden"
 113                name="accept-language"value="{api_request_params['accept-language'] || ''}" />
 114         <input type="hidden"
 115                name="countrycodes" value="{api_request_params.countrycodes || ''}"
 116                                    pattern="^[a-zA-Z]{'{2}'}(,[a-zA-Z]{'{2}'})*$" />
 117         <input type="hidden"
 118                name="limit" value="{api_request_params.limit || ''}" />
 119         <input type="hidden"
 120                name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
 121       </div>
 122     </UrlSubmitForm>
 123   </div>
 124   <div class="tab-pane" class:active={bStructuredSearch} id="structured" role="tabpanel">
 125     <UrlSubmitForm page="search">
 126       <div class="col-auto">
 127         <input name="street" type="text" class="form-control form-control-sm me-1"
 128                placeholder="House number/Street"
 129                value="{api_request_params.street || ''}" />
 130       </div>
 131       <div class="col-auto">
 132         <input name="city" type="text" class="form-control form-control-sm me-1"
 133                placeholder="City"
 134                value="{api_request_params.city || ''}" />
 135       </div>
 136       <div class="col-auto">
 137         <input id="county" name="county" type="text" class="form-control form-control-sm me-1"
 138                placeholder="County"
 139                value="{api_request_params.county || ''}" />
 140       </div>
 141       <div class="col-auto">
 142         <input name="state" type="text" class="form-control form-control-sm me-1"
 143                placeholder="State"
 144                value="{api_request_params.state || ''}" />
 145       </div>
 146       <div class="col-auto">
 147         <input name="country" type="text" class="form-control form-control-sm me-1"
 148                placeholder="Country"
 149                value="{api_request_params.country || ''}" />
 150       </div>
 151       <div class="col-auto">
 152         <input name="postalcode" type="text" class="form-control form-control-sm me-1"
 153                placeholder="Postal Code"
 154                value="{api_request_params.postalcode || ''}" />
 155       </div>
 156       <div class="col-auto">
 157         <button type="submit" class="btn btn-primary btn-sm">Search</button>
 158         <input type="hidden"
 159                name="viewbox" value="{sViewBox || ''}" />
 160         <input type="hidden"
 161                name="dedupe" value="{api_request_params.dedupe === 0 ? 0 : 1}" />
 162         <input type="hidden"
 163                name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
 164         <input type="hidden"
 165                name="accept-language" value="{api_request_params['accept-language'] || ''}" />
 166         <input type="hidden"
 167                name="countrycodes" value="{api_request_params.countrycodes || ''}"
 168                                    pattern="^[a-zA-Z]{'{2}'}(,[a-zA-Z]{'{2}'})*$" />
 169         <input type="hidden"
 170                name="limit" value="{api_request_params.limit || ''}" />
 171         <input type="hidden"
 172                name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
 173       </div>
 174     </UrlSubmitForm>
 175   </div>
 176 </div> <!-- /tab-content -->
 177
 178 <!-- Additional options -->
 179 <details id="searchAdvancedOptions">
 180   <summary><small>Advanced options</small></summary>
 181   <ul>
 182     <li>
 183       <div class="form-check form-check-inline">
 184         <label class="form-check-label" for="use_viewbox">apply viewbox</label>
 185         <input type="checkbox" class="form-check-input api-param-setting"
 186                id="use_viewbox" checked={api_request_params.viewbox} on:change={reset_viewbox}>
 187       </div>
 188     </li>
 189
 190     <li>
 191       <div class="form-check form-check-inline">
 192         <label class="form-check-label" for="option_bounded">bounded to viewbox</label>
 193         <input type="checkbox" class="form-check-input api-param-setting"
 194                id="option_bounded" checked={!!api_request_params.bounded} on:change={set_bounded}>
 195       </div>
 196     </li>
 197
 198     <li>
 199       <div class="form-check form-check-inline">
 200         <label class="form-check-label" for="option_dedupe">deduplicate results</label>
 201         <input type="checkbox"
 202                class="form-check-input api-param-setting"
 203                id="option_dedupe"
 204                checked={api_request_params.dedupe === 0 ? 0 : 1}
 205                on:change={set_dedupe}>
 206       </div>
 207     </li>
 208
 209     <li>
 210       <label for="option_limit">Maximum number of results</label>
 211       <input type="number"
 212              class="form-control form-control-sm d-inline w-auto api-param-setting"
 213              data-api-param="limit" id="option_limit" min="1" max="50"
 214              value="{api_request_params.limit || ''}"
 215              on:change={set_api_param}>
 216     </li>
 217
 218     <li>
 219       <label for="option_polygon_threshold">Polygon simplification</label>
 220       <input type="number"
 221              class="form-control form-control-sm d-inline w-auto api-param-setting"
 222              data-api-param="polygon_threshold" id="option_polygon_threshold"
 223              min="0.0" max="1.0" step="0.001"
 224              value="{api_request_params.polygon_threshold || ''}"
 225              on:change={set_api_param}>
 226     </li>
 227
 228     <li>
 229       <label for="accept_lang">Languages</label>
 230       <input type="text" placeholder="e.g. en,zh-Hant"
 231              class="form-control form-control-sm d-inline w-auto api-param-setting"
 232              data-api-param="accept-language" id="accept_lang" size="15"
 233              value="{api_request_params['accept-language'] || ''}"
 234              on:change={set_api_param}>
 235     </li>
 236
 237     <li>
 238       <label for="option_ccode">Country Codes</label>
 239       <input type="text" placeholder="e.g. de,gb"
 240             class="form-control form-control-sm d-inline w-auto api-param-setting"
 241              data-api-param="countrycodes" id="option_ccode" size="15"
 242              value="{api_request_params.countrycodes || ''}"
 243              pattern="^[a-zA-Z]{'{2}'}(,[a-zA-Z]{'{2}'})*$"
 244              on:change={set_api_param}>
 245     </li>
 246   </ul>
 247 </details>
 248
 249 <style>
 250   .nav-tabs {
 251     font-size: 0.8em;
 252     margin-top: -1em;
 253   }
 254
 255   .nav-link {
 256     padding: 0.1rem 1rem;
 257   }
 258
 259   #q {
 260     width: 500px;
 261     max-width: 100%;
 262   }
 263
 264   #searchAdvancedOptions ul {
 265     list-style-type: none;
 266     padding: 0;
 267     font-size: 0.85rem;
 268   }
 269
 270   #searchAdvancedOptions li {
 271     display: inline-block;
 272     padding: 4px 10px;
 273     border-radius: 5px;
 274     border: 1px dotted #ccc;
 275     margin-right: 1em;
 276   }
 277
 278   #searchAdvancedOptions label {
 279     margin-right: 0.5em;
 280   }
 281
 282 </style>