From d341103aa504421105837c7a2663ebf67a699e42 Mon Sep 17 00:00:00 2001
From: Fred Boniface <fred@fjla.uk>
Date: Thu, 8 Jun 2023 14:09:36 +0100
Subject: [PATCH] Fix onclick action

---
 js/lib.main.js     |  2 +-
 js/train-detail.js | 25 ++++++++++++++++++-------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/js/lib.main.js b/js/lib.main.js
index 85f4be8..abdd41b 100644
--- a/js/lib.main.js
+++ b/js/lib.main.js
@@ -46,7 +46,7 @@ const delay = ms => new Promise(res => setTimeout(res, ms))
 /* Maintains backwards compatibility for previous
    implementation of log helper */
 async function log(msg, type) {
-  const mode = 'prod'
+  const mode = 'dev'
   if (mode === 'prod' && type != 'ERR') {
     return
   }
diff --git a/js/train-detail.js b/js/train-detail.js
index 1e8d1ab..e02eed2 100644
--- a/js/train-detail.js
+++ b/js/train-detail.js
@@ -25,7 +25,7 @@ async function get(headcode) {
 }
 
 async function parse(data) {
-  if (data.length === 1) {
+  if (data.length <= 1) {
     document.getElementById('train_options').style = 'display:none;'
     displayOne(data[0])
   }
@@ -34,16 +34,27 @@ async function parse(data) {
 }
 
 async function displayOptions(data) {
-  // for (service of data) {
-  //   create a button showing first departure time
-  //   alongside the TOC, the origin and destination.
-  //   maybe implement an accordion?
-  // }
+  for (service in data) {
+    const serviceData = data[service]
+    const lastStop = serviceData['stops'][(serviceData['stops'].length - 1)]
+    log(`displayOptions: data[${service}] = ${serviceData}`, 'dbug')
+    let button = `
+      <button class='service_button' onclick='displayOne(data[${service}])'>
+        <span class='service_toc'>GW</span>
+        <span class='service_origin_time'>${serviceData['stops'][0]['wttDeparture']}</span>
+        <span class='service_origin_tiploc'>${serviceData['stops'][0]['tiploc']}</span>
+        to 
+        <span class='service_dest_tiploc'>${lastStop['tiploc']}</span>
+      </button>
+    `
+    document.getElementById('train_options').insertAdjacentHTML('beforeend', button)
+  }
+  document.getElementById('train_options').style = 'display:block;'
   return data
 }
 
 async function displayOne(object) {
-  // Display a single service immediately
+  // Display a single service
   const dataTableHead = `
     <p id='data_headcode'>${object['headcode']}</p>
     <p id='data_piscode'>PIS Code: ${object['pis']}</p>