version 2.0 - converted to Svelte framework

[nominatim-ui.git] / src / components / DetailsIndex.svelte

diff --git a/src/templates/detailspage-index.hbs b/src/components/DetailsIndex.svelte
similarity index 57%
rename from src/templates/detailspage-index.hbs
rename to src/components/DetailsIndex.svelte
index c81d525223bcfe9de1d0a877aa39a29b2632f311..b653e34534023d93d386df26c9527fb0d8ce0ad3 100644 (file)
--- a/src/templates/detailspage-index.hbs
+++ b/src/components/DetailsIndex.svelte
@@ -1,3 +1,24 @@
+<script>
+  function handleFormSubmit(event) {
+
+    let form_el = event.target;
+    let val = form_el.querySelector('input[type=edit]').value;
+    let matches = val.match(/^\s*([NWR])(\d+)\s*$/i);
+
+    if (!matches) {
+      matches = val.match(/\/(relation|way|node)\/(\d+)\s*$/);
+    }
+
+    if (!matches) {
+      alert('invalid input');
+      return;
+    }
+
+    form_el.querySelector('input[name=osmtype]').setAttribute('value', matches[1].charAt(0).toUpperCase());
+    form_el.querySelector('input[name=osmid]').setAttribute('value', matches[2]);
+    form_el.submit();
+  }
+</script>
 <div class="container" id="details-index-page">
   <div class="row">
     <div class="col-md-12">
@@ -9,7 +30,7 @@
 
         <form class="form-inline" action="details.html">
           <input type="edit"
-                 class="form-control input-sm"
+                 class="form-control form-control-sm"
                  pattern="^[0-9]+$"
                  name="place_id"
                  placeholder="12345" />
@@ -22,11 +43,12 @@
       <div class="search-form">
         <h4>Search by OSM type and OSM id</h4>
 
-        <form id="form-by-type-and-id"
+        <form on:submit|preventDefault={handleFormSubmit}
+              id="form-by-type-and-id"
               class="form-inline"
               action="details.html">
           <input type="edit"
-                 class="form-control input-sm"
+                 class="form-control form-control-sm"
                  pattern="^[NWR][0-9]+$"
                  placeholder="N123 or W123 or R123" />
           <input type="hidden" name="osmtype" />
@@ -38,11 +60,12 @@
       <div class="search-form">
         <h4>Search by openstreetmap.org URL</h4>
 
-        <form id="form-by-osm-url"
+        <form on:submit|preventDefault={handleFormSubmit}
+              id="form-by-osm-url"
               class="form-inline"
               action="details.html">
           <input type="edit"
-                 class="form-control input-sm"
+                 class="form-control form-control-sm"
                  pattern=".*openstreetmap.*"
                  placeholder="https://www.openstreetmap.org/relation/123" />
           <input type="hidden" name="osmtype" />
@@ -53,4 +76,18 @@
 
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
+
+<style>
+  .search-form {
+    padding: 20px 10px;
+    margin: 2em 0;
+  }
+  .search-form h4 {
+    margin-top: 0;
+  }
+  .search-form .form-control{
+    margin-right: 5px;
+    width: 30em;
+  }
+</style>
\ No newline at end of file