Initial train-detail page

2023-06-07 23:31:51 +01:00 · 2023-06-07 23:31:51 +01:00 · 108483597b
parent 70f93029ef
commit 108483597b
2 changed files with 121 additions and 0 deletions
--- a/js/train-detail.js
+++ b/js/train-detail.js
@ -0,0 +1,68 @@
+versionDisplay()
+
+let data // Maybe this is a bad idea?
+
+init()
+
+async function init() {
+  const headcode = await getQuery('headcode')
+  if (headcode == 'false') {
+    parse([]) // Pass an empty array to parse()
+  }
+  const res = await get(headcode)
+  parse(res)
+}
+
+async function get(headcode) {
+  const apiPath = `train/headcode/today/${headcode}`
+  data = await getApi(apiPath, auth = true)
+  if (!data || typeof data !== 'number') {
+    log('train-detail.get: Status: ' + data, 'ERR')
+    return []
+  }
+  log(data, 'DBUG')
+  return data
+}
+
+async function parse(data) {
+  if (data.length === 1) {
+    document.getElementById('train_options').style = 'display:none;'
+    displayOne(data[0])
+  }
+  displayOptions(data)
+}
+
+async function displayOptions(data) {
+  return data
+}
+
+async function displayOne(object) {
+  // Display a single service immediately
+  const dataHead = `
+    <p id='data_headcode'>${object['headcode']}</p>
+    <p id='data_piscode'>${object['pis']}</p>
+    `
+  let publicStops = []
+  for (const stop of object['stops']) {
+    if (stop['isPublic']) {
+      publicStops.push(stop)
+    }
+  }
+  console.log(publicStops)
+  stopRows = ''
+  for (const stop of publicStops) {
+    stopRows += await createStopTableRow(stop)
+  }
+  const displayBox = document.getElementById('train_data')
+  displayBox.insertAdjacentHTML('beforeend', dataHead + stopRows)
+}
+
+async function createStopTableRow(stop) {
+  return `
+      <tr>
+        <td>${stop['TIPLOC']}</td>
+        <td>${stop['arrivalTime']}</td>
+        <td>${stop['departureTime']}</td>
+      </tr>
+    `
+}
--- a/train-detail.html
+++ b/train-detail.html
@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+
+    <meta charset="UTF-8">
+    <meta name="description" content="OwlBoard - How to use OwlBoard.">
+    <meta name="robots" content="noindex">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="application-name" content="OwlBoard">
+    <meta name="author" content="Frederick Boniface">
+    <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="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>
+    <script src="./js/train-detail.js" defer></script>
+    <title>OwlBoard - Train Details</title>
+
+  </head>
+
+  <body>
+
+    <div id="top_button" class="hide_micro">
+      <a href="./">
+        <picture class="sidebar_control">
+          <source srcset="./images/nav/back.svg" type="image/svg+xml">
+          <img aria-label="Home" src="./images/nav/back-40.png" alt="Home">
+        </picture>
+      </a>
+    </div>
+
+    <picture>
+      <source srcset="/images/logo/wide_logo.svg" type="image/svg+xml">
+      <source media="(max-height: 739px)" srcset="./images/logo/logo-full-200.png" type="image/png">
+      <source srcset="./images/logo/logo-full-250.png" type="image/png">
+      <img class="titleimg" src="./images/logo/logo-full-250.png" alt="OwlBoard Logo">
+    </picture>
+    <h2>Train Details</h2>
+      <div id="train_options">
+
+      </div>
+      <div id="train_data">
+
+      </div>
+    <footer>
+      <p>&copy; Fred Boniface 2023 - <a href="./stats.html"><span id="ver_str">???</span></a></p>
+    </footer>
+
+  </body>
+
+</html>