svelte 4.x => 5.0

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

diff --git a/src/components/SearchSectionReverse.svelte b/src/components/SearchSectionReverse.svelte
index 186190202216aca5843f194f76db25e58cd2118f..1808b30da73fd8ea88cb340b028ea92fc3118efd 100644 (file)
--- a/src/components/SearchSectionReverse.svelte
+++ b/src/components/SearchSectionReverse.svelte
@@ -1,4 +1,5 @@
 <script>
 <script>

+  import { onDestroy } from 'svelte';

   import UrlSubmitForm from '../components/UrlSubmitForm.svelte';
 
   import { zoomLevels } from '../lib/helpers.js';
   import UrlSubmitForm from '../components/UrlSubmitForm.svelte';
 
   import { zoomLevels } from '../lib/helpers.js';


@@ -7,6 +8,7 @@
   export let lat = '';
   export let lon = '';
   export let zoom = '';
   export let lat = '';
   export let lon = '';
   export let zoom = '';

+  export let api_request_params = {};

 
   function gotoCoordinates(newlat, newlon, newzoom) {
     if (newlat === null || newlon === null) return;
 
   function gotoCoordinates(newlat, newlon, newzoom) {
     if (newlat === null || newlon === null) return;


@@ -18,7 +20,7 @@
     refresh_page('reverse', params);
   }
 
     refresh_page('reverse', params);
   }
 

-  map_store.subscribe(map => {
+  const unsubscribe = map_store.subscribe(map => {

     if (map) {
       map.on('click', (e) => {
         let coords = e.latlng.wrap();
     if (map) {
       map.on('click', (e) => {
         let coords = e.latlng.wrap();


@@ -29,35 +31,44 @@
 
   // common mistake is to copy&paste latitude and longitude into the 'lat' search box
   function maybeSplitLatitude(e) {
 
   // common mistake is to copy&paste latitude and longitude into the 'lat' search box
   function maybeSplitLatitude(e) {

-    var coords_split = e.target.value.split(',');
+    var coords_split = e.target.value.split(/,|%2C/);

     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]);
     }
   }
 
     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]);
     }
   }
 

+  function set_api_param(e) {
+    document.querySelector('input[name=' + e.target.dataset.apiParam + ']').value = e.target.value;
+  }
+
+  onDestroy(unsubscribe);

 </script>
 
 <UrlSubmitForm page="reverse">
 </script>
 
 <UrlSubmitForm page="reverse">

-  <div class="form-group">
+  <div class="col-auto">

     <label for="reverse-lat">lat</label>
     <label for="reverse-lat">lat</label>

+  </div>
+  <div class="col-auto">

     <input id="reverse-lat"
            name="lat"
            type="text"
     <input id="reverse-lat"
            name="lat"
            type="text"

-           class="form-control form-control-sm"
+           class="form-control form-control-sm d-inline"

            placeholder="latitude"
            pattern="^-?\d+(\.\d+)?$"
            bind:value={lat}
            on:change={maybeSplitLatitude} />
   </div>
            placeholder="latitude"
            pattern="^-?\d+(\.\d+)?$"
            bind:value={lat}
            on:change={maybeSplitLatitude} />
   </div>

-  <div class="form-group">
-    <a id="switch-coords"
+  <div class="col-auto">
+    <button id="switch-coords"

        on:click|preventDefault|stopPropagation={() => gotoCoordinates(lon, lat)}
        class="btn btn-outline-secondary btn-sm"
        on:click|preventDefault|stopPropagation={() => gotoCoordinates(lon, lat)}
        class="btn btn-outline-secondary btn-sm"

-       title="switch lat and lon">&lt;&gt;</a>
+       title="switch lat and lon">&lt;&gt;</button>

   </div>
   </div>

-  <div class="form-group">
+  <div class="col-auto">

     <label for="reverse-lon">lon</label>
     <label for="reverse-lon">lon</label>

+  </div>
+  <div class="col-auto">

     <input id="reverse-lon"
            name="lon"
            type="text"
     <input id="reverse-lon"
            name="lon"
            type="text"


@@ -66,25 +77,42 @@
            pattern="^-?\d+(\.\d+)?$"
            bind:value={lon} />
   </div>
            pattern="^-?\d+(\.\d+)?$"
            bind:value={lon} />
   </div>

-  <div class="form-group">
+  <div class="col-auto">

     <label for="reverse-zoom">max zoom</label>
     <label for="reverse-zoom">max zoom</label>

-    <select id="reverse-zoom" name="zoom" class="form-control form-control-sm" bind:value={zoom}>
+  </div>
+  <div class="col-auto">
+    <select id="reverse-zoom" name="zoom" class="form-select form-select-sm" bind:value={zoom}>

       <option value="">---</option>
       {#each zoomLevels() as zoomTitle, i}
         <option value="{i}">{i} - {zoomTitle}</option>
       {/each}
     </select>
   </div>
       <option value="">---</option>
       {#each zoomLevels() as zoomTitle, i}
         <option value="{i}">{i} - {zoomTitle}</option>
       {/each}
     </select>
   </div>

-  <div class="form-group">
+  <input type="hidden"
+         name="layer" value="{api_request_params.layer || ''}" />
+  <div class="col-auto">

     <button type="submit" class="btn btn-primary btn-sm mx-1">Search</button>
   </div>
 </UrlSubmitForm>
 
     <button type="submit" class="btn btn-primary btn-sm mx-1">Search</button>
   </div>
 </UrlSubmitForm>
 

+<!-- Additional options -->
+<details id="searchAdvancedOptions" class="mt-2">
+  <summary><small>Advanced options</small></summary>
+  <ul>
+    <li>
+      <label for="option_layer">Layer</label>
+      <input id="option_layer" name="layer" placeholder="e.g. address,poi,railway,natural,manmade"
+        value="{api_request_params.layer || ''}"
+        data-api-param="layer" on:change={set_api_param}
+        class="form-control form-control-sm d-inline w-auto api-param-setting">
+    </li>
+  </ul>
+</details>
+

 <style>
   label {
 <style>
   label {

-    font-weight: normal;
-    margin-left: 0.4rem;
-    margin-right: 0.4rem;
+    font-size: 0.9rem;
+    margin-top: 0.3rem;

   }
 
   #switch-coords {
   }
 
   #switch-coords {


@@ -95,6 +123,24 @@
     margin: 5px;
   }
 
     margin: 5px;
   }
 

+  #searchAdvancedOptions ul {
+    list-style-type: none;
+    padding: 0;
+    font-size: 0.85rem;
+  }
+
+  #searchAdvancedOptions li {
+    display: inline-block;
+    padding: 4px 10px;
+    border-radius: 5px;
+    border: 1px dotted #ccc;
+    margin-right: 1em;
+  }
+
+  #searchAdvancedOptions label {
+    margin-right: 0.5em;
+  }
+

   @media (max-width: 850px) {
     #reverse-lon, #reverse-lat, #reverse-zoom {
       width: 8em;
   @media (max-width: 850px) {
     #reverse-lon, #reverse-lat, #reverse-zoom {
       width: 8em;