Train results complete

src/routes/train/+page.svelte

@@ -8,6 +8,14 @@
     let id = ""
     let data = [];
 
+    $: {
+      if (id) {
+        title = id.toUpperCase();
+      } else {
+        title = "Querying Timetable"
+      }
+    }
+
     async function getHeadcode() {
         return new URLSearchParams(window.location.search).get('headcode');
     }
@@ -33,16 +41,62 @@
 
 <Header {title} />
  
-<p>{id.toUpperCase()}</p> <!-- NOT REACTIVE YET -->
-
 {#each data as service}
-  <h2>{service.stops[0]['publicDeparture']} {service.stops[0]['tiploc']} to {service.stops[service['stops'].length -1]['tiploc']}</h2>
-  <p>PIS: {service.pis}</p>
-  {#each service.stops as stop}
-    <p>{stop.tiploc}</p>
-  {/each}
+  {#if service.stops[0]['publicDeparture']}
+    <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}
-
-<p id="data_raw"></p>
  
-<Nav />
+<Nav />
+
+<style>
+  h2 {
+    margin-top: 50px;
+  }
+  p {
+    font-size: 20px;
+    font-weight: 600;
+  }
+  table {
+    margin: auto;
+    font-size: 20px;
+  }
+  th, td {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+</style>