Complete single service display on train-detail

js/train-detail.js

@@ -30,6 +30,7 @@ async function parse(data) {
     displayOne(data[0])
   }
   displayOptions(data)
+  document.getElementById('train_data').style = 'display:block;'
 }
 
 async function displayOptions(data) {
@@ -38,10 +39,13 @@ async function displayOptions(data) {
 
 async function displayOne(object) {
   // Display a single service immediately
-  const dataHead = `
+  const dataTableHead = `
     <p id='data_headcode'>${object['headcode']}</p>
-    <p id='data_piscode'>${object['pis']}</p>
+    <p id='data_piscode'>PIS Code: ${object['pis']}</p>
+    <table id='data_table'>
     `
+  const dataTableClose = `
+    </table>`
   let publicStops = []
   for (const stop of object['stops']) {
     if (stop['isPublic']) {
@@ -51,18 +55,29 @@ async function displayOne(object) {
   console.log(publicStops)
   stopRows = ''
   for (const stop of publicStops) {
-    stopRows += await createStopTableRow(stop)
+    stopRows += await createPublicStopTableRow(stop)
   }
   const displayBox = document.getElementById('train_data')
-  displayBox.insertAdjacentHTML('beforeend', dataHead + stopRows)
+  displayBox.insertAdjacentHTML('beforeend', dataTableHead + stopRows + dataTableClose)
 }
 
-async function createStopTableRow(stop) {
+async function createPublicStopTableRow(stop) {
+  let data_tiploc = stop['tiploc'], public_arr = stop['publicArrival'],
+    public_dep = stop['publicDeparture']
+  if (typeof data_tiploc === 'undefined') {
+    data_tiploc = ''
+  }
+  if (typeof public_arr === 'undefined') {
+    public_arr = '-'
+  }
+  if (typeof public_dep === 'undefined') {
+    public_dep = '-'
+  }
   return `
       <tr>
-        <td>${stop['tiploc']}</td>
+        <td id='data_tiploc'>${data_tiploc}</td>
-        <td>${stop['publicArrival']}</td>
+        <td id='public_arr'>${public_arr}</td>
-        <td>${stop['publicDeparture']}</td>
+        <td id='public_dep'>${public_dep}</td>
       </tr>
     `
 }

styles/train-detail.css

@@ -0,0 +1,16 @@
+#data_headcode {
+  color: var(--second-text-color);
+  font-size: 25px;
+  font-weight:bolder;
+}
+  
+#data_piscode {
+  color: var(--second-text-color);
+}
+  
+#data_table {
+  color: var(--second-text-color);
+  width: 200px;
+  margin: auto;
+}
+  

train-detail.html

@@ -12,6 +12,7 @@
     <meta name="theme-color" content="#00b7b7">
     <link rel="apple-touch-icon" href="./images/app-icons/any/apple-192.png">
     <link rel="stylesheet" type="text/css" href="./styles/main.css">
+    <link rel="stylesheet" type="text/css" href="./styles/train-detail.css">
     <link rel="icon" type="image/svg+xml" href="./images/icon.svg">
     <link rel="manifest" type="application/json" href="./manifest.json">
     <script src="./js/lib.main.js" defer></script>