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

66
package-lock.json generated
View File

@@ -8,9 +8,8 @@
"name": "web-pwa",
"version": "0.0.1",
"dependencies": {
"@owlboard/api-schema-types": "^3.0.3-alpha18",
"@owlboard/owlboard-ts": "^3.0.0-dev.20260509t2101",
"@tabler/icons-svelte": "^3.40.0"
"@owlboard/api-schema-types": "^3.0.3-alpha19",
"@owlboard/owlboard-ts": "^3.0.0-dev.20260509t2101"
},
"devDependencies": {
"@eslint/compat": "^2.0.2",
@@ -19,6 +18,7 @@
"@sveltejs/adapter-static": "^3.0.10",
"@sveltejs/kit": "^2.50.2",
"@sveltejs/vite-plugin-svelte": "^6.2.4",
"@tabler/icons-svelte-runes": "^3.44.0",
"@types/node": "^22",
"@vitest/browser-playwright": "^4.0.18",
"eslint": "^9.39.2",
@@ -760,6 +760,7 @@
"version": "0.3.13",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
"integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.5.0",
@@ -770,6 +771,7 @@
"version": "2.3.5",
"resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
"integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/gen-mapping": "^0.3.5",
@@ -780,6 +782,7 @@
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6.0.0"
@@ -789,12 +792,14 @@
"version": "1.5.5",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
"integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
"dev": true,
"license": "MIT"
},
"node_modules/@jridgewell/trace-mapping": {
"version": "0.3.31",
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
"integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/resolve-uri": "^3.1.0",
@@ -802,9 +807,9 @@
}
},
"node_modules/@owlboard/api-schema-types": {
"version": "3.0.3-alpha18",
"resolved": "https://git.fjla.uk/api/packages/OwlBoard/npm/%40owlboard%2Fapi-schema-types/-/3.0.3-alpha18/api-schema-types-3.0.3-alpha18.tgz",
"integrity": "sha512-k9X83i8ljatuiKQWNxgixid8tneM0i0G5NP1Wo1N2O0SF0PBMs3gxkEMWwKMuc+htiGCeRLqvIZqrm//Bgeo/w==",
"version": "3.0.3-alpha19",
"resolved": "https://git.fjla.uk/api/packages/OwlBoard/npm/%40owlboard%2Fapi-schema-types/-/3.0.3-alpha19/api-schema-types-3.0.3-alpha19.tgz",
"integrity": "sha512-dVtJAw1p1SLsv9nEojUaku1BPPJnypoX5ZOoONboN8fh81kqGM16OVR69GEHhwuPgJDaPLDUSBxtYYAKZ6ZTcQ==",
"license": "MIT"
},
"node_modules/@owlboard/owlboard-ts": {
@@ -1203,6 +1208,7 @@
"version": "1.0.9",
"resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.9.tgz",
"integrity": "sha512-lVJX6qEgs/4DOcRTpo56tmKzVPtoWAaVbL4hfO7t7NVwl9AAXzQR6cihesW1BmNMPl+bK6dreu2sOKBP2Q9CIA==",
"dev": true,
"license": "MIT",
"peerDependencies": {
"acorn": "^8.9.0"
@@ -1219,9 +1225,9 @@
}
},
"node_modules/@sveltejs/kit": {
"version": "2.59.1",
"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.59.1.tgz",
"integrity": "sha512-d8OON70AphLdDesuTIl//M2O6fRTIicX8aYv8vhCiYEhTTI2OboKqey0Hu1A4VFhqwgqtq0vKDmPFGkw8kKmgw==",
"version": "2.60.1",
"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.60.1.tgz",
"integrity": "sha512-mQjlkNo+rJvpln7V2IGY2j99BqhcFbS4UN0AQNKNYfhBAFZTuCDAdW3a1sgf330mvtNvsBXn3HpAhcmvdJTcIQ==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -1230,7 +1236,7 @@
"@types/cookie": "^0.6.0",
"acorn": "^8.14.1",
"cookie": "^0.6.0",
"devalue": "^5.6.4",
"devalue": "^5.8.1",
"esm-env": "^1.2.2",
"kleur": "^4.1.5",
"magic-string": "^0.30.5",
@@ -1303,16 +1309,18 @@
"version": "3.44.0",
"resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.44.0.tgz",
"integrity": "sha512-Wn0AOZG9sg0L+bjfMqq4eNhC6pQjIrk94LvvWYNYkY8KH8wC3YILRzQlrnVJc4FUeMxH/AK97QsYCX35H3LndA==",
"dev": true,
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/codecalm"
}
},
"node_modules/@tabler/icons-svelte": {
"node_modules/@tabler/icons-svelte-runes": {
"version": "3.44.0",
"resolved": "https://registry.npmjs.org/@tabler/icons-svelte/-/icons-svelte-3.44.0.tgz",
"integrity": "sha512-ZJJMCHoqpvb9hLVn9dU+pn8LCdX/e+mJ/fC+EUaJT5nHEm0+IW4aKKYkYQI+rFMzN8ivj36MnMC5TGFi4H6zew==",
"resolved": "https://registry.npmjs.org/@tabler/icons-svelte-runes/-/icons-svelte-runes-3.44.0.tgz",
"integrity": "sha512-kncwVrQByKnhquybudKYQ1m9OT2Pjl2MEyGhAJmySPjm3uG5CjmcE66jag7A9Hz/D+fuRXYNcHtq99ontyi4aA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@tabler/icons": "3.44.0"
@@ -1322,7 +1330,7 @@
"url": "https://github.com/sponsors/codecalm"
},
"peerDependencies": {
"svelte": ">=3 <6 || >=5.0.0-next.0"
"svelte": "^5.0.0"
}
},
"node_modules/@testing-library/svelte-core": {
@@ -1367,6 +1375,7 @@
"version": "1.0.9",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
"integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
"dev": true,
"license": "MIT"
},
"node_modules/@types/json-schema": {
@@ -1390,6 +1399,7 @@
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
"integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
"dev": true,
"license": "MIT"
},
"node_modules/@typescript-eslint/eslint-plugin": {
@@ -1542,7 +1552,7 @@
"version": "8.59.2",
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.59.2.tgz",
"integrity": "sha512-e82GVOE8Ps3E++Egvb6Y3Dw0S10u8NkQ9KXmtRhCWJJ8kDhOJTvtMAWnFL16kB1583goCWXsr0NieKCZMs2/0Q==",
"devOptional": true,
"dev": true,
"license": "MIT",
"engines": {
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1838,6 +1848,7 @@
"version": "8.16.0",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
"integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
"dev": true,
"license": "MIT",
"bin": {
"acorn": "bin/acorn"
@@ -1900,6 +1911,7 @@
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.1.tgz",
"integrity": "sha512-Z/ZeOgVl7bcSYZ/u/rh0fOpvEpq//LZmdbkXyc7syVzjPAhfOa9ebsdTSjEBDU4vs5nC98Kfduj1uFo0qyET3g==",
"dev": true,
"license": "Apache-2.0",
"engines": {
"node": ">= 0.4"
@@ -1919,6 +1931,7 @@
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
"integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
"dev": true,
"license": "Apache-2.0",
"engines": {
"node": ">= 0.4"
@@ -1999,6 +2012,7 @@
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6"
@@ -2112,9 +2126,10 @@
}
},
"node_modules/devalue": {
"version": "5.8.0",
"resolved": "https://registry.npmjs.org/devalue/-/devalue-5.8.0.tgz",
"integrity": "sha512-2zA9pFEsnp7vWBZbXF5JAgAq0fsUIt/1XPbRiAmRV3lp/2C3upzH+sADiyy66aFCihoLEsrQHxNM5w1gIDfsBg==",
"version": "5.8.1",
"resolved": "https://registry.npmjs.org/devalue/-/devalue-5.8.1.tgz",
"integrity": "sha512-4CXDYRBGqN+57wVJkuXBYmpAVUSg3L6JAQa/DFqm238G73E1wuyc/JhGQJzN7vUf/CMphYau2zXbfWzDR5aTEw==",
"dev": true,
"license": "MIT"
},
"node_modules/es-module-lexer": {
@@ -2349,6 +2364,7 @@
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
"integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
"dev": true,
"license": "MIT"
},
"node_modules/espree": {
@@ -2386,6 +2402,7 @@
"version": "2.2.6",
"resolved": "https://registry.npmjs.org/esrap/-/esrap-2.2.6.tgz",
"integrity": "sha512-WN0clHt0a4mzC780UBVVBpsj4vSSjOFNRd2WjYtduB9HeKxm1sjHMNUwLEHVjI3FdCQD/Hurgz9ftbKEzP79Ow==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.4.15"
@@ -2666,6 +2683,7 @@
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
"integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/estree": "^1.0.6"
@@ -2773,6 +2791,7 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
"dev": true,
"license": "MIT"
},
"node_modules/locate-path": {
@@ -2802,6 +2821,7 @@
"version": "0.30.21",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
"integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.5.5"
@@ -5188,9 +5208,10 @@
}
},
"node_modules/svelte": {
"version": "5.55.5",
"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.55.5.tgz",
"integrity": "sha512-2uCs/LZ9us+AktdzYJM8OcxQ8qnPS1kpaO7syGT/MgO+6Qr1Ybl+TqPq+97u7PHqmmMlye5ZkoyXONy5mjjAbw==",
"version": "5.55.7",
"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.55.7.tgz",
"integrity": "sha512-ymI5ykLPwIHW839E053FQbI1G+jnRFJEw3Kv5Y4njixVWywQBx+NUFpkkKyk5LIb36Fg9DVXSYpqiGekLD0hyw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/remapping": "^2.3.4",
@@ -5202,7 +5223,7 @@
"aria-query": "5.3.1",
"axobject-query": "^4.1.0",
"clsx": "^2.1.1",
"devalue": "^5.6.4",
"devalue": "^5.8.1",
"esm-env": "^1.2.1",
"esrap": "^2.2.4",
"is-reference": "^3.0.3",
@@ -5728,6 +5749,7 @@
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.4.tgz",
"integrity": "sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ==",
"dev": true,
"license": "MIT"
}
}

6
package.json
View File

@@ -23,6 +23,7 @@
"@sveltejs/adapter-static": "^3.0.10",
"@sveltejs/kit": "^2.50.2",
"@sveltejs/vite-plugin-svelte": "^6.2.4",
"@tabler/icons-svelte-runes": "^3.44.0",
"@types/node": "^22",
"@vitest/browser-playwright": "^4.0.18",
"eslint": "^9.39.2",
@@ -41,8 +42,7 @@
"vitest-browser-svelte": "^2.0.2"
},
"dependencies": {
"@owlboard/api-schema-types": "^3.0.3-alpha18",
"@owlboard/owlboard-ts": "^3.0.0-dev.20260509t2101",
"@tabler/icons-svelte": "^3.40.0"
"@owlboard/api-schema-types": "^3.0.3-alpha19",
"@owlboard/owlboard-ts": "^3.0.0-dev.20260509t2101"
}
}

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