Prepare upgrade of timetable lookup tool

dockerfile

@@ -7,7 +7,7 @@ RUN npm install
 COPY . ./
 RUN npm run build
 
-FROM nginx:alpine-slim
+FROM georgjung/nginx-brotli:mainline-alpine
 RUN rm -f /etc/nginx/nginx.conf
 COPY ./nginx.conf /etc/nginx/nginx.conf
 COPY --from=build /app/build /usr/share/nginx/html

nginx.conf

@@ -1,3 +1,5 @@
+load_module modules/ngx_http_brotli_static_module.so;
+
 user  nginx;
 worker_processes  auto;
 
@@ -44,6 +46,7 @@ http {
             root /usr/share/nginx/html;
             index index.html;
             gzip_static on;
+            brotli_static on;
             error_page 500 502 503 504 /50x.html;
             try_files $uri $uri.html $uri/ =404;
             add_header Cache-Control "public, no-transform, max-age=1209600";

src/app.css

@@ -28,7 +28,8 @@
 
 @font-face {
   font-family: 'ubuntu';
-  src: url('/font/ubuntumono/ubuntumono-regular.woff2') format('woff2'), url('/font/ubuntumono/ubuntumono-refular.woff') format('woff'), url('/font/ubuntumono/ubuntumono-regular.ttf') format('truetype');
+  src: url('/font/ubuntumono/ubuntumono-regular.woff2') format('woff2'), url('/font/ubuntumono/ubuntumono-regular.woff') format('woff'),
+    url('/font/ubuntumono/ubuntumono-regular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
 }

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

@@ -150,8 +150,9 @@
     click(rid, uid, tid);
   }
 </script>
+
 <p class="smallScreen">Your display is too small to view this data</p>
-  <table>
+<table>
   <tr>
     <th class="id">ID</th>
     <th class="from">From</th>
@@ -179,10 +180,13 @@
         <td class="id">{service.trainid}</td>
         <td class="from {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'}">{serviceData.from}</td>
         <td class="to {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'}">{serviceData.to}</td>
-          <td class="plat {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'} {serviceData.platformHidden && 'nonPass'}">{serviceData.platform.number || '-'}</td>
+        <td class="plat {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'} {serviceData.platformHidden && 'nonPass'}"
+          >{serviceData.platform.number || '-'}</td
+        >
         <td class="time schTime {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'}">{serviceData.schArr}</td>
-          <td class="time {serviceData.isNonPublic && 'nonPass'} {serviceData.isLateArr && 'late'} {serviceData.isArrDelayed && 'late'} {serviceData.isCancelled && 'canc'} {serviceData.isEarlyArr && 'early'}"
-            >{serviceData.isArrDelayed ? 'LATE' : serviceData.expArr}</td
+        <td
+          class="time {serviceData.isNonPublic && 'nonPass'} {serviceData.isLateArr && 'late'} {serviceData.isArrDelayed && 'late'} {serviceData.isCancelled &&
+            'canc'} {serviceData.isEarlyArr && 'early'}">{serviceData.isArrDelayed ? 'LATE' : serviceData.expArr}</td
         >
         <td class="time schTime {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'}">{serviceData.schDep}</td>
         <td
@@ -192,7 +196,8 @@
       </tr>
       <tr>
         <td class="tableTxt" colspan="8">
-            {service.operator} {#if service.isCharter}charter{/if}
+          {service.operator}
+          {#if service.isCharter}charter{/if}
           {#if serviceData.length} | {serviceData.length} carriages{/if}
           {#if service.delayReason}
             <br />
@@ -210,13 +215,14 @@
       </tr>
     {/await}
   {/each}
-  </table>
+</table>
 
 <style>
   table {
     table-layout: fixed;
     width: 100%;
-    margin: 0px;
+    max-width: 875px;
+    margin: auto;
     padding: 0px;
     color: white;
   }
@@ -258,13 +264,14 @@
   td.from,
   td.to {
     color: yellow;
-    text-align: left;
   }
 
-  td.to, th.to {
+  td.to,
+  th.to {
     text-align: right;
   }
-  td.from, th.from {
+  td.from,
+  th.from {
     text-align: left;
   }
   td.time {
@@ -280,27 +287,55 @@
   }
 
   /* Handle small screens */
-  .smallScreen {display: none; margin: 20px;}
+  .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;}
+    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;}
+    table {
+      display: none;
+    }
+    .smallScreen {
+      display: block;
+    }
   }
 
   /* Handle Large Screens */
   @media screen and (min-width: 375px) {
-    .dataRow{font-size: 18px;}
-    td.time{font-size:16px;}
+    .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:13px;}
+    .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 */

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

@@ -123,9 +123,9 @@
           <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">Est/<br />Act</th>
           <th class="tableTime">Sch</th>
-          <th class="tableTime">Est/<br>Act</th>
+          <th class="tableTime">Est/<br />Act</th>
           <th class="tableDelay" />
         </tr>
         <tr>
@@ -209,17 +209,23 @@
     margin-right: 0px;
     padding: 0px;
     color: white;
-    font-family: ubuntu,monospace;
+    font-family: ubuntu, monospace;
     font-size: 16px;
   }
   @media screen and (max-width: 338px) {
-    #detailTable{font-size: 14px}
+    #detailTable {
+      font-size: 14px;
+    }
   }
   @media screen and (max-width: 301px) {
-    #detailTable{font-size: 12px}
+    #detailTable {
+      font-size: 12px;
+    }
   }
   @media screen and (min-width: 469px) {
-    #detailTable{font-size: 20px}
+    #detailTable {
+      font-size: 20px;
+    }
   }
   .tableLocation {
     width: 18%;
@@ -228,10 +234,10 @@
     color: yellow;
   }
   .tablePlatform {
-    width: 5%;
+    width: 9%;
   }
   .tableTime {
-    width: 15%;
+    width: 14%;
   }
   .tableDelay {
     width: 7%;

src/lib/stores/version.js

@@ -1,3 +1,3 @@
 export const version = '2023.7.1';
-export const versionTag = 'beta.2';
+export const versionTag = 'beta.3';
 export const showWelcome = true;

src/lib/train/train-detail.svelte

@@ -9,7 +9,8 @@
     isExpanded = !isExpanded;
   }
 </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"

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

@@ -83,7 +83,10 @@
   <p>There was an error processing your request.</p>
   <p>Check that the email you entered was correct or try again later.</p>
 {:else if state == 'reg'}
-  <p>You are already registered for OwlBoard.  If you've recently logged out or updated, you may need to refresh this page to register as old data could still be stored in your browser.</p>
+  <p>
+    You are already registered for OwlBoard. If you've recently logged out or updated, you may need to refresh this page to register as old data could still be stored in your
+    browser.
+  </p>
 {/if}
 <Nav />
 

static/sw.js

@@ -2,15 +2,16 @@
 // This should then enable the new /service-worker.js to be installed
 
 self.addEventListener('activate', function (e) {
-  console.log(`Unregistering service worker`)
-  self.registration.unregister()
+  console.log(`Unregistering service worker`);
+  self.registration
+    .unregister()
     .then(function () {
       return self.clients.matchAll();
     })
     .then(function (clients) {
-      clients.forEach(client => {
-        console.log(`Navigating ${client.url}`)
-        client.navigate(client.url)
-      })
+      clients.forEach((client) => {
+        console.log(`Navigating ${client.url}`);
+        client.navigate(client.url);
+      });
     });
 });