OwlBoard/web-pwa
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bugfix:

Browse Source 
- Update to @tabler/icons-svelte-runes for a more 'Svente 5' experience.

 - Adjust error handling in load functions, plain error thrown for handling in the error handler.

  - Fix the warning regarding a click handler attached to an <img> on the About page

  - Re-organise component directory

  - Remove unused font declarations from global.css

Features:
 - Add service-worker caching of FilterData API response to allow for filtering to work fully offline

  -
This commit is contained in:
Fred Boniface
2026-05-15 21:19:12 +01:00
parent 6faa620bdb
commit 6ed262ce59
23 changed files with 173 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/ui/NoResults.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import noResult from '$lib/assets/img/no-data.svg';
import Button from '$lib/components/ui/Button.svelte';
import Button from '$lib/components/ui/form-elements/Button.svelte';
let { title = 'No results', message = 'Try checking your search term' } = $props();
</script>

2
src/lib/components/ui/TrainService.svelte
View File

@@ -6,7 +6,7 @@
import { formatUkTime, calculateDelay } from '$lib/utils/time';
import TocStyle from '$lib/components/ui/TocStyle.svelte';
import TiplocConverter from '$lib/components/ui/TiplocConverter.svelte';
import { IconChevronDownFilled } from '@tabler/icons-svelte';
import { IconChevronDownFilled } from '@tabler/icons-svelte-runes';
import { estClass } from '$lib/utils/time';
let { service }: { service: ApiTrainsTrainByHeadcode.TrainByHeadcodeResponse } = $props();
let isExpanded = $state(false);

