Componentize islands

This commit is contained in:
Fred Boniface 2023-06-15 18:19:23 +01:00
parent 2ef13e7b54
commit a73ab31b51
9 changed files with 103 additions and 75 deletions

View File

@ -0,0 +1,41 @@
<script>
import Island from "$lib/islands/island.svelte";
export let variables = {
title: "Uninitialised",
action: "/",
placeholder: "Uninitialised",
queryName: "uninitiailsed"
};
</script>
<form action={variables.action}>
<input class="form-input" type="text" id="input-headcode" name={variables.queryName} placeholder={variables.placeholder}>
<br>
<button class="form-button" type="submit">Submit</button>
</form>
<style>
.form-input {
width: 75%;
height: 30px;
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;
}
.form-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,25 @@
<script>
export const title = "Uninitialised"
</script>
<div>
<span>{title}</span>
<slot />
</div>
<style>
span {
font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-weight: 600;
font-size: 20px;
}
div {
width: 75%;
max-width: 400px;
margin: auto;
margin-top: 25px;
padding: 10px;
background-color: var(--overlay-color);
border-radius: 10px;
}
</style>

View File

@ -0,0 +1,4 @@
<script>
</script>

View File

@ -3,20 +3,17 @@
{ {
title: "Home", title: "Home",
path: "/", path: "/",
svgPath: "/images/navigation/home.svg", svgPath: "/images/navigation/home.svg"
pngPath: "/images/nav/home_icon-25.png"
}, },
{ {
title: "PIS Finder", title: "PIS Finder",
path: "/pis", path: "/pis",
svgPath: "/images/navigation/info.svg", svgPath: "/images/navigation/info.svg"
pngPath: ""
}, },
{ {
title: "More", title: "More",
path: "/more", path: "/more",
svgPath: "/images/navigation/more.svg", svgPath: "/images/navigation/more.svg"
pngPath: "/images/nav/hamburger.svg"
} }
] ]
import { page } from "$app/stores"; import { page } from "$app/stores";

View File

@ -1,7 +1,25 @@
<script> <script>
import Header from '$lib/header.svelte' import Header from '$lib/header.svelte'
import Nav from '$lib/nav.svelte' import Nav from '$lib/navigation/nav.svelte'
import InputIsland from '$lib/islands/input-island.svelte'
const title = "Home" const title = "Home"
const inputIslands = [
{
title: "Live Departure Boards",
action: "/ldb",
placeholder: "Enter CRS/TIPLOC",
queryName: "station"
},
{
title: "Train Details & PIS",
action: "/result-timetable",
placeholder: "Enter Headcode",
queryName: "headcode"
}
]
const variables = {title: "test",action:"/", placeholder:"test",queryName:"test"}
</script> </script>
<svelte:head> <svelte:head>
<title>OwlBoard - {title}</title> <title>OwlBoard - {title}</title>
@ -9,70 +27,13 @@ const title = "Home"
<Header {title} /> <Header {title} />
<div class="form-box">
<form action="/ldb"> {#each inputIslands as variables}
<span class="input-title">Live Departure Boards</span> <InputIsland {variables} />
<br> {/each}
<input class="form-input" type="text" id="input-station" name="station" placeholder="Enter CRS/TIPLOC">
<br>
<button class="form-button" type="submit">Submit</button>
</form>
</div>
<div class="form-box">
<form action="/result-timetable">
<span class="input-title">Train Details & PIS</span>
<br>
<input class="form-input" type="text" id="input-headcode" name="headcode" placeholder="Enter Headcode">
<br>
<button class="form-button" type="submit">Submit</button>
</form>
</div>
<div class="form-box">
<span class="input-title">Quick Links</span>
<div class="quick-links">
</div>
</div>
<Nav /> <Nav />
<style> <style>
.input-title {
font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-weight: 600;
font-size: 20px;
}
.form-box {
width: 75%;
max-width: 400px;
margin: auto;
margin-top: 25px;
padding: 10px;
background-color: var(--overlay-color);
border-radius: 10px;
}
.form-input {
width: 75%;
height: 30px;
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;
}
.form-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);
}
.quick-links {
display: flex;
}
</style> </style>

View File

@ -1,6 +1,6 @@
<script> <script>
import Header from '$lib/header.svelte' import Header from '$lib/header.svelte'
import Nav from '$lib/nav.svelte' import Nav from '$lib/navigation/nav.svelte'
import {onMount} from 'svelte' import {onMount} from 'svelte'

View File

@ -1,6 +1,6 @@
<script> <script>
import Header from '$lib/header.svelte' import Header from '$lib/header.svelte'
import Nav from '$lib/nav.svelte' import Nav from '$lib/navigation/nav.svelte'
const title = "More" const title = "More"
const links = [ const links = [

View File

@ -1,6 +1,6 @@
<script> <script>
import Header from '$lib/header.svelte' import Header from '$lib/header.svelte'
import Nav from '$lib/nav.svelte' import Nav from '$lib/navigation/nav.svelte'
const title = "PIS" const title = "PIS"
</script> </script>

View File

@ -1,6 +1,6 @@
<script> <script>
import Header from '$lib/header.svelte' import Header from '$lib/header.svelte'
import Nav from '$lib/nav.svelte' import Nav from '$lib/navigation/nav.svelte'
import { onMount } from 'svelte' import { onMount } from 'svelte'
@ -14,7 +14,7 @@
const headcode = await getHeadcode(); const headcode = await getHeadcode();
document.getElementById('headcode').textContent = headcode; document.getElementById('headcode').textContent = headcode;
const data = await fetch(`https://owlboard.info/api/v1/train/headcode/today/${headcode}`) const data = await fetch(`https://owlboard.info/api/v1/train/headcode/today/${headcode}`)
document.getElementById('data_raw').textContent = data.text; document.getElementById('data_raw').textContent = await data.text();
}) })
</script> </script>