133 lines
3.2 KiB
Svelte
133 lines
3.2 KiB
Svelte
<script>
|
|
import Header from '$lib/navigation/header.svelte';
|
|
import Loading from '$lib/navigation/loading.svelte';
|
|
import Nav from '$lib/navigation/nav.svelte';
|
|
const title = 'Location Codes';
|
|
|
|
let val = {
|
|
crs: '',
|
|
tiploc: '',
|
|
stanox: '',
|
|
nlc: '',
|
|
name: '',
|
|
uic: ''
|
|
};
|
|
|
|
let isLoading = false;
|
|
|
|
async function getData(type = '', value = '') {
|
|
const url = `https://owlboard.info/api/v2/ref/locationCode/${type}/${value}`;
|
|
const res = await fetch(url);
|
|
const data = await res.json();
|
|
isLoading = false;
|
|
return data;
|
|
}
|
|
|
|
async function processData(data) {
|
|
//console.log("data",JSON.stringify(data))
|
|
if (data.ERROR == 'Offline') {
|
|
return;
|
|
}
|
|
val = {
|
|
crs: data[0]['3ALPHA'] || 'None',
|
|
tiploc: data[0]['TIPLOC'] || 'None',
|
|
stanox: data[0]['STANOX'] || 'None',
|
|
nlc: data[0]['NLC'] || 'None',
|
|
name: data[0]['NLCDESC'] || 'None',
|
|
uic: data[0]['UIC'] || 'None'
|
|
};
|
|
//console.log("val",JSON.stringify(val));
|
|
}
|
|
|
|
async function submit() {
|
|
isLoading = true;
|
|
let data = [];
|
|
if (val?.crs) {
|
|
data = await getData('crs', val.crs);
|
|
} else if (val?.tiploc) {
|
|
data = await getData('tiploc', val.tiploc);
|
|
} else if (val?.stanox) {
|
|
data = await getData('stanox', val.stanox);
|
|
} else if (val?.nlc) {
|
|
data = await getData('nlc', val.nlc);
|
|
} else {
|
|
return;
|
|
}
|
|
processData(data);
|
|
}
|
|
|
|
async function reset() {
|
|
val = {
|
|
crs: '',
|
|
tiploc: '',
|
|
stanox: '',
|
|
nlc: '',
|
|
name: '',
|
|
uic: ''
|
|
};
|
|
}
|
|
</script>
|
|
|
|
<Header {title} />
|
|
|
|
{#if isLoading}
|
|
<Loading />
|
|
{/if}
|
|
|
|
<p>Enter one of the codes below and press submit.</p>
|
|
<p>OwlBoard doesn't currently support searching by name or UIC.</p>
|
|
<p class="desc">Some locations only have some applicable location codes.</p>
|
|
|
|
<div class="inputs">
|
|
<form on:submit={submit}>
|
|
<input type="text" readonly placeholder="Name" bind:value={val.name} />
|
|
<br />
|
|
<input type="text" maxlength="3" autocomplete="off" placeholder="CRS/3ALPHA" bind:value={val.crs} />
|
|
<br />
|
|
<input type="text" maxlength="7" autocomplete="off" placeholder="TIPLOC" bind:value={val.tiploc} />
|
|
<br />
|
|
<input type="text" maxlength="10" autocomplete="off" placeholder="STANOX" bind:value={val.stanox} />
|
|
<br />
|
|
<input type="number" maxlength="6" min="0" autocomplete="off" placeholder="NLC" bind:value={val.nlc} />
|
|
<br />
|
|
<input type="text" readonly autocomplete="off" placeholder="UIC" bind:value={val.uic} />
|
|
<br />
|
|
<button type="submit">Submit</button>
|
|
<button type="reset" on:click={reset}>Reset</button>
|
|
</form>
|
|
</div>
|
|
|
|
<Nav />
|
|
|
|
<style>
|
|
input {
|
|
font-family: urwgothic, sans-serif;
|
|
border-radius: 50px;
|
|
border: none;
|
|
width: 60%;
|
|
max-width: 200px;
|
|
min-width: 130px;
|
|
height: 30px;
|
|
margin-bottom: 10px;
|
|
text-transform: uppercase;
|
|
}
|
|
button {
|
|
border-radius: 50px;
|
|
font-family: urwgothic, sans-serif;
|
|
background-color: var(--overlay-color);
|
|
border: none;
|
|
color: white;
|
|
height: 30px;
|
|
width: 20%;
|
|
max-width: 100px;
|
|
min-width: 75px;
|
|
font-size: 18px;
|
|
}
|
|
.desc {
|
|
color: white;
|
|
}
|
|
input {
|
|
text-align: center;
|
|
}
|
|
</style>
|