Details search: merge three forms into one (#81)

diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index d38c87ca869deeb9a6faf84c58e7d06d2fa287fc..8830f5218276055c17aa5c5e0c65847aca2318bf 100644 (file)
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -25,6 +25,10 @@
     margin-top: -5px;
   }
 
+  .nav-item {
+    white-space: nowrap;
+  }
+
   .dropdown-menu { /* need to be above map markers */
     z-index: 1005;
   }
@@ -38,7 +42,7 @@
 </style>
 
 <header class="container-fluid">
-  <nav class="navbar navbar-expand-lg navbar-light">
+  <nav class="navbar navbar-expand-sm navbar-light">
     <div class="navbar-brand">
       <PageLink page="search">
         <img alt="logo" src="images/osm_logo.120px.png" width="30" height="30"/>

diff --git a/src/components/SearchSectionDetails.svelte b/src/components/SearchSectionDetails.svelte
index 7429dbd76e8fa6df614c91c4db48218e31cd7e0d..938b48bd8a2b5239c4c3742c2442cde813a65f36 100644 (file)
--- a/src/components/SearchSectionDetails.svelte
+++ b/src/components/SearchSectionDetails.svelte
@@ -1,96 +1,49 @@
 <script>
+  import { refresh_page } from '../lib/stores.js';
+
   export let api_request_params = {};
 
   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) {
+    let val = form_el.querySelector('input[type=edit]').value.trim();
+    let type_and_id_match = val.match(/^\s*([NWR])(\d+)\s*$/i)
+                            || val.match(/\/(relation|way|node)\/(\d+)\s*$/);
+
+    var params = new URLSearchParams();
+    if (type_and_id_match) {
+      params.set('osmtype', type_and_id_match[1].charAt(0).toUpperCase());
+      params.set('osmid', type_and_id_match[2]);
+    } else if (val.match(/^\d+$/)) {
+      params.set('place_id', val);
+    } else {
       alert('invalid input');
       return;
     }
 
-    let osmtype_short = matches[1].charAt(0).toUpperCase();
-    form_el.querySelector('input[name=osmtype]').setAttribute('value', osmtype_short);
-    form_el.querySelector('input[name=osmid]').setAttribute('value', matches[2]);
-    form_el.submit();
+    refresh_page('details', params);
   }
 </script>
 
-<ul class="nav nav-tabs">
-  <li class="nav-item">
-    <a class="nav-link" data-toggle="tab" href="#by-osm-type-and-id" class:active={!api_request_params.place_id}>OSM type and OSM id</a>
-  </li>
-  <li class="nav-item">
-    <a class="nav-link" data-toggle="tab" href="#by-place-id" class:active={api_request_params.place_id}>Place id</a>
-  </li>
-  <li class="nav-item">
-    <a class="nav-link" data-toggle="tab" href="#by-osm-url">openstreetmap.org URL</a>
-  </li>
-</ul>
-
-<div class="tab-content">
-  <div class="tab-pane" id="by-osm-type-and-id" role="tabpanel" class:active={!api_request_params.place_id}>
-    <form on:submit|preventDefault={handleFormSubmit}
-          id="form-by-type-and-id"
-          class="form-inline"
-          action="details.html">
-      <input type="edit"
-             class="form-control form-control-sm"
-             pattern="^[NWR][0-9]+$"
-             placeholder="e.g. N123 or W123 or R123"
-             value="{api_request_params.osmtype || ''}{api_request_params.osmid || ''}" />
-      <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="tab-pane" id="by-place-id" role="tabpanel" class:active={api_request_params.place_id}>
-    <form class="form-inline" action="details.html">
-      <input type="edit"
-             class="form-control form-control-sm"
-             pattern="^[0-9]+$"
-             name="place_id"
-             placeholder="e.g. 12345"
-             value="{api_request_params.place_id || ''}" />
-      <input type="submit"
-             class="btn btn-primary btn-sm"
-             value="Show" />
-    </form>
-  </div>
-
-  <div class="tab-pane" id="by-osm-url" role="tabpanel">
-    <form on:submit|preventDefault={handleFormSubmit}
-          id="form-by-osm-url"
-          class="form-inline"
-          action="details.html">
-      <input type="url"
-             class="form-control form-control-sm"
-             pattern=".*openstreetmap.*"
-             placeholder="e.g. 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>
+<form on:submit|preventDefault={handleFormSubmit} class="form-inline" action="details.html">
+  <input type="edit"
+         class="form-control form-control-sm"
+         pattern="^[NWR]?[0-9]+$|.*openstreetmap.*"
+         value="{api_request_params.osmtype || ''}{api_request_params.osmid || ''}{api_request_params.place_id || ''}" />
+  <input type="submit" class="btn btn-primary btn-sm" value="Show" />
+</form>
+<small class="form-text text-muted">
+  OSM type+id (<em>N123</em>, <em>W123</em>, <em>R123</em>),
+  Place id (<em>1234</em>) or
+  URL (<em>https://openstreetmap.org/way/123</em>)
+</small>
 
 <style>
-  .nav-tabs {
-    font-size: 0.8em;
-  }
-  .tab-pane {
-    padding-top: 1rem;
-  }
   form .form-control{
     margin-right: 5px;
     width: 30em;
   }
+  .form-text em {
+    font-family: monospace;
+    font-style: normal;
+  }
 </style>

diff --git a/src/components/UrlSubmitForm.svelte b/src/components/UrlSubmitForm.svelte
index 72864b19676ee49715e155ffde8a31ee92f6ce39..019fa8c9f007b1932bc3ac8d42e365a75d150e8c 100644 (file)
--- a/src/components/UrlSubmitForm.svelte
+++ b/src/components/UrlSubmitForm.svelte
@@ -20,5 +20,5 @@
 </script>
 
 <form on:submit|preventDefault={(e) => refresh_page(page, serialize_form(e.target))} class="form-inline" role="search" accept-charset="UTF-8" action="">
-    <slot></slot>
+  <slot></slot>
 </form>