Complete single service display on train-detail

This commit is contained in:
Fred Boniface 2023-06-08 10:53:00 +01:00
parent 2c001426ca
commit a937ae7229
3 changed files with 40 additions and 8 deletions

View File

@ -30,6 +30,7 @@ async function parse(data) {
displayOne(data[0]) displayOne(data[0])
} }
displayOptions(data) displayOptions(data)
document.getElementById('train_data').style = 'display:block;'
} }
async function displayOptions(data) { async function displayOptions(data) {
@ -38,10 +39,13 @@ async function displayOptions(data) {
async function displayOne(object) { async function displayOne(object) {
// Display a single service immediately // Display a single service immediately
const dataHead = ` const dataTableHead = `
<p id='data_headcode'>${object['headcode']}</p> <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 = [] let publicStops = []
for (const stop of object['stops']) { for (const stop of object['stops']) {
if (stop['isPublic']) { if (stop['isPublic']) {
@ -51,18 +55,29 @@ async function displayOne(object) {
console.log(publicStops) console.log(publicStops)
stopRows = '' stopRows = ''
for (const stop of publicStops) { for (const stop of publicStops) {
stopRows += await createStopTableRow(stop) stopRows += await createPublicStopTableRow(stop)
} }
const displayBox = document.getElementById('train_data') 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 ` return `
<tr> <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> </tr>
` `
} }

16
styles/train-detail.css Normal file
View File

@ -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;
}

View File

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