Add delay component

src/lib/VehicleMarker.svelte

@@ -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]}>
-    <h4>{lineNumber}: {lineName}</h4>
+    <div class="popover-content">
-    <p>Going from <i>{origin}</i> to <i>{destination}</i></p>
+      <h4>{lineNumber}: {lineName}</h4>
-    <ul>
+      <p>
-      <li>Occupancy: {occupancy}</li>
+        Going from <i>{origin}</i> to <i>{destination}</i>
-      <li>Delay: {delay}</li>
+        <br />
-    </ul>
+        <Delay {delay} />
+      </p>
+    </div>
     
   </Popup>
 </Marker>

src/lib/micro/Delay.svelte

@@ -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>