Further componentisation and advancements to homepage

This commit is contained in:
Fred Boniface 2023-06-15 21:32:14 +01:00
parent a73ab31b51
commit f45499b829
9 changed files with 75 additions and 20 deletions

View File

@ -8,22 +8,26 @@
};
</script>
<Island {variables}>
<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>
</Island>
<style>
.form-input {
width: 75%;
height: 30px;
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;
}
.form-button {
width: 50%;

View File

@ -1,9 +1,9 @@
<script>
export const title = "Uninitialised"
export let variables = {title:"UNDEF"}
</script>
<div>
<span>{title}</span>
<span>{variables.title}</span>
<slot />
</div>
@ -14,7 +14,7 @@ span {
font-size: 20px;
}
div {
width: 75%;
width: 85%;
max-width: 400px;
margin: auto;
margin-top: 25px;

View File

@ -1,4 +1,57 @@
<script>
import Island from "$lib/islands/island.svelte";
export let variables = {
title: "Quick Links",
};
let quicklinks = ['avn','1f21','2c98','bru','bri','bth','olf']
</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>

View File

@ -1,7 +1,8 @@
<script>
import Header from '$lib/header.svelte'
import Nav from '$lib/navigation/nav.svelte'
import InputIsland from '$lib/islands/input-island.svelte'
import Header from '$lib/navigation/header.svelte'
import Nav from '$lib/navigation/nav.svelte'
import InputIsland from '$lib/islands/input-island.svelte'
import QuickLinkIsland from '$lib/islands/quick-link-island.svelte';
const title = "Home"
const inputIslands = [
@ -32,8 +33,6 @@ const variables = {title: "test",action:"/", placeholder:"test",queryName:"test"
<InputIsland {variables} />
{/each}
<Nav />
<QuickLinkIsland />
<style>
</style>
<Nav />

View File

@ -1,11 +1,10 @@
<script>
import Header from '$lib/header.svelte'
import Header from '$lib/navigation/header.svelte'
import Nav from '$lib/navigation/nav.svelte'
import {onMount} from 'svelte'
const title = "Public Board"
const page = "ldb"
async function getHeadcode() {
return new URLSearchParams(window.location.search).get('station');
@ -20,7 +19,7 @@
const station = await getHeadcode();
document.getElementById('station').textContent = 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());
})
@ -29,9 +28,9 @@
<Header {title} />
<p>Station: <span id="station"></span></p>
{#each jsonData as item}
<p>{item.GetStationBoardResult.trainServices.service.operator}</p>
{#each jsonData.trainServices.service as item}
<p>{item.operator}</p>
{/each}
<Nav {page} />
<Nav />

View File

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

View File

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

View File

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