Further componentisation and advancements to homepage
This commit is contained in:
parent
a73ab31b51
commit
f45499b829
@ -8,22 +8,26 @@
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<Island {variables}>
|
||||||
<form action={variables.action}>
|
<form action={variables.action}>
|
||||||
<input class="form-input" type="text" id="input-headcode" name={variables.queryName} placeholder={variables.placeholder}>
|
<input class="form-input" type="text" id="input-headcode" name={variables.queryName} placeholder={variables.placeholder}>
|
||||||
<br>
|
<br>
|
||||||
<button class="form-button" type="submit">Submit</button>
|
<button class="form-button" type="submit">Submit</button>
|
||||||
</form>
|
</form>
|
||||||
|
</Island>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.form-input {
|
.form-input {
|
||||||
width: 75%;
|
width: 75%;
|
||||||
height: 30px;
|
height: 32px;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
border-radius: 50px;
|
border-radius: 50px;
|
||||||
border: none;
|
border: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
|
font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
.form-button {
|
.form-button {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
<script>
|
<script>
|
||||||
export const title = "Uninitialised"
|
export let variables = {title:"UNDEF"}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<span>{title}</span>
|
<span>{variables.title}</span>
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -14,7 +14,7 @@ span {
|
|||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
div {
|
div {
|
||||||
width: 75%;
|
width: 85%;
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
margin-top: 25px;
|
margin-top: 25px;
|
||||||
|
@ -1,4 +1,57 @@
|
|||||||
<script>
|
<script>
|
||||||
|
import Island from "$lib/islands/island.svelte";
|
||||||
|
export let variables = {
|
||||||
|
title: "Quick Links",
|
||||||
|
};
|
||||||
|
|
||||||
|
let quicklinks = ['avn','1f21','2c98','bru','bri','bth','olf']
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<Island {variables}>
|
||||||
|
|
||||||
|
{#if !quicklinks.length}
|
||||||
|
<p>Go to <a href="/null">settings</a> to add your Quick Links</p>
|
||||||
|
{/if}
|
||||||
|
<div class="buttons">
|
||||||
|
{#each quicklinks as link}
|
||||||
|
{#if link.length === 3}
|
||||||
|
<a class="link" href="/ldb?station={link}">
|
||||||
|
{link.toUpperCase()}
|
||||||
|
</a>
|
||||||
|
{:else if link.length === 4}
|
||||||
|
<a class="link" href="/result-timetable?headcode={link}">
|
||||||
|
{link.toUpperCase()}
|
||||||
|
</a>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</Island>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.buttons {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 90%;
|
||||||
|
margin: auto;
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
.link {
|
||||||
|
flex: 1;
|
||||||
|
width: 20%;
|
||||||
|
min-width: 50px;
|
||||||
|
margin: 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;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: var(--main-bg-color);
|
||||||
|
color: var(--link-color);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
@ -1,7 +1,8 @@
|
|||||||
<script>
|
<script>
|
||||||
import Header from '$lib/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.svelte'
|
||||||
|
import QuickLinkIsland from '$lib/islands/quick-link-island.svelte';
|
||||||
|
|
||||||
const title = "Home"
|
const title = "Home"
|
||||||
const inputIslands = [
|
const inputIslands = [
|
||||||
@ -32,8 +33,6 @@ const variables = {title: "test",action:"/", placeholder:"test",queryName:"test"
|
|||||||
<InputIsland {variables} />
|
<InputIsland {variables} />
|
||||||
{/each}
|
{/each}
|
||||||
|
|
||||||
|
<QuickLinkIsland />
|
||||||
|
|
||||||
<Nav />
|
<Nav />
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
</style>
|
|
@ -1,11 +1,10 @@
|
|||||||
<script>
|
<script>
|
||||||
import Header from '$lib/header.svelte'
|
import Header from '$lib/navigation/header.svelte'
|
||||||
import Nav from '$lib/navigation/nav.svelte'
|
import Nav from '$lib/navigation/nav.svelte'
|
||||||
|
|
||||||
import {onMount} from 'svelte'
|
import {onMount} from 'svelte'
|
||||||
|
|
||||||
const title = "Public Board"
|
const title = "Public Board"
|
||||||
const page = "ldb"
|
|
||||||
|
|
||||||
async function getHeadcode() {
|
async function getHeadcode() {
|
||||||
return new URLSearchParams(window.location.search).get('station');
|
return new URLSearchParams(window.location.search).get('station');
|
||||||
@ -20,7 +19,7 @@
|
|||||||
const station = await getHeadcode();
|
const station = await getHeadcode();
|
||||||
document.getElementById('station').textContent = station;
|
document.getElementById('station').textContent = station;
|
||||||
const data = await fetch(`https://owlboard.info/api/v1/ldb/${station}`);
|
const data = await fetch(`https://owlboard.info/api/v1/ldb/${station}`);
|
||||||
const jsonData = await data.json();
|
const jsonData = await data.json()['GetStationBoardResult'];
|
||||||
//document.getElementById('data_raw').textContent = JSON.stringify(await data.json());
|
//document.getElementById('data_raw').textContent = JSON.stringify(await data.json());
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -29,9 +28,9 @@
|
|||||||
<Header {title} />
|
<Header {title} />
|
||||||
|
|
||||||
<p>Station: <span id="station"></span></p>
|
<p>Station: <span id="station"></span></p>
|
||||||
{#each jsonData as item}
|
{#each jsonData.trainServices.service as item}
|
||||||
<p>{item.GetStationBoardResult.trainServices.service.operator}</p>
|
<p>{item.operator}</p>
|
||||||
{/each}
|
{/each}
|
||||||
|
|
||||||
|
|
||||||
<Nav {page} />
|
<Nav />
|
@ -1,5 +1,5 @@
|
|||||||
<script>
|
<script>
|
||||||
import Header from '$lib/header.svelte'
|
import Header from '$lib/navigation/header.svelte'
|
||||||
import Nav from '$lib/navigation/nav.svelte'
|
import Nav from '$lib/navigation/nav.svelte'
|
||||||
const title = "More"
|
const title = "More"
|
||||||
|
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<script>
|
<script>
|
||||||
import Header from '$lib/header.svelte'
|
import Header from '$lib/navigation/header.svelte'
|
||||||
import Nav from '$lib/navigation/nav.svelte'
|
import Nav from '$lib/navigation/nav.svelte'
|
||||||
|
|
||||||
const title = "PIS"
|
const title = "PIS"
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<script>
|
<script>
|
||||||
import Header from '$lib/header.svelte'
|
import Header from '$lib/navigation/header.svelte'
|
||||||
import Nav from '$lib/navigation/nav.svelte'
|
import Nav from '$lib/navigation/nav.svelte'
|
||||||
|
|
||||||
import { onMount } from 'svelte'
|
import { onMount } from 'svelte'
|
||||||
|
Loading…
Reference in New Issue
Block a user