Reason Codes complete

This commit is contained in:
Fred Boniface 2023-06-18 22:24:32 +01:00
parent e6e8e9caa3
commit d09d8fc81d
5 changed files with 132 additions and 111 deletions

View File

@ -1,45 +0,0 @@
<script>
import Island from "$lib/islands/island.svelte";
export let variables = {
title: "Uninitialised",
onclick: "/",
placeholder: "Uninitialised",
queryName: "uninitiailsed"
};
</script>
<Island {variables}>
<form>
<input class="form-input" type="text" id="input-headcode" name={variables.queryName} placeholder={variables.placeholder}>
<br>
<button on:click={variables.onclick}>Submit</button>
</form>
</Island>
<style>
.form-input {
width: 75%;
height: 32px;
margin-top: 5px;
margin-bottom: 5px;
border-radius: 50px;
border: none;
text-align: center;
font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
text-transform: uppercase;
font-size: 15px;
}
button {
width: 50%;
margin-bottom: 5px;
margin-top: 5px;
border: none;
border-radius: 20px;
padding: 5px;
font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 16px;
font-weight: 400;
background-color: var(--main-bg-color);
color: var(--link-color);
}
</style>

View File

@ -0,0 +1,21 @@
<script>
import Island from "$lib/islands/island.svelte";
export let resultObject = {
results: true,
title: "",
resultLines: []
};
let variables = {
title: resultObject.title
}
</script>
<Island {variables}>
{#each resultObject.resultLines as line}
<p>{line}</p>
{/each}
</Island>

View File

@ -1,7 +1,7 @@
<script>
import Header from '$lib/navigation/header.svelte'
import Nav from '$lib/navigation/nav.svelte'
import InputIsland from '$lib/islands/input-island.svelte'
import InputIsland from '$lib/islands/input-island-form.svelte'
import QuickLinkIsland from '$lib/islands/quick-link-island.svelte';
const title = "Home"

View File

@ -1,76 +1,121 @@
<script>
import Header from '$lib/navigation/header.svelte'
import Nav from '$lib/navigation/nav.svelte'
import Island from '$lib/islands/island.svelte'
import InputIsland from '$lib/islands/input-island.svelte'
import {onMount} from 'svelte'
import {page} from '$app/stores'
import {goto} from '$app/navigation'
import Loading from '$lib/navigation/loading.svelte'
const title = "Reason Codes"
import { onMount } from 'svelte';
import Header from '$lib/navigation/header.svelte';
import Nav from '$lib/navigation/nav.svelte';
import Loading from '$lib/navigation/loading.svelte';
import ResultIsland from '$lib/islands/result-island.svelte';
const variables = {
title: "Find Reason Codes",
action: "/more/reasons",
placeholder: "Enter Reason Code",
queryName: "code"
};
const title = "Reason Codes";
let isLoading = false;
let inputValue = '';
let resultObject = {
results: false,
title: "",
resultLines: []
}
let loading = false;
let results = false;
let result = {
code: "",
lateReason: "",
cancReason: "",
error: "",
};
function load() {
isLoading = true;
resultObject.results = false;
getData().then(result => {
handleData(result);
isLoading = false;
});
}
async function getData() { // Will need a click handler and use $app/navigation to update the page
try {
loading = true;
results = false;
const query = $page.url.searchParams;
if (!query) {return;}
const url = `https://owlboard.info/api/v2/ref/reasonCode/${query}`
const res = await fetch(url);
const resData = await res.json();
if (!resData.length) {throw new Error('Code not found')};
result = resData[0];
results = true
} catch (err) {
console.log("Error", err)
result.error = "Unable to find code"
results = true
} finally {
loading = false;
}
async function getData() {
if (inputValue) {
const url = `https://owlboard.info/api/v2/ref/reasonCode/${inputValue}`;
const res = await fetch(url);
return await res.json();
} else {
return []
}
}
onMount(async () => {
results = false;
getData();
})
async function handleData(data) {
let resultLines = []
if (data.length) {
resultObject.title = data[0]['code'];
resultLines = [
data[0]['lateReason'],
data[0]['cancReason']
]
} else {
resultObject = {
results: false,
title: "Not Found",
resultLines: []
}
}
resultObject.resultLines = resultLines;
resultObject.results = true;
}
onMount(() => {
isLoading = false;
});
function handleInput(event) {
inputValue = event.target.value;
}
function handleSubmit(event) {
event.preventDefault();
load();
}
</script>
<Header {title} />
<InputIsland {variables} />
{#if loading}
<Loading />
<Header {title} />
<p>A reason code is a three digit number that maps to a reason for a delay or cancellation</p>
<form on:submit={handleSubmit}>
<input type="text" placeholder="Enter Code" autocomplete="off" bind:value={inputValue} on:input={handleInput} />
<br>
<button type="submit">Submit</button>
</form>
{#if isLoading}
<Loading />
{/if}
{#if results}
<Island>
{#if result.code}
<p>{result.code}</p>
<p>Late Message: {result.lateReason}</p>
<p>Delay Message: {result.cancReason}</p>
{/if}
{#if result.error}
<p>{result.error}</p>
{/if}
</Island>
{/if}
{#if resultObject.results}
<ResultIsland {resultObject} />
{/if}
<Nav />
<Nav />
<style>
p {
margin-top: 50px;
}
input {
width: 25%;
min-width: 50px;
height: 32px;
margin-top: 10px;
margin-bottom: 5px;
border-radius: 50px;
border: none;
text-align: center;
font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
text-transform: uppercase;
font-size: 15px;
}
button {
width: 15%;
min-width: 40px;
margin-bottom: 5px;
margin-top: 5px;
border: none;
border-radius: 20px;
padding: 5px;
font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 16px;
font-weight: 400;
background-color: var(--overlay-color);
color: var(--link-color);
}
</style>