src/components/SearchBar.svelte

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