Handle all page changes via page store (#70)

[nominatim-ui.git] / src / components / ReverseBar.svelte

diff --git a/src/components/ReverseBar.svelte b/src/components/ReverseBar.svelte
index a045a82f2a8d41953e52e00ffdb5aff57cd37515..62227c84e583f9c4a46b2cdb774f959c46f071c9 100644 (file)
--- a/src/components/ReverseBar.svelte
+++ b/src/components/ReverseBar.svelte
@@ -1,32 +1,45 @@
 <script>
   import UrlSubmitForm from '../components/UrlSubmitForm.svelte';
+  import DetailsLink from '../components/DetailsLink.svelte';
+  import PageLink from '../components/PageLink.svelte';
 
   import { zoomLevels } from '../lib/helpers.js';
-  import { map_store } from '../lib/stores.js';
+  import { map_store, refresh_page } from '../lib/stores.js';
 
-  export let api_request_params = {};
+  export let lat = '';
+  export let lon = '';
+  export let zoom = '';
 
-  map_store.subscribe(map => {
-    if (!map) { return; }
+  function gotoCoordinates(newlat, newlon, newzoom) {
+    let params = new URLSearchParams();
+    params.set('lat', newlat);
+    params.set('lon', newlon);
+    params.set('zoom', newzoom || zoom);
+    refresh_page('reverse', params);
+  }
 
-    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();
-    });
+  map_store.subscribe(map => {
+    if (map) {
+      map.on('click', (e) => {
+        let coords = e.latlng.wrap();
+        gotoCoordinates(coords.lat.toFixed(5), coords.lng.toFixed(5));
+      });
+    }
   });
 
-  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();
+  // common mistake is to copy&paste latitude and longitude into the 'lat' search box
+  function maybeSplitLatitude(e) {
+    var coords_split = e.target.value.split(',');
+    if (coords_split.length === 2) {
+      document.querySelector('input[name=lat]').value = L.Util.trim(coords_split[0]);
+      document.querySelector('input[name=lon]').value = L.Util.trim(coords_split[1]);
+    }
   }
+
 </script>
 
 <div class="top-bar">
-  <UrlSubmitForm>
+  <UrlSubmitForm page="reverse">
     <div class="form-group">
       <input name="format" type="hidden" value="html">
       <label for="reverse-lat">lat</label>
@@ -35,9 +48,10 @@
              type="text"
              class="form-control form-control-sm"
              placeholder="latitude"
-             value="{api_request_params.lat || ''}" />
+             bind:value={lat}
+             on:change={maybeSplitLatitude} />
       <a id="switch-coords"
-         on:click|preventDefault|stopPropagation={handleSwitchCoords}
+         on:click|preventDefault|stopPropagation={() => gotoCoordinates(lon, lat)}
          class="btn btn-outline-secondary btn-sm"
          title="switch lat and lon">&lt;&gt;</a>
       <label for="reverse-lon">lon</label>
@@ -46,12 +60,12 @@
              type="text"
              class="form-control form-control-sm"
              placeholder="longitude"
-             value="{api_request_params.lon || ''}" />
+             bind:value={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>
+      <select id="reverse-zoom" name="zoom" class="form-control form-control-sm" bind:value={zoom}>
+        <option value="">---</option>
         {#each zoomLevels() as zoomTitle, i}
-          <option value="{i}" selected={i === api_request_params.zoom}>{i} - {zoomTitle}</option>
+          <option value="{i}">{i} - {zoomTitle}</option>
         {/each}
       </select>
       <button type="submit" class="btn btn-primary btn-sm mx-1">
@@ -59,8 +73,8 @@
       </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>
+      <DetailsLink extra_classes="mr-2">search by id</DetailsLink>
+      <PageLink page="search">forward search</PageLink>
     </div>
   </UrlSubmitForm>
 </div>