From 04e66c33172ada64c0db9256074d47d0c8dd5fb5 Mon Sep 17 00:00:00 2001
From: Fred Boniface <fred@fjla.uk>
Date: Wed, 18 Jan 2023 11:02:29 +0000
Subject: [PATCH] Add output table to board

Signed-off-by: Fred Boniface <fred@fjla.uk>
---
 static/board.html        | 36 +++++++++++++++++++++++++++++++++---
 static/styles/boards.css | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 66 insertions(+), 3 deletions(-)

diff --git a/static/board.html b/static/board.html
index 30e4635..ff4cb5f 100644
--- a/static/board.html
+++ b/static/board.html
@@ -34,6 +34,39 @@
         </p>
       </div>
 
+      <div id="output">
+        <table id="pub-table">
+          <tr>
+            <th class="name">Origin</th>
+            <th class="name">Dest.</th>
+            <th class="plat">Plat.</th>
+            <th class="time">Sch Arr.</th>
+            <th class="time">Act Arr.</th>
+            <th class="time">Sch Dep.</th>
+            <th class="time">Act Dep.</th>
+          </tr>
+          <!-- EXAMPLE DATA FOR STYLING REASONS -->
+          <tr>
+            <td class="name">Bristol Temple Meads</td>
+            <td class="name">Southampton Airport Parkway</td>
+            <td class="plat">1</td>
+            <td class="time">10:57</td>
+            <td class="time changed">10:59</td>
+            <td class="time">11:02</td>
+            <td class="time">On Time</td>
+          </tr>
+          <tr>
+            <td class="name">Bristol Parkway</td>
+            <td class="name">Dorchester South</td>
+            <td class="plat changed">13</td>
+            <td class="time">11:07</td>
+            <td class="time">11:22</td>
+            <td class="time">11:09</td>
+            <td class="time changed">11:23</td>
+          </tr>
+        </table>
+      </div>
+
       <div id="error_notice" class="main-notice hidden-while-loading">
         <h1 class="error">Oops</h1>
           <p class="error">There was an error with your request</p>
@@ -45,9 +78,6 @@
         <p>There are no scheduled train services from this station</p>
       </div>
 
-      <div id="output">
-      </div>
-
       <div id="footer">
         <picture>
           <source srcset="./images/nre/nre-powered_200w.webp" type="image/webp">
diff --git a/static/styles/boards.css b/static/styles/boards.css
index 0d552b2..4ca05f2 100644
--- a/static/styles/boards.css
+++ b/static/styles/boards.css
@@ -66,4 +66,37 @@
 #nrcc_notices p {
     width: 95%;
     margin: auto;
+}
+
+/* Content */
+#output {
+    width: 100%;
+}
+
+table {
+    width: 100%;
+    font-size: 10.5px;
+}
+
+.name{
+    text-align: left;
+}
+.plat{
+    width: 50px;
+    text-align: center;
+}
+.time{
+    width: 75px;
+    text-align: center;
+}
+
+.changed{
+    animation: pulse 1.5s linear infinite;
+}
+
+/* Animations */
+@keyframes pulse {
+    50% {
+        opacity: 0;
+    }
 }
\ No newline at end of file