Adjust PIS Styling

js/lib.main.js

@@ -151,7 +151,7 @@ async function getApi(path,auth = false) {
         log(`resp.status: ${resp.status}`)
         log(`resp.json: ${json}`)
         if (resp.status != 200) {
-            return false
+            return resp.status
         }
         if (!resp.ok) {
             return false

js/pis.js

@@ -9,7 +9,9 @@ async function findByOrigDest() {
     const endpoint = `pis/origdest/${formData.origin}/${formData.destination}`
     const json = await getApi(endpoint, auth = true)
     if (json == false) {
-        await noData()
+        await displayNoData()
+    } else if (json == 401) {
+        await displayUnauthorised()
     } else {
         await insertData(json)
     }
@@ -45,11 +47,16 @@ async function insertData(json) {
     document.getElementById('result-count').textContent = results.toString()
 }
 
-async function noData() {
+async function displayNoData() {
     const msg = '<p id="result-table">No results found</p>'
     document.getElementById('result-box').insertAdjacentHTML("beforeend", msg)
 }
 
+async function displayUnauthorised() {
+    const msg = '<p id="result-table">Unauthorised - please ensure you are logged into the <a href="./settings.html">rail staff version</a></p>'
+    document.getElementById('result-box').insertAdjacentHTML("beforeend", msg)
+}
+
 async function reset() {
     document.getElementById('origin').value = ""
     document.getElementById('destination').value = ""

pis.html

@@ -45,13 +45,19 @@
     <div id="crs-box">
         <p>Enter a services start and end station CRS codes to see code options and
             stopping patterns.</p>
-        <p>Currently supported (Beta): GWR Bristol Metro region only.</p>
+        <p>Currently supported (Beta): GWR: Bristol Metro, WOS & CDF Southbound.</p>
         <p id="auth-required">You need to be logged into a free <a href="./settings.html">rail staff version</a> account for this feature.</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()">
+          <form id = "crs-inputs" action="javascript:findByOrigDest();">
+            <div class="crs-input">
+              <label for="origin">From:</label><br>
+              <input type="text" class="small-lookup-box pis-input" id="origin" name="origin" maxlength="3">
+            </div>
+            <div class="crs-input">
+              <label for="destination">To:</label><br>
+              <input type="text" class="small-lookup-box pis-input" id="destination" name="destination" maxlength="3"><br><br>
+            </div>
+          </form>
+        <input type="submit" value="Find" class="lookup-button">
     </div>
 
     <div id="result-box">

styles/pis.css

@@ -1,5 +1,12 @@
-#crs-boxes {
-    display: block;
+#crs-inputs {
+    display: flex;
+    justify-content: center;
+}
+
+.pis-input {
+    width: 55%;
+    max-width: 200px;
+    margin: auto;
 }
 
 #result-box {
@@ -19,7 +26,7 @@ td, th {
 }
 
 #reset {
-    margin-top: 25px
+    margin-top: 15px
 }
 
 #reset {