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';
  import TrainDetail from '$lib/train/train-detail.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;
      if (!data.length) {
        error = true;
        errMsg = 'No services found';
      }
    }
    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}`;
    try {
      const res = await fetch(url, options);
    } catch (err) {
      error = true;
      errMsg = 'Connection error, try again later';
    }
    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} />
<div id="whitespace" />

{#if error}
  <Island>
    <p style="font-weight:600">{errMsg}</p>
  </Island>
{/if}

{#if isLoading}
  <Loading />
{/if}

{#each data as service}
  <TrainDetail {service} />
{/each}

<Nav />

<style>
  #whitespace {
    height: 15px;
  }
  p {
    color: white;
    font-size: 18px;
    font-weight: 600;
  }
</style>