src/components/SearchBar.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
  11   function map_viewbox_as_string(map) {
  12     var bounds = map.getBounds();
  13     var west = bounds.getWest();
  14     var east = bounds.getEast();
  15
  16     if ((east - west) >= 360) { // covers more than whole planet
  17       west = map.getCenter().lng - 179.999;
  18       east = map.getCenter().lng + 179.999;
  19     }
  20     east = L.latLng(77, east).wrap().lng;
  21     west = L.latLng(77, west).wrap().lng;
  22
  23     return [
  24       west.toFixed(5), // left
  25       bounds.getNorth().toFixed(5), // top
  26       east.toFixed(5), // right
  27       bounds.getSouth().toFixed(5) // bottom
  28     ].join(',');
  29   }
  30
  31   function set_viewbox(map) {
  32     let use_viewbox = document.getElementById('use_viewbox');
  33     if (use_viewbox && use_viewbox.checked) {
  34       sViewBox = map_viewbox_as_string(map);
  35     } else {
  36       sViewBox = '';
  37     }
  38   }
  39
  40   function update_reverse_link(map) {
  41     let link = document.getElementById('switch-to-reverse');
  42     if (link) {
  43       let center_lat_lng = map.wrapLatLng(map.getCenter());
  44       link.href = 'reverse.html?lat=' + center_lat_lng.lat.toFixed(5)
  45                    + '&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 </script>
  81
  82 <div class="top-bar">
  83   <ul class="nav nav-tabs">
  84     <li class="nav-item">
  85       <a class="nav-link" class:active={!bStructuredSearch} data-toggle="tab" href="#simple">simple</a>
  86     </li>
  87     <li class="nav-item">
  88       <a class="nav-link" class:active={bStructuredSearch} data-toggle="tab" href="#structured">structured</a>
  89     </li>
  90     <div class="search-type-link">
  91       <a href="details.html" class="mr-2">search by id</a>
  92       <a id="switch-to-reverse" href="reverse.html">reverse search</a>
  93     </div>
  94   </ul>
  95   <div class="tab-content p-2">
  96     <div class="tab-pane" class:active={!bStructuredSearch} id="simple" role="tabpanel">
  97       <UrlSubmitForm>
  98         <input id="q"
  99                name="q"
 100                type="text"
 101                class="form-control form-control-sm"
 102                placeholder="Search"
 103                value="{api_request_params.q || ''}" />
 104
 105         <div class="form-group search-button-group">
 106           <button type="submit" class="btn btn-primary btn-sm mx-1">Search</button>
 107           <input type="hidden" name="viewbox" value="{sViewBox || ''}" />
 108           <input type="hidden" name="dedupe" value="{!api_request_params.dedupe ? '' : 1}" />
 109           <input type="hidden" name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
 110           <input type="hidden" name="accept-language" value="{api_request_params['accept-language'] || ''}" />
 111           <input type="hidden" name="countrycodes" value="{api_request_params.countrycodes || ''}" />
 112           <input type="hidden" name="limit" value="{api_request_params.limit || ''}" />
 113           <input type="hidden" name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
 114         </div>
 115       </UrlSubmitForm>
 116     </div>
 117     <div class="tab-pane" class:active={bStructuredSearch} id="structured" role="tabpanel">
 118       <UrlSubmitForm>
 119         <input name="street" type="text" class="form-control form-control-sm mr-1"
 120                placeholder="House number/Street"
 121                value="{api_request_params.street || ''}" />
 122         <input name="city" type="text" class="form-control form-control-sm mr-1"
 123                placeholder="City"
 124                value="{api_request_params.city || ''}" />
 125         <input id="county" name="county" type="text" class="form-control form-control-sm mr-1"
 126                placeholder="County"
 127                value="{api_request_params.county || ''}" />
 128         <input name="state" type="text" class="form-control form-control-sm mr-1"
 129                placeholder="State"
 130                value="{api_request_params.state || ''}" />
 131         <input name="country" type="text" class="form-control form-control-sm mr-1"
 132                placeholder="Country"
 133                value="{api_request_params.country || ''}" />
 134         <input name="postalcode" type="text" class="form-control form-control-sm mr-1"
 135                placeholder="Postal Code"
 136                value="{api_request_params.postalcode || ''}" />
 137
 138         <div class="form-group search-button-group">
 139           <button type="submit" class="btn btn-primary btn-sm mx-1">Search</button>
 140           <input type="hidden" name="viewbox" value="{sViewBox || ''}" />
 141           <input type="hidden" name="dedupe" value="{!api_request_params.dedupe ? '' : 1}" />
 142           <input type="hidden" name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
 143           <input type="hidden" name="accept-language" value="{api_request_params['accept-language'] || ''}" />
 144           <input type="hidden" name="countrycodes" value="{api_request_params.countrycodes || ''}" />
 145           <input type="hidden" name="limit" value="{api_request_params.limit || ''}" />
 146           <input type="hidden" name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
 147         </div>
 148       </UrlSubmitForm>
 149     </div>
 150     <!-- Additional options -->
 151     <a href="#advanced" class="btn btn-outline-secondary btn-sm" data-toggle="collapse" data-target="#searchAdvancedOptions" role="button" aria-expanded="false" aria-controls="collapseAdvancedOptions">
 152       Advanced options
 153     </a>
 154     <div class="collapse" id="searchAdvancedOptions">
 155       <div id="searchAdvancedOptionsContent">
 156           <div class="form-check form-check-inline">
 157             <span><input type="checkbox" class="form-check-input api-param-setting"
 158                    id="use_viewbox" checked={api_request_params.viewbox} on:change={reset_viewbox}>
 159             <label class="form-check-label" for="use_viewbox">apply viewbox</label></span>
 160             <span><input type="checkbox" class="form-check-input api-param-setting"
 161                    id="option_bounded" checked={!!api_request_params.bounded} on:change={set_bounded}>
 162             <label class="form-check-label" for="option_bounded">bounded to viewbox</label></span>
 163             <span><input type="checkbox" class="form-check-input api-param-setting"
 164                    id="option_dedupe" checked={!!api_request_params.dedupe} on:change={set_dedupe}>
 165             <label class="form-check-label" for="option_dedupe">deduplicate results</label></span>
 166           </div>
 167           <div class="form-check form-check-inline">
 168             <span><label class="form-check-label" for="option_limit">Maximum number of results: </label>
 169             <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>
 170             <span><label class="form-check-label" for="option_polygon_threashold">Polygon simplification: </label>
 171             <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>
 172           </div>
 173           <div class="form-check form-check-inline">
 174             <span><label class="form-check-label" for="accept_lang">Languages: </label>
 175             <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>
 176             <span><label class="form-check-label" for="option_ccode">Countries: </label>
 177             <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>
 178           </div>
 179        </div>
 180     </div>
 181   </div> <!-- /tab-content -->
 182 </div> <!-- /top-bar -->
 183
 184 <style>
 185   .top-bar {
 186     width: 100%;
 187     padding: 1em 15px;
 188   }
 189
 190   .top-bar #q {
 191     max-width: 500px;
 192   }
 193
 194   .tab-content {
 195     border: 1px solid #ddd;
 196     border-top: none;
 197     display: flex;
 198     align-items: baseline
 199   }
 200
 201   #q {
 202     min-width: 500px;
 203   }
 204   @media (max-width: 850px) {
 205     #q {
 206       min-width: 400px;
 207     }
 208   }
 209
 210   label {
 211     font-weight: normal;
 212     margin-left: 0.4rem;
 213     margin-right: 0.4rem;
 214   }
 215
 216   #searchAdvancedOptionsContent {
 217     display: flex;
 218     flex-direction: column;
 219     padding: 0 10px
 220   }
 221
 222   #searchAdvancedOptionsContent label {
 223     padding: 0 3px;
 224   }
 225
 226   #searchAdvancedOptionsContent span {
 227     padding: 4px 10px;
 228   }
 229
 230   .search-type-link {
 231     display: inline;
 232     margin-right: 2em;
 233     position: absolute;
 234     right: 0
 235   }
 236
 237   @media (max-width: 768px) {
 238     .search-button-group {
 239       display: inline;
 240     }
 241   }
 242 </style>