Add eslint linter (#52)

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

diff --git a/src/components/SearchBar.svelte b/src/components/SearchBar.svelte
index a2a8b72b72b16de41b88bc007b6a4953d52c580f..879eacdb4356aa2b5ab27e78c9c16382e41ad9d5 100644 (file)
--- a/src/components/SearchBar.svelte
+++ b/src/components/SearchBar.svelte
@@ -1,4 +1,5 @@
 <script>
 <script>

+  import UrlSubmitForm from '../components/UrlSubmitForm.svelte';

 
   import { zoomLevels } from '../lib/helpers.js';
   import { map_store } from '../lib/stores.js';
 
   import { zoomLevels } from '../lib/helpers.js';
   import { map_store } from '../lib/stores.js';


@@ -30,8 +31,8 @@
   }
 
   function set_viewbox(map) {
   }
 
   function set_viewbox(map) {

-    let set_viewbox = document.getElementById('use_viewbox');
-    if (set_viewbox && set_viewbox.checked) {
+    let use_viewbox = document.getElementById('use_viewbox');
+    if (use_viewbox && use_viewbox.checked) {

       sViewBox = map_viewbox_as_string(map);
     } else {
       sViewBox = '';
       sViewBox = map_viewbox_as_string(map);
     } else {
       sViewBox = '';


@@ -42,27 +43,36 @@
     let link = document.getElementById('switch-to-reverse');
     if (link) {
       let center_lat_lng = map.wrapLatLng(map.getCenter());
     let link = document.getElementById('switch-to-reverse');
     if (link) {
       let center_lat_lng = map.wrapLatLng(map.getCenter());

-      link.href = 'reverse.html?lat=' + center_lat_lng.lat.toFixed(5) + '&lon=' + center_lat_lng.lng.toFixed(5);
+      link.href = 'reverse.html?lat=' + center_lat_lng.lat.toFixed(5)
+                   + '&lon=' + center_lat_lng.lng.toFixed(5);

     }
   }
 
   map_store.subscribe(map => {
     }
   }
 
   map_store.subscribe(map => {

-    if(!map) { return; }
+    if (!map) { return; }

 
     map.on('move', function () {
       set_viewbox(map);
 
     map.on('move', function () {
       set_viewbox(map);

-      update_reverse_link(map) 
+      update_reverse_link(map);

     });
 
     map.on('load', function () {
       set_viewbox(map);
     });
 
     map.on('load', function () {
       set_viewbox(map);

-      update_reverse_link(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() {
     let map = get(map_store);
     });
   });
 
   function reset_viewbox() {
     let map = get(map_store);

-    if (map) { set_viewbox(map) };
+    if (map) { set_viewbox(map); }

   }
 
   function set_bounded(e) {
   }
 
   function set_bounded(e) {


@@ -74,8 +84,8 @@
     document.querySelector('input[name=dedupe]').value = e.target.checked ? 1 : '';
   }
 
     document.querySelector('input[name=dedupe]').value = e.target.checked ? 1 : '';
   }
 

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

   }
 
   function handleSwitchCoords() {
   }
 
   function handleSwitchCoords() {


@@ -89,7 +99,7 @@
 
 {#if reverse_search}
   <div class="top-bar">
 
 {#if reverse_search}
   <div class="top-bar">

-    <form class="form-inline" role="search" accept-charset="UTF-8" action="">
+    <UrlSubmitForm>

       <div class="form-group">
         <input name="format" type="hidden" value="html">
         <label for="reverse-lat">lat</label>
       <div class="form-group">
         <input name="format" type="hidden" value="html">
         <label for="reverse-lat">lat</label>


@@ -125,7 +135,7 @@
         <a href="details.html" class="mr-2">search by id</a>
         <a href="search.html">forward search</a>
       </div>
         <a href="details.html" class="mr-2">search by id</a>
         <a href="search.html">forward search</a>
       </div>

-    </form>
+    </UrlSubmitForm>

   </div>
 
 {:else}
   </div>
 
 {:else}


@@ -145,7 +155,7 @@
     </ul>
     <div class="tab-content p-2">
       <div class="tab-pane" class:active={!bStructuredSearch} id="simple" role="tabpanel">
     </ul>
     <div class="tab-content p-2">
       <div class="tab-pane" class:active={!bStructuredSearch} id="simple" role="tabpanel">

-        <form class="form-inline" role="search" accept-charset="UTF-8" action="">
+        <UrlSubmitForm>

           <input id="q"
                  name="q"
                  type="text"
           <input id="q"
                  name="q"
                  type="text"


@@ -163,10 +173,10 @@
             <input type="hidden" name="limit" value="{api_request_params.limit || ''}" />
             <input type="hidden" name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
           </div>
             <input type="hidden" name="limit" value="{api_request_params.limit || ''}" />
             <input type="hidden" name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
           </div>

-        </form>
+        </UrlSubmitForm>

       </div>
       <div class="tab-pane" class:active={bStructuredSearch} id="structured" role="tabpanel">
       </div>
       <div class="tab-pane" class:active={bStructuredSearch} id="structured" role="tabpanel">

-        <form class="form-inline" role="search" accept-charset="UTF-8" action="">
+        <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="street" type="text" class="form-control form-control-sm mr-1"
                  placeholder="House number/Street"
                  value="{api_request_params.street || ''}" />


@@ -196,7 +206,7 @@
             <input type="hidden" name="limit" value="{api_request_params.limit || ''}" />
             <input type="hidden" name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
           </div>
             <input type="hidden" name="limit" value="{api_request_params.limit || ''}" />
             <input type="hidden" name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
           </div>

-        </form>
+        </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">
       </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">


@@ -250,17 +260,19 @@
     align-items: baseline
   }
 
     align-items: baseline
   }
 

-  form #q {
+  #q {

     min-width: 500px;
   }
   @media (max-width: 850px) {
     min-width: 500px;
   }
   @media (max-width: 850px) {

-    form #q {
+    #q {

       min-width: 400px;
     }
   }
 
   label {
     font-weight: normal;
       min-width: 400px;
     }
   }
 
   label {
     font-weight: normal;

+    margin-left: 0.4rem;
+    margin-right: 0.4rem;

   }
 
   #searchAdvancedOptionsContent {
   }
 
   #searchAdvancedOptionsContent {


@@ -277,12 +289,6 @@
     padding: 4px 10px;
   }
 
     padding: 4px 10px;
   }
 

-  form label {
-    margin-left: 0.4rem;
-    margin-right: 0.4rem;
-  }
-  
-

   .search-type-link {
     display: inline;
     margin-right: 2em;
   .search-type-link {
     display: inline;
     margin-right: 2em;


@@ -306,4 +312,4 @@
       display: inline;
     }
   }
       display: inline;
     }
   }

-</style>
\ No newline at end of file
+</style>