src/components/SearchSectionDetails.svelte

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