diff --git a/UpNext.md b/UpNext.md
index f76d9ab..ded78b3 100644
--- a/UpNext.md
+++ b/UpNext.md
@@ -1,7 +1,18 @@
# What to do next:
-* Backend - Add Indexes:
+## Frontend:
+
+* Implement error pages.
+* Alerts box should not be clickable, bar should be.
+* Issue page: Submit using API.
+* Support multiple service origins/destinations:
+ - Where there are multiples an array is returned for trainServices.service
+* Enable text search for `locationName` on find-code page.
+
+
+## Backend:
+
+* DB Indexes:
- "stations": 3ALPHA, STANOX, TIPLOC
- "corpus": 3ALPHA, NLC, NLCDESC(TEXT)
-* Backend - The list of services should always be an array [] as per the NRCC MEssages.
-* Frontend - Implement error pages
\ No newline at end of file
+* Add Gitea Issue API
\ No newline at end of file
diff --git a/static/board.html b/static/board.html
index bbca127..2b1373d 100644
--- a/static/board.html
+++ b/static/board.html
@@ -20,7 +20,7 @@
@@ -34,18 +34,19 @@
-
+
⋁
-
+ Train Services
Origin
Dest.
@@ -61,9 +62,9 @@
-
-
Ferry Services
+
+ Ferry Services
Origin
Dest.
@@ -76,9 +77,9 @@
-
-
Bus Services
+
+ Bus Services
Origin
Dest.
diff --git a/static/find-code.html b/static/find-code.html
index 17869a1..d68a50d 100644
--- a/static/find-code.html
+++ b/static/find-code.html
@@ -38,7 +38,7 @@
Location name:
diff --git a/static/index.html b/static/index.html
index 2a56999..0fbf64a 100644
--- a/static/index.html
+++ b/static/index.html
@@ -20,7 +20,7 @@
diff --git a/static/js/find-code.js b/static/js/find-code.js
index 91a18f8..f640696 100644
--- a/static/js/find-code.js
+++ b/static/js/find-code.js
@@ -23,19 +23,24 @@ async function fetchEntry(){ // This can be condensed
async function parseData(values){
if (values.crs != ""){
+ setLoadingDesc(`Searching\n${values.crs.toUpperCase()}`)
var data = await getData("crs", values.crs)
} else if (values.nlc != ""){
+ setLoadingDesc(`Searching\n${values.nlc.toUpperCase()}`)
var data = await getData("nlc", values.nlc)
} else if (values.tiploc != ""){
+ setLoadingDesc(`Searching\n${values.tiploc.toUpperCase()}`)
var data = await getData("tiploc", values.tiploc)
} else if (values.stanox != ""){
+ setLoadingDesc(`Searching\n${values.stanox.toUpperCase()}`)
var data = await getData("stanox", values.stanox)
} else if (values.name != ""){
+ setLoadingDesc(`Searching\n${values.name.capitalize()}`)
var data = await getData("name", values.name)
} else {
errorNoData()
hideLoading()
- return
+ return;
}
displayData(data);
diff --git a/static/js/main.js b/static/js/main.js
index 7529c5f..920e398 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1,4 +1,4 @@
-// Toggle Loading Box
+// Loading Box
async function clearLoading() {
document.getElementById("loading").style = "display: none;";
}
@@ -7,6 +7,10 @@ async function showLoading() {
document.getElementById("loading").style = "display: block;";
}
+async function setLoadingDesc(desc) {
+ document.getElementById("loading_desc").textContent = `${desc}`;
+}
+
// Enable delays
const delay = ms => new Promise(res => setTimeout(res, ms));
diff --git a/static/js/public-board.js b/static/js/public-board.js
index eef65d8..a4446e6 100644
--- a/static/js/public-board.js
+++ b/static/js/public-board.js
@@ -4,6 +4,7 @@ init()
/* Supporting Functions */
async function init() {
var stn = await getQuery("stn");
+ setLoadingDesc(`Loading\n${stn.toUpperCase()}`)
log(`init: Looking up: ${stn}`);
var sv = await getQuery("sv");
log(`init: Staff Version: ${sv}`);
@@ -13,10 +14,12 @@ async function init() {
} else {
try {
var data = await publicLdb(stn)
+ setLoadingDesc(`${stn.toUpperCase()}\nParsing Data`)
log("init: Fetched LDB Data")
parseLdb(data)
} catch (err) {
var data = null
+ setLoadingDesc(`Handling\nError`)
log("init: Unable to fetch LDB data")
}
}
@@ -54,6 +57,7 @@ async function parseLdb(data) {
// Build and Display Functions
async function buildPage(data) {
+ setLoadingDesc('Loading\nTrains')
var stationName = data.GetStationBoardResult.locationName;
log(`buildPage: Data ready for ${stationName}`);
var generateTime = new Date(await data.GetStationBoardResult.generatedAt);
@@ -61,6 +65,7 @@ async function buildPage(data) {
setHeaders(stationName, generateTime);
// Check for notices and if true pass to function
if (data.GetStationBoardResult.nrccMessages) {
+ setLoadingDesc('Loading\nAlerts')
displayAlerts(data.GetStationBoardResult.nrccMessages.message);
}
if (typeof data.GetStationBoardResult.trainServices == 'undefined') {
@@ -69,9 +74,11 @@ async function buildPage(data) {
displayTrains(data)
}
if (data.GetStationBoardResult.ferryServices) {
+ setLoadingDesc('Loading\nFerries')
displayFerry(data.GetStationBoardResult.ferryServices)
}
if (data.GetStationBoardResult.busServices) {
+ setLoadingDesc('Loading\nBusses')
displayBus(data.GetStationBoardResult.busServices)
}
}
diff --git a/static/styles/boards.css b/static/styles/boards.css
index 038abbd..286180e 100644
--- a/static/styles/boards.css
+++ b/static/styles/boards.css
@@ -28,7 +28,7 @@
width: 100%;
height: 50px;
background-color: var(--overlay-color);
- color: lightgrey;
+ color: var(--second-text-color);
}
#station_name {
@@ -84,8 +84,8 @@
left: 0;
width: 100%;
height: 40px;
- background-color: darkorange;
- color: white;
+ background-color: var(--main-alert-color);
+ color: var(--second-text-color);
}
#alert_icon{
@@ -114,7 +114,7 @@
background: none;
border: none;
font-weight: 900;
- color: white;
+ color: var(--second-text-color);
transition: transform 0.25s linear;
}
@@ -124,7 +124,8 @@
left: 0;
top: 40px;
width: 100%;
- background-color: orange;
+ background-color: var(--main-alert-color);
+ background-image: radial-gradient(var(--second-alert-color) 10%,var(--main-alert-color) 70%); /* Undecided whether this actually looks better than plain orange? */
}
#alerts_msg p {
@@ -146,8 +147,16 @@ table {
margin-top: 3px;
font-size: 10.5px;
}
-#ferry{
- margin-top: 45px;
+
+caption{
+ padding-top: 5px;
+ padding-bottom: 10px;
+ font-size: larger;
+ font-weight: 900;
+}
+
+.secondary-table{
+ margin-top: 25px;
}
.name{
width: 25%;
@@ -155,7 +164,7 @@ table {
}
.name-item {
- color: yellow;
+ color: var(--board-name-color);
}
.plat{
@@ -174,7 +183,7 @@ table {
margin: 0;
margin-left: 3px;
text-align: left;
- color: lightblue;
+ color: var(--note-text-color);
}
.changed{
@@ -201,12 +210,12 @@ table {
/* Animations */
@keyframes pulse-change {
50% {
- color: orange;
+ color: var(--main-warning-color);
}
}
@keyframes pulse-cancel {
50% {
- color: darkorange;
+ color: var(--main-alert-color);
}
}
\ No newline at end of file
diff --git a/static/styles/main.css b/static/styles/main.css
index fd68f4b..2ca77fd 100644
--- a/static/styles/main.css
+++ b/static/styles/main.css
@@ -34,11 +34,19 @@
/* COLOR VARS */
:root {
--main-bg-color: #404c55;
+ --second-bg-color: #2b343c; /* Use as first arg in radial gradient */
--accent-color: #007979;
--overlay-color: #3c6f79de;
--main-text-color: #00b7b7;
+ --second-text-color: azure;
+ --note-text-color: #9de7ff;
--link-color: azure;
+ --box-border-color: ;
--link-visited-color: azure;
+ --main-alert-color: #ed6d00;
+ --second-alert-color: #e77f00; /* Use as second arg in radial gradient */
+ --main-warning-color: orange;
+ --board-name-color: #fcfc09;
}
/* Loading Box: */
@keyframes spinner {
@@ -53,7 +61,7 @@
animation: 1.5s linear infinite spinner;
animation-play-state: inherit;
border: solid 5px var(--overlay-color);
- border-bottom-color: white;
+ border-bottom-color: var(--second-text-color);
border-radius: 50%;
content: "";
height: 40px;
@@ -75,10 +83,13 @@
padding: 20px;
padding-bottom: 1px;
min-width: 90px;
+ max-width: 90px;
+ transition: 0.5s;
}
#loading p {
padding-top: 50px;
font-weight: bolder;
+ overflow-wrap: normal;
}
/* MAIN */
@@ -88,6 +99,7 @@ html{
}
body {
background-color: var(--main-bg-color);
+ background-image: radial-gradient(var(--second-bg-color), var(--main-bg-color));
color: var(--main-text-color);
font-family: urwgothic, sans-serif;
text-align: center;
@@ -286,7 +298,7 @@ footer {
background-color: var(--accent-color);
font-family: firamono, monospace;
font-size: smaller;
- color: white;
+ color: var(--second-text-color);
width: 100%;
position: fixed;
bottom: 0;
@@ -294,10 +306,10 @@ footer {
}
footer a {
text-decoration: underline;
- color: white;
+ color: var(--link-color);
}
footer a:visited {
- color: white;
+ color: var(--link-visited-color);
}
footer a:hover {
color: beige;