function handleFormSubmit(event) {
let form_el = event.target;
let val = form_el.querySelector('input[type=edit]').value.trim();
- let type_and_id_match = val.match(/^\s*([NWR])(\d+)\s*$/i)
- || val.match(/\/(relation|way|node)\/(\d+)\s*$/);
+ let type_and_id_match = val.match(/^\s*([NWR])(-?\d+)\s*$/i)
+ || val.match(/\/(relation|way|node)\/(-?\d+)\s*$/);
var params = new URLSearchParams();
if (type_and_id_match) {
</script>
<form on:submit|preventDefault={handleFormSubmit} class="form-inline" action="details.html">
- <input type="edit"
- class="form-control form-control-sm"
- pattern="^[NWR]?[0-9]+$|.*openstreetmap.*"
- value="{api_request_params.osmtype || ''}{api_request_params.osmid || ''}{api_request_params.place_id || ''}" />
- <input type="submit" class="btn btn-primary btn-sm" value="Show" />
+ <div class="row g-1">
+ <div class="col-auto">
+ <!-- eslint-disable-next-line max-len -->
+ <input type="edit"
+ class="form-control form-control-sm me-1"
+ pattern="^[1-9][0-9]*$|^[NWRnwr]-?[1-9][0-9]*$|.*openstreetmap.*"
+ value="{
+ (api_request_params.osmtype || '')
+ + (api_request_params.osmid || '')
+ + (api_request_params.place_id || '')
+ }" />
+ </div>
+ <div class="col-auto">
+ <button type="submit" class="btn btn-primary btn-sm">Show</button>
+ </div>
+ </div>
</form>
<small class="form-text text-muted">
- OSM type+id (<em>N123</em>, <em>W123</em>, <em>R123</em>),
+ OSM type+id (<em>N123</em>,
+ <em>n123</em>,
+ <em>W123</em>,
+ <em>w123</em>,
+ <em>R123</em>,
+ <em>r123</em>),
Place id (<em>1234</em>) or
URL (<em>https://openstreetmap.org/way/123</em>)
</small>
<style>
form .form-control{
- margin-right: 5px;
- width: 30em;
+ width: 500px;
+ max-width: 100%;
}
.form-text em {
font-family: monospace;