owlboard-svelte/src/lib/ldb/public-ldb.svelte

<script>
  export let station = "";
  export let title = "Loading...";
  import { onMount } from 'svelte'
  import Loading from '$lib/navigation/loading.svelte';
	import OverlayIsland from '$lib/islands/overlay-island.svelte';

  let requestedStation;
  $: requestedStation = station;

  let jsonData = null;
  let services = [];
  let busServices = [];
  let ferryServices = [];
  let dataAge = null;
  let isLoading = true;
  let dataExists = false;
  let serviceDetail;

  $: {
      if (jsonData === null && requestedStation) {
        fetchData();
      }
  
      if (jsonData?.GetStationBoardResult?.generatedAt) {
        dataAge = new Date(jsonData.GetStationBoardResult.generatedAt);
      }
  
      if (jsonData?.GetStationBoardResult?.trainServices?.service) {
        services = jsonData.GetStationBoardResult.trainServices.service;
      } else {
        services = [];
      }

      if (jsonData?.GetStationBoardResult?.busServices?.service) {
        busServices = jsonData.GetStationBoardResult.busServices.service;
      }

      if (jsonData?.GetStationBoardResult?.ferryServices?.service) {
        ferryServices = jsonData.GetStationBoardResult.ferryServices.service;
      }

      if (jsonData?.GetStationBoardResult?.locationName) {
        title = jsonData.GetStationBoardResult.locationName
      } else {
        title = requestedStation.toUpperCase()
      }
    }

  async function fetchData() {
    dataExists = true;
    isLoading = true; // Set loading state
    try {
      console.log(`Requested Station: ${requestedStation}`);
      const data = await fetch(`https://owlboard.info/api/v1/ldb/${requestedStation}`);
      jsonData = await data.json();
    } catch (error) {
      console.error("Error fetching data:", error);
      dataExists = false;
      title = "Not Found";
    } finally {
      isLoading = false; // Clear loading state
    }
  }

  function parseTime(string){
    let output
    let change
    switch (string) {
    case 'Delayed':
      output = 'LATE'
      change = "changed"
      break
    case 'Cancelled':
      output = 'CANC'
      change = "cancelled"
      break
    case 'On Time':
    case 'On time':
      output = 'RT'
      change = ""
      break
    case '':
      output = '-'
      change = ""
      break
    case undefined:
      output = '-'
      change = ""
      break
    case 'No report':
      output = '-'
      change = ""
      break
    case 'undefined':
      output = false
      change = ""
      break
    default:
      output = string
      change = "changed"
    }
    return {data: output, changed: change}
  }

  async function loadService(sid) {
    console.log(`Loading: ${sid}`);
    for (const service of services) {
      if (service.serviceID == sid) {
        serviceDetail = service
      }
    }
  }

  async function closeService() {
    serviceDetail = null;
  }

  onMount(() => {
    if (requestedStation && jsonData === null) {
      fetchData();
    }
  });
</script>

