From 52c38966c4cab2da0c3b6afc578501aa406b2ad2 Mon Sep 17 00:00:00 2001
From: Vegard Berg <mail@myrkvi.com>
Date: Wed, 11 Oct 2023 19:15:04 +0200
Subject: [PATCH] Add delay component

---
 src/lib/VehicleMarker.svelte | 21 +++++++++++++++------
 src/lib/micro/Delay.svelte   | 22 ++++++++++++++++++++++
 2 files changed, 37 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/micro/Delay.svelte

diff --git a/src/lib/VehicleMarker.svelte b/src/lib/VehicleMarker.svelte
index 6e256a7..49802d1 100644
--- a/src/lib/VehicleMarker.svelte
+++ b/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>
-    <p>Going from <i>{origin}</i> to <i>{destination}</i></p>
-    <ul>
-      <li>Occupancy: {occupancy}</li>
-      <li>Delay: {delay}</li>
-    </ul>
+    <div class="popover-content">
+      <h4>{lineNumber}: {lineName}</h4>
+      <p>
+        Going from <i>{origin}</i> to <i>{destination}</i>
+        <br />
+        <Delay {delay} />
+      </p>
+    </div>
     
   </Popup>
 </Marker>
\ No newline at end of file
diff --git a/src/lib/micro/Delay.svelte b/src/lib/micro/Delay.svelte
new file mode 100644
index 0000000..1ec80ed
--- /dev/null
+++ b/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>
\ No newline at end of file