Merge pull request #54 from lonvia/split-search-page-II

Split search page and bar into two components for forward and reverse search each

diff --git a/src/App.svelte b/src/App.svelte
index c9443f35c535277a3f0956f8e0888dd258340312..e543afd471564dfe7cc591a0dd1ea0de05c724f9 100644 (file)
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -8,6 +8,7 @@
   import Footer from './components/Footer.svelte';
   import ReportIssueModal from './components/ReportIssueModal.svelte';
   import SearchPage from './pages/SearchPage.svelte';
+  import ReversePage from './pages/ReversePage.svelte';
   import DetailsPage from './pages/DetailsPage.svelte';
   import PolygonsPage from './pages/PolygonsPage.svelte';
   import DeletablePage from './pages/DeletablePage.svelte';
@@ -19,9 +20,9 @@
 
 <Header/>
 {#if view === 'search'}
-<SearchPage reverse_search={false} />
+<SearchPage />
 {:else if view === 'reverse'}
-<SearchPage reverse_search={true}/>
+<ReversePage />
 {:else if view === 'details'}
 <DetailsPage />
 {:else if view === 'deletable'}

diff --git a/src/components/ReverseBar.svelte b/src/components/ReverseBar.svelte
new file mode 100644 (file)
index 0000000..87fa56f
--- /dev/null
+++ b/src/components/ReverseBar.svelte
@@ -0,0 +1,95 @@
+<script>
+  import UrlSubmitForm from '../components/UrlSubmitForm.svelte';
+
+  import { zoomLevels } from '../lib/helpers.js';
+  import { map_store } from '../lib/stores.js';
+  import { get } from 'svelte/store';
+
+  export let api_request_params = {};
+
+  map_store.subscribe(map => {
+    if (!map) { return; }
+
+    map.on('click', function (e) {
+      document.querySelector('input[name=lat]').value = e.latlng.lat.toFixed(5);
+      document.querySelector('input[name=lon]').value = e.latlng.wrap().lng.toFixed(5);
+      document.querySelector('form').submit();
+    });
+  });
+
+  function handleSwitchCoords() {
+    let lat = document.querySelector('input[name=lat]').value;
+    let lon = document.querySelector('input[name=lon]').value;
+    document.querySelector('input[name=lat]').value = lon;
+    document.querySelector('input[name=lon]').value = lat;
+    document.querySelector('form').submit();
+  }
+</script>
+
+<div class="top-bar">
+  <UrlSubmitForm>
+    <div class="form-group">
+      <input name="format" type="hidden" value="html">
+      <label for="reverse-lat">lat</label>
+      <input id="reverse-lat"
+             name="lat"
+             type="text"
+             class="form-control form-control-sm"
+             placeholder="latitude"
+             value="{api_request_params.lat || ''}" />
+      <a id="switch-coords"
+         on:click|preventDefault|stopPropagation={handleSwitchCoords}
+         class="btn btn-outline-secondary btn-sm"
+         title="switch lat and lon">&lt;&gt;</a>
+      <label for="reverse-lon">lon</label>
+      <input id="reverse-lon"
+             name="lon"
+             type="text"
+             class="form-control form-control-sm"
+             placeholder="longitude"
+             value="{api_request_params.lon || ''}" />
+      <label for="reverse-zoom">max zoom</label>
+      <select id="reverse-zoom" name="zoom" class="form-control form-control-sm" value="{api_request_params.zoom}">
+        <option value="" selected={!api_request_params.zoom}>---</option>
+        {#each zoomLevels() as zoomTitle, i}
+          <option value="{i}" selected={i === api_request_params.zoom}>{i} - {zoomTitle}</option>
+        {/each}
+      </select>
+      <button type="submit" class="btn btn-primary btn-sm mx-1">
+        Search
+      </button>
+    </div>
+    <div class="search-type-link">
+      <a href="details.html" class="mr-2">search by id</a>
+      <a href="search.html">forward search</a>
+    </div>
+  </UrlSubmitForm>
+</div>
+
+<style>
+  .top-bar {
+    width: 100%;
+    padding: 1em 15px;
+  }
+
+  label {
+    font-weight: normal;
+    margin-left: 0.4rem;
+    margin-right: 0.4rem;
+  }
+
+  .search-type-link {
+    display: inline;
+    margin-right: 2em;
+    position: absolute;
+    right: 0
+  }
+
+  #switch-coords {
+    font-size: 0.6rem;
+    font-weight: bold;
+    cursor: pointer;
+    padding: 2px;
+    margin: 5px;
+  }
+</style>

diff --git a/src/components/SearchBar.svelte b/src/components/SearchBar.svelte
index 879eacdb4356aa2b5ab27e78c9c16382e41ad9d5..306ce6e2c08701bf63afc45561c7b93e1efeff96 100644 (file)
--- a/src/components/SearchBar.svelte
+++ b/src/components/SearchBar.svelte
@@ -1,12 +1,10 @@
 <script>
   import UrlSubmitForm from '../components/UrlSubmitForm.svelte';
 
-  import { zoomLevels } from '../lib/helpers.js';
   import { map_store } from '../lib/stores.js';
   import { get } from 'svelte/store';
 
   export let bStructuredSearch = false;
-  export let reverse_search = false;
   export let api_request_params = {};
   let sViewBox;
 
@@ -60,14 +58,6 @@
       set_viewbox(map);
       update_reverse_link(map);
     });
