owlboard-svelte/src/lib/train/train-detail.svelte

<script>
  import { fly } from 'svelte/transition';
  import { uuid } from '$lib/stores/uuid';
  import LoadingText from '$lib/navigation/loading-text.svelte';
  import StylesToc from './styles-toc.svelte';

  export let service = '';

  let isExpanded = false;

  async function getTrainByUID(tuid = '') {
    const url = `https://owlboard.info/api/v2/timetable/train/now/byTrainUid/${tuid}`;
    const options = {
      method: 'GET',
      headers: {
        uuid: $uuid
      }
    };
    const res = await fetch(url, options);
    if (res.status === 200) {
      return await res.json();
    } else {
      throw new Error('Unable to Fetch');
    }
  }

  async function expand() {
    isExpanded = !isExpanded;
  }
</script>

<!-- The next version of backend will only return a subset of information required to display the container-header
      , the container will then be responsible for fetching more data using the trainUid. -->
<div class="container">
  <div class="container-header" on:click={expand} on:keypress={expand}>
    <span class="header"
      ><StylesToc toc={service?.operator || ''} />
      {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={{ y: -20, duration: 200 }}>
      {#await getTrainByUID(service.trainUid)}
        <LoadingText />
      {:then serviceDetail}
        <div class="detailOperator"><StylesToc toc={service?.operator || ''} full={true} /></div>
        {#if serviceDetail.pis}
          <p class="pis">PIS: {serviceDetail.pis}</p>
        {/if}
        <p class="svc-detail">
          Planned Type: {parseInt(serviceDetail.planSpeed) || '--'}mph {serviceDetail.powerType || 'Non-Rail vehicle'}
        </p>
        <p class="svc-detail">
          Days Run: {serviceDetail?.daysRun.join(', ').toUpperCase() || 'Unknown'}
        </p>
        <p class="svc-detail validity">
          Valid From: {new Date(serviceDetail.scheduleStartDate).toLocaleDateString('en-GB', {
            timeZone: 'UTC'
          })} - {new Date(serviceDetail.scheduleEndDate).toLocaleDateString('en-GB', {
            timeZone: 'UTC'
          })}
        </p>
        <table>
          <tr>
            <th>Location</th>
            <th>Sch Arr.</th>
            <th>Sch Dep.</th>
          </tr>
          {#if serviceDetail.stops[0]['publicDeparture']}
            {#each serviceDetail.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 serviceDetail.stops as stop}
              <tr>
                <td>{stop.tiploc}</td>
                <td>{stop.wttArrival || '-'}</td>
                <td>{stop.wttDeparture || '-'}</td>
              </tr>
            {/each}
          {/if}
        </table>
      {:catch}
        <p>Unable to fetch train data</p>
      {/await}
    </div>
  {/if}
</div>

<style>
  .container {
    position: relative;
    margin: auto;
    margin-bottom: 20px;
    width: 95%;
    max-width: 600px;
    height: auto;
    background-color: var(--overlay-color);
    border-radius: 10px;
    overflow: hidden;
    transition: height 500ms ease-in-out;
  }
  .container-header {
    text-align: left;
    padding-left: 10px;
    font-size: 18px;
    font-weight: 600;
    padding-top: 12px;
    padding-bottom: 10px;
    font-family: ubuntu, monospace;
    color: white;
  }
  #container-arrow {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    color: white;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 16px;
    top: 10px;
    transition-duration: 300ms;
    z-index: 2;
  }
  .isExpanded {
    transform: rotate(180deg);
  }
  .detailOperator {
    padding-top: 15px;
    margin-bottom: 15px;
    font-weight: 600;
  }
  .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;
  }
  .validity {
    font-size: 14px;
  }
  table {
    margin: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;
  }
</style>