src/components/SearchSectionDetails.svelte

   1 <script>
   2   import { refresh_page } from '../lib/stores.js';
   3
   4   export let api_request_params = {};
   5
   6   function handleFormSubmit(event) {
   7     let form_el = event.target;
   8     let val = form_el.querySelector('input[type=edit]').value.trim();
   9     let type_and_id_match = val.match(/^\s*([NWR])(\d+)\s*$/i)
  10                             || val.match(/\/(relation|way|node)\/(\d+)\s*$/);
  11
  12     var params = new URLSearchParams();
  13     if (type_and_id_match) {
  14       params.set('osmtype', type_and_id_match[1].charAt(0).toUpperCase());
  15       params.set('osmid', type_and_id_match[2]);
  16     } else if (val.match(/^\d+$/)) {
  17       params.set('place_id', val);
  18     } else {
  19       alert('invalid input');
  20       return;
  21     }
  22
  23     refresh_page('details', params);
  24   }
  25 </script>
  26
  27 <form on:submit|preventDefault={handleFormSubmit} class="form-inline" action="details.html">
  28   <div class="row g-1">
  29     <div class="col-auto">
  30       <input type="edit"
  31              class="form-control form-control-sm me-1"
  32              pattern="^[NWRnwr]?[0-9]+$|.*openstreetmap.*"
  33              value="{api_request_params.osmtype || ''}{api_request_params.osmid || ''}{api_request_params.place_id || ''}"
  34              autofocus />
  35       </div>
  36     <div class="col-auto">
  37       <button type="submit" class="btn btn-primary btn-sm">Show</button>
  38     </div>
  39   </div>
  40 </form>
  41 <small class="form-text text-muted">
  42   OSM type+id (<em>N123</em>, <em>n123</em>, <em>W123</em>, <em>w123</em>, <em>R123</em>, <em>r123</em>),
  43   Place id (<em>1234</em>) or
  44   URL (<em>https://openstreetmap.org/way/123</em>)
  45 </small>
  46
  47 <style>
  48   form .form-control{
  49     width: 500px;
  50     max-width: 100%;
  51   }
  52   .form-text em {
  53     font-family: monospace;
  54     font-style: normal;
  55   }
  56 </style>