{#if isLoading}
  <Loading />
{:else}
  {#if dataAge}
    <p id="timestamp">Updated: {dataAge.toLocaleTimeString()}</p>
    {#if services.length}
      <table>
        <tr>
          <th class="from">From</th>
          <th class="to">To</th>
          <th class="plat">Plat.</th>
          <th class="time">Sch Arr.</th>
          <th class="time">Exp Arr.</th>
          <th class="time">Sch Dep.</th>
          <th class="time">Exp Dep.</th>
        </tr>
        {#each services as service}
          <tr>
            <td class="origdest from" on:click={loadService(service.serviceID)}>
              {#if Array.isArray(service.origin?.location)}
                {service.origin.location[0]['locationName'] +
                 " & " + 
                 service.origin.location[1]['locationName']}
              {:else}
                {service.origin?.location?.locationName || ''}
              {/if}
            </td>
            <td class="origdest to" on:click={loadService(service.serviceID)}>
              {#if Array.isArray(service.destination?.location)}
                {service.destination.location[0]['locationName'] + 
                 " & " +
                 service.destination.location[0]['locationName']}
              {:else}
                {service.destination?.location?.locationName || ''}
              {/if}
            </td>
            <td class="plat">{service.platform || '-'}</td>
            <td class="time">{parseTime(service.sta).data}</td>
            <td class="time {parseTime(service.eta).changed}">{parseTime(service.eta).data}</td>
            <td class="time">{parseTime(service.std).data}</td>
            <td class="time {parseTime(service.etd).changed}">{parseTime(service.etd).data}</td>
          </tr>

          <tr><td colspan="7">
            <p class="service-detail">
              A {service.operator || 'Unknown'} service
              {#if service['length']}
                with {service['length'] || 'some'} coaches
              {/if}
            </p>
            {#if service.delayReason}
              <p class="service-detail">{service.delayReason}</p>
            {/if}
            {#if service.cancelReason}
              <p class="service-detail">{service.cancelReason}</p>
            {/if}
          </td></tr>
        {/each}
      </table>
    {:else}
      <p class="table-head-text">No Scheduled Train Services</p>
    {/if}
    {#if busServices.length}
      <br>
      <img class="transport-mode" src="/images/transport-modes/bus.svg" alt="Bus services"><br>
      <span class="table-head-text">Bus Services</span>
      <table>
        <tr>
          <th class="from">From</th>
          <th class="to">To</th>
          <th class="time">Sch Arr.</th>
          <th class="time">Exp Arr.</th>
          <th class="time">Sch Dep.</th>
          <th class="time">Exp Dep.</th>
        </tr>
        {#each busServices as service}
          <tr>
            <td class="origdest from">{service.origin?.location?.locationName || ''}</td>
            <td class="origdest to">{service.destination?.location?.locationName || ''}</td>
            <td class="time">{parseTime(service.sta).data}</td>
            <td class="time {parseTime(service.eta).changed}">{parseTime(service.eta).data}</td>
            <td class="time">{parseTime(service.std).data}</td>
            <td class="time {parseTime(service.etd).changed}">{parseTime(service.etd).data}</td>
          </tr>

          <tr><td colspan="7">
            <p class="service-detail">
              A {service.operator || 'Unknown'} service
            </p>
            {#if service.delayReason}
              <p class="service-detail">{service.delayReason}</p>
            {/if}
            {#if service.cancelReason}
              <p class="service-detail">{service.cancelReason}</p>
            {/if}
          </td></tr>
        {/each}
      </table>
    {/if}
    {#if ferryServices.length}
      <br>
      <img class="transport-mode" src="/images/transport-modes/ferry.svg" alt="Bus services"><br>
      <span class="table-head-text">Ferry Services</span>
      <table>
        <tr>
          <th class="from">From</th>
          <th class="to">To</th>
          <th class="time">Sch Arr.</th>
          <th class="time">Exp Arr.</th>
          <th class="time">Sch Dep.</th>
          <th class="time">Exp Dep.</th>
        </tr>
        {#each ferryServices as service}
          <tr>
            <td class="origdest from">{service.origin?.location?.locationName || ''}</td>
            <td class="origdest to">{service.destination?.location?.locationName || ''}</td>
            <td class="time">{parseTime(service.sta).data}</td>
            <td class="time {parseTime(service.eta).changed}">{parseTime(service.eta).data}</td>
            <td class="time">{parseTime(service.std).data}</td>
            <td class="time {parseTime(service.etd).changed}">{parseTime(service.etd).data}</td>
          </tr>

          <tr><td colspan="7">
            {#if service.delayReason}
              <p class="service-detail">{service.delayReason}</p>
            {/if}
            {#if service.cancelReason}
              <p class="service-detail">{service.cancelReason}</p>
            {/if}
          </td></tr>
        {/each}
      </table>
    {/if}
  {:else}
    <p>Unable to find this station</p>
  {/if}
{/if}

{#if serviceDetail}
  <OverlayIsland>
    <h6>Service Detail</h6>
    <button type="button" id="closeService" on:click={closeService}>X</button>
    <table id="detailTable">
      <tr>
        <th>Location</th>
        <th>Sch</th>
        <th>Exp</th>
      </tr>
      {#if serviceDetail?.previousCallingPoints?.callingPointList?.callingPoint}
        {#each serviceDetail.previousCallingPoints.callingPointList.callingPoint as prevPoint}
          <tr>
            <td>{prevPoint.locationName}</td>
            <td>{prevPoint.st}</td>
            <td class="time {parseTime(prevPoint.at || prevPoint.et).changed}">{parseTime(prevPoint.at || prevPoint.et).data}</td>
          </tr>
        {/each}
      {/if}
      <tr class="thisStop">
        <td>{title}</td>
        <td>{serviceDetail.std || serviceDetail.sta}</td>
        <td class="time {parseTime(serviceDetail.etd || serviceDetail.eta).changed}">{parseTime(serviceDetail.etd || serviceDetail.eta).data}</td>
      </tr>
      {#if serviceDetail?.subsequentCallingPoints?.callingPointList?.callingPoint}
        {#each serviceDetail.subsequentCallingPoints.callingPointList.callingPoint as nextPoint}
          <tr>
            <td>{nextPoint.locationName}</td>
            <td>{nextPoint.st}</td>
            <td class="time {parseTime(nextPoint.et).changed}">{parseTime(nextPoint.et).data}</td>
          </tr>
        {/each}
      {/if}
    </table>
  </OverlayIsland>
{/if}

<style>
  #timestamp {
    margin: auto;
    text-align: left;
    font-size: 14px;
  }
  table {
    width: 100%;
    margin: auto;
    color: white;
    font-size: 13px;
  }
  .service-detail {
    color: cyan;
    text-align: left;
    font-size: 12px;
    padding: 0;
    margin: 0;
  }
  .transport-mode {
    width: 30px;
  }
  .table-head-text {
    color: white;
    font-size: 14px;
  }
@media (min-width: 800px) {
    table {font-size: 15px;}
    .service-detail {font-size: 14px;}
    .transport-mode {width: 50px;}
    #timestamp {font-size: 16px;}
}
@media (min-width: 1000px) {
    table {font-size: 17px;}
    .service-detail{font-size: 16px;}
    .table-head-text {font-size: 16px;}
}
@media (min-width: 1600px) {
    table {font-size: 19px;}
    .service-detail {font-size: 18px;}
}
  .origdest {
    color: yellow;
  }
  .from {
    width: 25%;
    text-align: left;
  }
  .to {
    width: 25%;
    text-align: left;
  }
  .plat {
    width: 10%
  }
  .time {
    width: 10%;
  }
  .changed{
    animation: pulse-change 1.5s linear infinite;
}

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

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

@keyframes pulse-cancel {
    50% {
        color: var(--main-alert-color);
    }
}
h6 {
  position: absolute;
  top: -25px;
  left: 20px;
  font-size: 18px;
}
#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: 16px;
}
#detailTable {
  margin-top: 40px;
}
.thisStop {
  color: yellow;
}
</style>