src/components/DetailsIndex.svelte

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