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