Finish implementing PIS lookup page

This commit is contained in:
Fred Boniface 2023-06-26 00:52:02 +01:00
parent a754c9d051
commit 86f60814d8

View File

@ -1,35 +1,88 @@
<script> <script>
import Header from '$lib/navigation/header.svelte' import Header from '$lib/navigation/header.svelte'
import Nav from '$lib/navigation/nav.svelte' import Nav from '$lib/navigation/nav.svelte'
import Island from '$lib/islands/island.svelte';
const title = "PIS Finder" const title = "PIS Finder"
let entryPIS; const variables = {title: "Results"}
let entryPIS = "";
let entryStartCRS = ""; let entryStartCRS = "";
let entryEndCRS = ""; let entryEndCRS = "";
let data = []; let data = [{operator: "gw", code: 4332, stops: ["bri","fit","bpw","yae","cdu","cnm","asc","wos","wof","mvl","gmv"]},
{operator: "xc", code: 3432, stops: ["bri","bpw","cnm","wos","wof","mvl","gmv"]}];
let error = false;
let errMsg = "Unknown Error"
async function findByStartEnd() { async function findByStartEnd() {
return; const url = `https://owlboard.info/api/v2/pis/byStartEnd/${entryStartCRS}/${entryEndCRS}`
fetchData(url);
} }
async function findByPis() { async function findByPis() {
data = [ const url = `https://owlboard.info/api/v2/pis/byCode/${entryPIS}`
{"one": 1}, fetchData(url);
{"two": 2} }
]
return; async function fetchData(url) {
const res = await fetch(url); // Enable Auth
if (res.status == 401) {
errMsg = "You must be logged in to the staff version"
error = true
return false
} else if (res.status == 500) {
errMsg = "Server Error, try again later"
error = true
return false
}
const jsonData = await res.json();
if (jsonData.ERROR == "offline") {
errMsg = "Connection error, check your internet connection and try again"
error = true
return false
}
data = jsonData;
}
async function reset() {
data = [];
error = false;
entryPIS = "";
entryStartCRS = "";
entryEndCRS = "";
} }
</script> </script>
<Header {title} /> <Header {title} />
{#if error}
<Island {variables}>
<p class="error">{errMsg}</p>
</Island>
{:else if data.length}
<Island {variables}>
<table>
<tr>
<th class="toc">TOC</th>
<th class="code">Code</th>
<th class="stops">Stops</th>
</tr>
{#each data as item}
<tr>
<td class="toc">{item.operator.toUpperCase()}</td>
<td class="code">{item.code}</td>
<td class="stops stops-data">{item.stops.join(", ").toUpperCase() + " "}</td>
</tr>
{/each}
</table>
</Island>
{:else}
<p>To search by headcode use the Train Finder on the homepage</p> <p>To search by headcode use the Train Finder on the homepage</p>
<p class="label">Find By Start/End CRS:</p> <p class="label">Find By Start/End CRS:</p>
<form on:submit={findByStartEnd}> <form on:submit={findByStartEnd}>
<input type="text" maxlength="3" autocomplete="off" placeholder="Start" bind:value={entryStartCRS}> <input type="text" maxlength="3" autocomplete="off" placeholder="Start" bind:value={entryStartCRS}>
<input type="text" maxlength="3" autocomplete="off" placeholder="End" bind:value={entryEndCRS}> <input type="text" maxlength="3" autocomplete="off" placeholder="End" bind:value={entryEndCRS}>
<br> <br>
<button type="submit">Search</button><button type="reset">Reset</button> <button type="submit">Search</button>
</form> </form>
<p class="label">Find By PIS Code:</p> <p class="label">Find By PIS Code:</p>
@ -38,16 +91,63 @@
<br> <br>
<button type="submit">Search</button> <button type="submit">Search</button>
</form> </form>
{#if data.length}
{#each data as entry}
<p>{JSON.stringify(entry)}</p>
{/each}
{/if} {/if}
<button id="reset" type="reset" on:click={reset}>Reset</button>
<Nav /> <Nav />
<style> <style>
.label { .label {
font-weight: 600; font-weight: 600;
} }
input {
border: none;
border-radius: 50px;
font-family: urwgothic, sans-serif;
text-align: center;
text-transform: uppercase;
width: 30%;
max-width: 250px;
height: 30px;
font-size: 16px;
margin-bottom: 15px;
}
button {
border: none;
border-radius: 50px;
font-family: urwgothic, sans-serif;
width: 25%;
max-width: 175px;
margin: 0px;
margin-left: 10px;
margin-right: 10px;
height: 30px;
background-color: var(--overlay-color);
color: white;
font-size: 16px;
}
table {
width: 100%;
margin:auto;
color: white;
}
td {
padding-top: 5px;
padding-bottom: 5px;
}
.toc {
width: 15%;
}
.code {
width: 20%;
}
.stops-data {
text-align: left;
font-family: firamono, monospace;
}
.error {
color: white;
}
#reset {
margin:25px;
}
</style> </style>