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 : '';
  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-toggle="tab" href="#simple">Simple</a>
  83   </li>
  84   <li class="nav-item">
  85     <a class="nav-link" class:active={bStructuredSearch} data-toggle="tab" href="#structured">Structured</a>
  86   </li>
  87 </ul>
  88
  89 <div class="tab-content p-2">
  90   <div class="tab-pane" class:active={!bStructuredSearch} id="simple" role="tabpanel">
  91     <UrlSubmitForm page="search">
  92       <input id="q"
  93              name="q"
  94              type="text"
  95              class="form-control form-control-sm"
  96              placeholder="Search"
  97              value="{api_request_params.q || ''}" />
  98
  99       <div class="form-group search-button-group">
 100         <button type="submit" class="btn btn-primary btn-sm mx-1">Search</button>
 101         <input type="hidden" name="viewbox" value="{sViewBox || ''}" />
 102         <input type="hidden" name="dedupe" value="{!api_request_params.dedupe ? '' : 1}" />
 103         <input type="hidden" name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
 104         <input type="hidden" name="accept-language" value="{api_request_params['accept-language'] || ''}" />
 105         <input type="hidden" name="countrycodes" value="{api_request_params.countrycodes || ''}" />
 106         <input type="hidden" name="limit" value="{api_request_params.limit || ''}" />
 107         <input type="hidden" name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
 108       </div>
 109     </UrlSubmitForm>
 110   </div>
 111   <div class="tab-pane" class:active={bStructuredSearch} id="structured" role="tabpanel">
 112     <UrlSubmitForm page="search">
 113       <input name="street" type="text" class="form-control form-control-sm mr-1"
 114              placeholder="House number/Street"
 115              value="{api_request_params.street || ''}" />
 116       <input name="city" type="text" class="form-control form-control-sm mr-1"
 117              placeholder="City"
 118              value="{api_request_params.city || ''}" />
 119       <input id="county" name="county" type="text" class="form-control form-control-sm mr-1"
 120              placeholder="County"
 121              value="{api_request_params.county || ''}" />
 122       <input name="state" type="text" class="form-control form-control-sm mr-1"
 123              placeholder="State"
 124              value="{api_request_params.state || ''}" />
 125       <input name="country" type="text" class="form-control form-control-sm mr-1"
 126              placeholder="Country"
 127              value="{api_request_params.country || ''}" />
 128       <input name="postalcode" type="text" class="form-control form-control-sm mr-1"
 129              placeholder="Postal Code"
 130              value="{api_request_params.postalcode || ''}" />
 131
 132       <div class="form-group search-button-group">
 133         <button type="submit" class="btn btn-primary btn-sm mx-1">Search</button>
 134         <input type="hidden" name="viewbox" value="{sViewBox || ''}" />
 135         <input type="hidden" name="dedupe" value="{!api_request_params.dedupe ? '' : 1}" />
 136         <input type="hidden" name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
 137         <input type="hidden" name="accept-language" value="{api_request_params['accept-language'] || ''}" />
 138         <input type="hidden" name="countrycodes" value="{api_request_params.countrycodes || ''}" />
 139         <input type="hidden" name="limit" value="{api_request_params.limit || ''}" />
 140         <input type="hidden" name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
 141       </div>
 142     </UrlSubmitForm>
 143   </div>
 144   <!-- Additional options -->
 145   <a href="#advanced" class="btn btn-outline-secondary btn-sm" data-toggle="collapse" data-target="#searchAdvancedOptions" role="button" aria-expanded="false" aria-controls="collapseAdvancedOptions">
 146     Advanced options
 147   </a>
 148   <div class="collapse" id="searchAdvancedOptions">
 149     <div id="searchAdvancedOptionsContent">
 150         <div class="form-check form-check-inline">
 151           <span><input type="checkbox" class="form-check-input api-param-setting"
 152                  id="use_viewbox" checked={api_request_params.viewbox} on:change={reset_viewbox}>
 153           <label class="form-check-label" for="use_viewbox">apply viewbox</label></span>
 154           <span><input type="checkbox" class="form-check-input api-param-setting"
 155                  id="option_bounded" checked={!!api_request_params.bounded} on:change={set_bounded}>
 156           <label class="form-check-label" for="option_bounded">bounded to viewbox</label></span>
 157           <span><input type="checkbox" class="form-check-input api-param-setting"
 158                  id="option_dedupe" checked={!!api_request_params.dedupe} on:change={set_dedupe}>
 159           <label class="form-check-label" for="option_dedupe">deduplicate results</label></span>
 160         </div>
 161         <div class="form-check form-check-inline">
 162           <span><label class="form-check-label" for="option_limit">Maximum number of results: </label>
 163           <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>
 164           <span><label class="form-check-label" for="option_polygon_threashold">Polygon simplification: </label>
 165           <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>
 166         </div>
 167         <div class="form-check form-check-inline">
 168           <span><label class="form-check-label" for="accept_lang">Languages: </label>
 169           <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>
 170           <span><label class="form-check-label" for="option_ccode">Countries: </label>
 171           <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>
 172         </div>
 173      </div>
 174   </div>
 175 </div> <!-- /tab-content -->
 176
 177 <style>
 178   .nav-tabs {
 179     font-size: 0.8em;
 180   }
 181
 182   #q {
 183     max-width: 500px;
 184   }
 185
 186   .tab-content {
 187     display: flex;
 188     align-items: baseline
 189   }
 190
 191   #q {
 192     min-width: 500px;
 193   }
 194   @media (max-width: 850px) {
 195     #q {
 196       min-width: 400px;
 197     }
 198   }
 199
 200   label {
 201     font-weight: normal;
 202     margin-left: 0.4rem;
 203     margin-right: 0.4rem;
 204   }
 205
 206   #searchAdvancedOptionsContent {
 207     display: flex;
 208     flex-direction: column;
 209     padding: 0 10px
 210   }
 211
 212   #searchAdvancedOptionsContent label {
 213     padding: 0 3px;
 214   }
 215
 216   #searchAdvancedOptionsContent span {
 217     padding: 4px 10px;
 218   }
 219
 220   @media (max-width: 768px) {
 221     .search-button-group {
 222       display: inline;
 223     }
 224   }
 225 </style>