HTML page with search form when /details.php called without params

diff --git a/src/assets/css/details.css b/src/assets/css/details.css
index 903ebff78fa86973c4291a6b31104137cfdce598..4d9a8ac81dec38856e04405ff68af0f2d238f8ff 100755 (executable)
--- 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 49ec9812fe9facfe337820687eb727b5b95a4864..65b2dc06591ad8130bb57fafae53e5f551d3ed9b 100644 (file)
--- 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 a96cf7e60529f93b45726f8522acd8e0614fd30e..9903aab5fcb3f71f66e0f1125fa571650d21b32f 100644 (file)
--- 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 (file)
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