Implement location reference code lookup

This commit is contained in:
Fred Boniface 2023-06-22 21:15:09 +01:00
parent f2a585f982
commit ecf7e0de64
3 changed files with 116 additions and 3 deletions

View File

@ -58,4 +58,9 @@
text-align: center; text-align: center;
} }
} }
@media (max-width: 380px) {
p {
font-size: 16px;
}
}
</style> </style>

View File

@ -3,10 +3,117 @@
import Nav from '$lib/navigation/nav.svelte' import Nav from '$lib/navigation/nav.svelte'
const title = "Location Codes" const title = "Location Codes"
let val = {
crs: "",
tiploc: "",
stanox: "",
nlc: "",
name: "",
uic: ""
}
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();
return data;
}
async function processData(data) {
//console.log("data",JSON.stringify(data))
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() {
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> </script>
<Header {title} /> <Header {title} />
<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="9" autocomplete="off" placeholder="STANOX" bind:value={val.stanox}>
<br>
<input type="number" maxlength="6" min="100000" 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 /> <Nav />
<style>
input {
font-family: urwgothic, sans-serif;
border-radius: 50px;
width: 60%;
max-width: 200px;
min-width: 130px;
height: 30px;
margin-bottom: 10px;
}
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>

View File

@ -6,7 +6,8 @@ const cacheName = `ob-${version}`;
const assets = [ const assets = [
...build, ...build,
...files ...files,
"/service-worker.js"
]; ];
self.addEventListener('install', (event) => { self.addEventListener('install', (event) => {