Compare commits
8 Commits
v3.0.0-dev
...
v3.0.0-dev
| Author | SHA1 | Date | |
|---|---|---|---|
| 1105a9f7c5 | |||
| 25b64edabd | |||
| bc56e66178 | |||
| 0ef9e5b56f | |||
| b88f4f3b35 | |||
| a2e6f3b99a | |||
| 7edccf294b | |||
| 13d22d7b73 |
7
package-lock.json
generated
7
package-lock.json
generated
@@ -8,6 +8,7 @@
|
|||||||
"name": "web-pwa",
|
"name": "web-pwa",
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@owlboard/api-schema-types": "^3.0.3-alpha18",
|
||||||
"@owlboard/owlboard-ts": "^3.0.0-dev.20260509t2101",
|
"@owlboard/owlboard-ts": "^3.0.0-dev.20260509t2101",
|
||||||
"@tabler/icons-svelte": "^3.40.0"
|
"@tabler/icons-svelte": "^3.40.0"
|
||||||
},
|
},
|
||||||
@@ -801,9 +802,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@owlboard/api-schema-types": {
|
"node_modules/@owlboard/api-schema-types": {
|
||||||
"version": "3.0.3-alpha17",
|
"version": "3.0.3-alpha18",
|
||||||
"resolved": "https://git.fjla.uk/api/packages/OwlBoard/npm/%40owlboard%2Fapi-schema-types/-/3.0.3-alpha17/api-schema-types-3.0.3-alpha17.tgz",
|
"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-9jtsajZIq/1W9w1XPSIQSH/rcH2mfnS+3XoQpe81Yor2pOVl5+iyHZ9wAlJLrLEVKVVs3k4lkjcM5l6KgWgd9w==",
|
"integrity": "sha512-k9X83i8ljatuiKQWNxgixid8tneM0i0G5NP1Wo1N2O0SF0PBMs3gxkEMWwKMuc+htiGCeRLqvIZqrm//Bgeo/w==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/@owlboard/owlboard-ts": {
|
"node_modules/@owlboard/owlboard-ts": {
|
||||||
|
|||||||
@@ -41,6 +41,7 @@
|
|||||||
"vitest-browser-svelte": "^2.0.2"
|
"vitest-browser-svelte": "^2.0.2"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@owlboard/api-schema-types": "^3.0.3-alpha18",
|
||||||
"@owlboard/owlboard-ts": "^3.0.0-dev.20260509t2101",
|
"@owlboard/owlboard-ts": "^3.0.0-dev.20260509t2101",
|
||||||
"@tabler/icons-svelte": "^3.40.0"
|
"@tabler/icons-svelte": "^3.40.0"
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,12 +3,14 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<link rel="manifest" href="/manifest.webmanifest" />
|
|
||||||
<meta name="title" content="OwlBoard | Your fastest route to live and reference data" />
|
<meta name="title" content="OwlBoard | Your fastest route to live and reference data" />
|
||||||
<meta
|
<meta
|
||||||
name="description"
|
name="description"
|
||||||
content="Live station departures, Live train tracking, PIS Codes & more"
|
content="Live station departures, Live train tracking, PIS Codes & more"
|
||||||
/>
|
/>
|
||||||
|
<!-- PWA Requirements -->
|
||||||
|
<link rel="manifest" href="%sveltekit.assets%/manifest.json" />
|
||||||
|
<link rel="apple-touch-icon" href="%sveltekit.assets%/icons/apple-touch-icon.png" />
|
||||||
<meta name="theme-color" content="#4fd1d1" />
|
<meta name="theme-color" content="#4fd1d1" />
|
||||||
<link rel="canonical" href="https://owlboard.info" />
|
<link rel="canonical" href="https://owlboard.info" />
|
||||||
<meta property="og:type" content="website" />
|
<meta property="og:type" content="website" />
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
1
src/lib/assets/owlboard-logo-square.svg
Normal file
1
src/lib/assets/owlboard-logo-square.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 562.1 562.1"><defs><radialGradient xlink:href="#a" id="b" cx="256" cy="256" r="254" fx="256" fy="256" gradientTransform="translate(27 27)" gradientUnits="userSpaceOnUse"/><linearGradient id="a"><stop offset="0" stop-color="#2b343c"/><stop offset="1" stop-color="#404c55"/></linearGradient></defs><path fill="url(#b)" d="M694.3 283a411.3 394 0 0 1-410.7 394 411.3 394 0 0 1-412-392.8 411.3 394 0 0 1 409.5-395.1 411.3 394 0 0 1 413.2 391.4" transform="translate(-2 -2)"/><path fill="#4fd1d1" d="M281 81a200 200 0 0 0-153.4 71.8 120 120 0 0 0 50.5 25.8c9 2.3 8.9 2.3 15.6-.6 50-21.6 124.4-21.6 175.2-.1 13.3 5.6 44.6-6.5 65.9-24.8a200 200 0 0 0-153.8-72m-161.9 82.7a200 200 0 0 0-38 117.3 200 200 0 0 0 200 200 200 200 0 0 0 200-200 200 200 0 0 0-37.8-116.8 96 96 0 0 1-17.7 46.6l-2.8 4 1.3 1.8c73.3 99.2-14.3 222.2-116.7 163.6-2.5-1.4-4.7-2.4-5-2.1s-10.5 19.6-18 34c-3.4 6.5-2.7 6.6-6.3-.3-9.2-17.5-18-34-18.3-34-.1 0-2.3 1-4.7 2.5-101.3 58-190.7-65.7-117.4-162.4q2.3-3 1.8-3.6a102 102 0 0 1-20.4-50.6m86.5 57q-14.6 0-29.8 7.5C108 261.8 143.1 366.4 217.5 352a68 68 0 0 0 43.3-28.4c2.4-3.4 3.3-4.2 3.7-3.7l8.5 14.6c9.4 16.3 8 15 11.4 9 5.1-9 13.7-23.5 14-24 .3-.2 1.9 1.8 3.6 4.3 31 45.5 101.6 35.6 118.3-16.5a66.4 66.4 0 0 0-83.9-83c-23.3 7.7-38.7 24.4-53.8 58.4l-1.3 3-2.7-6c-17-38.5-43.7-59.5-73-59.2m147.2 34.7a32 32 0 0 1 23.7 9.5c22.8 22.8.7 60.8-30.9 53.1a32 32 0 0 1-23.2-37.3 31.5 31.5 0 0 1 30.4-25.3m-145.8 0c16.4-.8 32.7 11 33.9 30.1a32.2 32.2 0 0 1-40.1 32.5 31.5 31.5 0 0 1-15-52.9 32 32 0 0 1 21.2-9.6m12 9.6q-3.3 0-5.8 3c-6.3 7.4 2.5 17.7 11 13a9 9 0 0 0 4.2-7.5c0-5.4-4.8-8.9-9.4-8.5m123.1 0c-6 .5-9.6 6.5-7 12.3 2 4.5 8.3 6.3 12.2 3.6 7.2-4.9 4.7-15.3-4-15.8z"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -7,6 +7,7 @@
|
|||||||
import TocStyle from '$lib/components/ui/TocStyle.svelte';
|
import TocStyle from '$lib/components/ui/TocStyle.svelte';
|
||||||
import TiplocConverter from '$lib/components/ui/TiplocConverter.svelte';
|
import TiplocConverter from '$lib/components/ui/TiplocConverter.svelte';
|
||||||
import { IconChevronDownFilled } from '@tabler/icons-svelte';
|
import { IconChevronDownFilled } from '@tabler/icons-svelte';
|
||||||
|
import { estClass } from '$lib/utils/time';
|
||||||
let { service }: { service: ApiTrainsTrainByHeadcode.TrainByHeadcodeResponse } = $props();
|
let { service }: { service: ApiTrainsTrainByHeadcode.TrainByHeadcodeResponse } = $props();
|
||||||
let isExpanded = $state(false);
|
let isExpanded = $state(false);
|
||||||
let loadingDetails = $state(false);
|
let loadingDetails = $state(false);
|
||||||
@@ -45,8 +46,6 @@
|
|||||||
loadingDetails = false;
|
loadingDetails = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
const estClass = (act, est) => (!act && est ? 'est' : 'act');
|
|
||||||
|
|
||||||
const activityMap: Record<string, string> = {
|
const activityMap: Record<string, string> = {
|
||||||
'-D': 'Vehicles detatched',
|
'-D': 'Vehicles detatched',
|
||||||
'-T': 'Vehicles attached & detached',
|
'-T': 'Vehicles attached & detached',
|
||||||
|
|||||||
418
src/lib/components/ui/station-board/StaffServicesTable.svelte
Normal file
418
src/lib/components/ui/station-board/StaffServicesTable.svelte
Normal file
@@ -0,0 +1,418 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { ApiStationsBoard } from '@owlboard/owlboard-ts';
|
||||||
|
import { formatUkTime, estClass, delayClassFromTimePair } from '$lib/utils/time';
|
||||||
|
|
||||||
|
let { services }: { services: ApiStationsBoard.BoardService[] } = $props();
|
||||||
|
|
||||||
|
const getRowKey = (s: ApiStationsBoard.BoardService) =>
|
||||||
|
`${s.r}${s.sta ?? ''}${s.std ?? ''}${s.wtp ?? ''}`;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<table class="departure-board">
|
||||||
|
<colgroup>
|
||||||
|
<col style="width:10%;" />
|
||||||
|
<!-- ID (Headcode) -->
|
||||||
|
<col style="width:17%;" />
|
||||||
|
<!-- ORIG (Origin) -->
|
||||||
|
<col style="width:17%;" />
|
||||||
|
<!-- DEST (Destination) -->
|
||||||
|
<col style="width:9%;" />
|
||||||
|
<!-- PLT (Platform) -->
|
||||||
|
<col style="width: 12%;" />
|
||||||
|
<!-- STA -->
|
||||||
|
<col style="width: 12%;" />
|
||||||
|
<!-- ETA/ATA -->
|
||||||
|
<col style="width: 12%;" />
|
||||||
|
<!-- STD -->
|
||||||
|
<col style="width: 11%;" />
|
||||||
|
<!-- ETD/ATD -->
|
||||||
|
</colgroup>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th colspan="4" aria-hidden="true"></th>
|
||||||
|
<th scope="colgroup" colspan="2" class="upper-head"><abbr title="Arrival">Arr</abbr></th>
|
||||||
|
<th scope="colgroup" colspan="2" class="upper-head"><abbr title="Departure">Dep</abbr></th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="col"><abbr title="Headcode">ID</abbr></th>
|
||||||
|
<th scope="col"><abbr title="Origin">Orig</abbr></th>
|
||||||
|
<th scope="col"><abbr title="Destination">Dest</abbr></th>
|
||||||
|
<th scope="col"><abbr title="Platform">Plt</abbr></th>
|
||||||
|
<th scope="col"><abbr title="Scheduled">Sch</abbr></th>
|
||||||
|
<th scope="col"><abbr title="Actual/Expected">Act</abbr></th>
|
||||||
|
<th scope="col"><abbr title="Scheduled">Sch</abbr></th>
|
||||||
|
<th scope="col"><abbr title="Actual/Expected">Act</abbr></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
{#each services as service (getRowKey(service))}
|
||||||
|
<tbody>
|
||||||
|
<tr
|
||||||
|
class="service-row"
|
||||||
|
class:serviceCancelled={service.c}
|
||||||
|
class:servicePass={service.wtp}
|
||||||
|
class:serviceNonPassenger={!service.ip}
|
||||||
|
>
|
||||||
|
<td class="id-cell">{service.h}</td>
|
||||||
|
<td class="orig-cell"
|
||||||
|
><abbr title={service.og.n.toLocaleUpperCase()}>{service.og.t}</abbr></td
|
||||||
|
>
|
||||||
|
<td class="dest-cell"
|
||||||
|
><abbr title={service.dt.n.toLocaleUpperCase()}>{service.dt.t}</abbr></td
|
||||||
|
>
|
||||||
|
<td class="plt-cell" class:platSup={service.ps} class:platChange={service.pc}
|
||||||
|
>{service.p || '-'}</td
|
||||||
|
>
|
||||||
|
|
||||||
|
<!-- Handle different display for a passing train -->
|
||||||
|
{#if service.wtp}
|
||||||
|
<td class="pass-cell" colspan="2">Pass</td>
|
||||||
|
<td class="time-cell">{formatUkTime(service.wtp)}</td>
|
||||||
|
<!-- If cancelled, show '-', otherwise check for RT or show time -->
|
||||||
|
<td
|
||||||
|
class="time-cell {estClass(service.atp, service.etp)} {delayClassFromTimePair(
|
||||||
|
service.wtp,
|
||||||
|
service.atp || service.etp
|
||||||
|
)}"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
{service.c
|
||||||
|
? '-'
|
||||||
|
: delayClassFromTimePair(service.wtp, service.atp || service.etp) === 'delay-rt'
|
||||||
|
? 'RT'
|
||||||
|
: formatUkTime(service.atp || service.etp)}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
{:else}
|
||||||
|
<td class="time-cell">{formatUkTime(service.sta)}</td>
|
||||||
|
|
||||||
|
<!-- Arrival Actual/Expected -->
|
||||||
|
<td
|
||||||
|
class="time-cell {estClass(service.ata, service.eta)} {delayClassFromTimePair(
|
||||||
|
service.sta,
|
||||||
|
service.ata || service.eta
|
||||||
|
)}"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
{service.c
|
||||||
|
? '-'
|
||||||
|
: delayClassFromTimePair(service.sta, service.ata || service.eta) === 'delay-rt'
|
||||||
|
? 'RT'
|
||||||
|
: formatUkTime(service.ata || service.eta)}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td class="time-cell">{formatUkTime(service.std)}</td>
|
||||||
|
|
||||||
|
<!-- Departure Actual/Expected -->
|
||||||
|
<td
|
||||||
|
class="time-cell {estClass(service.atd, service.etd)} {delayClassFromTimePair(
|
||||||
|
service.std,
|
||||||
|
service.atd || service.etd
|
||||||
|
)}"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
{service.c
|
||||||
|
? '-'
|
||||||
|
: delayClassFromTimePair(service.std, service.atd || service.etd) === 'delay-rt'
|
||||||
|
? 'RT'
|
||||||
|
: formatUkTime(service.atd || service.etd)}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
{/if}
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
{#if service.o}
|
||||||
|
<tr class="toc-coach-row">
|
||||||
|
<td colspan="8">
|
||||||
|
{service.o}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/if}
|
||||||
|
{#if service.c && service.cr?.r}
|
||||||
|
<tr class="cancel-row">
|
||||||
|
<td colspan="8">
|
||||||
|
{service.cr.r}
|
||||||
|
{#if service.cr.l}
|
||||||
|
{service.cr.n ? 'near' : 'at'}
|
||||||
|
{service.cr.l}
|
||||||
|
{/if}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/if}
|
||||||
|
{#if service.dr?.r}
|
||||||
|
<tr class="delay-row">
|
||||||
|
<td colspan="9">
|
||||||
|
{service.dr.r}
|
||||||
|
{#if service.dr.l}
|
||||||
|
{service.dr.n ? 'near' : 'at'}
|
||||||
|
{service.dr.l}
|
||||||
|
{/if}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/if}
|
||||||
|
</tbody>
|
||||||
|
{/each}
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.departure-board {
|
||||||
|
width: 100%;
|
||||||
|
margin: 5px auto;
|
||||||
|
border-collapse: collapse;
|
||||||
|
table-layout: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.departure-board td {
|
||||||
|
font-family: 'Inconsolata Variable', monospace;
|
||||||
|
font-size: clamp(1rem, 0.475rem + 2.8vw, 1.35rem);
|
||||||
|
font-variant-ligatures: additional-ligatures;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead,
|
||||||
|
.cancel-row td,
|
||||||
|
.delay-row td {
|
||||||
|
letter-spacing: -0.15ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 2;
|
||||||
|
background: var(--color-bg-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
abbr {
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: none;
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody tr:first-child td {
|
||||||
|
border-top: 5px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Row Logic */
|
||||||
|
.serviceCancelled {
|
||||||
|
color: rgb(255, 131, 131);
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicePass td {
|
||||||
|
opacity: 0.75;
|
||||||
|
font-weight: 200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.serviceNonPassenger td {
|
||||||
|
opacity: 0.5;
|
||||||
|
font-weight: 290;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Special Row Styles */
|
||||||
|
.cancel-row td,
|
||||||
|
.delay-row td {
|
||||||
|
font-size: 0.88rem;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-row td[colspan],
|
||||||
|
.delay-row td[colspan] {
|
||||||
|
padding-left: 0ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-row td {
|
||||||
|
color: rgb(255, 131, 131);
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delay-row td {
|
||||||
|
color: var(--delay-orange);
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
@media (min-width: 375px) {
|
||||||
|
.cancel-row td,
|
||||||
|
.delay-row td {
|
||||||
|
font-size: 1.08rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 420px) {
|
||||||
|
.cancel-row td,
|
||||||
|
.delay-row td {
|
||||||
|
font-size: 1.12rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 550px) {
|
||||||
|
.cancel-row td,
|
||||||
|
.delay-row td {
|
||||||
|
font-size: 1.18rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 620px) {
|
||||||
|
.cancel-row td,
|
||||||
|
.delay-row td {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-coach-row td {
|
||||||
|
font-family: 'URW Gothic', sans-serif;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
padding: 0;
|
||||||
|
color: rgb(187, 187, 255);
|
||||||
|
}
|
||||||
|
@media (min-width: 400px) {
|
||||||
|
.toc-coach-row td {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 550px) {
|
||||||
|
.toc-coach-row td {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Column Specifics */
|
||||||
|
.id-cell {
|
||||||
|
text-align: left;
|
||||||
|
font-weight: 400;
|
||||||
|
font-stretch: 85%;
|
||||||
|
filter: brightness(0.75);
|
||||||
|
}
|
||||||
|
@media (min-width: 400px) {
|
||||||
|
.id-cell {
|
||||||
|
font-stretch: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.orig-cell,
|
||||||
|
.dest-cell {
|
||||||
|
font-stretch: 80%;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.orig-cell {
|
||||||
|
text-align: left;
|
||||||
|
color: var(--location-yellow);
|
||||||
|
}
|
||||||
|
.dest-cell {
|
||||||
|
text-align: right;
|
||||||
|
color: var(--location-yellow);
|
||||||
|
}
|
||||||
|
@media (min-width: 350px) {
|
||||||
|
.orig-cell,
|
||||||
|
.dest-cell {
|
||||||
|
font-stretch: 85%;
|
||||||
|
}
|
||||||
|
@media (min-width: 400px) {
|
||||||
|
.orig-cell,
|
||||||
|
.dest-cell {
|
||||||
|
font-stretch: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 490px) {
|
||||||
|
.orig-cell,
|
||||||
|
.dest-cell {
|
||||||
|
font-stretch: 95%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 520px) {
|
||||||
|
.orig-cell,
|
||||||
|
.dest-cell {
|
||||||
|
font-stretch: 100%;
|
||||||
|
}
|
||||||
|
.orig-cell {
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 7px;
|
||||||
|
}
|
||||||
|
.dest-cell {
|
||||||
|
text-align: left;
|
||||||
|
padding-left: 7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 600px) {
|
||||||
|
.orig-cell,
|
||||||
|
.dest-cell {
|
||||||
|
letter-spacing: 0.05ch;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.plt-cell {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 410;
|
||||||
|
font-stretch: 100%;
|
||||||
|
}
|
||||||
|
@media (min-width: 525px) {
|
||||||
|
.plt-cell {
|
||||||
|
font-stretch: 110%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.plt-cell.platSup {
|
||||||
|
font-weight: 200;
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
.plt-cell.platChange {
|
||||||
|
animation: fast-pulse 2s ease-out infinite;
|
||||||
|
}
|
||||||
|
.service-row.serviceCancelled .plt-cell {
|
||||||
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
|
.pass-cell {
|
||||||
|
text-align: center;
|
||||||
|
font-stretch: 100%;
|
||||||
|
}
|
||||||
|
/* Colour orig and dest values when cancelled */
|
||||||
|
.service-row.serviceCancelled .orig-cell,
|
||||||
|
.service-row.serviceCancelled .dest-cell {
|
||||||
|
color: rgb(255, 131, 131);
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-cell {
|
||||||
|
text-align: center;
|
||||||
|
font-stretch: 72%;
|
||||||
|
}
|
||||||
|
@media (min-width: 350px) {
|
||||||
|
.time-cell {
|
||||||
|
font-stretch: 77%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 400px) {
|
||||||
|
.time-cell {
|
||||||
|
font-stretch: 82%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 525px) {
|
||||||
|
.time-cell {
|
||||||
|
font-stretch: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 600px) {
|
||||||
|
.time-cell {
|
||||||
|
font-stretch: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* RT Logic */
|
||||||
|
.time-cell.delay-rt span {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.time-cell.delay-rt::after {
|
||||||
|
content: 'RT';
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-cell.delay-early {
|
||||||
|
color: var(--early-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-cell.delay-late {
|
||||||
|
color: var(--delay-orange);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Time Types */
|
||||||
|
.est {
|
||||||
|
font-style: italic;
|
||||||
|
opacity: 0.75;
|
||||||
|
font-weight: 200;
|
||||||
|
}
|
||||||
|
.act {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -41,7 +41,7 @@
|
|||||||
|
|
||||||
<style>
|
<style>
|
||||||
.alert-card {
|
.alert-card {
|
||||||
margin: 1rem 0;
|
margin: 0;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -49,6 +49,11 @@
|
|||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
width: 95%;
|
width: 95%;
|
||||||
max-width: 750px;
|
max-width: 750px;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-card:active {
|
||||||
|
filter: brightness(1.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.trigger {
|
.trigger {
|
||||||
@@ -56,7 +61,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0.4rem 1rem;
|
padding: 0.1rem 1.05rem;
|
||||||
background: var(--alert-orange);
|
background: var(--alert-orange);
|
||||||
color: white;
|
color: white;
|
||||||
border: none;
|
border: none;
|
||||||
@@ -64,13 +69,13 @@
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
height: 46px;
|
height: 40px;
|
||||||
transition: all 0.65s 0.2s;
|
transition: all 0.65s 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.trigger.active {
|
.trigger.active {
|
||||||
border-radius: 8px 8px 0 0;
|
border-radius: 8px 8px 0 0;
|
||||||
transition: all 0.1s 0s;
|
transition: all 0.01s 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.warning-icon {
|
.warning-icon {
|
||||||
@@ -105,7 +110,7 @@
|
|||||||
.content {
|
.content {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 46px;
|
top: 40px;
|
||||||
border-radius: 0 0 8px 8px;
|
border-radius: 0 0 8px 8px;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
@@ -129,7 +129,41 @@
|
|||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-display: swap;
|
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';
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
font-weight: 200 900;
|
||||||
|
font-stretch: 50% 200%;
|
||||||
|
src: url(/type/inconsolata/latin-wdth-normal.woff2) format('woff2-variations');
|
||||||
|
unicode-range:
|
||||||
|
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
|
||||||
|
U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||||
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
|
/* Fixed Heights */
|
||||||
|
--header-height: 80px;
|
||||||
|
--nav-height: 60px;
|
||||||
|
|
||||||
/* Brand Colours */
|
/* Brand Colours */
|
||||||
--color-brand: #4fd1d1;
|
--color-brand: #4fd1d1;
|
||||||
--color-accent: #3c6f79;
|
--color-accent: #3c6f79;
|
||||||
@@ -159,7 +193,7 @@
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
opacity: 0.3;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -171,7 +205,7 @@
|
|||||||
}
|
}
|
||||||
25%,
|
25%,
|
||||||
75% {
|
75% {
|
||||||
opacity: 0;
|
opacity: 0.25;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
43
src/lib/preferences.svelte.ts
Normal file
43
src/lib/preferences.svelte.ts
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
import { browser } from '$app/environment';
|
||||||
|
|
||||||
|
export interface Preferences {
|
||||||
|
locationEnabled: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const STORAGE_KEY = 'ob_pref';
|
||||||
|
|
||||||
|
const DEFAULT_PREFS: Preferences = {
|
||||||
|
locationEnabled: false
|
||||||
|
};
|
||||||
|
|
||||||
|
function loadPrefs(): Preferences {
|
||||||
|
if (!browser) return DEFAULT_PREFS;
|
||||||
|
const stored = localStorage.getItem(STORAGE_KEY);
|
||||||
|
if (!stored) return DEFAULT_PREFS;
|
||||||
|
|
||||||
|
try {
|
||||||
|
return { ...DEFAULT_PREFS, ...JSON.parse(stored) };
|
||||||
|
} catch {
|
||||||
|
return DEFAULT_PREFS;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class PreferencesStore {
|
||||||
|
current = $state<Preferences>(loadPrefs());
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
$effect.root(() => {
|
||||||
|
$effect(() => {
|
||||||
|
if (browser) {
|
||||||
|
localStorage.setItem(STORAGE_KEY, JSON.stringify(this.current));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleLocation(enabled: boolean) {
|
||||||
|
this.current.locationEnabled = enabled;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const prefs = new PreferencesStore();
|
||||||
@@ -15,7 +15,11 @@ class QuickLinksService {
|
|||||||
if (typeof window !== 'undefined') {
|
if (typeof window !== 'undefined') {
|
||||||
const saved = localStorage.getItem('ql');
|
const saved = localStorage.getItem('ql');
|
||||||
if (saved) {
|
if (saved) {
|
||||||
this.#links = JSON.parse(saved);
|
try {
|
||||||
|
this.#links = JSON.parse(saved);
|
||||||
|
} catch {
|
||||||
|
this.#links = [];
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -53,7 +57,16 @@ class QuickLinksService {
|
|||||||
|
|
||||||
this.#links = sorted.slice(0, MAX_ENTRIES);
|
this.#links = sorted.slice(0, MAX_ENTRIES);
|
||||||
|
|
||||||
localStorage.setItem('ql', JSON.stringify(this.#links));
|
if (typeof window !== 'undefined') {
|
||||||
|
localStorage.setItem('ql', JSON.stringify(this.#links));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
reset() {
|
||||||
|
this.#links = [];
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
localStorage.removeItem('ql');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,4 +1,7 @@
|
|||||||
import type { ApiTrainsTrainDetails } from '@owlboard/owlboard-ts';
|
import type { ApiTrainsTrainDetails } from '@owlboard/owlboard-ts';
|
||||||
|
|
||||||
|
export const estClass = (act: any, est: any) => (act ? 'act' : 'est');
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Converts ISO/JSON time to UK-formatted HH:MM string, with optional (default off) seconds
|
* Converts ISO/JSON time to UK-formatted HH:MM string, with optional (default off) seconds
|
||||||
* Ensures Europe/London timezone irrespective of browser timezone.
|
* Ensures Europe/London timezone irrespective of browser timezone.
|
||||||
@@ -7,10 +10,10 @@ export function formatUkTime(
|
|||||||
dateStr: string | Date | undefined,
|
dateStr: string | Date | undefined,
|
||||||
includeSeconds: boolean = false
|
includeSeconds: boolean = false
|
||||||
): string {
|
): string {
|
||||||
if (!dateStr) return '--:--';
|
if (!dateStr) return '-';
|
||||||
const date = typeof dateStr === 'string' ? new Date(dateStr) : dateStr;
|
const date = typeof dateStr === 'string' ? new Date(dateStr) : dateStr;
|
||||||
|
|
||||||
if (isNaN(date.getTime())) return '--:--';
|
if (isNaN(date.getTime())) return '-';
|
||||||
|
|
||||||
return date.toLocaleTimeString('en-GB', {
|
return date.toLocaleTimeString('en-GB', {
|
||||||
hour: '2-digit',
|
hour: '2-digit',
|
||||||
@@ -49,20 +52,45 @@ export function formatUkDateTime(
|
|||||||
.replace(',', '');
|
.replace(',', '');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Specific type that can handle the TrainDetails.ServiceLocation and the ApiStationsBoard.BoardService types for delay calculation
|
||||||
|
*/
|
||||||
|
interface DelayInput {
|
||||||
|
// Board types
|
||||||
|
sta?: string | null;
|
||||||
|
std?: string | null;
|
||||||
|
eta?: string | null;
|
||||||
|
etd?: string | null;
|
||||||
|
ata?: string | null;
|
||||||
|
atd?: string | null;
|
||||||
|
|
||||||
|
// Journey types
|
||||||
|
pta?: string | null;
|
||||||
|
ptd?: string | null;
|
||||||
|
wta?: string | null;
|
||||||
|
wtd?: string | null;
|
||||||
|
atp?: string | null;
|
||||||
|
wtp?: string | null;
|
||||||
|
etp?: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Calculates a 'delay' value, in the formats:
|
* Calculates a 'delay' value, in the formats:
|
||||||
* RT, 1E, 7L, etc.
|
* RT, 1E, 7L, etc.
|
||||||
* @param 'Schedule Location' object
|
* @param 'Schedule Location' or 'Board Service' object
|
||||||
* @returns Delay string for departure boards
|
* @returns Delay string for departure boards
|
||||||
*/
|
*/
|
||||||
export function calculateDelay(loc: ApiTrainsTrainDetails.ServiceLocation): {
|
export function calculateDelay(loc: DelayInput): {
|
||||||
val: string;
|
val: string;
|
||||||
type: string;
|
type: string;
|
||||||
} {
|
} {
|
||||||
const pairs = [
|
const pairs = [
|
||||||
{ actual: loc.atd, sched: loc.ptd ?? loc.wtd },
|
// Departure check (Board: atd/etd vs std | Journey: atd vs ptd/wtd)
|
||||||
{ actual: loc.ata, sched: loc.pta ?? loc.wta },
|
{ actual: loc.atd || loc.etd, sched: loc.std || loc.ptd || loc.wtd },
|
||||||
{ actual: loc.atp, sched: loc.wtp }
|
// Arrival check (Board: ata/eta vs sta | Journey: ata vs pta/wta)
|
||||||
|
{ actual: loc.ata || loc.eta, sched: loc.sta || loc.pta || loc.wta },
|
||||||
|
// Passing check
|
||||||
|
{ actual: loc.atp || loc.etp, sched: loc.wtp }
|
||||||
];
|
];
|
||||||
|
|
||||||
const match = pairs.find((p) => p.actual && p.sched);
|
const match = pairs.find((p) => p.actual && p.sched);
|
||||||
@@ -80,3 +108,27 @@ export function calculateDelay(loc: ApiTrainsTrainDetails.ServiceLocation): {
|
|||||||
return { val: `${absDiff}E`, type: 'early' };
|
return { val: `${absDiff}E`, type: 'early' };
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Accepts a pair of times (string or Date) and outputs a delay class 'delay-early', 'delay-late' or 'delay-rt'
|
||||||
|
* @param sched Scheduled Time (string, Date)
|
||||||
|
* @param act Actual Time (string, Date)
|
||||||
|
*/
|
||||||
|
export function delayClassFromTimePair(sched: any, act: any): string {
|
||||||
|
if (!sched || !act) return '';
|
||||||
|
|
||||||
|
const s = new Date(sched).getTime();
|
||||||
|
const a = new Date(act).getTime();
|
||||||
|
|
||||||
|
if (isNaN(s) || isNaN(a)) return '';
|
||||||
|
|
||||||
|
const diff = a - s;
|
||||||
|
const oneMinute = 60000;
|
||||||
|
|
||||||
|
// on-time if within one minute
|
||||||
|
if (Math.abs(diff) < oneMinute) {
|
||||||
|
return 'delay-rt';
|
||||||
|
}
|
||||||
|
|
||||||
|
return diff > 0 ? 'delay-late' : 'delay-early';
|
||||||
|
}
|
||||||
|
|||||||
@@ -12,6 +12,7 @@
|
|||||||
<img class="err-img" src={noResult} alt="" role="presentation" width="200" height="200" />
|
<img class="err-img" src={noResult} alt="" role="presentation" width="200" height="200" />
|
||||||
{:else if page.status == 499}
|
{:else if page.status == 499}
|
||||||
<!-- Change to a GSM-R X Sign?? -->
|
<!-- Change to a GSM-R X Sign?? -->
|
||||||
|
<span>OFFLINE!</span>
|
||||||
<img class="err-img" src={stopErr} alt="" role="presentation" width="150" height="210" />
|
<img class="err-img" src={stopErr} alt="" role="presentation" width="150" height="210" />
|
||||||
{:else}
|
{:else}
|
||||||
<!-- STOP Error image -->
|
<!-- STOP Error image -->
|
||||||
@@ -29,7 +30,7 @@
|
|||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if $page.error?.owlCode === 'NETWORK_DISCONNECTED'}
|
{#if page.error?.owlCode === 'NETWORK_DISCONNECTED'}
|
||||||
<Button onclick={() => window.location.reload()} color={'accent'}>Retry</Button>
|
<Button onclick={() => window.location.reload()} color={'accent'}>Retry</Button>
|
||||||
{:else}
|
{:else}
|
||||||
<Button href={'/'} color={'accent'}>Return to Home</Button>
|
<Button href={'/'} color={'accent'}>Return to Home</Button>
|
||||||
|
|||||||
@@ -2,9 +2,9 @@
|
|||||||
import { page } from '$app/state';
|
import { page } from '$app/state';
|
||||||
import { slide, fade } from 'svelte/transition';
|
import { slide, fade } from 'svelte/transition';
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
|
import { browser } from '$app/environment';
|
||||||
import { navigating } from '$app/state';
|
import { navigating } from '$app/state';
|
||||||
import { LOCATIONS } from '$lib/locations-object.svelte';
|
import { LOCATIONS } from '$lib/locations-object.svelte';
|
||||||
import { nearestStationsState } from '$lib/geohash.svelte';
|
|
||||||
|
|
||||||
import Loading from '$lib/components/ui/Loading.svelte';
|
import Loading from '$lib/components/ui/Loading.svelte';
|
||||||
import TimezoneWarning from '$lib/components/ui/TimezoneWarning.svelte';
|
import TimezoneWarning from '$lib/components/ui/TimezoneWarning.svelte';
|
||||||
@@ -17,7 +17,19 @@
|
|||||||
|
|
||||||
import { IconHome, IconDialpad, IconSettings, IconHelp, IconDots } from '@tabler/icons-svelte';
|
import { IconHome, IconDialpad, IconSettings, IconHelp, IconDots } from '@tabler/icons-svelte';
|
||||||
|
|
||||||
onMount(() => LOCATIONS.init());
|
onMount(async () => {
|
||||||
|
LOCATIONS.init();
|
||||||
|
if (browser && 'serviceWorker' in navigator) {
|
||||||
|
try {
|
||||||
|
const registration = await navigator.serviceWorker.register('/service-worker.js', {
|
||||||
|
type: 'module'
|
||||||
|
});
|
||||||
|
console.info('OwlBoard Service Worker registered', registration.scope);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Service Worker installation failed: ', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
let { children } = $props();
|
let { children } = $props();
|
||||||
|
|
||||||
@@ -147,14 +159,14 @@
|
|||||||
<h1 class="viewport-guard-title">Narrow Gauge Detected</h1>
|
<h1 class="viewport-guard-title">Narrow Gauge Detected</h1>
|
||||||
<p>
|
<p>
|
||||||
Just as trains need the right track width, our data needs a bit more room to stay on the rails.
|
Just as trains need the right track width, our data needs a bit more room to stay on the rails.
|
||||||
Please expand your view to at least 300px to view the app.
|
Please expand your view to at least 320px to view the app.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
header {
|
header {
|
||||||
top: 0;
|
top: 0;
|
||||||
height: 80px;
|
height: var(--header-height);
|
||||||
box-shadow: var(--shadow-std);
|
box-shadow: var(--shadow-std);
|
||||||
}
|
}
|
||||||
.logo-link {
|
.logo-link {
|
||||||
@@ -201,13 +213,12 @@
|
|||||||
min-height: 100dvh;
|
min-height: 100dvh;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-color: var(--color-bg-dark);
|
background-color: var(--color-bg-dark);
|
||||||
background-image: radial-gradient(var(--color-bg-dark), var(--color-bg-light));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
display: flex;
|
display: flex;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
height: 60px;
|
height: var(--nav-height);
|
||||||
box-shadow: var(--shadow-up);
|
box-shadow: var(--shadow-up);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -320,7 +331,7 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 299px) {
|
@media (max-width: 319px) {
|
||||||
.viewport-guard {
|
.viewport-guard {
|
||||||
display: block;
|
display: block;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|||||||
@@ -1,9 +1,10 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount, untrack } from 'svelte';
|
import { onMount, untrack } from 'svelte';
|
||||||
import { quickLinks } from '$lib/quick-links.svelte';
|
import { quickLinks } from '$lib/quick-links.svelte';
|
||||||
import StationAlertCard from '$lib/components/ui/cards/StationAlertCard.svelte';
|
import StationAlertCard from '$lib/components/ui/station-board/StationAlertCard.svelte';
|
||||||
|
|
||||||
import { formatUkDateTime, formatUkTime } from '$lib/utils/time';
|
import { formatUkDateTime, formatUkTime } from '$lib/utils/time';
|
||||||
|
import StaffServicesTable from '$lib/components/ui/station-board/StaffServicesTable.svelte';
|
||||||
let { data } = $props();
|
let { data } = $props();
|
||||||
let now = $state(new Date());
|
let now = $state(new Date());
|
||||||
|
|
||||||
@@ -35,23 +36,29 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="board-wrapper">
|
<section class="board-wrapper">
|
||||||
{#if data.boardData.data.m?.length}
|
|
||||||
<StationAlertCard messages={data.boardData.data.m} />
|
|
||||||
{/if}
|
|
||||||
<div class="time-data">
|
<div class="time-data">
|
||||||
<span class="time-loaded">Updated: {formatUkDateTime(data.boardData.producedAt, true)}</span>
|
<span class="time-loaded">Updated: {formatUkDateTime(data.boardData.producedAt, true)}</span>
|
||||||
<span class="time-now">{formatUkTime(now, true)}</span>
|
<span class="time-now">{formatUkTime(now, true)}</span>
|
||||||
</div>
|
</div>
|
||||||
<pre class="json-dump">{JSON.stringify(data.boardData.data.s, null, 2)}</pre>
|
{#if data.boardData.data.m?.length}
|
||||||
|
<StationAlertCard messages={data.boardData.data.m} />
|
||||||
|
{/if}
|
||||||
|
{#if data.boardData.data.s?.length}
|
||||||
|
<div class="service-list-wrapper">
|
||||||
|
<StaffServicesTable services={data.boardData.data.s} />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.board-wrapper {
|
.board-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
height: calc(100dvh - var(--nav-height) - var(--header-height));
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
overflow: hidden;
|
||||||
gap: 0;
|
gap: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -78,21 +85,13 @@
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
pre {
|
|
||||||
max-width: 100%;
|
.service-list-wrapper {
|
||||||
white-space: pre-wrap;
|
flex: 1;
|
||||||
word-wrap: break-word;
|
overflow-y: auto;
|
||||||
box-sizing: border-box;
|
height: calc(100dvh - 60px);
|
||||||
overflow-x: auto;
|
width: 97%;
|
||||||
}
|
max-width: 700px;
|
||||||
.json-dump {
|
margin-bottom: 5px;
|
||||||
background: #222;
|
|
||||||
color: #0f0;
|
|
||||||
padding: 1rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
max-height: 500px;
|
|
||||||
width: 95%;
|
|
||||||
margin: 1rem auto;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
83
src/service-worker.ts
Normal file
83
src/service-worker.ts
Normal file
@@ -0,0 +1,83 @@
|
|||||||
|
/// <reference types="@sveltejs/kit" />
|
||||||
|
/// <reference lib="webworker" />
|
||||||
|
|
||||||
|
import type { ApiEnvelope } from '@owlboard/api-schema-types';
|
||||||
|
import { build, files, version } from '$service-worker';
|
||||||
|
|
||||||
|
const sw = self as unknown as ServiceWorkerGlobalScope;
|
||||||
|
const CACHE_NAME = `owlboard-cache-${version}`;
|
||||||
|
const ASSETS = [
|
||||||
|
...build,
|
||||||
|
...files.filter((file) => !file.endsWith('manifest.json') && !file.startsWith('/icons/')),
|
||||||
|
'/'
|
||||||
|
];
|
||||||
|
|
||||||
|
sw.addEventListener('install', (event) => {
|
||||||
|
sw.skipWaiting();
|
||||||
|
event.waitUntil(caches.open(CACHE_NAME).then((cache) => cache.addAll(ASSETS)));
|
||||||
|
});
|
||||||
|
|
||||||
|
sw.addEventListener('activate', (event) => {
|
||||||
|
event.waitUntil(
|
||||||
|
Promise.all([
|
||||||
|
caches.keys().then((keys) => {
|
||||||
|
return Promise.all(
|
||||||
|
keys.filter((key) => key !== CACHE_NAME).map((key) => caches.delete(key))
|
||||||
|
);
|
||||||
|
}),
|
||||||
|
sw.clients.claim()
|
||||||
|
])
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
sw.addEventListener('fetch', (event) => {
|
||||||
|
const { request } = event;
|
||||||
|
if (request.method !== 'GET') return;
|
||||||
|
|
||||||
|
const url = new URL(request.url);
|
||||||
|
|
||||||
|
// Uncached static assets
|
||||||
|
if (url.pathname.endsWith('manifest.json') || url.pathname.includes('/icons/')) {
|
||||||
|
event.respondWith(fetch(request));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 1. 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)
|
||||||
|
if (url.pathname.startsWith('/api') || url.hostname.includes('api')) {
|
||||||
|
event.respondWith(
|
||||||
|
fetch(request).catch(() => {
|
||||||
|
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' }
|
||||||
|
});
|
||||||
|
})
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3. Navigation Fallback (The Offline 404 Catch-All)
|
||||||
|
// This catches top-level page navigations and hard refreshes
|
||||||
|
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.
|
||||||
|
return caches.match('/') as Promise<Response>;
|
||||||
|
})
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
});
|
||||||
BIN
static/icons/apple-touch-icon.png
Normal file
BIN
static/icons/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
static/icons/icon-192.png
Normal file
BIN
static/icons/icon-192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
static/icons/icon-512.png
Normal file
BIN
static/icons/icon-512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
static/icons/maskable-512.png
Normal file
BIN
static/icons/maskable-512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
62
static/manifest.json
Normal file
62
static/manifest.json
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
{
|
||||||
|
"name": "OwlBoard",
|
||||||
|
"short_name": "OwlBoard",
|
||||||
|
"description": "Real-time UK rail data and operational tools for staff and enthusiasts.",
|
||||||
|
"id": "/",
|
||||||
|
"start_url": "/",
|
||||||
|
"scope": "/",
|
||||||
|
"display": "standalone",
|
||||||
|
"display_override": [
|
||||||
|
"window-controls-overlay",
|
||||||
|
"standalone",
|
||||||
|
"minimal-ui"
|
||||||
|
],
|
||||||
|
"background_color": "#404c55",
|
||||||
|
"theme_color": "#4fd1d1",
|
||||||
|
"orientation": "portrait",
|
||||||
|
"categories": [
|
||||||
|
"transportation",
|
||||||
|
"utilities"
|
||||||
|
],
|
||||||
|
"dir": "ltr",
|
||||||
|
"lang": "en-GB",
|
||||||
|
"prefer_related_applications": false,
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "/icons/icon-192.png",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png",
|
||||||
|
"purpose": "any"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "/icons/icon-512.png",
|
||||||
|
"sizes": "512x512",
|
||||||
|
"type": "image/png",
|
||||||
|
"purpose": "any"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "/icons/maskable-512.png",
|
||||||
|
"sizes": "512x512",
|
||||||
|
"type": "image/png",
|
||||||
|
"purpose": "maskable"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"shortcuts": [
|
||||||
|
{
|
||||||
|
"name": "Find PIS",
|
||||||
|
"short_name": "PIS",
|
||||||
|
"description": "Find PIS Codes fast",
|
||||||
|
"url": "/pis",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "/icons/icon-192.png",
|
||||||
|
"sizes": "192x192"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"handle_links": "preferred",
|
||||||
|
"launch_handler": {
|
||||||
|
"client_mode": "focus-existing"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
static/type/inconsolata/latin-wdth-normal.woff2
Normal file
BIN
static/type/inconsolata/latin-wdth-normal.woff2
Normal file
Binary file not shown.
Reference in New Issue
Block a user