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>${stop['publicArrival']}</td>
-        <td>${stop['publicDeparture']}</td>
+        <td id='data_tiploc'>${data_tiploc}</td>
+        <td id='public_arr'>${public_arr}</td>
+        <td id='public_dep'>${public_dep}</td>
       </tr>
     `
 }