src/components/SearchBar.svelte

   1 <script>
   2   import UrlSubmitForm from '../components/UrlSubmitForm.svelte';
   3
   4   import { zoomLevels } from '../lib/helpers.js';
   5   import { map_store } from '../lib/stores.js';
   6   import { get } from 'svelte/store';
   7
   8   export let bStructuredSearch = false;
   9   export let reverse_search = false;
  10   export let api_request_params = {};
  11   let sViewBox;
  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 link = document.getElementById('switch-to-reverse');
  44     if (link) {
  45       let center_lat_lng = map.wrapLatLng(map.getCenter());
  46       link.href = 'reverse.html?lat=' + center_lat_lng.lat.toFixed(5)
  47                    + '&lon=' + center_lat_lng.lng.toFixed(5);
  48     }
  49   }
  50
  51   map_store.subscribe(map => {
  52     if (!map) { return; }
  53
  54     map.on('move', function () {
  55       set_viewbox(map);
  56       update_reverse_link(map);
  57     });
  58
  59     map.on('load', function () {
  60       set_viewbox(map);
  61       update_reverse_link(map);
  62     });
  63
  64     map.on('click', function (e) {
  65       if (reverse_search) {
  66         document.querySelector('input[name=lat]').value = e.latlng.lat.toFixed(5);
  67         document.querySelector('input[name=lon]').value = e.latlng.wrap().lng.toFixed(5);
  68         document.querySelector('form').submit();
  69       }
  70     });
  71   });
  72
  73   function reset_viewbox() {
  74     let map = get(map_store);
  75     if (map) { set_viewbox(map); }
  76   }
  77
  78   function set_bounded(e) {
  79     console.log('setting', e.target);
  80     document.querySelector('input[name=bounded]').value = e.target.checked ? 1 : '';
  81   }
  82
  83   function set_dedupe(e) {
  84     document.querySelector('input[name=dedupe]').value = e.target.checked ? 1 : '';
  85   }
  86
  87   function set_api_param(e) {
  88     document.querySelector('input[name=' + e.target.dataset.apiParam + ']').value = e.target.value;
  89   }
  90
  91   function handleSwitchCoords() {
  92     let lat = document.querySelector('input[name=lat]').value;
  93     let lon = document.querySelector('input[name=lon]').value;
  94     document.querySelector('input[name=lat]').value = lon;
  95     document.querySelector('input[name=lon]').value = lat;
  96     document.querySelector('form').submit();
  97   }
  98 </script>
  99
 100 {#if reverse_search}
 101   <div class="top-bar">
 102     <UrlSubmitForm>
 103       <div class="form-group">
 104         <input name="format" type="hidden" value="html">
 105         <label for="reverse-lat">lat</label>
 106         <input id="reverse-lat"
 107                name="lat"
 108                type="text"
 109                class="form-control form-control-sm"
 110                placeholder="latitude"
 111                value="{api_request_params.lat || ''}" />
 112         <a id="switch-coords"
 113            on:click|preventDefault|stopPropagation={handleSwitchCoords}
 114            class="btn btn-outline-secondary btn-sm"
 115            title="switch lat and lon">&lt;&gt;</a>
 116         <label for="reverse-lon">lon</label>
 117         <input id="reverse-lon"
 118                name="lon"
 119                type="text"
 120                class="form-control form-control-sm"
 121                placeholder="longitude"
 122                value="{api_request_params.lon || ''}" />
 123         <label for="reverse-zoom">max zoom</label>
 124         <select id="reverse-zoom" name="zoom" class="form-control form-control-sm" value="{api_request_params.zoom}">
 125           <option value="" selected={!api_request_params.zoom}>---</option>
 126           {#each zoomLevels() as zoomTitle, i}
 127             <option value="{i}" selected={i === api_request_params.zoom}>{i} - {zoomTitle}</option>
 128           {/each}
 129         </select>
 130         <button type="submit" class="btn btn-primary btn-sm mx-1">
 131           Search
 132         </button>
 133       </div>
 134       <div class="search-type-link">
 135         <a href="details.html" class="mr-2">search by id</a>
 136         <a href="search.html">forward search</a>
 137       </div>
 138     </UrlSubmitForm>
 139   </div>
 140
 141 {:else}
 142
 143   <div class="top-bar">
 144     <ul class="nav nav-tabs">
 145       <li class="nav-item">
 146         <a class="nav-link" class:active={!bStructuredSearch} data-toggle="tab" href="#simple">simple</a>
 147       </li>
 148       <li class="nav-item">
 149         <a class="nav-link" class:active={bStructuredSearch} data-toggle="tab" href="#structured">structured</a>
 150       </li>
 151       <div class="search-type-link">
 152         <a href="details.html" class="mr-2">search by id</a>
 153         <a id="switch-to-reverse" href="reverse.html">reverse search</a>
 154       </div>
 155     </ul>
 156     <div class="tab-content p-2">
 157       <div class="tab-pane" class:active={!bStructuredSearch} id="simple" role="tabpanel">
 158         <UrlSubmitForm>
 159           <input id="q"
 160                  name="q"
 161                  type="text"
 162                  class="form-control form-control-sm"
 163                  placeholder="Search"
 164                  value="{api_request_params.q || ''}" />
 165
 166           <div class="form-group search-button-group">
 167             <button type="submit" class="btn btn-primary btn-sm mx-1">Search</button>
 168             <input type="hidden" name="viewbox" value="{sViewBox || ''}" />
 169             <input type="hidden" name="dedupe" value="{!api_request_params.dedupe ? '' : 1}" />
 170             <input type="hidden" name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
 171             <input type="hidden" name="accept-language" value="{api_request_params['accept-language'] || ''}" />
 172             <input type="hidden" name="countrycodes" value="{api_request_params.countrycodes || ''}" />
 173             <input type="hidden" name="limit" value="{api_request_params.limit || ''}" />
 174             <input type="hidden" name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
 175           </div>
 176         </UrlSubmitForm>
 177       </div>
 178       <div class="tab-pane" class:active={bStructuredSearch} id="structured" role="tabpanel">
 179         <UrlSubmitForm>
 180           <input name="street" type="text" class="form-control form-control-sm mr-1"
 181                  placeholder="House number/Street"
 182                  value="{api_request_params.street || ''}" />
 183           <input name="city" type="text" class="form-control form-control-sm mr-1"
 184                  placeholder="City"
 185                  value="{api_request_params.city || ''}" />
 186           <input id="county" name="county" type="text" class="form-control form-control-sm mr-1"
 187                  placeholder="County"
 188                  value="{api_request_params.county || ''}" />
 189           <input name="state" type="text" class="form-control form-control-sm mr-1"
 190                  placeholder="State"
 191                  value="{api_request_params.state || ''}" />
 192           <input name="country" type="text" class="form-control form-control-sm mr-1"
 193                  placeholder="Country"
 194                  value="{api_request_params.country || ''}" />
 195           <input name="postalcode" type="text" class="form-control form-control-sm mr-1"
 196                  placeholder="Postal Code"
 197                  value="{api_request_params.postalcode || ''}" />
 198
 199           <div class="form-group search-button-group">
 200             <button type="submit" class="btn btn-primary btn-sm mx-1">Search</button>
 201             <input type="hidden" name="viewbox" value="{sViewBox || ''}" />
 202             <input type="hidden" name="dedupe" value="{!api_request_params.dedupe ? '' : 1}" />
 203             <input type="hidden" name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
 204             <input type="hidden" name="accept-language" value="{api_request_params['accept-language'] || ''}" />
 205             <input type="hidden" name="countrycodes" value="{api_request_params.countrycodes || ''}" />
 206             <input type="hidden" name="limit" value="{api_request_params.limit || ''}" />
 207             <input type="hidden" name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
 208           </div>
 209         </UrlSubmitForm>
 210       </div>
 211       <!-- Additional options -->
 212       <a href="#advanced" class="btn btn-outline-secondary btn-sm" data-toggle="collapse" data-target="#searchAdvancedOptions" role="button" aria-expanded="false" aria-controls="collapseAdvancedOptions">
 213         Advanced options
 214       </a>
 215       <div class="collapse" id="searchAdvancedOptions">
 216         <div id="searchAdvancedOptionsContent">
 217             <div class="form-check form-check-inline">
 218               <span><input type="checkbox" class="form-check-input api-param-setting"
 219                      id="use_viewbox" checked={api_request_params.viewbox} on:change={reset_viewbox}>
 220               <label class="form-check-label" for="use_viewbox">apply viewbox</label></span>
 221               <span><input type="checkbox" class="form-check-input api-param-setting"
 222                      id="option_bounded" checked={!!api_request_params.bounded} on:change={set_bounded}>
 223               <label class="form-check-label" for="option_bounded">bounded to viewbox</label></span>
 224               <span><input type="checkbox" class="form-check-input api-param-setting"
 225                      id="option_dedupe" checked={!!api_request_params.dedupe} on:change={set_dedupe}>
 226               <label class="form-check-label" for="option_dedupe">deduplicate results</label></span>
 227             </div>
 228             <div class="form-check form-check-inline">
 229               <span><label class="form-check-label" for="option_limit">Maximum number of results: </label>
 230               <input type="number" class="form-check-input api-param-setting" data-api-param="limit" id="option_limit" size="5" min="1" max="50" value="{api_request_params.limit || ''}" on:change={set_api_param}></span>
 231               <span><label class="form-check-label" for="option_polygon_threashold">Polygon simplification: </label>
 232               <input type="number" class="form-check-input api-param-setting" data-api-param="polygon_threshold" id="option_polygon_threshold" size="5" min="0.0" step="0.01" value="{api_request_params.polygon_threshold || ''}" on:change={set_api_param}></span>
 233             </div>
 234             <div class="form-check form-check-inline">
 235               <span><label class="form-check-label" for="accept_lang">Languages: </label>
 236               <input type="text" placeholder="e.g. en,zh-Hant" class="form-check-input api-param-setting" data-api-param="accept-language" id="accept_lang" size="15" value="{api_request_params['accept-language'] || ''}" on:change={set_api_param}></span>
 237               <span><label class="form-check-label" for="option_ccode">Countries: </label>
 238               <input type="text" placeholder="e.g. de,gb" class="form-check-input api-param-setting" data-api-param="countrycodes" id="option_ccode" size="15" value="{api_request_params.countrycodes || ''}" on:change={set_api_param}></span>
 239             </div>
 240          </div>
 241       </div>
 242     </div> <!-- /tab-content -->
 243   </div> <!-- /top-bar -->
 244 {/if}
 245
 246 <style>
 247   .top-bar {
 248     width: 100%;
 249     padding: 1em 15px;
 250   }
 251
 252   .top-bar #q {
 253     max-width: 500px;
 254   }
 255
 256   .tab-content {
 257     border: 1px solid #ddd;
 258     border-top: none;
 259     display: flex;
 260     align-items: baseline
 261   }
 262
 263   #q {
 264     min-width: 500px;
 265   }
 266   @media (max-width: 850px) {
 267     #q {
 268       min-width: 400px;
 269     }
 270   }
 271
 272   label {
 273     font-weight: normal;
 274     margin-left: 0.4rem;
 275     margin-right: 0.4rem;
 276   }
 277
 278   #searchAdvancedOptionsContent {
 279     display: flex;
 280     flex-direction: column;
 281     padding: 0 10px
 282   }
 283
 284   #searchAdvancedOptionsContent label {
 285     padding: 0 3px;
 286   }
 287
 288   #searchAdvancedOptionsContent span {
 289     padding: 4px 10px;
 290   }
 291
 292   .search-type-link {
 293     display: inline;
 294     margin-right: 2em;
 295     position: absolute;
 296     right: 0
 297   }
 298
 299   #switch-coords {
 300     font-size: 0.6rem;
 301     font-weight: bold;
 302     cursor: pointer;
 303     padding: 2px;
 304     margin: 5px;
 305   }
 306
 307
 308
 309
 310   @media (max-width: 768px) {
 311     .search-button-group {
 312       display: inline;
 313     }
 314   }
 315 </style>