src/components/SearchSectionDetails.svelte

   1 <script>
   2   export let api_request_params = {};
   3
   4   function handleFormSubmit(event) {
   5
   6     let form_el = event.target;
   7     let val = form_el.querySelector('input[type=edit]').value;
   8     let matches = val.match(/^\s*([NWR])(\d+)\s*$/i);
   9
  10     if (!matches) {
  11       matches = val.match(/\/(relation|way|node)\/(\d+)\s*$/);
  12     }
  13
  14     if (!matches) {
  15       alert('invalid input');
  16       return;
  17     }
  18
  19     let osmtype_short = matches[1].charAt(0).toUpperCase();
  20     form_el.querySelector('input[name=osmtype]').setAttribute('value', osmtype_short);
  21     form_el.querySelector('input[name=osmid]').setAttribute('value', matches[2]);
  22     form_el.submit();
  23   }
  24 </script>
  25
  26 <ul class="nav nav-tabs">
  27   <li class="nav-item">
  28     <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>
  29   </li>
  30   <li class="nav-item">
  31     <a class="nav-link" data-toggle="tab" href="#by-place-id" class:active={api_request_params.place_id}>Place id</a>
  32   </li>
  33   <li class="nav-item">
  34     <a class="nav-link" data-toggle="tab" href="#by-osm-url">openstreetmap.org URL</a>
  35   </li>
  36 </ul>
  37
  38 <div class="tab-content">
  39   <div class="tab-pane" id="by-osm-type-and-id" role="tabpanel" class:active={!api_request_params.place_id}>
  40     <form on:submit|preventDefault={handleFormSubmit}
  41           id="form-by-type-and-id"
  42           class="form-inline"
  43           action="details.html">
  44       <input type="edit"
  45              class="form-control form-control-sm"
  46              pattern="^[NWR][0-9]+$"
  47              placeholder="e.g. N123 or W123 or R123"
  48              value="{api_request_params.osmtype || ''}{api_request_params.osmid || ''}" />
  49       <input type="hidden" name="osmtype" />
  50       <input type="hidden" name="osmid" />
  51       <input type="submit" class="btn btn-primary btn-sm" value="Show" />
  52     </form>
  53   </div>
  54
  55   <div class="tab-pane" id="by-place-id" role="tabpanel" class:active={api_request_params.place_id}>
  56     <form class="form-inline" action="details.html">
  57       <input type="edit"
  58              class="form-control form-control-sm"
  59              pattern="^[0-9]+$"
  60              name="place_id"
  61              placeholder="e.g. 12345"
  62              value="{api_request_params.place_id || ''}" />
  63       <input type="submit"
  64              class="btn btn-primary btn-sm"
  65              value="Show" />
  66     </form>
  67   </div>
  68
  69   <div class="tab-pane" id="by-osm-url" role="tabpanel">
  70     <form on:submit|preventDefault={handleFormSubmit}
  71           id="form-by-osm-url"
  72           class="form-inline"
  73           action="details.html">
  74       <input type="url"
  75              class="form-control form-control-sm"
  76              pattern=".*openstreetmap.*"
  77              placeholder="e.g. https://www.openstreetmap.org/relation/123" />
  78       <input type="hidden" name="osmtype" />
  79       <input type="hidden" name="osmid" />
  80       <input type="submit" class="btn btn-primary btn-sm" value="Show" />
  81     </form>
  82   </div>
  83 </div>
  84
  85 <style>
  86   .nav-tabs {
  87     font-size: 0.8em;
  88   }
  89   .tab-pane {
  90     padding-top: 1rem;
  91   }
  92   form .form-control{
  93     margin-right: 5px;
  94     width: 30em;
  95   }
  96 </style>