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",
|
||||
path: "/",
|
||||
svgPath: "/images/navigation/home.svg",
|
||||
pngPath: "/images/nav/home_icon-25.png"
|
||||
svgPath: "/images/navigation/home.svg"
|
||||
},
|
||||
{
|
||||
title: "PIS Finder",
|
||||
path: "/pis",
|
||||
svgPath: "/images/navigation/info.svg",
|
||||
pngPath: ""
|
||||
svgPath: "/images/navigation/info.svg"
|
||||
},
|
||||
{
|
||||
title: "More",
|
||||
path: "/more",
|
||||
svgPath: "/images/navigation/more.svg",
|
||||
pngPath: "/images/nav/hamburger.svg"
|
||||
svgPath: "/images/navigation/more.svg"
|
||||
}
|
||||
]
|
||||
import { page } from "$app/stores";
|
||||
@ -1,7 +1,25 @@
|
||||
<script>
|
||||
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 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>
|
||||
<svelte:head>
|
||||
<title>OwlBoard - {title}</title>
|
||||
@ -9,70 +27,13 @@ const title = "Home"
|
||||
|
||||
|
||||
<Header {title} />
|
||||
<div class="form-box">
|
||||
<form action="/ldb">
|
||||
<span class="input-title">Live Departure Boards</span>
|
||||
<br>
|
||||
<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>
|
||||
|
||||
{#each inputIslands as variables}
|
||||
<InputIsland {variables} />
|
||||
{/each}
|
||||
|
||||
<Nav />
|
||||
|
||||
<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>
|
||||
@ -1,6 +1,6 @@
|
||||
<script>
|
||||
import Header from '$lib/header.svelte'
|
||||
import Nav from '$lib/nav.svelte'
|
||||
import Nav from '$lib/navigation/nav.svelte'
|
||||
|
||||
import {onMount} from 'svelte'
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script>
|
||||
import Header from '$lib/header.svelte'
|
||||
import Nav from '$lib/nav.svelte'
|
||||
import Nav from '$lib/navigation/nav.svelte'
|
||||
const title = "More"
|
||||
|
||||
const links = [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script>
|
||||
import Header from '$lib/header.svelte'
|
||||
import Nav from '$lib/nav.svelte'
|
||||
import Nav from '$lib/navigation/nav.svelte'
|
||||
|
||||
const title = "PIS"
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script>
|
||||
import Header from '$lib/header.svelte'
|
||||
import Nav from '$lib/nav.svelte'
|
||||
import Nav from '$lib/navigation/nav.svelte'
|
||||
|
||||
import { onMount } from 'svelte'
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
const headcode = await getHeadcode();
|
||||
document.getElementById('headcode').textContent = 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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user