search UI: hide unused query parameters

Only send query parameters relevant for the current query
type (simple/structured), hide the other input fields.

This is quite a bit of CSS state changing, so move the intial
setup of the input field states into Javascript.

diff --git a/lib/template/search-html.php b/lib/template/search-html.php
index 5090a6faaa755b2a23d49cf545c6d5c39b0c4ee6..404c007ace127f208c9ba9075f519a6c3b64f052 100644 (file)
--- a/lib/template/search-html.php
+++ b/lib/template/search-html.php
@@ -14,40 +14,21 @@
             <div class="search-type-link">
                 <a id="switch-to-reverse" href="<?php echo CONST_Website_BaseURL; ?>reverse.php?format=html">reverse search</a>
             </div>
-        <?php
-        $bSimpleQuery = !empty($aMoreParams['q']);
-        $bStructuredQuery = !$bSimpleQuery
-                            && !(empty($aMoreParams['street'])
-                                 && empty($aMoreParams['city'])
-                                 && empty($aMoreParams['county'])
-                                 && empty($aMoreParams['state'])
-                                 && empty($aMoreParams['country'])
-                                 && empty($aMoreParams['postalcode']));
-        ?>
+
         <div class="radio-inline">
-          <input type="radio" name="query-selector" id="simple" value="simple" <?php if ($bSimpleQuery) { echo 'checked="checked"'; } ?> >
+          <input type="radio" name="query-selector" id="simple" value="simple">
           <label for="simple">simple</label>
         </div>
         <div class="radio-inline">
-          <input type="radio" name="query-selector" id="structured" value="structured" <?php if ($bStructuredQuery) { echo 'checked="checked"'; } ?> >
+          <input type="radio" name="query-selector" id="structured" value="structured">
           <label for="structured">structured</label>
         </div>
 
     <form role="search" accept-charset="UTF-8" action="<?php echo CONST_Website_BaseURL; ?>search.php">
-        <div class="form-group-simple"
-        <?php
-        if ($bStructuredQuery) {
-            echo 'style="display:none;"';
-        }
-        ?>>
+        <div class="form-group-simple">
             <input id="q" name="q" type="text" class="form-control input-sm" placeholder="Search" value="<?php echo htmlspecialchars($aMoreParams['q'] ?? ''); ?>" >
         </div>
-        <div class="form-group-structured"
-        <?php
-        if (!$bStructuredQuery) {
-            echo "style='display:none;'";
-        }
-        ?>>
+        <div class="form-group-structured">
 <div class="form-inline">
             <input id="street" name="street" type="text" class="form-control input-sm" placeholder="House number/Street" value="<?php echo htmlspecialchars($aMoreParams['street'] ?? ''); ?>" >
             <input id="city" name="city" type="text" class="form-control input-sm" placeholder="City" value="<?php echo htmlspecialchars($aMoreParams['city'] ?? ''); ?>" >
@@ -140,7 +121,16 @@
         );
         echo 'var nominatim_map_init = ' . json_encode($aNominatimMapInit, JSON_PRETTY_PRINT) . ';';
 
-        echo 'var nominatim_results = ' . json_encode($aSearchResults, JSON_PRETTY_PRINT) . ';'; 
+        echo 'var nominatim_results = ' . json_encode($aSearchResults, JSON_PRETTY_PRINT) . ';';
+        $sStructuredQuery = (empty($aMoreParams['q'])
+                             && !(empty($aMoreParams['street'])
+                                  && empty($aMoreParams['city'])
+                                  && empty($aMoreParams['county'])
+                                  && empty($aMoreParams['state'])
+                                  && empty($aMoreParams['country'])
+                                  && empty($aMoreParams['postalcode'])))
+                            ? 'true' : 'false';
+        echo 'var nominatim_structured_query = '.$sStructuredQuery.';';
     ?>
     </script>
     <?php include(CONST_BasePath.'/lib/template/includes/html-footer.php'); ?>

diff --git a/website/js/nominatim-ui.js b/website/js/nominatim-ui.js
index 9c8dee55048d1387da883e3a7c354f4d409adf6a..72c1b3b054d6fd5236e7cedeac9f0dd8396408ee 100644 (file)
--- a/website/js/nominatim-ui.js
+++ b/website/js/nominatim-ui.js
@@ -31,14 +31,24 @@ jQuery(document).ready(function(){
                 if (query_val == "simple") {
                     $("div.form-group-structured").hide();
                     $("div.form-group-simple").show();
+                    $("div.form-group-structured .form-control").prop('disabled', true);
+                    $("div.form-group-simple .form-control").prop('disabled', false);
                     $('.form-group-structured').find('input:text').val('');
                 }
                 else if (query_val == "structured") {
                     $("div.form-group-simple").hide();
                     $("div.form-group-structured").show();
+                    $("div.form-group-structured .form-control").prop('disabled', false);
+                    $("div.form-group-simple .form-control").prop('disabled', true);
                     $('.form-group-simple').find('input:text').val('');
                 }
         });
+
+        if (nominatim_structured_query) {
+            $('input#structured').prop('checked', true).trigger('click');
+        } else {
+            $('input#simple').prop('checked', true).trigger('click');
+        }
     });
 
     map = new L.map('map', {