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> </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%;

View File

@ -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;

View File

@ -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>

View File

@ -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>

View File

@ -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 />

View File

@ -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"

View File

@ -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"

View File

@ -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'