Add delay component

This commit is contained in:
Vegard Berg 2023-10-11 19:15:04 +02:00
parent bd2be948eb
commit 52c38966c4
2 changed files with 37 additions and 6 deletions

View File

@ -1,5 +1,6 @@
<script lang="ts">
import { Marker, Popup } from 'svelte-maplibre';
import Delay from './micro/Delay.svelte';
export let lngLat: [number, number];
export let lineNumber: string;
@ -20,6 +21,12 @@ console.log("lineNumber: %s", lineNumber)
color: black;
background-color: white;;
}
div.popover-content {
color: black;
background-color: white;
}
</style>
<Marker {lngLat}>
@ -33,12 +40,14 @@ console.log("lineNumber: %s", lineNumber)
<Popup openOn="hover" offset={[0, -10]}>
<div class="popover-content">
<h4>{lineNumber}: {lineName}</h4>
<p>Going from <i>{origin}</i> to <i>{destination}</i></p>
<ul>
<li>Occupancy: {occupancy}</li>
<li>Delay: {delay}</li>
</ul>
<p>
Going from <i>{origin}</i> to <i>{destination}</i>
<br />
<Delay {delay} />
</p>
</div>
</Popup>
</Marker>

View File

@ -0,0 +1,22 @@
<script lang="ts">
/** The delay in seconds.*/
export let delay: number;
let delay_min = Math.round(delay / 60);
let delay_abs = Math.abs(delay_min);
</script>
<div>
The bus is
{#if delay_min == 1}
<span>one minute delayed.</span>
{:else if delay_min > 1}
<span>{delay_abs} minutes delayed.</span>
{:else if delay_min == -1}
<span>one minute ahead of schedule.</span>
{:else if delay_min < -1}
<span>{delay_abs} minutes ahead of schedule.</span>
{:else}
<span>on time.</span>
{/if}
</div>