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';
  import { getApiUrl } from '$lib/scripts/upstream';
  import PisHandler from '$lib/train/pis-handler.svelte';

  export let service = '';

  let isExpanded = false;

  async function getTrainByUID(tuid = '') {
    const url = `${getApiUrl()}/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>

<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}
        {#if serviceDetail.stpIndicator === 'C'}
          <p class="text-message">This has been removed from the timetable for today.<br /><br>
          The service will not run, another service may be running in its place.</p>
        {:else}
          {#if serviceDetail.vstp}
            <div class="vstp">VSTP</div>
          {/if}
          <div class="detailOperator"><StylesToc toc={service?.operator || ''} full={true} /></div>
          {#if serviceDetail.pis}
            <PisHandler pisObject={serviceDetail.pis} />
          {/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.scheduleStart).toLocaleDateString('en-GB', {
              timeZone: 'UTC'
            })} - {new Date(serviceDetail.scheduleEnd).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>
        {/if}
      {: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(--island-bg-solid);
    border-radius: 10px;
    overflow: hidden;
    transition: height 500ms ease-in-out;
    box-shadow: 5px 5px 30px var(--box-shadow-color);
  }
  .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: var(--island-text-color);
  }
  #container-arrow {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    color: var(--island-text-color);
    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;
  }
  .svc-detail {
    margin-top: 6px;
    margin-bottom: 2px;
    color: var(--island-text-color);
  }
  .validity {
    font-size: 14px;
  }
  table {
    margin: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    color: var(--island-text-color);
  }
  .text-message {
    margin: 5px;
    margin-left: 20px;
    margin-right: 20px;
    padding-bottom: 10px;
  }
  .vstp {
    background-color: red;
    margin: auto;
    padding: 5px;
    width: 50px;
    border-radius: 5px;
    border-color: darkred;
    font-weight: bolder;
  }
</style>