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

<script>
  import OverlayIsland from '$lib/islands/overlay-island.svelte';
  import { fade } from 'svelte/transition';
  import Reason from '$lib/raw-fetchers/reason.svelte';
  import { uuid } from '$lib/stores/uuid';
  import StylesToc from '$lib/train/styles-toc.svelte';
  import { getApiUrl } from '$lib/scripts/upstream';
  export let detail = {
    uid: '',
    rid: '',
    headcode: '',
    show: true
  };
  export let close;

  function handleClick() {
    close();
  }

  async function getTrain(rid) {
    try {
      console.log(`Requested Station: ${rid}`);
      const url = `${getApiUrl()}/api/v2/live/train/rid/${rid}`;
      const opt = {
        method: 'GET',
        headers: {
          uuid: $uuid
        }
      };
      const data = await fetch(url, opt);
      return await data.json();
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  }

  async function parseDelay(location) {
    let string, state;
    if (location?.lateness) {
      try {
        const result = Math.floor(location.lateness / 60);
        if (result === 0) {
          (string = 'RT'), (state = '');
        } else if (result < 0) {
          (string = -result + 'E'), (state = 'early');
        } else if (result > 0) {
          (string = result + 'L'), (state = 'late');
        }
      } catch {
        (string = ''), (state = '');
      }
    } else if (location.arrivalType === 'Delayed') {
      (string = ''), (state = 'late');
    } else {
      (string = ''), (state = 'noreport');
    }
    return {
      string: string,
      state: state
    };
  }

  function parseTime(date) {
    const parsedTime = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    return parsedTime !== 'Invalid Date' ? parsedTime : null;
  }

  function parseTimes(service) {
    const sta = new Date(service.sta),
      eta = new Date(service.eta),
      ata = new Date(service.ata);
    const std = new Date(service.std),
      etd = new Date(service.etd),
      atd = new Date(service.atd);
    let parsedSta = parseTime(sta),
      parsedEta = parseTime(eta),
      parsedAta = parseTime(ata);
    let parsedStd = parseTime(std),
      parsedEtd = parseTime(etd),
      parsedAtd = parseTime(atd);
    if (service.isCancelled) {
      (parsedEta = 'CANC'), (parsedEtd = 'CANC');
    }
    let times = {
      sta: parsedSta || '-',
      eata: parsedEta || parsedAta || '-',
      aEst: parsedEta ? 'estimate' : '',
      std: parsedStd || '-',
      eatd: parsedEtd || parsedAtd || '-',
      dEst: parsedEtd ? 'estimate' : ''
    };
    if (service.isCancelled) {
      (parsedEta = 'CANC'), (parsedEtd = 'CANC');
      (times.aEst = 'canc'), (times.dEst = 'canc');
    }
    return times;
  }
</script>

<OverlayIsland>
  <div id="detailBox">
    <button type="button" id="closeService" on:click={handleClick}>X</button>
    {#await getTrain(detail.rid)}
      <h6>{detail.headcode}</h6>
      <p in:fade id="loading">Loading Data...</p>
    {:then train}
      <h6><StylesToc toc={train.GetServiceDetailsResult.operatorCode} full={true} /> {detail.headcode}</h6>
      <p>
        Locations in grey are not scheduled stops
        <br />
        Times in <span class="estimate">yellow</span> are estimated times
      </p>
      {#if train.GetServiceDetailsResult.delayReason}
        <p class="reason late">
          <Reason type="delay" code={train.GetServiceDetailsResult.delayReason} />
        </p>
      {/if}
      {#if train.GetServiceDetailsResult.cancelReason}
        <p class="reason canc">
          <Reason type="cancel" code={train.GetServiceDetailsResult.cancelReason} />
        </p>
      {/if}
      <table id="detailTable">
        <tr>
          <th class="tableLocation">Loc.</th>
          <th class="tablePlatform">Pl.</th>
          <th class="tableTime">Sch</th>
          <th class="tableTime">Est/<br />Act</th>
          <th class="tableTime">Sch</th>
          <th class="tableTime">Est/<br />Act</th>
          <th class="tableDelay" />
        </tr>
        <tr>
          <th colspan="2" />
          <th colspan="2">Arrival</th>
          <th colspan="2">Departure</th>
          <th />
        </tr>
        {#each train.GetServiceDetailsResult.locations.location as location}
          <tr>
            <td class="location {location?.isPass === 'true' ? 'pass' : ''}">{location.tiploc}</td>
            <td class={location?.isPass === 'true' ? 'pass' : ''}>{location.platform || ''}</td>
            {#await parseTimes(location)}
              <td />
              <td />
              <td />
              <td />
            {:then times}
              <td class={location?.isPass === 'true' ? 'pass' : ''}>{times.sta}</td>
              <td class="{location?.isPass === 'true' ? 'pass' : ''} {times.aEst}">{times.eata}</td>
              <td class={location?.isPass === 'true' ? 'pass' : ''}>{times.std}</td>
              <td class="{location?.isPass === 'true' ? 'pass' : ''} {times.dEst}">{times.eatd}</td>
            {/await}
            {#await parseDelay(location)}
              <td>-</td>
            {:then delay}
              <td class={delay.state}>{delay.string}</td>
            {/await}
          </tr>
        {/each}
      </table>
    {:catch}
      <h6>Error loading data</h6>
    {/await}
  </div>
</OverlayIsland>

<style>
  #detailBox {
    width: 100%;
    min-height: 100px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  h6 {
    position: absolute;
    top: -16px;
    left: 20px;
    font-size: 14px;
    color: whitesmoke;
  }
  #loading {
    color: white;
    animation: pulse-early 2.5s linear infinite;
  }
  p {
    margin-top: 45px;
    margin-bottom: 0px;
  }
  p.reason {
    margin-top: 5px;
  }
  #closeService {
    position: absolute;
    top: 10px;
    right: 10px;
    border: none;
    border-radius: 60px;
    width: 35px;
    height: 35px;
    background-color: var(--main-bg-color);
    color: white;
    font-weight: 700;
    font-size: 14px;
  }
  #detailTable {
    margin-top: 10px;
    table-layout: fixed;
    width: 100%;
    margin-top: 12px;
    margin-left: 0px;
    margin-right: 0px;
    padding: 0px;
    color: white;
    font-family: ubuntu, monospace;
    font-size: 16px;
  }
  @media screen and (max-width: 338px) {
    #detailTable {
      font-size: 14px;
    }
  }
  @media screen and (max-width: 301px) {
    #detailTable {
      font-size: 12px;
    }
  }
  @media screen and (min-width: 469px) {
    #detailTable {
      font-size: 20px;
    }
  }
  .tableLocation {
    width: 18%;
  }
  td.location {
    color: yellow;
  }
  .tablePlatform {
    width: 9%;
  }
  .tableTime {
    width: 14%;
  }
  .tableDelay {
    width: 7%;
  }
  .estimate {
    color: rgb(255, 255, 119);
  }
  .pass {
    color: white !important;
    opacity: 0.45;
  }
  .canc {
    color: white;
    animation: pulse-cancel 1.5s linear infinite;
  }

  .early {
    animation: pulse-early 1.5s linear infinite;
  }

  .late {
    color: white;
    animation: pulse-late 1.5s linear infinite;
  }

  @keyframes pulse-late {
    50% {
      color: var(--main-warning-color);
    }
  }

  @keyframes pulse-cancel {
    50% {
      color: var(--main-alert-color);
    }
  }

  @keyframes pulse-early {
    50% {
      color: rgb(136, 164, 255);
    }
  }
</style>