owlboard-svelte/src/routes/train/+page.svelte

<script>
    import Header from '$lib/navigation/header.svelte'
	  import Loading from '$lib/navigation/loading.svelte';
    import Island from '$lib/islands/island.svelte';
    import Nav from '$lib/navigation/nav.svelte';
    import { uuid } from '$lib/stores/uuid';
    
    import { onMount } from 'svelte'

    let title = "Timetable Results"
    let id = ""
    let data = [];
    let isLoading = true;
    let error = false;
    let errMsg = "";

    $: {
      if (id) {
        title = id.toUpperCase();
      } else {
        title = "Querying Timetable"
      }
    }

    async function getHeadcode() {
        return new URLSearchParams(window.location.search).get('headcode');
    }

    onMount(async () => {
        isLoading = true;
        id = await getHeadcode() || "";
        const res = await fetchData(id);
        if (res) {
          data = res;
        }
        isLoading = false;
    })

    async function fetchData(id = "") {
        const date = 'now';
        const searchType = 'headcode'
        const options = {
            method: "GET",
            headers: {
                "uuid": $uuid
            }
        }
        const url = `https://owlboard.info/api/v2/timetable/train/${date}/${searchType}/${id}`
        const res = await fetch(url, options);
        isLoading = false;
        if (res.status == 200) {
            return await res.json();
        } else if (res.status === 401) {
          error = true;
          errMsg = "You must be logged into the staff version for this feature"
          return false;
        } else {
          error = true;
          errMsg = "Unable to connect, check your connection and try again"
          return false;
        }
    } 

</script>

<Header {title} />

{#if error}
<Island>
  <p class="error">{errMsg}</p>
</Island>
{/if}

{#if isLoading}
  <Loading />
{/if}
 
{#each data as service}
  {#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}
 
<Nav />

<style>
  h2 {
    margin-top: 20px;
  }
  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>