Merge pull request #1545 from mtmail/details-index-html-page

HTML page with search form when /details.php called without params
osm-search · Oct 31, 2019 · 8ae317e · 8ae317e
2 parents 260dbe3 + 36e99c4
commit 8ae317e
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 0 deletions.
diff --git a/lib/template/details-index-html.php b/lib/template/details-index-html.php
@@ -0,0 +1,55 @@
+<?php
+    header("content-type: text/html; charset=UTF-8");
+?>
+<?php include(CONST_BasePath.'/lib/template/includes/html-header.php'); ?>
+    <link href="css/common.css" rel="stylesheet" type="text/css" />
+    <link href="css/details.css" rel="stylesheet" type="text/css" />
+</head>
+
+
+<body id="details-index-page">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-12">
+
+                <h1>Show details for place</h1>
+
+                <div class="search-form">
+                    <h4>Search by place id</h4>
+
+                    <form class="form-inline" action="details.php">
+                        <input type="edit" class="form-control input-sm" pattern="^[0-9]+$" name="place_id" placeholder="12345" />
+                        <input type="submit" class="btn btn-primary btn-sm" value="Show" />
+                    </form>
+                </div>
+
+                <div class="search-form">
+                    <h4>Search by OSM type and OSM id</h4>
+
+                    <form id="form-by-type-and-id" class="form-inline" action="details.php">
+                        <input type="edit" class="form-control input-sm" pattern="^[NWR][0-9]+$" placeholder="N123 or W123 or R123" />
+                        <input type="hidden" name="osmtype" />
+                        <input type="hidden" name="osmid" />
+                        <input type="submit" class="btn btn-primary btn-sm" value="Show" />
+                    </form>
+                </div>
+
+                <div class="search-form">
+                    <h4>Search by openstreetmap.org URL</h4>
+
+                    <form id="form-by-osm-url" class="form-inline" action="details.php">
+                        <input type="edit" class="form-control input-sm" pattern=".*openstreetmap.*" placeholder="https://www.openstreetmap.org/relation/123" />
+                        <input type="hidden" name="osmtype" />
+                        <input type="hidden" name="osmid" />
+                        <input type="submit" class="btn btn-primary btn-sm" value="Show" />
+                    </form>
+                </div>
+
+            </div>
+        </div>
+    </div>
+
+
+    <?php include(CONST_BasePath.'/lib/template/includes/html-footer.php'); ?>
+</body>
+</html>
diff --git a/website/css/details.css b/website/css/details.css
@@ -52,6 +52,17 @@ tr.all-columns td {
   margin: 10px 0;
 }
 
+#details-index-page .search-form {
+  padding: 20px 10px;
+  margin: 2em 0;
+}
+#details-index-page .search-form h4 {
+  margin-top: 0;
+}
+#details-index-page .search-form .form-control{
+  width: 30em;
+}
+
 footer {
   text-align: center;  
   padding: 2em 0;

diff --git a/website/details.php b/website/details.php
@@ -30,6 +30,11 @@
 
 $sLanguagePrefArraySQL = $oDB->getArraySQL($oDB->getDBQuotedList($aLangPrefOrder));
 
+if ($sOutputFormat == 'html' && !$sPlaceId && !$sOsmType) {
+    include(CONST_BasePath.'/lib/template/details-index-html.php');
+    exit;
+}
+
 if ($sOsmType && $iOsmId > 0) {
     $sSQL = 'SELECT place_id FROM placex WHERE osm_type = :type AND osm_id = :id';
     // osm_type and osm_id are not unique enough

diff --git a/website/js/nominatim-ui.js b/website/js/nominatim-ui.js
@@ -273,6 +273,30 @@ jQuery(document).ready(function(){
 });
 
 
+jQuery(document).ready(function(){
+
+    if ( !$('#details-index-page').length ){ return; }
+
+    $('#form-by-type-and-id,#form-by-osm-url').on('submit', function(e){
+        e.preventDefault();
+
+        var val = $(this).find('input[type=edit]').val();
+        var matches = val.match(/^\s*([NWR])(\d+)\s*$/i);
+
+        if (!matches) {
+            matches = val.match(/\/(relation|way|node)\/(\d+)\s*$/);
+        }
+
+        if (matches) {
+            $(this).find('input[name=osmtype]').val(matches[1].charAt(0).toUpperCase());
+            $(this).find('input[name=osmid]').val(matches[2]);
+            $(this).get(0).submit();
+        } else {
+            alert('invalid input');
+        }
+    });
+});
+
 jQuery(document).ready(function(){
 
     if ( !$('#details-page').length ){ return; }