src/components/SearchSectionDetails.svelte

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