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>
|
|
21
src/lib/islands/result-island.svelte
Normal file
21
src/lib/islands/result-island.svelte
Normal 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>
|
@ -1,7 +1,7 @@
|
|||||||
<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 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';
|
import QuickLinkIsland from '$lib/islands/quick-link-island.svelte';
|
||||||
|
|
||||||
const title = "Home"
|
const title = "Home"
|
||||||
|
@ -1,76 +1,121 @@
|
|||||||
<script>
|
<script>
|
||||||
import Header from '$lib/navigation/header.svelte'
|
import { onMount } from 'svelte';
|
||||||
import Nav from '$lib/navigation/nav.svelte'
|
import Header from '$lib/navigation/header.svelte';
|
||||||
import Island from '$lib/islands/island.svelte'
|
import Nav from '$lib/navigation/nav.svelte';
|
||||||
import InputIsland from '$lib/islands/input-island.svelte'
|
import Loading from '$lib/navigation/loading.svelte';
|
||||||
import {onMount} from 'svelte'
|
import ResultIsland from '$lib/islands/result-island.svelte';
|
||||||
import {page} from '$app/stores'
|
|
||||||
import {goto} from '$app/navigation'
|
|
||||||
import Loading from '$lib/navigation/loading.svelte'
|
|
||||||
const title = "Reason Codes"
|
|
||||||
|
|
||||||
const variables = {
|
const title = "Reason Codes";
|
||||||
title: "Find Reason Codes",
|
let isLoading = false;
|
||||||
action: "/more/reasons",
|
let inputValue = '';
|
||||||
placeholder: "Enter Reason Code",
|
let resultObject = {
|
||||||
queryName: "code"
|
results: false,
|
||||||
};
|
title: "",
|
||||||
|
resultLines: []
|
||||||
|
}
|
||||||
|
|
||||||
let loading = false;
|
function load() {
|
||||||
let results = false;
|
isLoading = true;
|
||||||
let result = {
|
resultObject.results = false;
|
||||||
code: "",
|
getData().then(result => {
|
||||||
lateReason: "",
|
handleData(result);
|
||||||
cancReason: "",
|
isLoading = false;
|
||||||
error: "",
|
});
|
||||||
};
|
}
|
||||||
|
|
||||||
async function getData() { // Will need a click handler and use $app/navigation to update the page
|
|
||||||
try {
|
async function getData() {
|
||||||
loading = true;
|
if (inputValue) {
|
||||||
results = false;
|
const url = `https://owlboard.info/api/v2/ref/reasonCode/${inputValue}`;
|
||||||
const query = $page.url.searchParams;
|
|
||||||
if (!query) {return;}
|
|
||||||
const url = `https://owlboard.info/api/v2/ref/reasonCode/${query}`
|
|
||||||
const res = await fetch(url);
|
const res = await fetch(url);
|
||||||
const resData = await res.json();
|
return await res.json();
|
||||||
if (!resData.length) {throw new Error('Code not found')};
|
} else {
|
||||||
result = resData[0];
|
return []
|
||||||
results = true
|
|
||||||
} catch (err) {
|
|
||||||
console.log("Error", err)
|
|
||||||
result.error = "Unable to find code"
|
|
||||||
results = true
|
|
||||||
} finally {
|
|
||||||
loading = false;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onMount(async () => {
|
async function handleData(data) {
|
||||||
results = false;
|
let resultLines = []
|
||||||
getData();
|
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>
|
</script>
|
||||||
|
|
||||||
<Header {title} />
|
<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 />
|
<Loading />
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if results}
|
{#if resultObject.results}
|
||||||
<Island>
|
<ResultIsland {resultObject} />
|
||||||
{#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}
|
||||||
|
|
||||||
<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>
|
Loading…
Reference in New Issue
Block a user