-
-    map.on('click', function (e) {
-      if (reverse_search) {
-        document.querySelector('input[name=lat]').value = e.latlng.lat.toFixed(5);
-        document.querySelector('input[name=lon]').value = e.latlng.wrap().lng.toFixed(5);
-        document.querySelector('form').submit();
-      }
-    });
   });
 
   function reset_viewbox() {
@@ -87,161 +77,109 @@
   function set_api_param(e) {
     document.querySelector('input[name=' + e.target.dataset.apiParam + ']').value = e.target.value;
   }
-
-  function handleSwitchCoords() {
-    let lat = document.querySelector('input[name=lat]').value;
-    let lon = document.querySelector('input[name=lon]').value;
-    document.querySelector('input[name=lat]').value = lon;
-    document.querySelector('input[name=lon]').value = lat;
-    document.querySelector('form').submit();
-  }
 </script>
 
-{#if reverse_search}
-  <div class="top-bar">
-    <UrlSubmitForm>
-      <div class="form-group">
-        <input name="format" type="hidden" value="html">
-        <label for="reverse-lat">lat</label>
-        <input id="reverse-lat"
-               name="lat"
+<div class="top-bar">
+  <ul class="nav nav-tabs">
+    <li class="nav-item">
+      <a class="nav-link" class:active={!bStructuredSearch} data-toggle="tab" href="#simple">simple</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" class:active={bStructuredSearch} data-toggle="tab" href="#structured">structured</a>
+    </li>
+    <div class="search-type-link">
+      <a href="details.html" class="mr-2">search by id</a>
+      <a id="switch-to-reverse" href="reverse.html">reverse search</a>
+    </div>
+  </ul>
+  <div class="tab-content p-2">
+    <div class="tab-pane" class:active={!bStructuredSearch} id="simple" role="tabpanel">
+      <UrlSubmitForm>
+        <input id="q"
+               name="q"
                type="text"
                class="form-control form-control-sm"
-               placeholder="latitude"
-               value="{api_request_params.lat || ''}" />
-        <a id="switch-coords"
-           on:click|preventDefault|stopPropagation={handleSwitchCoords}
-           class="btn btn-outline-secondary btn-sm"
-           title="switch lat and lon">&lt;&gt;</a>
-        <label for="reverse-lon">lon</label>
-        <input id="reverse-lon"
-               name="lon"
-               type="text"
-               class="form-control form-control-sm"
-               placeholder="longitude"
-               value="{api_request_params.lon || ''}" />
-        <label for="reverse-zoom">max zoom</label>
-        <select id="reverse-zoom" name="zoom" class="form-control form-control-sm" value="{api_request_params.zoom}">
-          <option value="" selected={!api_request_params.zoom}>---</option>
-          {#each zoomLevels() as zoomTitle, i}
-            <option value="{i}" selected={i === api_request_params.zoom}>{i} - {zoomTitle}</option>
-          {/each}
-        </select>
-        <button type="submit" class="btn btn-primary btn-sm mx-1">
-          Search
-        </button>
-      </div>
-      <div class="search-type-link">
-        <a href="details.html" class="mr-2">search by id</a>
-        <a href="search.html">forward search</a>
-      </div>
-    </UrlSubmitForm>
-  </div>
-
-{:else}
-
-  <div class="top-bar">
-    <ul class="nav nav-tabs">
-      <li class="nav-item">
-        <a class="nav-link" class:active={!bStructuredSearch} data-toggle="tab" href="#simple">simple</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" class:active={bStructuredSearch} data-toggle="tab" href="#structured">structured</a>
-      </li>
-      <div class="search-type-link">
-        <a href="details.html" class="mr-2">search by id</a>
-        <a id="switch-to-reverse" href="reverse.html">reverse search</a>
-      </div>
-    </ul>
-    <div class="tab-content p-2">
-      <div class="tab-pane" class:active={!bStructuredSearch} id="simple" role="tabpanel">
-        <UrlSubmitForm>
-          <input id="q"
-                 name="q"
-                 type="text"
-                 class="form-control form-control-sm"
-                 placeholder="Search"
-                 value="{api_request_params.q || ''}" />
-
-          <div class="form-group search-button-group">
-            <button type="submit" class="btn btn-primary btn-sm mx-1">Search</button>
-            <input type="hidden" name="viewbox" value="{sViewBox || ''}" />
-            <input type="hidden" name="dedupe" value="{!api_request_params.dedupe ? '' : 1}" />
-            <input type="hidden" name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
-            <input type="hidden" name="accept-language" value="{api_request_params['accept-language'] || ''}" />
-            <input type="hidden" name="countrycodes" value="{api_request_params.countrycodes || ''}" />
-            <input type="hidden" name="limit" value="{api_request_params.limit || ''}" />
-            <input type="hidden" name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
+               placeholder="Search"
+               value="{api_request_params.q || ''}" />
+
+        <div class="form-group search-button-group">
+          <button type="submit" class="btn btn-primary btn-sm mx-1">Search</button>
+          <input type="hidden" name="viewbox" value="{sViewBox || ''}" />
+          <input type="hidden" name="dedupe" value="{!api_request_params.dedupe ? '' : 1}" />
+          <input type="hidden" name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
+          <input type="hidden" name="accept-language" value="{api_request_params['accept-language'] || ''}" />
+          <input type="hidden" name="countrycodes" value="{api_request_params.countrycodes || ''}" />
+          <input type="hidden" name="limit" value="{api_request_params.limit || ''}" />
+          <input type="hidden" name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
+        </div>
+      </UrlSubmitForm>
+    </div>
+    <div class="tab-pane" class:active={bStructuredSearch} id="structured" role="tabpanel">
+      <UrlSubmitForm>
+        <input name="street" type="text" class="form-control form-control-sm mr-1"
+               placeholder="House number/Street"
+               value="{api_request_params.street || ''}" />
+        <input name="city" type="text" class="form-control form-control-sm mr-1"
+               placeholder="City"
+               value="{api_request_params.city || ''}" />
+        <input id="county" name="county" type="text" class="form-control form-control-sm mr-1"
+               placeholder="County"
+               value="{api_request_params.county || ''}" />
+        <input name="state" type="text" class="form-control form-control-sm mr-1"
+               placeholder="State"
+               value="{api_request_params.state || ''}" />
+        <input name="country" type="text" class="form-control form-control-sm mr-1"
+               placeholder="Country"
+               value="{api_request_params.country || ''}" />
+        <input name="postalcode" type="text" class="form-control form-control-sm mr-1"
+               placeholder="Postal Code"
+               value="{api_request_params.postalcode || ''}" />
+
+        <div class="form-group search-button-group">
+          <button type="submit" class="btn btn-primary btn-sm mx-1">Search</button>
+          <input type="hidden" name="viewbox" value="{sViewBox || ''}" />
+          <input type="hidden" name="dedupe" value="{!api_request_params.dedupe ? '' : 1}" />
+          <input type="hidden" name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
+          <input type="hidden" name="accept-language" value="{api_request_params['accept-language'] || ''}" />
+          <input type="hidden" name="countrycodes" value="{api_request_params.countrycodes || ''}" />
+          <input type="hidden" name="limit" value="{api_request_params.limit || ''}" />
+          <input type="hidden" name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
+        </div>
+      </UrlSubmitForm>
+    </div>
+    <!-- Additional options -->
+    <a href="#advanced" class="btn btn-outline-secondary btn-sm" data-toggle="collapse" data-target="#searchAdvancedOptions" role="button" aria-expanded="false" aria-controls="collapseAdvancedOptions">
+      Advanced options
+    </a>
+    <div class="collapse" id="searchAdvancedOptions">
+      <div id="searchAdvancedOptionsContent">
+          <div class="form-check form-check-inline">
+            <span><input type="checkbox" class="form-check-input api-param-setting"
+                   id="use_viewbox" checked={api_request_params.viewbox} on:change={reset_viewbox}>
+            <label class="form-check-label" for="use_viewbox">apply viewbox</label></span>
+            <span><input type="checkbox" class="form-check-input api-param-setting"
+                   id="option_bounded" checked={!!api_request_params.bounded} on:change={set_bounded}>
+            <label class="form-check-label" for="option_bounded">bounded to viewbox</label></span>
+            <span><input type="checkbox" class="form-check-input api-param-setting"
+                   id="option_dedupe" checked={!!api_request_params.dedupe} on:change={set_dedupe}>
+            <label class="form-check-label" for="option_dedupe">deduplicate results</label></span>
           </div>
-        </UrlSubmitForm>
-      </div>
-      <div class="tab-pane" class:active={bStructuredSearch} id="structured" role="tabpanel">
-        <UrlSubmitForm>
-          <input name="street" type="text" class="form-control form-control-sm mr-1"
-                 placeholder="House number/Street"
-                 value="{api_request_params.street || ''}" />
-          <input name="city" type="text" class="form-control form-control-sm mr-1"
-                 placeholder="City"
-                 value="{api_request_params.city || ''}" />
-          <input id="county" name="county" type="text" class="form-control form-control-sm mr-1"
-                 placeholder="County"
-                 value="{api_request_params.county || ''}" />
-          <input name="state" type="text" class="form-control form-control-sm mr-1"
-                 placeholder="State"
-                 value="{api_request_params.state || ''}" />
-          <input name="country" type="text" class="form-control form-control-sm mr-1"
-                 placeholder="Country"
-                 value="{api_request_params.country || ''}" />
-          <input name="postalcode" type="text" class="form-control form-control-sm mr-1"
-                 placeholder="Postal Code"
-                 value="{api_request_params.postalcode || ''}" />
-
-          <div class="form-group search-button-group">
-            <button type="submit" class="btn btn-primary btn-sm mx-1">Search</button>
-            <input type="hidden" name="viewbox" value="{sViewBox || ''}" />
-            <input type="hidden" name="dedupe" value="{!api_request_params.dedupe ? '' : 1}" />
-            <input type="hidden" name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
-            <input type="hidden" name="accept-language" value="{api_request_params['accept-language'] || ''}" />
-            <input type="hidden" name="countrycodes" value="{api_request_params.countrycodes || ''}" />
-            <input type="hidden" name="limit" value="{api_request_params.limit || ''}" />
-            <input type="hidden" name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
+          <div class="form-check form-check-inline">
+            <span><label class="form-check-label" for="option_limit">Maximum number of results: </label>
+            <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>
+            <span><label class="form-check-label" for="option_polygon_threashold">Polygon simplification: </label>
+            <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>
           </div>
-        </UrlSubmitForm>
-      </div>
-      <!-- Additional options -->
-      <a href="#advanced" class="btn btn-outline-secondary btn-sm" data-toggle="collapse" data-target="#searchAdvancedOptions" role="button" aria-expanded="false" aria-controls="collapseAdvancedOptions">
-        Advanced options
-      </a>
-      <div class="collapse" id="searchAdvancedOptions">
-        <div id="searchAdvancedOptionsContent">
-            <div class="form-check form-check-inline">
-              <span><input type="checkbox" class="form-check-input api-param-setting"
-                     id="use_viewbox" checked={api_request_params.viewbox} on:change={reset_viewbox}>
-              <label class="form-check-label" for="use_viewbox">apply viewbox</label></span>
-              <span><input type="checkbox" class="form-check-input api-param-setting"
-                     id="option_bounded" checked={!!api_request_params.bounded} on:change={set_bounded}>
-              <label class="form-check-label" for="option_bounded">bounded to viewbox</label></span>
-              <span><input type="checkbox" class="form-check-input api-param-setting"
-                     id="option_dedupe" checked={!!api_request_params.dedupe} on:change={set_dedupe}>
-              <label class="form-check-label" for="option_dedupe">deduplicate results</label></span>
-            </div>
-            <div class="form-check form-check-inline">
-              <span><label class="form-check-label" for="option_limit">Maximum number of results: </label>
-              <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>
-              <span><label class="form-check-label" for="option_polygon_threashold">Polygon simplification: </label>
-              <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>
-            </div>
-            <div class="form-check form-check-inline">
-              <span><label class="form-check-label" for="accept_lang">Languages: </label>
-              <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>
-              <span><label class="form-check-label" for="option_ccode">Countries: </label>
-              <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>
-            </div>
-         </div>
-      </div>
-    </div> <!-- /tab-content -->
-  </div> <!-- /top-bar -->
-{/if}
+          <div class="form-check form-check-inline">
+            <span><label class="form-check-label" for="accept_lang">Languages: </label>
+            <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>
+            <span><label class="form-check-label" for="option_ccode">Countries: </label>
+            <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>
+          </div>
+       </div>
+    </div>
+  </div> <!-- /tab-content -->
+</div> <!-- /top-bar -->
 
 <style>
   .top-bar {
@@ -296,17 +234,6 @@
     right: 0
   }
 
-  #switch-coords {
-    font-size: 0.6rem;
-    font-weight: bold;
-    cursor: pointer;
-    padding: 2px;
-    margin: 5px;
-  } 
-
-
-
-
   @media (max-width: 768px) {
     .search-button-group {
       display: inline;

diff --git a/src/pages/ReversePage.svelte b/src/pages/ReversePage.svelte
new file mode 100644 (file)
index 0000000..54e2a10
--- /dev/null
+++ b/src/pages/ReversePage.svelte
@@ -0,0 +1,98 @@
+<script>
+  import { onMount, onDestroy } from 'svelte';
+
+  import {
+    page, results_store, current_request_latlon
+  } from '../lib/stores.js';
+  import { get_config_value } from '../lib/config_reader.js';
+  import { fetch_from_api, update_html_title } from '../lib/api_utils.js';
+
+  import ReverseBar from '../components/ReverseBar.svelte';
+  import ResultsList from '../components/ResultsList.svelte';
+  import Map from '../components/Map.svelte';
+
+  let api_request_params;
+  let bStructuredSearch;
+
+  function loaddata() {
+    let search_params = new URLSearchParams(window.location.search);
+
+    update_html_title();
+
+    api_request_params = {
+      lat: search_params.get('lat'),
+      lon: search_params.get('lon'),
+      zoom: (search_params.get('zoom') > 1
+        ? Number(search_params.get('zoom'))
+        : Number(get_config_value('Reverse_Default_Search_Zoom'))),
+      format: 'jsonv2'
+    };
+
+    if (api_request_params.lat || api_request_params.lat) {
+
+      fetch_from_api('reverse', api_request_params, function (data) {
+        if (data && !data.error) {
+          current_request_latlon.set([api_request_params.lat, api_request_params.lon]);
+          results_store.set([data]);
+        } else {
+          results_store.set([]);
+        }
+
+        update_html_title('Reverse result for '
+                            + api_request_params.lat
+                            + ','
+                            + api_request_params.lon);
+        document.querySelector('input[name=lat]').focus();
+      });
+    }
+  }
+
+  let page_subscription;
+  onMount(() => { page_subscription = page.subscribe(loaddata); });
+  onDestroy(() => { page_subscription(); });
+</script>
+
+<ReverseBar api_request_params={api_request_params} />
+
+<div id="content">
+  <div class="sidebar">
+    <ResultsList reverse_search={true} />
+  </div>
+  <div id="map-wrapper">
+    <Map display_minimap={true} />
+  </div>
+</div>
+
+
+<style>
+  .sidebar {
+    width: 25%;
+    padding: 15px;
+    padding-top: 0;
+    display: inline-block;
+    float: left;
+  }
+
+  #map-wrapper {
+    position: relative;
+    min-height: 300px;
+    height: calc(100vh - 250pt);
+    width: 75%;
+    padding-right: 20px;
+    display: inline-block;
+    float: left;
+  }
+
+  @media (max-width: 768px) {
+    #content {
+      top: 0;
+      position: relative;
+    }
+    .sidebar {
+      width: 100%;
+    }
+    #map-wrapper {
+      height: 300px;
+    }
+  }
+</style>

diff --git a/src/pages/SearchPage.svelte b/src/pages/SearchPage.svelte
index 8367817c62faa7eeb3181d8d40954be13a5cdffd..327d6aa480e8612960acff2a48206f52bd4d7b3d 100644 (file)
--- a/src/pages/SearchPage.svelte
+++ b/src/pages/SearchPage.svelte
@@ -11,8 +11,6 @@
   import ResultsList from '../components/ResultsList.svelte';
   import Map from '../components/Map.svelte';
 
-  export let reverse_search = false;
-
   let api_request_params;
   let bStructuredSearch;
 
@@ -21,70 +19,41 @@
 
     update_html_title();
 
-    if (reverse_search) {
-      api_request_params = {
-        lat: search_params.get('lat'),
-        lon: search_params.get('lon'),
-        zoom: (search_params.get('zoom') > 1
-          ? Number(search_params.get('zoom'))
-          : Number(get_config_value('Reverse_Default_Search_Zoom'))),
-        format: 'jsonv2'
-      };
-
-      if (api_request_params.lat || api_request_params.lat) {
-
-        fetch_from_api('reverse', api_request_params, function (data) {
-          if (data && !data.error) {
-            current_request_latlon.set([api_request_params.lat, api_request_params.lon]);
-            results_store.set([data]);
-          } else {
-            results_store.set([]);
-          }
-
-          update_html_title('Reverse result for '
-                              + api_request_params.lat
-                              + ','
-                              + api_request_params.lon);
-          document.querySelector('input[name=lat]').focus();
-        });
-      }
-    } else {
-      api_request_params = {
-        q: search_params.get('q'),
-        street: search_params.get('street'),
-        city: search_params.get('city'),
-        county: search_params.get('county'),
-        state: search_params.get('state'),
-        country: search_params.get('country'),
-        postalcode: search_params.get('postalcode'),
-        polygon_geojson: get_config_value('Search_AreaPolygons', false) ? 1 : 0,
-        viewbox: search_params.get('viewbox'),
-        bounded: search_params.get('bounded'),
-        dedupe: search_params.get('dedupe'),
-        'accept-language': search_params.get('accept-language'),
-        countrycodes: search_params.get('countrycodes'),
-        limit: search_params.get('limit'),
-        polygon_threshold: search_params.get('polygon_threshold'),
-        exclude_place_ids: search_params.get('exclude_place_ids'),
-        format: 'jsonv2'
-      };
-
-      let anyStructuredFieldsSet = (api_request_params.street
-                                  || api_request_params.city
-                                  || api_request_params.county
-                                  || api_request_params.state
-                                  || api_request_params.country
-                                  || api_request_params.postalcode);
-
-      if (api_request_params.q || anyStructuredFieldsSet) {
-        fetch_from_api('search', api_request_params, function (data) {
-          results_store.set(data);
-
-          update_html_title('Result for ' + api_request_params.q);
-
-          document.querySelector('input[name=q]').focus();
-        });
-      }
+    api_request_params = {
+      q: search_params.get('q'),
+      street: search_params.get('street'),
+      city: search_params.get('city'),
+      county: search_params.get('county'),
+      state: search_params.get('state'),
+      country: search_params.get('country'),
+      postalcode: search_params.get('postalcode'),
+      polygon_geojson: get_config_value('Search_AreaPolygons', false) ? 1 : 0,
+      viewbox: search_params.get('viewbox'),
+      bounded: search_params.get('bounded'),
+      dedupe: search_params.get('dedupe'),
+      'accept-language': search_params.get('accept-language'),
+      countrycodes: search_params.get('countrycodes'),
+      limit: search_params.get('limit'),
+      polygon_threshold: search_params.get('polygon_threshold'),
+      exclude_place_ids: search_params.get('exclude_place_ids'),
+      format: 'jsonv2'
+    };
+
+    let anyStructuredFieldsSet = (api_request_params.street
+                                || api_request_params.city
+                                || api_request_params.county
+                                || api_request_params.state
+                                || api_request_params.country
+                                || api_request_params.postalcode);
+
+    if (api_request_params.q || anyStructuredFieldsSet) {
+      fetch_from_api('search', api_request_params, function (data) {
+        results_store.set(data);
+
+        update_html_title('Result for ' + api_request_params.q);
+
+        document.querySelector('input[name=q]').focus();
+      });
     }
   }
 
@@ -93,11 +62,11 @@
   onDestroy(() => { page_subscription(); });
 </script>
 
-<SearchBar reverse_search={reverse_search} api_request_params={api_request_params} bStructuredSearch={bStructuredSearch} />
+<SearchBar api_request_params={api_request_params} bStructuredSearch={bStructuredSearch} />
 
 <div id="content">
   <div class="sidebar">
-    <ResultsList reverse_search={reverse_search} />
+    <ResultsList reverse_search={false} />
   </div>
   <div id="map-wrapper">
     <Map display_minimap={true} />