Add NRCC messages to publicldb
This commit is contained in:
parent
1d138b629d
commit
f2dc5d25e0
112
src/lib/ldb/alert-bar.svelte
Normal file
112
src/lib/ldb/alert-bar.svelte
Normal file
@ -0,0 +1,112 @@
|
||||
<script>
|
||||
import { fly } from "svelte/transition";
|
||||
|
||||
export let alerts = [];
|
||||
$: uniqueAlerts = [...new Set(alerts)];
|
||||
|
||||
let displayAlerts = false;
|
||||
|
||||
async function alertsToggle() {
|
||||
displayAlerts = !displayAlerts
|
||||
}
|
||||
|
||||
function numberAsWord(number) {
|
||||
const words = ['zero', 'one', 'two','three','four','five','six','seven','eight'];
|
||||
let word = words[number];
|
||||
if (word) {
|
||||
return word;
|
||||
}
|
||||
return number;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div id="block"><!--Prevent content slipping underneath the bar--></div>
|
||||
<div id="bar">
|
||||
<img src="/images/navigation/alert.svg" alt="">
|
||||
{#if uniqueAlerts.length == 1}
|
||||
<p id="bartext">There is one active alert</p>
|
||||
{:else if uniqueAlerts.length > 1}
|
||||
<p id="bartext">There are {numberAsWord(uniqueAlerts.length)} active alerts</p>
|
||||
{:else}
|
||||
<p id="bartext">There are no active alerts</p>
|
||||
{/if}
|
||||
<button id="arrow" class:displayAlerts on:click={alertsToggle}>V</button>
|
||||
</div>
|
||||
{#if displayAlerts}
|
||||
<div id="alerts" in:fly={{ y:-200, duration: 500}} out:fly={{ y: -200, duration: 800 }}>
|
||||
{#each uniqueAlerts as msg}
|
||||
<p class="alert">{@html msg}</p>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
#block {
|
||||
height: 40px;
|
||||
}
|
||||
#bar {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background-color: var(--main-alert-color);
|
||||
opacity: 1;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 50px;
|
||||
left: 0px;
|
||||
z-index: 10;
|
||||
}
|
||||
img {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 8px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#bartext {
|
||||
color: white;
|
||||
margin: auto;
|
||||
font-weight: 600;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
#arrow{
|
||||
color: white;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-weight: 900;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
#arrow:focus {
|
||||
background-color: transparent;
|
||||
}
|
||||
#alerts {
|
||||
position: fixed;
|
||||
background-color: var(--main-alert-color);
|
||||
opacity: 0.9;
|
||||
width: 100%;
|
||||
max-height: 40%;
|
||||
overflow-y: scroll;
|
||||
left: 0;
|
||||
top: 89px;
|
||||
}
|
||||
.alert {
|
||||
color: white;
|
||||
text-align: center;
|
||||
width: 80%;
|
||||
margin:auto;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.displayAlerts {
|
||||
transition-duration: 500ms;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
</style>
|
||||
@ -4,6 +4,7 @@
|
||||
import { onMount } from 'svelte'
|
||||
import Loading from '$lib/navigation/loading.svelte';
|
||||
import OverlayIsland from '$lib/islands/overlay-island.svelte';
|
||||
import AlertBar from './alert-bar.svelte';
|
||||
|
||||
let requestedStation;
|
||||
$: requestedStation = station;
|
||||
@ -15,6 +16,7 @@
|
||||
let dataAge = null;
|
||||
let isLoading = true;
|
||||
let dataExists = false;
|
||||
let alerts = [];
|
||||
let serviceDetail;
|
||||
|
||||
$: {
|
||||
@ -61,6 +63,7 @@
|
||||
} finally {
|
||||
isLoading = false; // Clear loading state
|
||||
}
|
||||
prepareNrcc()
|
||||
}
|
||||
|
||||
function parseTime(string){
|
||||
@ -123,6 +126,18 @@
|
||||
serviceDetail = null;
|
||||
}
|
||||
|
||||
async function prepareNrcc() {
|
||||
if (jsonData?.GetStationBoardResult?.nrccMessages?.message) {
|
||||
const nrcc = jsonData.GetStationBoardResult.nrccMessages.message;
|
||||
if (Array.isArray(nrcc)) {
|
||||
alerts = nrcc
|
||||
return;
|
||||
}
|
||||
alerts.push(nrcc);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (requestedStation && jsonData === null) {
|
||||
fetchData();
|
||||
@ -130,6 +145,10 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if alerts.length}
|
||||
<AlertBar {alerts}/>
|
||||
{/if}
|
||||
|
||||
{#if isLoading}
|
||||
<Loading />
|
||||
{:else}
|
||||
|
||||
@ -23,6 +23,7 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 50px;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
img {
|
||||
|
||||
10
static/images/navigation/alert.svg
Normal file
10
static/images/navigation/alert.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg enable-background="new 0 0 448 433" version="1.1" viewBox="0 0 448 433" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://web.resource.org/cc/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
|
||||
<radialGradient id="a" cx="216.7" cy="393.79" r="296.7" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#F4D708" offset="0"/>
|
||||
<stop stop-color="#FCB400" offset="1"/>
|
||||
</radialGradient>
|
||||
<path d="m8.551 390.5 184.85-368.8s26.409-31.504 52.815 0c26.41 31.501 180.19 370.65 180.19 370.65s3.105 18.534-27.961 18.534-361.94 0-361.94 0-23.299 0-27.959-20.38z" fill="url(#a)"/>
|
||||
<path d="m8.551 390.5 184.85-368.8s26.409-31.504 52.815 0c26.41 31.501 180.19 370.65 180.19 370.65s3.105 18.534-27.961 18.534-361.94 0-361.94 0-23.299 0-27.959-20.38z" fill="none" stroke="#E2A713" stroke-width="5"/>
|
||||
<path d="m212.5 292.63c-13.168-79.969-19.75-123.12-19.75-129.45 0-7.703 2.551-13.926 7.66-18.676 5.105-4.746 10.871-7.121 17.293-7.121 6.949 0 12.82 2.535 17.609 7.598s7.188 11.023 7.188 17.883c0 6.543-6.668 49.801-20 129.77h-10zm27 38.17c0 6.098-2.156 11.301-6.469 15.613-4.313 4.309-9.461 6.465-15.453 6.465-6.098 0-11.301-2.156-15.613-6.465-4.313-4.313-6.465-9.516-6.465-15.613 0-5.992 2.152-11.141 6.465-15.453s9.516-6.469 15.613-6.469c5.992 0 11.141 2.156 15.453 6.469s6.48 9.45 6.48 15.44z"/>
|
||||
<metadata><rdf:RDF><cc:Work><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><cc:license rdf:resource="http://creativecommons.org/licenses/publicdomain/"/><dc:publisher><cc:Agent rdf:about="http://openclipart.org/"><dc:title>Openclipart</dc:title></cc:Agent></dc:publisher><dc:title>Warning Notification</dc:title><dc:date>2007-02-08T17:08:47</dc:date><dc:description>Beveled yellow caution sign</dc:description><dc:source>http://openclipart.org/detail/3130/warning-notification-by-eastshores</dc:source><dc:creator><cc:Agent><dc:title>eastshores</dc:title></cc:Agent></dc:creator><dc:subject><rdf:Bag><rdf:li>alert</rdf:li><rdf:li>caution</rdf:li><rdf:li>clip art</rdf:li><rdf:li>clipart</rdf:li><rdf:li>icon</rdf:li><rdf:li>image</rdf:li><rdf:li>media</rdf:li><rdf:li>public domain</rdf:li><rdf:li>svg</rdf:li><rdf:li>warning</rdf:li></rdf:Bag></dc:subject></cc:Work><cc:License rdf:about="http://creativecommons.org/licenses/publicdomain/"><cc:permits rdf:resource="http://creativecommons.org/ns#Reproduction"/><cc:permits rdf:resource="http://creativecommons.org/ns#Distribution"/><cc:permits rdf:resource="http://creativecommons.org/ns#DerivativeWorks"/></cc:License></rdf:RDF></metadata></svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
Loading…
Reference in New Issue
Block a user