Add train detail accordians

src/lib/train/train-detail.svelte

@@ -0,0 +1,109 @@
+<script>
+	import { fly } from "svelte/transition";
+
+    export let service = ""
+
+    let isExpanded = false;
+
+    async function expand() {
+        isExpanded = !isExpanded
+    }
+</script>
+
+<div class="container">
+    <div class="container-header" on:click={expand} on:keypress={expand}>
+        <span class="header">{service.operator || "GW"}: {service.stops[0]['publicDeparture'] || service.stops[0]['wttDeparture']} {service.stops[0]['tiploc']} to {service.stops[service['stops'].length -1]['tiploc']}</span>
+        <span id="container-arrow" class:isExpanded>V</span>
+    </div>
+        {#if isExpanded}
+            <div class="container-detail" in:fly out:fly>
+                {#if service.pis}
+                    <p class="pis">PIS: {service.pis}</p>
+                {/if}
+                <p class="svc-detail">Planned Type: {parseInt(service.planSpeed) || 68 }mph {service.powerType || "Bus" }</p>
+                <p class="svc-detail">Days Run: {service.daysRun.join(", ").toUpperCase()}</p>
+                <table>
+                    <tr>
+                        <th>Location</th>
+                        <th>Sch Arr.</th>
+                        <th>Sch Dep.</th>
+                    </tr>
+                    {#if service.stops[0]['publicDeparture']}
+                        {#each service.stops as stop}
+                            {#if stop.publicArrival || stop.publicDeparture}
+                                <tr>  
+                                    <td>{stop.tiploc}</td>
+                                    <td>{stop.publicArrival || '-'}</td>
+                                    <td>{stop.publicDeparture || '-'}</td>
+                                </tr>
+                            {/if}
+                        {/each}
+                    {:else}
+                        {#each service.stops as stop}
+                            <tr>
+                                <td>{stop.tiploc}</td>
+                                <td>{stop.wttArrival || '-'}</td>
+                                <td>{stop.wttDeparture || '-'}</td>
+                            </tr>
+                        {/each}
+                    {/if}
+                </table>
+            </div>
+        {/if}
+</div>
+
+<style>
+    .container {
+        position: relative;
+        margin: auto;
+        margin-bottom: 20px;
+        width: 95%;
+        max-width: 600px;
+        min-width: 300px;
+        height: auto;
+        background-color: var(--overlay-color);
+        border-radius: 10px;
+        transition-duration: 500ms;
+    }
+    .container-header {
+        text-align: left;
+        padding-left: 10px;
+        font-size: 18px;
+        font-weight: 600;
+        padding-top: 10px;
+        padding-bottom: 10px;
+    }
+    #container-arrow {
+        font-family: Arial, Helvetica, sans-serif;
+        font-weight: 600;
+        color: white;
+        margin: 0;
+        padding: 0;
+        position: absolute;
+        right: 16px;
+        top: 13px;
+        transition-duration: 500ms;
+        z-index: 2;
+    }
+    .isExpanded {
+        transform: rotate(180deg); 
+    }
+    .pis {
+        font-size: 18px;
+        font-weight: 600;
+        color: azure;
+        margin-top: 10px;
+        margin-bottom: 5px;
+    }
+    .svc-detail {
+        margin-top: 2px;
+        margin-bottom: 2px;
+        color: white;
+    }
+    table {
+        margin: auto;
+        padding-top: 10px;
+        padding-bottom: 10px;
+        color: white;
+    }
+</style>

src/routes/train/+page.svelte

@@ -6,6 +6,7 @@
     import { uuid } from '$lib/stores/uuid';
     
     import { onMount } from 'svelte'
+	import TrainDetail from '$lib/train/train-detail.svelte';
 
     let title = "Timetable Results"
     let id = ""
@@ -68,6 +69,7 @@
 </script>
 
 <Header {title} />
+<div id="whitespace"></div>
 
 {#if error}
 <Island>
@@ -80,63 +82,18 @@
 {/if}
  
 {#each data as service}
-  {#if service.stops[0]['publicDeparture']}
+  <TrainDetail {service} />
-    <h2>GW: {service.stops[0]['publicDeparture']} {service.stops[0]['tiploc']} to {service.stops[service['stops'].length -1]['tiploc']}</h2>
-    <p>PIS: {service.pis}</p>
-    <table>
-      <tr>
-        <th>Location</th>
-        <th>Sch Arr.</th>
-        <th>Sch Dep.</th>
-      </tr>
-    {#each service.stops as stop}
-      {#if stop.publicArrival || stop.publicDeparture}
-        <tr>  
-          <td>{stop.tiploc}</td>
-          <td>{stop.publicArrival || '-'}</td>
-          <td>{stop.publicDeparture || '-'}</td>
-        </tr>
-      {/if}
-    {/each}
-    </table>
-  {:else}
-    <h2>GW: {service.stops[0]['wttDeparture']} {service.stops[0]['tiploc']} to {service.stops[service['stops'].length -1]['tiploc']}</h2>
-    <p>PIS: {service.pis}</p>
-    <table>
-      <tr>
-        <th>Location</th>
-        <th>Sch Arr.</th>
-        <th>Sch Dep.</th>
-      </tr>
-    {#each service.stops as stop}
-      <tr>
-        <td>{stop.tiploc}</td>
-        <td>{stop.wttArrival || '-'}</td>
-        <td>{stop.wttDeparture || '-'}</td>
-      </tr>
-    {/each}
-    </table>
-  {/if}
 {/each}
  
 <Nav />
 
 <style>
-  h2 {
+  #whitespace {
-    margin-top: 20px;
+    height: 15px;
   }
   p {
     color: white;
     font-size: 18px;
     font-weight: 600;
   }
-  table {
-    margin: auto;
-    color: white;
-    font-size: 16px;
-  }
-  th, td {
-    padding-left: 8px;
-    padding-right: 8px;
-  }
 </style>