From 57677ca79205b13b8a2e201505cbb8d46e17f78c Mon Sep 17 00:00:00 2001
From: marc tobias <mtmail@gmx.net>
Date: Sat, 30 Nov 2019 13:45:44 +0100
Subject: [PATCH] HTML page with search form when /details.php called without
 params

---
 src/assets/css/details.css          | 11 ++++++++
 src/assets/js/detailpage.js         | 38 ++++++++++++++++++++++-----
 src/layout.html                     |  3 +++
 src/templates/detailspage-index.hbs | 40 +++++++++++++++++++++++++++++
 4 files changed, 85 insertions(+), 7 deletions(-)
 create mode 100644 src/templates/detailspage-index.hbs

diff --git a/src/assets/css/details.css b/src/assets/css/details.css
index 903ebff..4d9a8ac 100755
--- a/src/assets/css/details.css
+++ b/src/assets/css/details.css
@@ -54,3 +54,14 @@
 #details-page .mapicon {
   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;
+}
diff --git a/src/assets/js/detailpage.js b/src/assets/js/detailpage.js
index 49ec981..65b2dc0 100644
--- a/src/assets/js/detailpage.js
+++ b/src/assets/js/detailpage.js
@@ -64,16 +64,40 @@ jQuery(document).ready(function(){
         format: 'json'
     };
 
-    fetch_from_api('details', api_request_params, function(aFeature){
+    if (api_request_params.place_id || (api_request_params.osmtype && api_request_params.osmid )){
+        fetch_from_api('details', api_request_params, function(aFeature){
 
-        var context = { aPlace: aFeature };
+            var context = { aPlace: aFeature };
 
-        render_template($('main'), 'detailspage-template', context);
+            render_template($('main'), 'detailspage-template', context);
 
-        update_data_date();
+            update_data_date();
 
-        var lat = aFeature.centroid.coordinates[1];
-        var lon = aFeature.centroid.coordinates[0];
-        init_map_on_detail_page(lat, lon, aFeature.geometry);
+            var lat = aFeature.centroid.coordinates[1];
+            var lon = aFeature.centroid.coordinates[0];
+            init_map_on_detail_page(lat, lon, aFeature.geometry);
+        });
+    } else {
+        render_template($('main'), 'detailspage-index-template');
+    }
+
+    $('#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');
+        }
     });
+
 });
\ No newline at end of file
diff --git a/src/layout.html b/src/layout.html
index a96cf7e..9903aab 100644
--- a/src/layout.html
+++ b/src/layout.html
@@ -120,6 +120,9 @@
     <script id="detailspage-template" type="text/x-handlebars-template">
         @include(src/templates/detailspage.hbs)
     </script>
+    <script id="detailspage-index-template" type="text/x-handlebars-template">
+        @include(src/templates/detailspage-index.hbs)
+    </script>
 
 
     <script src="assets/js/nominatim-ui.js"></script>
diff --git a/src/templates/detailspage-index.hbs b/src/templates/detailspage-index.hbs
new file mode 100644
index 0000000..7930b77
--- /dev/null
+++ b/src/templates/detailspage-index.hbs
@@ -0,0 +1,40 @@
+<div class="container" id="details-index-page">
+    <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.html">
+                    <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.html">
+                    <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.html">
+                    <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>
\ No newline at end of file
-- 
2.39.5