Add simple/structured query selector to HTML search page (#1722)

This commit is contained in:
galewis2 2020-05-07 19:29:44 -04:00 committed by GitHub
parent fc19ebb218
commit a5e3785843
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 90 additions and 20 deletions

View File

@ -9,7 +9,7 @@
<body id="reverse-page">
<?php include(CONST_BasePath.'/lib/template/includes/html-top-navigation.php'); ?>
<div class="top-bar">
<form class="form-inline" role="search" accept-charset="UTF-8" action="<?php echo CONST_Website_BaseURL; ?>reverse.php">
<div class="form-group">
<input name="format" type="hidden" value="html">
@ -64,7 +64,7 @@
<a href="<?php echo CONST_Website_BaseURL; ?>search.php">forward search</a>
</div>
</form>
</div>
<div id="content">

View File

@ -10,10 +10,60 @@
<?php include(CONST_BasePath.'/lib/template/includes/html-top-navigation.php'); ?>
<form class="form-inline" role="search" accept-charset="UTF-8" action="<?php echo CONST_Website_BaseURL; ?>search.php">
<div class="form-group">
<input id="q" name="q" type="text" class="form-control input-sm" placeholder="Search" value="<?php echo htmlspecialchars($sQuery); ?>" >
<div class="top-bar" id="structured-query-selector">
<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
if (empty($aMoreParams['q']) and empty($aMoreParams['street']) and empty($aMoreParams['city']) and empty($aMoreParams['county']) and empty($aMoreParams['state']) and empty($aMoreParams['country']) and empty($aMoreParams['postalcode'])) {
echo '<div class="radio-inline"><input type="radio" name="query-selector" id="simple" value="simple" checked="checked">';
echo '<label for="simple">simple</label></div>';
echo '<div class="radio-inline"><input type="radio" name="query-selector" id="structured" value="structured">';
echo '<label for="structured">structured</label></div>';
}
elseif (!empty($aMoreParams['q'])) {
echo '<div class="radio-inline"><input type="radio" name="query-selector" id="simple" value="simple" checked="checked">';
echo '<label for="simple">simple</label></div>';
echo '<div class="radio-inline"><input type="radio" name="query-selector" id="structured" value="structured">';
echo '<label for="structured">structured</label></div>';
}
else {
echo '<div class="radio-inline"><input type="radio" name="query-selector" id="simple" value="simple">';
echo '<label for="simple">simple</label></div>';
echo '<div class="radio-inline"><input type="radio" name="query-selector" id="structured" value="structured" checked="checked">';
echo '<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 (empty($aMoreParams['q']) and empty($aMoreParams['street']) and empty($aMoreParams['city']) and empty($aMoreParams['county']) and empty($aMoreParams['state']) and empty($aMoreParams['country']) and empty($aMoreParams['postalcode'])) {
echo "style='display:block;'";
}
elseif (empty($aMoreParams['q'])) {
echo "style='display:none;'";
}
?>>
<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 (empty($aMoreParams['street']) and empty($aMoreParams['city']) and empty($aMoreParams['county']) and empty($aMoreParams['state']) and empty($aMoreParams['country']) and empty($aMoreParams['postalcode'])) {
echo "style='display:none;'";
}
else {
echo "style='display:block;'";
}
?>>
<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']); ?>" >
<input id="county" name="county" type="text" class="form-control input-sm" placeholder="County" value="<?php echo htmlspecialchars($aMoreParams['county']); ?>" >
<input id="state" name="state" type="text" class="form-control input-sm" placeholder="State" value="<?php echo htmlspecialchars($aMoreParams['state']); ?>" >
<input id="country" name="country" type="text" class="form-control input-sm" placeholder="Country" value="<?php echo htmlspecialchars($aMoreParams['country']); ?>" >
<input id="postalcode" name="postalcode" type="text" class="form-control input-sm" placeholder="Postal Code" value="<?php echo htmlspecialchars($aMoreParams['postalcode']); ?>" >
</div></div>
<div class="form-group search-button-group">
<button type="submit" class="btn btn-primary btn-sm">Search</button>
<?php if (CONST_Search_AreaPolygons) { ?>
@ -25,11 +75,8 @@
<label for="use_viewbox">apply viewbox</label>
</div>
</div>
<div class="search-type-link">
<a id="switch-to-reverse" href="<?php echo CONST_Website_BaseURL; ?>reverse.php?format=html">reverse search</a>
</div>
</form>
</div>
<div id="content">
@ -89,10 +136,6 @@
<script type="text/javascript">
<?php

View File

@ -1,11 +1,11 @@
form {
.top-bar {
width: 100%;
padding: 1em 15px;
}
form #q {
min-width: 500px;
.top-bar #q {
max-width: 500px;
}
@media (max-width: 850px) {
form #q {
@ -147,6 +147,17 @@ footer p {
width: 100%;
}
.search-button-group {
display: inline
display: inline;
}
}
.search-button-group {
margin-top: 3px;
box-sizing: content-box;
margin-bottom: 3px;
}
label {
font-weight: normal;
}

View File

@ -20,11 +20,27 @@ function parse_and_normalize_geojson_string(raw_string){
jQuery(document).ready(function(){
if ( !$('#search-page,#reverse-page').length ){ return; }
var is_reverse_search = !!( $('#reverse-page').length );
$('#q').focus();
$(document).ready(function() {
$("input[name='query-selector']").click(function(){
var query_val = $("input[name='query-selector']:checked").val() ;
if (query_val == "simple") {
$("div.form-group-structured").hide();
$("div.form-group-simple").show();
$('.form-group-structured').find('input:text').val('');
}
else if (query_val == "structured") {
$("div.form-group-simple").hide();
$("div.form-group-structured").show();
$('.form-group-simple').find('input:text').val('');
}
});
});
map = new L.map('map', {
attributionControl: (nominatim_map_init.tile_attribution && nominatim_map_init.tile_attribution.length),
scrollWheelZoom: true, // !L.Browser.touch,
@ -185,7 +201,7 @@ jQuery(document).ready(function(){
circle.on('click', function(){
highlight_result(position);
});
layerGroup.addLayer(circle);
layerGroup.addLayer(circle);
}
if (result.aBoundingBox){