Reason Codes complete
This commit is contained in:
parent
e6e8e9caa3
commit
d09d8fc81d
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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}`
|
||||
|
||||
async function getData() {
|
||||
if (inputValue) {
|
||||
const url = `https://owlboard.info/api/v2/ref/reasonCode/${inputValue}`;
|
||||
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;
|
||||
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} />
|
||||
<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} />
|
||||
|
||||
<InputIsland {variables} />
|
||||
<br>
|
||||
|
||||
{#if loading}
|
||||
<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 />
|
||||
|
||||
<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>
|
||||
Loading…
Reference in New Issue