Componentize islands
This commit is contained in:
parent
2ef13e7b54
commit
a73ab31b51
41
src/lib/islands/input-island.svelte
Normal file
41
src/lib/islands/input-island.svelte
Normal 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>
|
25
src/lib/islands/island.svelte
Normal file
25
src/lib/islands/island.svelte
Normal 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>
|
4
src/lib/islands/quick-link-island.svelte
Normal file
4
src/lib/islands/quick-link-island.svelte
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<script>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
@ -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";
|
@ -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>
|
@ -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'
|
||||||
|
|
||||||
|
@ -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 = [
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user