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

Add bus and ferry to staffLDB

Browse Source
This commit is contained in:
Fred Boniface
2023-07-08 21:54:33 +01:00
parent b6dca2df78
commit 13d3bc4dbe
13 changed files with 404 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/lib/overlays/welcome.svelte
View File

@@ -1,10 +1,11 @@
<script>
import OverlayIsland from '$lib/islands/overlay-island.svelte';
import { welcome } from '$lib/stores/welcome';
import { fade } from 'svelte/transition';
import { version } from '$lib/stores/version';
const variables = {
title: 'Welcome to OwlBoard'
};
const version = '2023.7.1';
let pageNum = 0;
function pageUp() {
@@ -17,31 +18,93 @@
console.log(`Welcome page: ${pageNum}`);
}
function close() {
welcome.set(version);
}
const pageText = [
'<h3>A brand new look</h3>' +
'<p>OwlBoard has a brand new look, making it even faster for you to access the data</p>' +
"<p>If you have signed up before, you won't have to to it again and any customised Quick Links are here waiting for you</p>",
'<h3>Faster Access</h3>' +
'<p>Both live station data, and timetable search is available from the homepage. Making it faster to get the info you need</p>' +
'<p>Search the timetable using a headcode to see a trains details - OwlBoard now shows data for all TOCs and FOCs.</p>' +
"<p>For GWR services: if a PIS code is available for a service, you'll see it alongside the train details.</p>",
'<h3>PIS Finder</h3>' +
"<p>Don't worry, the PIS finder hasn't gone away. It has even been moved to the new navigation bar for faster access</p>" +
"<p>If there isn't a PIS code available for a given headcode, you can use this tool to search by start and end stations, enabling you to utilise a different code and skipping stops as needed.</p>",
'<h3>Everything Else</h3>' + "<p>Everything else has moved to the 'More' menu, where you'll find the Reference Code lookup and software details."
"<p>OwlBoard has a brand new look, making it even faster for you to access the data - you won't have to register again.</p>" +
"<p><strong>Live station data</strong> is still available right from the homepage. If you are signed up, you'll get improved data from the <strong>Staff board</strong></p>" +
'<p><strong>Train Data & PIS</strong> is now available right from the homepage if you are searching by headcode, for other PIS searches, the PIS finder is in the bottom menu</p>',
'<h3>Staff Station Boards</h3>' +
'<p>If you are registered, staff station boards will be available.</p>' +
'<p>Staff boards will show hidden platform numbers as well as ECS moves</p>' +
'<p>You can also tap on a train to see live train data.</p>',
'<h3>Everything Else</h3>' +
"<p>Everything else has moved to the 'More' menu, where you'll find the Reference Code lookup and software details." +
'<br>' +
"<p>You won't see this welcome screen again</p>"
];
</script>
<OverlayIsland {variables}>
<div id="popup" in:fade={{ delay: 500, duration: 300 }} out:fade={{ duration: 300 }}>
<h2>What's new in OwlBoard {version}</h2>
<div>
{@html pageText[pageNum]}
</div>
<button type="button" on:click={pageDn}>&lt;</button>
<button type="button" on:click={pageUp}>&gt;</button>
</OverlayIsland>
{#key pageNum}
<div in:fade={{ delay: 300 }} out:fade={{ duration: 200 }}>
{@html pageText[pageNum] || "You won't see this welcome message again"}
</div>
{/key}
{#if pageNum >= pageText.length - 1}
<button in:fade={{ delay: 350, duration: 250 }} out:fade={{ duration: 250 }} class="navButton" id="buttonCentre" type="button" on:click={close}>X</button>
{/if}
{#if pageNum > 0 && pageNum < pageText.length}
<button in:fade={{ delay: 350, duration: 250 }} out:fade={{ duration: 250 }} class="navButton" id="buttonLeft" type="button" on:click={pageDn}>&lt;</button>
{/if}
{#if pageNum < pageText.length - 1}
<button in:fade={{ delay: 350, duration: 250 }} out:fade={{ duration: 250 }} class="navButton" id="buttonRight" type="button" on:click={pageUp}>&gt;</button>
{/if}
</div>
<style>
#popup {
position: fixed;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
width: 85%;
height: 85vh;
overflow-y: auto;
max-width: 400px;
margin: auto;
margin-top: 25px;
padding: 10px;
background-color: grey;
border-radius: 10px;
z-index: 2500;
}
.navButton {
border-radius: 50px;
border: none;
color: white;
background-color: var(--overlay-color);
width: 50px;
height: 50px;
font-size: 20px;
font-weight: 600;
bottom: 50px;
}
#buttonLeft {
position: absolute;
margin: auto;
left: 50px;
}
#buttonCentre {
position: absolute;
margin: auto;
left: 50%;
transform: translateX(-50%);
}
#buttonRight {
position: absolute;
margin: auto;
right: 50px;
}
div {
color: white;
}