Begin implementation of train data page

src/routes/train/+page.svelte

@@ -4,19 +4,27 @@
     
     import { onMount } from 'svelte'
 
-    const title = "Timetable Results"
+    let title = "Timetable Results"
+    let id = ""
+    let data = [];
 
     async function getHeadcode() {
         return new URLSearchParams(window.location.search).get('headcode');
     }
 
     onMount(async () => {
-        const headcode = await getHeadcode();
-        document.getElementById('headcode').textContent = headcode;
-        const data = await fetch(`https://owlboard.info/api/v1/train/headcode/today/${headcode}`)
-        document.getElementById('data_raw').textContent = await data.text();
+        id = await getHeadcode() || "";
+        data = await fetchData(id);
     })
 
+    async function fetchData(id = "") {
+        const date = 'now';
+        const searchType = 'headcode'
+        const url = `https://owlboard.info/api/v2/timetable/train/${date}/${searchType}/${id}`
+        const res = await fetch(url);
+        return await res.json();
+    } 
+
 </script>
  
 <svelte:head>
@@ -25,7 +33,15 @@
 
 <Header {title} />
  
- <p>Headcode: <span id="headcode"></span></p>
+<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}
+{/each}
 
 <p id="data_raw"></p>