2023-05-06 21:53:45 +01:00
4 changed files with 156 additions and 2 deletions
--- a/js/lib.main.js
+++ b/js/lib.main.js
@ -45,7 +45,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 = "dev"
+    const mode = "tst"
    if (mode === "prod" && type != "ERR") {
        return;
    }
@ -126,7 +126,49 @@ async function getQuery(param) {
    }
 }

-async function vibe(type) { // Offers three standard vibration patterns for consistency
+async function getApi(path,auth = false) {
+    let apiVer = 'v1'
+    let url = `https://${window.location.origin}/api/${apiVer}/${path}`
+    log(`getApi: Fetching from endpoint: ${url}, Auth=${auth}`)
+    try {
+        var resp = await fetch(url)
+        if (resp != 200) {
+            return false
+        }
+        if (!resp.ok) {
+            return false
+        }
+        if (resp.json() === "[]") {
+            return 'empty'
+        }
+        return resp.json();
+    } catch(err) {
+        return false
+    }
+}
+
+async function getApi(path,auth = false) {
+    let apiVer = 'v1'
+    let url = `https://${window.location.origin}/api/${apiVer}/${path}`
+    log(`getApi: Fetching from endpoint: ${url}, Auth=${auth}`)
+    try {
+        var resp = await fetch(url)
+        if (resp != 200) {
+            return false
+        }
+        if (!resp.ok) {
+            return false
+        }
+        if (resp.json() === "[]") {
+            return 'empty'
+        }
+        return resp.json();
+    } catch(err) {
+        return false
+    }
+}
+
+async function vibe(type) {
    let canVibrate = "vibrate" in navigator || "mozVibrate" in navigator
    if (canVibrate && !("vibrate" in navigator)){
        navigator.vibrate = navigator.mozVibrate
--- a/js/pis.js
+++ b/js/pis.js
@ -0,0 +1,37 @@
+hideLoading()
+
+async function findByOrigDest() {
+    showLoading()
+    const formData = await fetchOrigDest()
+    log(`findByOrigDest: Searching for PIS Code for ${JSON.stringify(formData)}`)
+    const endpoint = `pis/${formData.origin}/${formData.destination}`
+    const json = await getApi(endpoint)
+    if (json == false) {
+        await noData()
+    } else {
+        await displayData(json)
+    }
+    document.getElementById('crs-box').style = 'display:none'
+    document.getElementById('result-box').style = 'display:block'
+    hideLoading()
+}
+
+async function fetchOrigDest() {
+    var orig = document.getElementById("origin").value
+    var dest = document.getElementById("destination").value
+    return {origin: orig, destination: dest}
+}
+
+async function displayData(json) {
+    log(`displayData: ${JSON.stringify(json)}`)
+}
+
+async function noData() {
+    msg = '<p>No results found</p>'
+    document.getElementById('result-box').insertAdjacentHTML("beforeend", msg)
+}
+
+async function reset() {
+    document.getElementById('result-box').style = 'display:none'
+    document.getElementById('crs-box').style = 'display:block'
+}
--- a/pis.html
+++ b/pis.html
@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8"/>
+    <meta name="description" content="OwlBoard - Live departures & Ops info for traincrew."/>
+    <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="stylesheet" type="text/css" href="./styles/pis.css"/>
+    <link rel="icon" type="image/svg+xml" href="./images/icon.svg"/>
+    <link rel="manifest" type="application/json" href="./manifest.json"/>
+    <title>OwlBoard - PIS</title>
+    <script src="./js/lib.main.js" defer></script>
+    <script src="./js/pis.js" defer></script>
+  </head>
+
+  <body>
+
+    <div id="top_button" class="hide_micro">
+      <a href="/">
+        <picture aria-label="Home" class="sidebar_control">
+          <source srcset="/images/nav/back.svg" type="image/svg+xml">
+          <img src="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>PIS Codes</h2>
+
+    <div id="loading">
+      <div class="spinner">
+      </div>
+      <p id="loading_desc">Searching</p>
+    </div>
+
+    <div id="crs-box">
+        <p>Enter a services start and end CRS stations to see code options and
+            stopping patterns.</p>
+        <p>Currently supported (Beta): GWR Bristol Metro region only.</p>
+        <label for="origin">Origin:</label><br>
+        <input type="text" class="small-lookup-box" id="origin" name="origin" maxlength="3"><br><br>
+        <label for="destination">Destination:</label><br>
+        <input type="text" class="small-lookup-box" id="destination" name="destination" maxlength="3"><br><br>
+        <input type="submit" value="Find" class="lookup-button" onclick="findByOrigDest()">
+    </div>
+
+    <div id="result-box">
+        <h3>Results</h3>
+        <!-- display: none; by default, some kind of box which shows each code
+             and destination individually with a previous and next arrow. -->
+    </div>
+
+    <button id="reset" class="lookup-button" onclick="reset()">Reset</button>
+    <!-- Footer -->
+    <footer>
+      <p>Created by <a href="https://fredboniface.co.uk" target="_blank" rel="noreferrer noopener">Fred Boniface</a> - <span id="ver_str">1.2.4</span></p>
+    </footer>
+  </body>
+</html>
--- a/styles/pis.css
+++ b/styles/pis.css
@ -0,0 +1,7 @@
+#crs-boxes {
+    display: block;
+}
+
+#result-box {
+    display: none;
+}