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

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