src/lib/scripts/upstream.ts

@@ -1,12 +1,9 @@
 import { dev } from '$app/environment';
 
-const testUrl: string = 'http://localhost:8460'
-const prodUrl: string = 'https://owlboard.info'
-
 export function getApiUrl() {
   if (dev) {
-    console.info('DEVMODE active, using testing URL: ', testUrl);
+    console.info('DEVMODE active, using testing URL');
-    return testUrl;
+    return 'http://localhost:8460';
   }
-  return prodUrl;
+  return 'https://owlboard.info';
 }

src/lib/train/pis-handler.svelte

@@ -6,26 +6,10 @@
 
 {#if pisObject}
   {#if typeof pisObject === 'string' || typeof pisObject === 'number'}
-    <span class="pis">PIS: {pisObject}</span>
+    {pisObject}
   {:else if pisObject['skipCount'] === 0}
-    <span class="pis">PIS: {pisObject.code}</span>
+    {pisObject.code}
   {:else if pisObject['skipCount'] > 0}
-    <span class="pis">PIS: {pisObject.code}</span>
+    {pisObject.code} - (Skip first {pisObject.skipType}{#if pisObject.skipCount > 1} {pisObject.skipCount} stops{:else} stop{/if})
-    <br>
-    <span class="pis-text">(skip first {pisObject.skipType}{#if pisObject.skipCount > 1} {pisObject.skipCount} stops{:else} stop{/if})</span>
   {/if}
 {/if}
-
-<style>
-  .pis-text {
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--main-text-color);
-  }
-
-  .pis {
-    font-size: 18px;
-    font-weight: 600;
-    color: var(--main-text-color);
-  }
-</style>

src/lib/train/train-detail.svelte

@@ -31,12 +31,14 @@
   }
 </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
+      {service?.stops[0]['tiploc']} to {service?.stops[service['stops'].length - 1]['tiploc']}{#if (service?.vstp)}VSTP{/if}</span
     >
     <span id="container-arrow" class:isExpanded>V</span>
   </div>
@@ -45,57 +47,49 @@
       {#await getTrainByUID(service.trainUid)}
         <LoadingText />
       {:then serviceDetail}
-        {#if serviceDetail.stpIndicator === 'C'}
+        <div class="detailOperator"><StylesToc toc={service?.operator || ''} full={true} /></div>
-          <p class="text-message">This has been removed from the timetable for today.<br /><br>
+        {#if serviceDetail.pis}
-          The service will not run, another service may be running in its place.</p>
+          <p class="pis">PIS: <PisHandler pisObject={serviceDetail.pis} /></p>
-        {:else}
+        {/if}
-          {#if serviceDetail.vstp}
+        <p class="svc-detail">
-            <div class="vstp">VSTP</div>
+          Planned Type: {parseInt(serviceDetail.planSpeed) || '--'}mph {serviceDetail.powerType || 'Non-Rail vehicle'}
-          {/if}
+        </p>
-          <div class="detailOperator"><StylesToc toc={service?.operator || ''} full={true} /></div>
+        <p class="svc-detail">
-          {#if serviceDetail.pis}
+          Days Run: {serviceDetail?.daysRun.join(', ').toUpperCase() || 'Unknown'}
-            <PisHandler pisObject={serviceDetail.pis} />
+        </p>
-          {/if}
+        <p class="svc-detail validity">
-          <p class="svc-detail">
+          Valid From: {new Date(serviceDetail.scheduleStartDate).toLocaleDateString('en-GB', {
-            Planned Type: {parseInt(serviceDetail.planSpeed) || '--'}mph {serviceDetail.powerType || 'Non-Rail vehicle'}
+            timeZone: 'UTC'
-          </p>
+          })} - {new Date(serviceDetail.scheduleEndDate).toLocaleDateString('en-GB', {
-          <p class="svc-detail">
+            timeZone: 'UTC'
-            Days Run: {serviceDetail?.daysRun.join(', ').toUpperCase() || 'Unknown'}
+          })}
-          </p>
+        </p>
-          <p class="svc-detail validity">
+        <table>
-            Valid From: {new Date(serviceDetail.scheduleStart).toLocaleDateString('en-GB', {
+          <tr>
-              timeZone: 'UTC'
+            <th>Location</th>
-            })} - {new Date(serviceDetail.scheduleEnd).toLocaleDateString('en-GB', {
+            <th>Sch Arr.</th>
-              timeZone: 'UTC'
+            <th>Sch Dep.</th>
-            })}
+          </tr>
-          </p>
+          {#if serviceDetail.stops[0]['publicDeparture']}
-          <table>
+            {#each serviceDetail.stops as stop}
-            <tr>
+              {#if stop.publicArrival || stop.publicDeparture}
-              <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.publicArrival || '-'}</td>
-                  <td>{stop.wttDeparture || '-'}</td>
+                  <td>{stop.publicDeparture || '-'}</td>
                 </tr>
-              {/each}
+              {/if}
-            {/if}
+            {/each}
-          </table>
+          {:else}
-        {/if}
+            {#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}
@@ -147,8 +141,15 @@
     margin-bottom: 15px;
     font-weight: 600;
   }
+  .pis {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--main-text-color);
+    margin-top: 10px;
+    margin-bottom: 5px;
+  }
   .svc-detail {
-    margin-top: 6px;
+    margin-top: 2px;
     margin-bottom: 2px;
     color: var(--island-text-color);
   }
@@ -161,19 +162,4 @@
     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>