StaffLDB-Minify (#1)

New staffLDB API Ready to merge

Reviewed-on: #1

nginx.conf

@@ -44,12 +44,17 @@ http {
 
         location / {
             root /usr/share/nginx/html;
-            index index.html;
+            index index;
             gzip_static on;
             brotli_static on;
-            error_page 500 502 503 504 /50x.html;
+            error_page 500 502 503 504 /err/50x.html;
-            try_files $uri $uri.html $uri/ =404;
+            error_page 404 /err/404;
+            try_files $uri.html $uri $uri/index.html $uri/ =404;
             add_header Cache-Control "public, no-transform, max-age=1209600";
+
+            if ($uri ~* \.html$) {
+                return 404;
+            }
         }
 
         location /misc/ {

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
+    "postbuild": "npx svelte-sitemap --domain https://owlboard.info --ignore '**/err/**' --ignore 'more/reg/submit'",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
@@ -23,6 +24,7 @@
     "prettier-plugin-svelte": "^2.8.1",
     "svelte": "^3.54.0",
     "svelte-check": "^3.0.1",
+    "svelte-sitemap": "^2.6.0",
     "typescript": "^5.0.0",
     "vite": "^4.3.0"
   },

src/lib/ldb/nrcc/alert-bar.svelte

@@ -11,7 +11,7 @@
   }
 
   function numberAsWord(number) {
-    const words = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];
+    const words = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
     let word = words[number];
     if (word) {
       return word;

src/lib/ldb/public-ldb.svelte

@@ -6,6 +6,7 @@
   import OverlayIsland from '$lib/islands/overlay-island.svelte';
   import AlertBar from '$lib/ldb/nrcc/alert-bar.svelte';
   import Island from '$lib/islands/island.svelte';
+  import { getApiUrl } from '$lib/scripts/upstream';
 
   let requestedStation;
   $: requestedStation = station;
@@ -55,7 +56,7 @@
     isLoading = true; // Set loading state
     try {
       console.log(`Requested Station: ${requestedStation}`);
-      const data = await fetch(`https://owlboard.info/api/v2/live/station/${requestedStation}/public`);
+      const data = await fetch(`${getApiUrl()}/api/v2/live/station/${requestedStation}/public`);
       jsonData = await data.json();
     } catch (error) {
       console.error('Error fetching data:', error);

src/lib/ldb/staff/fetch.ts

@@ -0,0 +1,39 @@
+// Fetches StaffLDB Data, correctly formats DATE fields and returns the data
+
+import { getApiUrl } from '$lib/scripts/upstream';
+import { uuid } from '$lib/stores/uuid';
+import type { ApiResponse, StaffLdb } from '@owlboard/ts-types';
+
+// Fetch StaffLDB Data, and returns the data after hydration (convert date types etc.)
+export async function fetchStaffLdb(station: string): Promise<ApiResponse<StaffLdb>> {
+  const url = `${getApiUrl()}/api/v2/live/station/${station}/staff`;
+
+  let uuid_value: string = '';
+  const unsubscribe = uuid.subscribe((value) => {
+    uuid_value = value;
+  });
+
+  const fetchOpts = {
+    method: 'GET',
+    headers: {
+      uuid: uuid_value
+    }
+  };
+  const res = await fetch(url, fetchOpts);
+  unsubscribe();
+  const resJs = await res.json();
+  return parseFormat(JSON.stringify(resJs));
+}
+
+// Parse dates within the JSON response
+function parseFormat(jsonString: any): ApiResponse<StaffLdb> {
+  return JSON.parse(jsonString, (key, value) => {
+    if (typeof value === 'string') {
+      const dateRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/;
+      if (dateRegex.test(value)) {
+        return new Date(value);
+      }
+    }
+    return value;
+  });
+}

src/lib/ldb/staff/staff-ldb-dev.svelte

@@ -1,135 +0,0 @@
-<script lang="ts">
-  export let station = '';
-  export let title = 'Loading...';
-  import { onMount } from 'svelte';
-  import AlertBar from '$lib/ldb/nrcc/alert-bar.svelte';
-  import StaffTrainDetail from '$lib/ldb/staff/train-detail.svelte';
-  import Loading from '$lib/navigation/loading.svelte';
-  import { uuid } from '$lib/stores/uuid';
-  import Island from '$lib/islands/island.svelte';
-  import TableGeneratorDev from './table/table-generator_dev.svelte';
-
-  const TableGenerator = TableGeneratorDev;
-
-  import type { StaffLdb, NrccMessage, TrainServices, ApiResponse } from '@owlboard/ts-types';
-
-  let jsonData: ApiResponse<StaffLdb>;
-  let isLoading = true;
-  let isErr = false;
-  let errMsg: string;
-  let alerts: NrccMessage[];
-  let detail = { show: false, rid: '', uid: '', headcode: '' };
-
-  $: {
-    if (isLoading) {
-      title = 'Loading...';
-    } else {
-      title = station;
-    }
-  }
-
-  async function fetchData() {
-    isLoading = true; // Set loading state
-    try {
-      console.log(`Requested Station: ${requestedStation}`);
-      const url = `https://owlboard.info/api/v2/live/station/${requestedStation}/staff`;
-      const opt = {
-        method: 'GET',
-        headers: {
-          uuid: $uuid
-        }
-      };
-      const data = await fetch(url, opt);
-      const json = await data.json();
-      if (json.ERROR === 'NOT_FOUND') {
-        isErr = true;
-        errMsg = 'Unable to find this station';
-      } else {
-        jsonData = json;
-      }
-    } catch (error) {
-      console.error('Error fetching data:', error);
-      isLoading = false;
-      isErr = true;
-      errMsg = 'Connection error, try again later';
-    } finally {
-      isLoading = false; // Clear loading state
-    }
-  }
-
-  function showDetail(rid = '', uid = '', tid = '') {
-    detail = {
-      rid: rid,
-      uid: uid,
-      headcode: tid,
-      show: true
-    };
-  }
-
-  function hideDetails() {
-    detail = {
-      rid: '',
-      uid: '',
-      headcode: '',
-      show: false
-    };
-  }
-</script>
-
-{#key detail}
-  {#if detail.show}
-    <StaffTrainDetail {detail} close={hideDetails} />
-  {/if}
-{/key}
-
-{#if isLoading}
-  <Loading />
-{:else if isErr}
-  <Island>
-    <p><strong>{errMsg}</strong></p>
-  </Island>
-{:else}
-  {#if alerts.length}
-    <AlertBar {alerts} />
-  {/if}
-  <p class="dataTime">Data from: {dataAge.toLocaleString([])}</p>
-  {#if trainServices && trainServices.length}
-    <TableGenerator services={trainServices} click={showDetail} />
-  {:else}
-    <p id="noservices">There are no scheduled train services in the next two hours</p>
-  {/if}
-  {#if busServices && busServices.length}
-    <img class="transport-mode-image" src="/images/transport-modes/bus.svg" alt="" />
-    <br />
-    <span class="transport-mode-text">Bus Services</span>
-    <TableGenerator services={busServices} click={showDetail} />
-  {/if}
-  {#if ferryServices && ferryServices.length}
-    <img class="transport-mode-image" src="/images/transport-modes/ferry.svg" alt="" />
-    <br />
-    <span class="transport-mode-text">Ferry Services</span>
-    <TableGenerator services={ferryServices} click={showDetail} />
-  {/if}
-{/if}
-
-<style>
-  p.dataTime {
-    margin-top: 5px;
-    margin-bottom: 0px;
-    font-size: 12px;
-  }
-  #noservices {
-    margin: 20px;
-    padding-top: 20px;
-    color: white;
-  }
-
-  .transport-mode-image {
-    width: 30px;
-    margin: auto;
-    padding-top: 25px;
-  }
-  .transport-mode-text {
-    color: white;
-  }
-</style>

src/lib/ldb/staff/staff-ldb.svelte

@@ -1,220 +1,89 @@
-<script>
+<script lang="ts">
-  export let station = '';
-  export let title = 'Loading...';
-  import { onMount } from 'svelte';
-  import AlertBar from '$lib/ldb/nrcc/alert-bar.svelte';
-  import StaffTrainDetail from '$lib/ldb/staff/train-detail.svelte';
-  import Loading from '$lib/navigation/loading.svelte';
-  import { uuid } from '$lib/stores/uuid';
-  import Island from '$lib/islands/island.svelte';
   import TableGenerator from './table/table-generator.svelte';
+  import Loading from '$lib/navigation/loading.svelte';
+  import type { ApiResponse, StaffLdb } from '@owlboard/ts-types';
+  import { detailInit, defineDetail } from './train-detail';
+  import TrainDetail from './train-detail.svelte';
+  import { fetchStaffLdb } from './fetch';
+  import AlertBar from '../nrcc/alert-bar.svelte';
 
-  let requestedStation = '';
+  export let station: string;
-  $: requestedStation = station;
+  export let title: string | undefined = 'Loading...';
 
-  let jsonData = {};
+  let errorDetail = {
-  /**
+    code: '',
-   * @type {string | any[]}
+    message: '',
-   */
-  let trainServices = [];
-  /**
-   * @type {string | any[]}
-   */
-  let busServices = [];
-  /**
-   * @type {string | any[]}
-   */
-  let ferryServices = [];
-  let dataAge = new Date(0);
-  let isLoading = true;
-  let isErr = false;
-  let errMsg = '';
-  let alerts = [''];
-  let detail = { show: false, rid: '', uid: '', headcode: '' };
-
-  $: {
-    // @ts-ignore
-    if (jsonData?.GetBoardResult?.generatedAt) {
-      // @ts-ignore
-      dataAge = new Date(jsonData.GetBoardResult.generatedAt);
-    }
-
-    // @ts-ignore
-    if (jsonData?.GetBoardResult?.trainServices?.service) {
-      // @ts-ignore
-      trainServices = ensureArray((trainServices = jsonData.GetBoardResult.trainServices.service));
-    } else {
-      trainServices = [];
-    }
-
-    // @ts-ignore
-    if (jsonData?.GetBoardResult?.busServices?.service) {
-      // @ts-ignore
-      busServices = ensureArray((busServices = jsonData.GetBoardResult.busServices.service));
-    } else {
-      busServices = [];
-    }
-
-    // @ts-ignore
-    if (jsonData?.GetBoardResult?.ferryServices?.service) {
-      // @ts-ignore
-      ensureArray((ferryServices = jsonData.GetBoardResult.ferryServices.service));
-    } else {
-      ferryServices = [];
-    }
-
-    // @ts-ignore
-    if (jsonData?.GetBoardResult?.locationName) {
-      // @ts-ignore
-      title = jsonData.GetBoardResult.locationName;
-    } else {
-      title = 'Loading Board';
-    }
-
-    // @ts-ignore
-    if (jsonData?.GetBoardResult?.nrccMessages) {
-      // @ts-ignore
-      alerts = processNrcc(jsonData.GetBoardResult?.nrccMessages?.message);
-    } else {
-      alerts = [];
-    }
-  }
-
-  /**
-   * @param {any} item
-   */
-  function ensureArray(item) {
-    if (Array.isArray(item)) {
-      return item;
-    }
-    return [item];
-  }
-
-  async function fetchData() {
-    isLoading = true; // Set loading state
-    try {
-      console.log(`Requested Station: ${requestedStation}`);
-      const url = `https://owlboard.info/api/v2/live/station/${requestedStation}/staff`;
-      const opt = {
-        method: 'GET',
-        headers: {
-          uuid: $uuid
-        }
   };
-      const data = await fetch(url, opt);
+  let nrcc: string[] = [];
-      const json = await data.json();
+
-      if (json.ERROR === 'NOT_FOUND') {
+  let detail = detailInit();
-        isErr = true;
+  function hideDetail() {
-        errMsg = 'Unable to find this station';
+    detail = detailInit();
-      } else {
-        jsonData = json;
-      }
-    } catch (error) {
-      console.error('Error fetching data:', error);
-      isLoading = false;
-      isErr = true;
-      errMsg = 'Connection error, try again later';
-    } finally {
-      isLoading = false; // Clear loading state
   }
+  function showDetail(rid: string, uid: string, tid: string) {
+    detail = defineDetail(rid, uid, tid);
   }
 
-  /**
+  console.log(`Station: ${station}`);
-   * @param {any} messages
-   */
-  function processNrcc(messages) {
-    // Remove newlines and then <p> tags from input and append to array
-    let arrMessages;
-    if (!Array.isArray(messages)) {
-      arrMessages = [messages];
-    } else {
-      arrMessages = messages;
-    }
-    let processedMessages = [];
-    for (const message of arrMessages) {
-      const msgText = message.xhtmlMessage;
-      processedMessages.push(msgText.replace(/[\n\r]/g, '').replace(/<\/?p[^>]*>/g, ''));
-    }
-    return processedMessages;
-  }
 
-  function showDetail(rid = '', uid = '', tid = '') {
+  async function callFetch(station: string): Promise<StaffLdb> {
-    detail = {
+    const data = await fetchStaffLdb(station);
-      rid: rid,
+    if (data.data) {
-      uid: uid,
+      title = data.data.locationName;
-      headcode: tid,
+      if (data.data?.nrccMessages) {
-      show: true
+        for (const msg of data.data.nrccMessages) {
-    };
+          nrcc.push(msg.xhtmlMessage);
         }
-
-  function hideDetails() {
-    detail = {
-      rid: '',
-      uid: '',
-      headcode: '',
-      show: false
-    };
       }
-
+      return data.data;
-  onMount(() => {
+    }
-    fetchData();
+    errorDetail.code = data.obStatus.toString() || "UNKNOWN";
-  });
+    errorDetail.message = data.obMsg || "An unknown error occoured";
+    throw new Error('Unable to Fetch Data');
+  }
 </script>
 
 {#key detail}
   {#if detail.show}
-    <StaffTrainDetail {detail} close={hideDetails} />
+    <TrainDetail {detail} close={hideDetail} />
   {/if}
 {/key}
 
-{#if isLoading}
+{#await callFetch(station)}
   <Loading />
-{:else if isErr}
+{:then data}
-  <Island>
+  {#if data}
-    <p><strong>{errMsg}</strong></p>
+    <p class="generatedTime">Updated: {new Date(data.generatedAt).toLocaleTimeString()}</p>
-  </Island>
+    {#if data.trainServices?.length}
-{:else}
+      <TableGenerator services={data.trainServices} click={showDetail} />
-  {#if alerts.length}
-    <AlertBar {alerts} />
     {/if}
-  <p class="dataTime">Data from: {dataAge.toLocaleString([])}</p>
+    {#if data.busServices?.length}
-  {#if trainServices && trainServices.length}
+      <img class="transport-mode" src="/images/transport-modes/bus.svg" alt="Bus services" /><br />
-    <TableGenerator services={trainServices} click={showDetail} />
+      <span class="table-head-text">Bus Services</span>
-  {:else}
+      <TableGenerator services={data.busServices} click={showDetail} />
-    <p id="noservices">There are no scheduled train services in the next two hours</p>
     {/if}
-  {#if busServices && busServices.length}
+    {#if data.ferryServices?.length}
-    <img class="transport-mode-image" src="/images/transport-modes/bus.svg" alt="" />
+      <img class="transport-mode" src="/images/transport-modes/ferry.svg" alt="Ferry services" /><br />
-    <br />
+      <span class="table-head-text">Ferry Services</span>
-    <span class="transport-mode-text">Bus Services</span>
+      <TableGenerator services={data.ferryServices} click={showDetail} />
-    <TableGenerator services={busServices} click={showDetail} />
     {/if}
-  {#if ferryServices && ferryServices.length}
+    {#if nrcc.length}
-    <img class="transport-mode-image" src="/images/transport-modes/ferry.svg" alt="" />
+      <AlertBar alerts={nrcc} />
-    <br />
-    <span class="transport-mode-text">Ferry Services</span>
-    <TableGenerator services={ferryServices} click={showDetail} />
     {/if}
+    <!-- NRCC Alerts are not available -->
   {/if}
+{:catch}
+  <h2>Error</h2>
+  <p>ERR-CODE: {errorDetail.code}</p>
+  <p>Message:<br>{errorDetail.message}</p>
+{/await}
 
 <style>
-  p.dataTime {
+  .transport-mode {
-    margin-top: 5px;
-    margin-bottom: 0px;
-    font-size: 12px;
-  }
-  #noservices {
-    margin: 20px;
     padding-top: 20px;
-    color: white;
+    height: 17px;
   }
-
+  .table-head-text {
-  .transport-mode-image {
-    width: 30px;
-    margin: auto;
-    padding-top: 25px;
-  }
-  .transport-mode-text {
     color: white;
   }
 </style>

src/lib/ldb/staff/table/table-generator.svelte

@@ -1,168 +1,89 @@
-<script>
+<script lang="ts">
   import Reason from '$lib/raw-fetchers/reason.svelte';
   import { tocs as tocMap } from '$lib/stores/tocMap';
 
-  export let services;
+  import type { TrainServices, ServiceLocation } from '@owlboard/ts-types';
-  export let click;
 
-  async function generateServiceData(service) {
+  export let services: TrainServices[];
-    const timeDetails = parseTimes(service);
+  export let click: Function;
-    let serviceData = {
-      from: await parseLocation(service.origin),
-      to: await parseLocation(service.destination),
-      length: await getTrainLength(service),
-      platform: await parsePlatform(service?.platform || 'undefined'),
-      platformHidden: service?.platformIsHidden === 'true',
-      schArr: timeDetails.schArr,
-      expArr: timeDetails.expArr,
-      schDep: timeDetails.schDep,
-      expDep: timeDetails.expDep,
-      isEarlyArr: timeDetails.earArr,
-      isLateArr: timeDetails.delArr,
-      isEarlyDep: timeDetails.earDep,
-      isLateDep: timeDetails.delDep,
-      isCancelled: Boolean(service?.isCancelled),
-      canArr: timeDetails.canArr,
-      canDep: timeDetails.canDep,
-      isDelayed: service?.arrivalType === 'Delayed',
-      isArrDelayed: service?.arrivalType === 'Delayed',
-      isDepDelayed: service?.departureType === 'Delayed',
-      isNonPublic: service?.isPassengerService === 'false' ? true : false
-    };
-    return serviceData;
-  }
 
-  async function getTrainLength(service) {
+  function detail(event: any, rid: string, uid: string, tid: string) {
-    if (service?.length) {
-      return parseInt(service?.length);
-    } else if (service?.formation?.coaches) {
-      return service.formation.coaches.coach.length;
-    }
-    return null;
-  }
-
-  async function parseLocation(location) {
-    if (!Array.isArray(location.location)) {
-      return location.location?.tiploc;
-    }
-    let locations = [];
-    for (const singleLocation of location?.location) {
-      locations.push(singleLocation?.tiploc);
-    }
-    return locations.join(' & ');
-  }
-
-  function parseTimes(service) {
-    let schArr = new Date(service?.sta);
-    let expArr = new Date(service?.eta || service?.ata);
-    let schDep = new Date(service?.std);
-    let expDep = new Date(service?.etd || service?.atd);
-    let isEarlyArr = false,
-      isDelayedArr = false,
-      isArr = false,
-      canArr = false;
-    let isEarlyDep = false,
-      isDelayedDep = false,
-      isDep = false,
-      canDep = false;
-    const timeDifferenceThreshold = 60 * 1000; // 60 seconds in milliseconds
-    if (expArr - schArr < -timeDifferenceThreshold) {
-      isEarlyArr = true;
-      isArr = true;
-    } else if (expArr - schArr > timeDifferenceThreshold) {
-      isDelayedArr = true;
-      isArr = true;
-    }
-
-    if (expDep - schDep < -timeDifferenceThreshold) {
-      isEarlyDep = true;
-      isDep = true;
-    } else if (expDep - schDep > timeDifferenceThreshold) {
-      isDelayedDep = true;
-      isDep = true;
-    }
-    let parsedExpArr;
-    if (expArr instanceof Date && !isNaN(expArr)) {
-      if (!isEarlyArr && !isDelayedArr) {
-        parsedExpArr = 'RT';
-      } else {
-        parsedExpArr = parseIndividualTime(expArr);
-      }
-    } else if (service.isCancelled === 'true') {
-      parsedExpArr = 'CANC';
-      canArr = true;
-    } else {
-      parsedExpArr = '-';
-    }
-
-    let parsedExpDep;
-    if (expDep instanceof Date && !isNaN(expDep)) {
-      if (!isEarlyDep && !isDelayedDep) {
-        parsedExpDep = 'RT';
-      } else {
-        parsedExpDep = parseIndividualTime(expDep);
-      }
-    } else if (service.isCancelled === 'true') {
-      parsedExpDep = 'CANC';
-      canDep = true;
-    } else {
-      parsedExpDep = '-';
-    }
-    return {
-      schArr: parseIndividualTime(schArr),
-      expArr: parsedExpArr,
-      schDep: parseIndividualTime(schDep),
-      expDep: parsedExpDep,
-      earArr: isEarlyArr,
-      delArr: isDelayedArr,
-      earDep: isEarlyDep,
-      delDep: isDelayedDep,
-      canArr: canArr,
-      canDep: canDep
-    };
-  }
-
-  function parseIndividualTime(input) {
-    const dt = new Date(input);
-    const output = dt.toLocaleTimeString([], {
-      hour: '2-digit',
-      minute: '2-digit'
-    });
-    if (output !== 'Invalid Date') {
-      return output;
-    }
-    return '-';
-  }
-
-  async function parsePlatform(platform) {
-    if (!platform) {
-      return '-';
-    }
-    if (platform === 'TBC' || platform == 'undefined') {
-      return '-';
-    }
-    return {
-      number: platform
-    };
-  }
-
-  function detail(event, rid, uid, tid) {
     const target = event.target;
     click(rid, uid, tid);
   }
+
+  async function formatLocations(locations: ServiceLocation[]): Promise<string> {
+    let tiplocs: string[] = [];
+    for (const location of locations) {
+      tiplocs.push(location.tiploc);
+    }
+    return tiplocs.join(' & ');
+  }
+
+  async function classGenerator(service: TrainServices) {
+    // This function needs updating next
+    let otherArr: string[] = [];
+    let arrArr: string[] = [];
+    let depArr: string[] = [];
+    let platArr: string[] = [];
+
+    if (service.isCancelled) {
+      otherArr.push('canc');
+    }
+    if (service.serviceIsSupressed) {
+      otherArr.push('nonPass');
+    }
+    if (service.platformIsHidden) {
+      platArr.push('nonPass');
+    }
+
+    function checkLateEarly(originalTime: Date | undefined, comparedTime: Date | undefined, arr: string[]) {
+      if (originalTime !== undefined && comparedTime instanceof Date) {
+        if (originalTime < comparedTime) {
+          arr.push('late');
+        } else if (originalTime > comparedTime) {
+          arr.push('early');
+        }
+      }
+    }
+
+    checkLateEarly(service.sta, service.eta, arrArr);
+    checkLateEarly(service.sta, service.ata, arrArr);
+    checkLateEarly(service.std, service.etd, depArr);
+    checkLateEarly(service.std, service.atd, depArr);
+
+    return {
+      other: otherArr.join(' '),
+      arr: arrArr.join(' '),
+      dep: depArr.join(' '),
+      plat: platArr.join(' ')
+    };
+  }
+
+  function fmtTime(date: Date | string | undefined): string | false {
+    if (typeof date === 'string') return date;
+    if (date instanceof Date) {
+      const hours = date.getHours().toString().padStart(2, '0');
+      const minutes = date.getMinutes().toString().padStart(2, '0');
+      return `${hours}:${minutes}`;
+    } else {
+      return false;
+    }
+  }
 </script>
 
 <p class="smallScreen">Your display is too small to view this data</p>
+<p class="smallScreen">Try rotating your device</p>
 <table>
   <tr>
     <th class="id">ID</th>
     <th class="from">From</th>
     <th class="to">To</th>
     <th class="plat">Plat</th>
-    <th class="time">Sch</th>
+    <th class="time arrsch">Sch</th>
-    <th class="time">Exp</th>
+    <th class="time arrexp">Exp</th>
-    <th class="time">Sch</th>
+    <th class="time depsch">Sch</th>
-    <th class="time">Exp</th>
+    <th class="time depexp">Exp</th>
   </tr>
   <tr>
     <th class="other" colspan="4" />
@@ -170,51 +91,50 @@
     <th class="timepair" colspan="2">Departure</th>
   </tr>
   {#each services as service}
-    {#await generateServiceData(service)}
-      <tr><td colspan="8">Loading Service Data...</td></tr>
-    {:then serviceData}
     <tr
       class="dataRow"
       on:click={(event) => detail(event, service.rid, service.uid, service.trainid)}
       on:keypress={(event) => detail(event, service.rid, service.uid, service.trainid)}
     >
+      {#await classGenerator(service) then classes}
+        <!-- HEADCODE -->
         <td class="id">{service.trainid}</td>
-        <td class="from {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'}">{serviceData.from}</td>
+        <!-- ORIGIN -->
-        <td class="to {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'}">{serviceData.to}</td>
+        <td class="loc from {classes.other}">{#await formatLocations(service.origin) then origin}{origin}{/await}</td>
-        <td class="plat {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'} {serviceData.platformHidden && 'nonPass'}"
+        <!-- DESTINATION -->
-          >{serviceData.platform.number || '-'}</td
+        <td class="loc to {classes.other}">{#await formatLocations(service.destination) then dest}<span class="locName">{dest}</span>{/await}</td>
-        >
+        <!-- PLATFORM -->
-        <td class="time schTime {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'}">{serviceData.schArr}</td>
+        <td class="plat {classes.other} {classes.plat}">{service.platform || '-'}</td>
-        <td
+        <!-- SCHEDULED ARR -->
-          class="time {serviceData.isNonPublic && 'nonPass'} {serviceData.isLateArr && 'late'} {serviceData.isArrDelayed && 'late'} {serviceData.isCancelled &&
+        <td class="time schTime {classes.other}">{fmtTime(service?.sta) || '-'}</td>
-            'canc'} {serviceData.isEarlyArr && 'early'}">{serviceData.isArrDelayed ? 'LATE' : serviceData.expArr}</td
+        <!-- EXPECTED/ACTUAL ARR -->
-        >
+        <td class="time {classes.other} {classes.arr}">{fmtTime(service.eta) || fmtTime(service.ata) || '-'}</td>
-        <td class="time schTime {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'}">{serviceData.schDep}</td>
+        <!-- SCHEDULED DEP -->
-        <td
+        <td class="time schTime {classes.other}">{fmtTime(service.std) || '-'}</td>
-          class="time {serviceData.isNonPublic && 'nonPass'} {serviceData.isLateDep && 'late'} {serviceData.isDepDelayed && 'late'}
+        <!-- EXPECTED/ACTUAL DEP -->
-                 {serviceData.isCancelled && 'canc'} {serviceData.isEarlyDep && 'early'}">{serviceData.isDepDelayed ? 'LATE' : serviceData.expDep}</td
+        <td class="time {classes.other} {classes.dep}">{fmtTime(service.etd) || fmtTime(service.atd) || '-'}</td>
-        >
+      {/await}
     </tr>
     <tr>
-        <td class="tableTxt" colspan="8">
+      <td colspan="1" />
+      <td class="tableTxt" colspan="7">
+        {#if service.destination?.[0] && service.destination[0].via}<span class="via">{service.destination[0].via}</span><br />{/if}
         {tocMap.get(service.operatorCode.toLowerCase()) || service.operatorCode}
-          {#if service.isCharter}charter{/if}
+        {#if service.length} | {service.length} carriages{/if}
-          {#if serviceData.length} | {serviceData.length} carriages{/if}
         {#if service.delayReason}
           <br />
+          <span class="delayTxt">
             <Reason type={'delay'} code={service.delayReason} />
+          </span>
         {/if}
         {#if service.cancelReason}
           <br />
+          <span class="cancTxt">
             <Reason type={'cancel'} code={service.cancelReason} />
+          </span>
         {/if}
       </td>
     </tr>
-    {:catch}
-      <tr>
-        <td colspan="8">Unable to display service</td>
-      </tr>
-    {/await}
   {/each}
 </table>
 
@@ -235,9 +155,12 @@
 
   .dataRow {
     font-family: ubuntu, monospace;
-    vertical-align: bottom;
+    vertical-align: top;
     cursor: pointer;
     font-size: 16px;
+    line-height: 1;
+    padding: 0;
+    margin: 0;
   }
 
   /* Table Columns */
@@ -267,8 +190,7 @@
     color: yellow;
   }
 
-  td.to,
+  td.to {
-  th.to {
     text-align: right;
   }
   td.from,
@@ -277,7 +199,7 @@
   }
   td.time {
     font-size: 15px;
-    vertical-align: middle;
+    vertical-align: top;
   }
   .tableTxt {
     text-align: left;
@@ -285,8 +207,18 @@
     color: var(--second-text-color);
     vertical-align: top;
     font-size: 12px;
+    padding-bottom: 10px;
+  }
+  .delayTxt {
+    color: var(--main-warning-color);
+  }
+  .cancTxt {
+    color: var(--main-alert-color);
+  }
+  .via {
+    color: yellow;
+    padding-left: 0px;
   }
-
   /* Handle small screens */
   .smallScreen {
     display: none;
@@ -338,26 +270,27 @@
     td.from,
     th.to,
     th.from {
-      text-align: center;
+      text-align: left;
     }
   }
 
   /* Conditional Classes */
-  .cancTxt {
+  .loc.canc,
-    color: grey !important;
+  .canc {
+    color: grey;
     text-decoration: line-through;
     opacity: 0.8;
   }
 
   .nonPass {
-    opacity: 0.6;
+    opacity: 0.4;
   }
 
   .late {
     animation: pulse-late 1.5s linear infinite;
   }
 
-  .canc {
+  .canc.time {
     animation: pulse-cancel 1.5s linear infinite;
   }
 
@@ -383,103 +316,4 @@
       color: rgb(136, 164, 255);
     }
   }
-
-  /* CARRIED OVER FROM OLD COMPONENT:
-  
-    #timestamp {
-    color: var(--second-text-color);
-  }
-
-  .transport-mode {
-    width: 30px;
-    margin: auto;
-  }
-
-  .dataTable {
-    color: white;
-    font-weight: normal;
-    width: 100%;
-    margin: 0px, 0px;
-    padding-left: 8px;
-    padding-right: 8px;
-  }
-
-  .id {
-    width: 12%;
-  }
-
-  .from {
-    width: 20%;
-  }
-
-  .to {
-    width: 20%;
-  }
-
-  .plat {
-    width: 8%;
-  }
-
-  .timePair {
-    width: 20%;
-  }
-
-  .time {
-    width: 10%;
-  }
-
-  .data {
-    font-weight: normal;
-  }
-
-  .id-data {
-    color: lightgray;
-    text-align: left;
-  }
-
-  .from-data,
-  .to-data {
-    color: yellow;
-    text-decoration: none;
-    text-align: left;
-  }
-
-  .text-row {
-    margin-top: 0px;
-    padding-bottom: 5px;
-    width: 100%;
-  }
-
-  .text-data {
-    text-align: left;
-    color: cyan;
-    font-size: smaller;
-  }
-
-  .can-dat {
-    color: grey;
-    text-decoration: line-through;
-  }
-
-  .hidden {
-    opacity: 0.5;
-  }
-
-  .ecs {
-    opacity: 0.75;
-  }
-
-  .can-time {
-    animation: pulse-cancel 1.5s linear infinite;
-  }
-
-  .early {
-    animation: pulse-early 1.5s linear infinite;
-  }
-
-  .late {
-    animation: pulse-late 1.5s linear infinite;
-  }
-
-  */
 </style>

src/lib/ldb/staff/table/table-generator_dev.svelte

@@ -1,313 +0,0 @@
-<script lang="ts">
-  import Reason from '$lib/raw-fetchers/reason.svelte';
-  import { tocs as tocMap } from '$lib/stores/tocMap';
-
-  import type { TrainServices, ServiceLocation } from '@owlboard/ts-types';
-
-  export let services: TrainServices[];
-  export let click: any; // Not sure of the type here!
-
-  function detail(event: any, rid: string, uid: string, tid: string) {
-    const target = event.target;
-    click(rid, uid, tid);
-  }
-
-  async function formatLocations(locations: ServiceLocation[]): Promise<string> {
-    let tiplocs: string[] = [];
-    for (const location of locations) {
-      tiplocs.push(location.tiploc);
-    }
-    return tiplocs.join(' & ');
-  }
-
-  async function classGenerator(service: TrainServices) {
-    let otherArr: string[] = [];
-    let arrArr: string[] = [];
-    let depArr: string[] = [];
-    let platArr: string[] = [];
-
-    if (service.isCancelled) {
-      otherArr.push('canc');
-    }
-    if (service.serviceIsSupressed) {
-      otherArr.push('nonPass');
-    }
-    if (service.platformIsHidden) {
-      platArr.push('nonPass');
-    }
-
-    if (service.sta !== undefined) {
-      if (service.eta !== undefined) {
-        if (service.sta < service.eta) {
-          arrArr.push('late');
-        }
-      } else if (service.ata !== undefined) {
-        if (service.sta < service.ata) {
-          arrArr.push('late');
-        }
-      }
-      if (service.eta !== undefined) {
-        if (service.sta > service.eta) {
-          arrArr.push('early');
-        }
-      } else if (service.ata !== undefined) {
-        if (service.sta > service.ata) {
-          arrArr.push('early');
-        }
-      }
-    }
-
-    if (service.std !== undefined) {
-      if (service.etd !== undefined) {
-        if (service.std < service.etd) {
-          depArr.push('late');
-        }
-      } else if (service.atd !== undefined) {
-        if (service.std < service.atd) {
-          depArr.push('late');
-        }
-      }
-      if (service.etd !== undefined) {
-        if (service.std > service.etd) {
-          depArr.push('early');
-        }
-      } else if (service.atd !== undefined) {
-        if (service.std > service.atd) {
-          depArr.push('early');
-        }
-      }
-    }
-
-    return {
-      other: otherArr.join(' '),
-      arr: arrArr.join(' '),
-      dep: depArr.join(' '),
-      plat: platArr.join(' ')
-    };
-  }
-</script>
-
-<p class="smallScreen">Your display is too small to view this data</p>
-<table>
-  <tr>
-    <th class="id">ID</th>
-    <th class="from">From</th>
-    <th class="to">To</th>
-    <th class="plat">Plat</th>
-    <th class="time">Sch</th>
-    <th class="time">Exp</th>
-    <th class="time">Sch</th>
-    <th class="time">Exp</th>
-  </tr>
-  <tr>
-    <th class="other" colspan="4" />
-    <th class="timepair" colspan="2">Arrival</th>
-    <th class="timepair" colspan="2">Departure</th>
-  </tr>
-  {#each services as service}
-    <tr
-      class="dataRow"
-      on:click={(event) => detail(event, service.rid, service.uid, service.trainid)}
-      on:keypress={(event) => detail(event, service.rid, service.uid, service.trainid)}
-    >
-      {#await classGenerator(service) then classes}
-        <td class="id {classes.other}">{service.trainid}</td>
-        <td class="from {classes.other}">{#await formatLocations(service.origin) then txt}{txt}{/await}</td>
-        <td class="to {classes.other}">{#await formatLocations(service.destination) then txt}{txt}{/await}</td>
-        <td class="plat">{service.platform || '-'}</td>
-        <td class="time schTime {classes.other}">{service.sta || '-'}</td>
-        <!-- All time need to be displayed appropriately -->
-        <td class="time {classes.other} {classes.arr}">{service.eta || service.ata || '-'}</td>
-        <!-- All time need to be displayed appropriately -->
-        <td class="time schTime {classes.other}">{service.std || '-'}</td>
-        <!-- All time need to be displayed appropriately -->
-        <td class="time {classes.other} {classes.dep}">{service.etd || service.atd || '-'}</td>
-        <!-- All time need to be displayed appropriately -->
-      {/await}
-    </tr>
-    <tr>
-      <td class="tableTxt" colspan="8">
-        {tocMap.get(service.operatorCode.toLowerCase()) || service.operatorCode}
-        {#if service.length} | {service.length} carriages{/if}
-        {#if service.delayReason}
-          <br />
-          <Reason type={'delay'} code={service.delayReason} />
-        {/if}
-        {#if service.cancelReason}
-          <br />
-          <Reason type={'cancel'} code={service.cancelReason} />
-        {/if}
-      </td>
-    </tr>
-    <tr>
-      <td colspan="8">Unable to display service</td>
-    </tr>
-  {/each}
-</table>
-
-<style>
-  table {
-    table-layout: fixed;
-    width: 100%;
-    max-width: 875px;
-    margin: auto;
-    padding: 0px;
-    color: white;
-  }
-
-  th {
-    font-size: 12px;
-    margin: 0px;
-  }
-
-  .dataRow {
-    font-family: ubuntu, monospace;
-    vertical-align: bottom;
-    cursor: pointer;
-    font-size: 16px;
-  }
-
-  /* Table Columns */
-  .id {
-    width: 8%;
-  }
-  .from {
-    width: 14%;
-  }
-  .to {
-    width: 14%;
-  }
-  .plat {
-    width: 6%;
-  }
-  .time {
-    width: 9%;
-  }
-
-  td.id {
-    color: lightblue;
-    text-align: left;
-    padding-left: 2px;
-  }
-  td.from,
-  td.to {
-    color: yellow;
-  }
-
-  td.to,
-  th.to {
-    text-align: right;
-  }
-  td.from,
-  th.from {
-    text-align: left;
-  }
-  td.time {
-    font-size: 15px;
-    vertical-align: middle;
-  }
-  .tableTxt {
-    text-align: left;
-    padding-left: 2px;
-    color: var(--second-text-color);
-    vertical-align: top;
-    font-size: 12px;
-  }
-
-  /* Handle small screens */
-  .smallScreen {
-    display: none;
-    margin: 20px;
-  }
-  @media screen and (max-width: 335px) {
-    th {
-      font-size: 10px;
-    }
-    .dataRow {
-      font-size: 12px;
-    }
-    td.time {
-      font-size: 12px;
-    }
-    .tableTxt {
-      font-size: 10px;
-    }
-  }
-  @media screen and (max-width: 279px) {
-    table {
-      display: none;
-    }
-    .smallScreen {
-      display: block;
-    }
-  }
-
-  /* Handle Large Screens */
-  @media screen and (min-width: 375px) {
-    .dataRow {
-      font-size: 18px;
-    }
-    td.time {
-      font-size: 16px;
-    }
-  }
-  @media screen and (min-width: 450px) {
-    .dataRow {
-      font-size: 20px;
-    }
-    td.time {
-      font-size: 19px;
-    }
-    .tableTxt {
-      font-size: 14px;
-    }
-    td.to,
-    td.from,
-    th.to,
-    th.from {
-      text-align: center;
-    }
-  }
-
-  /* Conditional Classes */
-  .cancTxt {
-    color: grey !important;
-    text-decoration: line-through;
-    opacity: 0.8;
-  }
-
-  .nonPass {
-    opacity: 0.6;
-  }
-
-  .late {
-    animation: pulse-late 1.5s linear infinite;
-  }
-
-  .canc {
-    animation: pulse-cancel 1.5s linear infinite;
-  }
-
-  .early {
-    animation: pulse-early 1.5s linear infinite;
-  }
-
-  /* Animation Definitions */
-  @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>

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

@@ -4,6 +4,7 @@
   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: '',
@@ -19,7 +20,7 @@
   async function getTrain(rid) {
     try {
       console.log(`Requested Station: ${rid}`);
-      const url = `https://owlboard.info/api/v2/live/train/rid/${rid}`;
+      const url = `${getApiUrl()}/api/v2/live/train/rid/${rid}`;
       const opt = {
         method: 'GET',
         headers: {

src/lib/ldb/staff/train-detail.ts

@@ -0,0 +1,29 @@
+// Contains the details required to lookup train details
+export interface Detail {
+  show: boolean;
+  headcode: string;
+  rid: string;
+  uid: string;
+}
+
+// Initiates/Resets a `Detail` interface
+export function detailInit(): Detail {
+  const detail: Detail = {
+    show: false,
+    headcode: '',
+    rid: '',
+    uid: ''
+  };
+  return detail;
+}
+
+// Initiates/Updates a `Detail` interface using the given values
+export function defineDetail(rid: string, uid: string, tid: string) {
+  const detail: Detail = {
+    rid: rid,
+    uid: uid,
+    headcode: tid,
+    show: true
+  };
+  return detail;
+}

src/lib/libauth.ts

@@ -1,3 +1,4 @@
+import { getApiUrl } from './scripts/upstream';
 import { uuid } from './stores/uuid';
 
 export interface libauthResponse {
@@ -50,7 +51,7 @@ async function checkUuid(): Promise<uuidCheckRes> {
 }
 
 async function checkServerAuth(uuidString: string) {
-  const url = 'https://owlboard.info/api/v2/user/checkAuth';
+  const url = `${getApiUrl()}/api/v2/user/checkAuth`;
   const options = {
     method: 'GET',
     headers: {

src/lib/raw-fetchers/reason.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { getApiUrl } from '$lib/scripts/upstream';
   import { uuid } from '$lib/stores/uuid';
 
   export let code = '';
@@ -17,7 +18,7 @@
   }
 
   async function getReason(code = '') {
-    const url = `https://owlboard.info/api/v2/ref/reasonCode/${code}`;
+    const url = `${getApiUrl()}/api/v2/ref/reasonCode/${code}`;
     const options = {
       method: 'GET',
       headers: {

src/lib/scripts/upstream.ts

@@ -0,0 +1,9 @@
+import { dev } from '$app/environment';
+
+export function getApiUrl() {
+  if (dev) {
+    console.info('DEVMODE active, using testing URL');
+    return 'https://testing.owlboard.info';
+  }
+  return 'https://owlboard.info';
+}

src/lib/stores/version.ts

@@ -1,3 +1,3 @@
-export const version: string = '2023.8.3';
+export const version: string = '2023.10.1';
 export const versionTag: string = '';
 export const showWelcome: boolean = false;

src/lib/train/train-detail.svelte

@@ -3,13 +3,14 @@
   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';
 
   export let service = '';
 
   let isExpanded = false;
 
   async function getTrainByUID(tuid = '') {
-    const url = `https://owlboard.info/api/v2/timetable/train/now/byTrainUid/${tuid}`;
+    const url = `${getApiUrl()}/api/v2/timetable/train/now/byTrainUid/${tuid}`;
     const options = {
       method: 'GET',
       headers: {

src/routes/err/404/+page.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import Header from "$lib/navigation/header.svelte";
+  import Nav from "$lib/navigation/nav.svelte";
+
+    const title = "404 - Not Found"
+</script>
+
+<Header {title} />
+<h1 class="heading">There's no light at the end of this tunnel</h1>
+<p>The page you were looking for wasn't found</p>
+<p>Use the menu bar to try another destination</p>
+<br>
+<p class="err_code">Status: 404<br>Message: NOT_FOUND</p>
+<Nav />
+
+<style>
+    .heading {
+        color: var(--second-text-color);
+    }
+    .err_code {
+        color: white;
+    }
+</style>

src/routes/err/50x/+page.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import Header from "$lib/navigation/header.svelte";
+    import Nav from "$lib/navigation/nav.svelte";
+  
+      const title = "50x - Server Error"
+  </script>
+  
+  <Header {title} />
+  <h1 class="heading">This page has been delayed by more servers than usual needing repairs at the same time</h1>
+  <p>There was an error with the server, please try again later</p>
+  <p>Use the menu bar to try another destination, you can report an issue from the 'Menu'</p>
+  <br>
+  <p class="err_code">Status: 50x<br>Message: INTERNAL_SERVER_ERROR</p>
+  <Nav />
+  
+  <style>
+      .heading {
+          color: var(--second-text-color);
+      }
+      .err_code {
+          color: white;
+      }
+  </style>

src/routes/more/corpus/+page.svelte

@@ -2,6 +2,7 @@
   import Header from '$lib/navigation/header.svelte';
   import Loading from '$lib/navigation/loading.svelte';
   import Nav from '$lib/navigation/nav.svelte';
+  import { getApiUrl } from '$lib/scripts/upstream';
   const title = 'Location Codes';
 
   let val = {
@@ -16,7 +17,7 @@
   let isLoading = false;
 
   async function getData(type = '', value = '') {
-    const url = `https://owlboard.info/api/v2/ref/locationCode/${type}/${value}`;
+    const url = `${getApiUrl()}/api/v2/ref/locationCode/${type}/${value}`;
     const res = await fetch(url);
     const data = await res.json();
     isLoading = false;

src/routes/more/data/+page.svelte

@@ -3,6 +3,7 @@
   import Header from '$lib/navigation/header.svelte';
   import Loading from '$lib/navigation/loading.svelte';
   import Nav from '$lib/navigation/nav.svelte';
+  import { getApiUrl } from '$lib/scripts/upstream';
   import { uuid } from '$lib/stores/uuid.js';
   import { onMount } from 'svelte';
   const title = 'Your Data';
@@ -18,7 +19,7 @@
 
   async function fetchData() {
     if ($uuid != 'null') {
-      const url = `https://owlboard.info/api/v2/user/${$uuid}`;
+      const url = `${getApiUrl()}/api/v2/user/${$uuid}`;
       const res = await fetch(url);
       const json = await res.json();
       if (json.length) {

src/routes/more/reasons/+page.svelte

@@ -4,6 +4,7 @@
   import Nav from '$lib/navigation/nav.svelte';
   import Loading from '$lib/navigation/loading.svelte';
   import ResultIsland from '$lib/islands/result-island.svelte';
+  import { getApiUrl } from '$lib/scripts/upstream';
 
   const title = 'Reason Codes';
   let isLoading = false;
@@ -25,7 +26,7 @@
 
   async function getData() {
     if (inputValue) {
-      const url = `https://owlboard.info/api/v2/ref/reasonCode/${inputValue}`;
+      const url = `${getApiUrl()}/api/v2/ref/reasonCode/${inputValue}`;
       const res = await fetch(url);
       return await res.json();
     } else {

src/routes/more/reg/+page.svelte

@@ -5,6 +5,7 @@
   import { onMount } from 'svelte';
   import { checkAuth, logout } from '$lib/libauth';
   import LogoutButton from '$lib/navigation/LogoutButton.svelte';
+  import { getApiUrl } from '$lib/scripts/upstream';
 
   const title = 'Register';
 
@@ -18,7 +19,7 @@
 
   async function request() {
     isLoading = true;
-    const url = 'https://owlboard.info/api/v2/user/request';
+    const url = `${getApiUrl()}/api/v2/user/request`;
     const request = {
       method: 'POST',
       headers: {

src/routes/more/reg/submit/+page.svelte

@@ -2,6 +2,7 @@
   import Header from '$lib/navigation/header.svelte';
   import Loading from '$lib/navigation/loading.svelte';
   import Nav from '$lib/navigation/nav.svelte';
+  import { getApiUrl } from '$lib/scripts/upstream';
   import { uuid } from '$lib/stores/uuid.js';
   import { onMount } from 'svelte';
 
@@ -14,7 +15,7 @@
   }
 
   async function submit(id) {
-    const url = 'https://owlboard.info/api/v2/user/register';
+    const url = `${getApiUrl()}/api/v2/user/register`;
     const request = {
       method: 'POST',
       headers: {

src/routes/more/report/+page.svelte

@@ -5,6 +5,7 @@
   import { onMount } from 'svelte';
   import Loading from '$lib/navigation/loading.svelte';
   import Done from '$lib/navigation/done.svelte';
+  import { getApiUrl } from '$lib/scripts/upstream';
 
   const title = 'Report Issue';
   let isLoading = false;
@@ -47,7 +48,7 @@
         `User Message:\n` +
         `${reportMsg}`
     });
-    const url = `https://owlboard.info/misc/issue`;
+    const url = `${getApiUrl()}/misc/issue`;
     const options = {
       method: 'POST',
       headers: {

src/routes/more/statistics/+page.svelte

@@ -3,10 +3,11 @@
   import Header from '$lib/navigation/header.svelte';
   import Loading from '$lib/navigation/loading.svelte';
   import Nav from '$lib/navigation/nav.svelte';
+  import { getApiUrl } from '$lib/scripts/upstream';
   const title = 'Statistics';
 
   async function getData() {
-    const url = 'https://owlboard.info/misc/server/stats';
+    const url = `${getApiUrl()}/misc/server/stats`;
     const res = await fetch(url);
     return await res.json();
   }

src/routes/more/versions/+page.svelte

@@ -5,10 +5,11 @@
   import Nav from '$lib/navigation/nav.svelte';
   import LargeLogo from '$lib/images/large-logo.svelte';
   import { version, versionTag } from '$lib/stores/version';
+  import { getApiUrl } from '$lib/scripts/upstream';
   const title = 'Versions';
 
   async function getData() {
-    const url = 'https://owlboard.info/misc/server/versions';
+    const url = `${getApiUrl()}/misc/server/versions`;
     const res = await fetch(url);
     return await res.json();
   }
@@ -23,7 +24,7 @@
 {:then data}
   <Island>
     <p>
-      <a class="data" href="https://git.fjla.uk/owlboard/owlboard-svelte" target="_blank">Web-app version<br /><span class="data">{version}-{versionTag}</span></a>
+      <a class="data" href="https://git.fjla.uk/owlboard/owlboard-svelte" target="_blank">Web-app version<br /><span class="data">{version}{#if versionTag}-{versionTag}{/if}</span></a>
     </p>
     <p>
       <a class="data" href="https://git.fjla.uk/owlboard/backend" target="_blank">API Server version<br /><span class="data">{data?.backend || 'Unknown'}</span></a>

src/routes/pis/+page.svelte

@@ -5,6 +5,7 @@
   import Loading from '$lib/navigation/loading.svelte';
   import { uuid } from '$lib/stores/uuid';
   import StylesToc from '$lib/train/styles-toc.svelte';
+  import { getApiUrl } from '$lib/scripts/upstream';
 
   const title = 'PIS Finder';
   const variables = { title: 'Results' };
@@ -18,14 +19,14 @@
 
   async function findByStartEnd() {
     isLoading = true;
-    const url = `https://owlboard.info/api/v2/pis/byStartEnd/${entryStartCRS}/${entryEndCRS}`;
+    const url = `${getApiUrl()}/api/v2/pis/byStartEnd/${entryStartCRS}/${entryEndCRS}`;
     await fetchData(url);
     isLoading = false;
   }
 
   async function findByPis() {
     isLoading = true;
-    const url = `https://owlboard.info/api/v2/pis/byCode/${entryPIS}`;
+    const url = `${getApiUrl()}/api/v2/pis/byCode/${entryPIS}`;
     await fetchData(url);
     isLoading = false;
   }

src/routes/train/+page.svelte

@@ -7,6 +7,7 @@
 
   import { onMount } from 'svelte';
   import TrainDetail from '$lib/train/train-detail.svelte';
+  import { getApiUrl } from '$lib/scripts/upstream';
 
   let title = 'Timetable Results';
   let id = '';
@@ -50,7 +51,7 @@
         uuid: $uuid
       }
     };
-    const url = `https://owlboard.info/api/v2/timetable/train/${date}/${searchType}/${id}`;
+    const url = `${getApiUrl()}/api/v2/timetable/train/${date}/${searchType}/${id}`;
     try {
       const res = await fetch(url, options);
       if (res.status == 200) {