diff --git a/src/lib/components/ui/LiveIndicator.svelte b/src/lib/components/ui/LiveIndicator.svelte
deleted file mode 100644
index 34c93bd..0000000
--- a/src/lib/components/ui/LiveIndicator.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/src/routes/board/+page.svelte b/src/routes/board/+page.svelte
index bd929db..8934889 100644
--- a/src/routes/board/+page.svelte
+++ b/src/routes/board/+page.svelte
@@ -6,12 +6,14 @@
import { formatUkDateTime, formatUkTime } from '$lib/utils/time';
import StaffServicesTable from '$lib/components/ui/station-board/StaffServicesTable.svelte';
- import LiveIndicator from '$lib/components/ui/LiveIndicator.svelte';
import StaffServicesGrid from '$lib/components/ui/station-board/StaffServicesGrid.svelte';
let { data } = $props();
let now = $state(new Date());
- let live = $state(false);
+ let dataAgeInSeconds = $derived(
+ Math.floor((now.getTime() - new Date(data.boardData.producedAt).getTime()) / 1000)
+ );
+ let live = $derived(dataAgeInSeconds < 45);
// Handle auto-refreshing & Wake-lock
$effect(() => {
@@ -50,10 +52,8 @@
await invalidateAll();
} catch (error) {
console.error("Background data fetch failed: ", error)
- live = false;
}
- }, 60100);
- live = true;
+ }, 20000);
console.log("Polling started")
};
@@ -66,11 +66,12 @@
await releaseWakeLock();
};
- const handleVisibilityChange = () => {
+ const handleVisibilityChange = async () => {
if (document.hidden) {
stopPolling();
} else {
startPolling();
+ await invalidateAll();
}
};
@@ -115,17 +116,15 @@ $effect(() => {
-
Updated: {formatUkDateTime(data.boardData.producedAt, true)}
+
+
+
Updated: {formatUkDateTime(data.boardData.producedAt, true)}
+
{formatUkTime(now, true)}
{#if data.boardData.data.m?.length}
{/if}
- {#if live}
-
-
-
- {/if}
{#if data.boardData.data.s?.length}
@@ -155,6 +154,42 @@ $effect(() => {
font-family: 'URW Gothic', sans-serif;
}
+ .loadedlive {
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ gap: 1rem;
+ }
+
+ .liveflash {
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ transition: all 0.3s ease;
+ }
+
+ div.notLive {
+ background-color: #ef4444;
+ animation:
+ led-blink 1s steps(1, start) infinite,
+ led-halo-expand 1s steps(1, start) infinite;
+ }
+
+ div.isLive {
+ background-color: #10b981;
+ animation:
+ led-pulse 2.5s infinite ease-in-out;
+ }
+
+ @keyframes led-blink {
+ 0%,100%{opacity:1;}
+ 50%{opacity:0.2;filter:saturate(0.2)}
+ }
+ @keyframes led-pulse{
+ 0%,100%{opacity: 1;filter:saturate(1);box-shadow: 0 0 6px 1px rgba(16,185,129,0.4)}
+ 50%{opacity: 0.2;filter:saturate(0.2);box-shadow:0 0 2px 0px rgba(16,185,129,0.1)}
+ }
+
.time-loaded,
.time-now {
font-variant-numeric: tabular-nums;