2
src/lib/components/ui/cards/BaseCard.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import type { Snippet } from 'svelte';
import { IconHelpCircle } from '@tabler/icons-svelte';
import { IconHelpCircle } from '@tabler/icons-svelte-runes';
import { slide } from 'svelte/transition';
interface Props {

3
src/lib/components/ui/cards/HeadcodeSearchCard.svelte
View File

@@ -1,8 +1,7 @@
<script lang="ts">
import { goto } from '$app/navigation';
import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
import Textbox from '$lib/components/ui/Textbox.svelte';
import Button from '$lib/components/ui/Button.svelte';
import Textbox from '$lib/components/ui/form-elements/Textbox.svelte';
let headcode = $state('');

2
src/lib/components/ui/cards/LocationBoardCard.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
import LocationSearchBox from '$lib/components/ui/LocationSearchBox.svelte';
import LocationSearchBox from '$lib/components/ui/form-elements/LocationSearchBox.svelte';
let locationValue = $state('');

2
src/lib/components/ui/cards/NearbyStationsCard.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
import Button from '$lib/components/ui/Button.svelte';
import Button from '$lib/components/ui/form-elements/Button.svelte';
import { fade } from 'svelte/transition';
import { flip } from 'svelte/animate';

2
src/lib/components/ui/cards/QuickLinksCard.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
import Button from '$lib/components/ui/Button.svelte';
import Button from '$lib/components/ui/form-elements/Button.svelte';
import { fade } from 'svelte/transition';
import { flip } from 'svelte/animate';

3
src/lib/components/ui/cards/pis/PisCode.svelte
View File

@@ -1,7 +1,6 @@
<script lang="ts">
import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
import Textbox from '$lib/components/ui/Textbox.svelte';
import Button from '$lib/components/ui/Button.svelte';
import Textbox from '$lib/components/ui/form-elements/Textbox.svelte';
let { onsearch }: { onsearch: (c: string) => void } = $props();
</script>

16
src/lib/components/ui/cards/pis/PisStartEndCard.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
import Textbox from '$lib/components/ui/Textbox.svelte';
import Button from '$lib/components/ui/Button.svelte';
import Textbox from '$lib/components/ui/form-elements/Textbox.svelte';
import Button from '$lib/components/ui/form-elements/Button.svelte';
let { onsearch }: { onsearch: (s: string, e: string) => void } = $props();
@@ -15,7 +15,13 @@
</script>
<BaseCard header={'Find by Start/End CRS'}>
<div class="card-content">
<form
class="card-content"
onsubmit={(e) => {
e.preventDefault();
onsearch(startValue, endValue);
}}
>
<div class="textbox-container">
<div class="textbox-item-wrapper">
<Textbox placeholder={'Start'} uppercase={true} maxLength={3} bind:value={startValue} />
@@ -25,10 +31,10 @@
</div>
</div>
<div class="button-wrapper">
<Button onclick={() => onsearch(startValue, endValue)}>Search</Button>
<Button type={'submit'}>Search</Button>
<Button onclick={resetValues}>Reset</Button>
</div>
</div>
</form>
</BaseCard>
<style>

0
src/lib/components/ui/Button.svelte → src/lib/components/ui/form-elements/Button.svelte
View File

2
src/lib/components/ui/LocationSearchBox.svelte → src/lib/components/ui/form-elements/LocationSearchBox.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import Textbox from '$lib/components/ui/Textbox.svelte';
import Textbox from '$lib/components/ui/form-elements/Textbox.svelte';
import { onMount } from 'svelte';
import { fade } from 'svelte/transition';
import { goto } from '$app/navigation';

2
src/lib/components/ui/Textbox.svelte → src/lib/components/ui/form-elements/Textbox.svelte
View File

@@ -2,7 +2,7 @@
import { fade } from 'svelte/transition';
import type { HTMLInputAttributes } from 'svelte/elements';
import { IconChevronRightFilled } from '@tabler/icons-svelte';
import { IconChevronRightFilled } from '@tabler/icons-svelte-runes';
interface Props extends HTMLInputAttributes {
value?: string;

2
src/lib/components/ui/station-board/StationAlertCard.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { slide } from 'svelte/transition';
import type { ApiStationsBoard } from '@owlboard/owlboard-ts';
import { IconAlertOctagonFilled, IconChevronDownFilled } from '@tabler/icons-svelte';
import { IconAlertOctagonFilled, IconChevronDownFilled } from '@tabler/icons-svelte-runes';
let { messages = [] }: { messages: ApiStationsBoard.BoardMsgs[] } = $props();
let isOpen = $state(false);

16
src/lib/global.css
View File

@@ -130,22 +130,6 @@
font-display: swap;
}
/* Fira Code - Variable with fallback */
@font-face {
font-family: 'Fira Code';
src: url('/type/fira-code/FiraCode-VF.woff2') format('woff2-variations');
font-weight: 300 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Fira Code';
src: url('/type/fira-code/FiraCode-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Inconsolata Variable */
@font-face {
font-family: 'Inconsolata Variable';

16
src/routes/+error.svelte
View File

@@ -3,17 +3,22 @@
import stopErr from '$lib/assets/img/stop-error.svg';
import noResult from '$lib/assets/img/no-data.svg';
import Button from '$lib/components/ui/Button.svelte';
import Button from '$lib/components/ui/form-elements/Button.svelte';
</script>
<!-- Will need to check error type, using the upstream code combined with response code -->
<div class="error-wrapper">
{#if page.status == 404}
<!-- Warning no data image -->
<img class="err-img" src={noResult} alt="" role="presentation" width="200" height="200" />
{:else if page.status == 499}
{:else if page.status == 503}
<!-- Change to a GSM-R X Sign?? -->
<span>OFFLINE!</span>
<img class="err-img" src={stopErr} alt="" role="presentation" width="150" height="210" />
{:else if page.status == 403}
<span>UNAUTH</span>
<img class="err-img" src={stopErr} alt="" role="presentation" width="150" height="210" />
{:else}
<!-- STOP Error image -->
<img class="err-img" src={stopErr} alt="" role="presentation" width="150" height="210" />
@@ -24,9 +29,12 @@
{page.error?.message ?? 'An unexpected derailment occurred.'}
</p>
{#if page.error?.owlCode}
{#if page.error?.owlCode == 'NETWORK_DISCONNECTED'}
<p>THISISANETWORKERR</p>
<p>Operational data is unavaliable when offline</p>
{:else}
<div class="debug-info">
<code>Ref: {page.error.owlCode}</code>
<code>Ref: {page.error?.owlCode}</code>
</div>
{/if}

2
src/routes/+layout.svelte
View File

@@ -15,7 +15,7 @@
import logoPlain from '$lib/assets/round-logo.svg';
import favicon from '$lib/assets/round-logo.svg';
import { IconHome, IconDialpad, IconSettings, IconHelp, IconDots } from '@tabler/icons-svelte';
import { IconHome, IconDialpad, IconSettings, IconHelp, IconDots } from '@tabler/icons-svelte-runes';
onMount(async () => {
LOCATIONS.init();

50
src/routes/about/+page.svelte
View File

@@ -11,13 +11,19 @@
</script>
<div class="logo-container">
<img
class="logo"
src={logo}
alt="OwlBoard Logo"
onclick={handleLogoTap}
class:animate={isSpinning}
/>
<button
type="button"
class="logo-btn"
onclick={handleLogoTap}
class:animate={isSpinning}
aria-label="Spin the OwlBoard logo"
>
<img
class="logo-img"
src={logo}
alt="OwlBoard Logo"
/>
</button>
</div>
<section class="about">
@@ -59,6 +65,19 @@
text-align: center;
}
.logo-btn {
background: none;
border: none;
padding: 0;
cursor: pointer;
display: inline-block;
padding-top: 25px;
margin: auto;
width: clamp(80px, 20vw, 200px);
}
@keyframes owl-spin {
0% {
transform: rotate(0deg);
@@ -71,16 +90,15 @@
}
}
.logo {
padding-top: 25px;
margin: auto;
height: auto;
width: clamp(80px, 20vw, 200px);
}
.logo-img {
width: 100%;
height: auto;
display: block;
}
.logo.animate {
animation: owl-spin 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.logo-btn.animate {
animation: owl-spin 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
section {
margin: auto;

26
src/routes/board/+page.ts
View File

@@ -35,30 +35,12 @@ export const load: PageLoad = async ({ url, fetch }) => {
boardData
};
} catch (e: unknown) {
if (
e instanceof TypeError &&
(e.message == 'Failed to fetch' || e.message.includes('network'))
) {
throw error(503, {
message: 'Network error: Please check your connection',
if (e instanceof TypeError && e.message === 'Failed to fetch') {
error(503, {
message: 'Cannot connect to the OwlBoard server',
owlCode: 'NETWORK_DISCONNECTED'
});
}
if (e instanceof ValidationError) {
throw error(400, { message: e.message, owlCode: 'VALIDATION_ERROR' });
} else if (e instanceof ApiError) {
// If the API returns 404, it means the backend doesn't recognize this CRS/TIPLOC
if (e.code === 'NOT_FOUND') {
throw error(404, {
message: `Location (${locId.toUpperCase()}) is not recognized by the server.`,
owlCode: 'LOCATION_NOT_IN_BACKEND'
});
}
throw error(e.status, { message: e.message, owlCode: 'API_ERROR' });
} else if (e instanceof Error) {
throw error(500, { message: e.message, owlCode: 'GEN_ERROR' });
}
throw error(500, { message: 'Unexpected error', owlCode: 'UNKNOWN_ERR' });
throw e;
}
};

8
src/routes/pis/+page.svelte
View File

@@ -2,7 +2,7 @@
import HeadcodeSearchCard from '$lib/components/ui/cards/HeadcodeSearchCard.svelte';
import PisStartEndCard from '$lib/components/ui/cards/pis/PisStartEndCard.svelte';
import PisCode from '$lib/components/ui/cards/pis/PisCode.svelte';
import Button from '$lib/components/ui/Button.svelte';
import Button from '$lib/components/ui/form-elements/Button.svelte';
import type { ApiPisObject } from '@owlboard/owlboard-ts';
import { OwlClient, ApiError, ValidationError } from '$lib/owlClient';
import TocStyle from '$lib/components/ui/TocStyle.svelte';
@@ -18,14 +18,14 @@
try {
const response = await OwlClient.pis.getByStartEndCrs(start, end);
results = response.data || [];
} catch (e) {
} catch (e: unknown) {
if (e instanceof ValidationError) {
errorState = { status: 400, message: e.message };
} else if (e instanceof ApiError) {
console.log(e);
errorState = { status: 20, message: e.message };
} else {
errorState = { status: 0, message: `Unknown Error: ${e.message}` };
errorState = { status: 0, message: `Unknown Error: ${e instanceof Error ? e.message : String(e)}` };
}
} finally {
resultsLoaded = true;
@@ -45,7 +45,7 @@
console.log(e);
errorState = { status: 20, message: e.message };
} else {
errorState = { status: 0, message: `Unknown Error: ${e.message}` };
errorState = { status: 0, message: `Unknown Error: ${e instanceof Error ? e.message : String(e)}` };
}
} finally {
resultsLoaded = true;

32
src/routes/trains/+page.ts
View File

@@ -29,34 +29,12 @@ export const load: PageLoad = async ({ fetch, url }) => {
results: results
};
} catch (e: unknown) {
if (e instanceof ValidationError) {
throw error(400, {
message: e.message,
owlCode: 'VALIDATION_ERROR'
});
} else if (e instanceof ApiError) {
// Check if NO_RESULTS error, and return empty array if that is the case
if (e.code === 'NOT_FOUND') {
return {
title: headcode.toUpperCase(),
results: []
};
} else {
throw error(e.status, {
message: e.message,
owlCode: 'API_ERROR'
});
}
} else if (e instanceof Error) {
throw error(500, {
message: e.message,
owlCode: 'GEN_ERROR'
});
} else {
throw error(500, {
message: 'Unexpected error',
owlCode: 'UNKNOWN_ERR'
if (e instanceof TypeError && e.message === 'Failed to fetch') {
error(503, {
message: 'Cannot connect to the OwlBoard server',
owlCode: 'NETWORK_DISCONNECTED'
});
}
throw e;
}
};

50
src/service-worker.ts
View File

@@ -42,13 +42,53 @@ sw.addEventListener('fetch', (event) => {
return;
}
// 1. Static Assets (Cache-First)
// Static Assets (Cache-First)
if (ASSETS.includes(url.pathname) || url.pathname.startsWith('/_app/')) {
event.respondWith(caches.match(request).then((res) => res || fetch(request)));
return;
}
// 2. Offline API Fallback (Network-First)
// Cachable API Responses - stale-while-revalidate
if (url.pathname === '/api/v3/locationFilter/data') {
event.respondWith(
caches.open('ob-dynamic-cache').then(async (cache) => {
const cachedResponse = await cache.match(request);
// Ensure fallback response exists
const makeOfflineFallback = () => {
const errorObject: ApiEnvelope.Envelope = {
e: {
code: 'NETWORK_DISCONNECTED',
msg: 'Cannot connect to the OwlBoard server'
},
t: Math.floor(Date.now() / 1000)
};
return new Response(JSON.stringify(errorObject), {
status: 503,
headers: { 'Content-Type': 'application/json' }
});
};
const networkFetch = fetch(request)
.then((networkResponse) => {
if (networkResponse.ok) {
cache.put(request, networkResponse.clone());
}
return networkResponse;
})
.catch(() => {
// If offline & cache empty, return fallback
return makeOfflineFallback();
});
// If cachedResponse is undefined, networkFetch safely resolves to a Response
return cachedResponse || networkFetch;
})
);
return;
}
// Offline API Fallback (Network-First)
if (url.pathname.startsWith('/api') || url.hostname.includes('api')) {
event.respondWith(
fetch(request).catch(() => {
@@ -68,13 +108,11 @@ sw.addEventListener('fetch', (event) => {
return;
}
// 3. Navigation Fallback (The Offline 404 Catch-All)
// This catches top-level page navigations and hard refreshes
// Nav fallback - return fallback page, if offline and page requested
if (request.mode === 'navigate' || request.headers.get('accept')?.includes('text/html')) {
event.respondWith(
fetch(request).catch(() => {
// The network request failed entirely (offline).
// Serve the cached root shell so SvelteKit can boot.
// Serve svelte fallback page
return caches.match('/') as Promise<Response>;
})
);