Improvements to UX, introduced TOC filtering.
This commit is contained in:
+162
-18
@@ -1,5 +1,5 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html style="min-height: 100vh; display: flex;">
|
||||
<html>
|
||||
<head>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
@@ -8,6 +8,88 @@
|
||||
<link rel="icon" type="image/x-icon" href="https://cdn.ballast-data.co.uk/Icon.svg">
|
||||
|
||||
<style>
|
||||
html {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
min-height: 100%;
|
||||
width: 100%;"
|
||||
background-color: var(--A2);
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--A0);
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
background-color: var(--A0);
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
width: fit-content;
|
||||
min-width: 35em;
|
||||
color: var(--A0);
|
||||
background-color: var(--C2);
|
||||
border: 6px solid var(--C1);
|
||||
border-radius: 0 0 9px 9px;
|
||||
padding: 12px;
|
||||
margin-top: 0px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.main {
|
||||
width: fit-content;
|
||||
background-color: white;
|
||||
border: 9px solid var(--B2);
|
||||
border-radius: 9px;
|
||||
padding: 12px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.branding {
|
||||
width: fit-content;
|
||||
border-bottom: 9px solid var(--C1);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.query {
|
||||
width: fit-content;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
font-size: 0.8em;
|
||||
color: var(--A0);
|
||||
background-color: var(--D2);
|
||||
border: 6px solid var(--D1);
|
||||
border-radius: 9px 9px 0 0;
|
||||
padding: 12px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.level0 {
|
||||
text-align: right;
|
||||
}
|
||||
@@ -16,6 +98,7 @@
|
||||
.col2 {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
input {
|
||||
font-family: "Merriweather Sans";
|
||||
font-size: 1em;
|
||||
@@ -26,24 +109,48 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function querySt(attribute) {
|
||||
url = window.location.search.substring(1);
|
||||
substrings = url.split('&');
|
||||
for (i=0;i<substrings.length;i++) {
|
||||
ft = substrings[i].split('=');
|
||||
if (ft[0] == attribute) {
|
||||
return ft[1];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function prefill(attribute) {
|
||||
var value = querySt(attribute);
|
||||
value = decodeURIComponent(value);
|
||||
|
||||
if(value !== 'undefined'){
|
||||
document.getElementById(attribute).value = value;
|
||||
} else {
|
||||
document.getElementById(attribute).value = '';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="padding: 0px; margin: 0px; min-height: 100%; background-color: var(--A2); display: flex; width: 100%;">
|
||||
<body>
|
||||
|
||||
<div style="width: 100%; padding: 0px; margin: 0px; background-color: var(--A0); min-height: 100%; display: flex; flex-direction: column;">
|
||||
<div class="wrapper">
|
||||
|
||||
<div style="position: sticky; top: 0px; margin-left: auto; margin-right: auto; width: fit-content; background-color: var(--C2); color: var(--A0); margin-top: 0px; padding: 12px; border-radius: 0 0 9px 9px; border: 6px solid var(--C1);">
|
||||
<div class="header">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="/fares">
|
||||
<img src="https://cdn.ballast-data.co.uk/Icon-NB.svg">
|
||||
</a>
|
||||
<a href="/fares"><img src="https://cdn.ballast-data.co.uk/Icon-NB.svg"></a>
|
||||
</td>
|
||||
<td>
|
||||
Ballast-Data Product |
|
||||
Contact: Non-Doxxing Email Lorum Ipsum <br>
|
||||
Some Header Content
|
||||
Ballast-Data Product <br>
|
||||
<a href="/">Home</a> |
|
||||
<a href="/fares">Fares</a> |
|
||||
<a href="/stations">Stations</a> |
|
||||
<a href="/about">About Us</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
@@ -51,9 +158,9 @@
|
||||
|
||||
<br>
|
||||
|
||||
<div style="width: fit-content; margin-left: auto; margin-right: auto; margin-bottom: 1em; margin-top: 1em; border: 9px solid var(--B2); border-radius: 3px; padding: 12px; background-color: white; border-radius: 9px;">
|
||||
<div class="main">
|
||||
|
||||
<div style="width: fit-content; margin-left: auto; margin-right: auto; border-bottom: 9px solid var(--C1);">
|
||||
<div class="branding">
|
||||
<br>
|
||||
<a href="/fares">
|
||||
<img height=80px src="https://cdn.ballast-data.co.uk/Logo.svg">
|
||||
@@ -63,11 +170,37 @@
|
||||
|
||||
<br>
|
||||
|
||||
<div style="margin-left: auto; margin-right: auto; width: fit-content;">
|
||||
<div class="query">
|
||||
<form method="get" action="/fares">
|
||||
<input name="origin" placeholder="Origin*" style="width: 10em;">
|
||||
<input name="destination" placeholder="Destination*" style="width: 10em;">
|
||||
<input name="toc" placeholder="TOC" style="width: 5em;">
|
||||
<input
|
||||
name="origin"
|
||||
id="origin"
|
||||
required
|
||||
autocomplete="on"
|
||||
placeholder="Origin*"
|
||||
style="width: 10em;"
|
||||
/>
|
||||
<script>prefill('origin')</script>
|
||||
|
||||
<input
|
||||
name="destination"
|
||||
id="destination"
|
||||
required
|
||||
autocomplete="on"
|
||||
placeholder="Destination*"
|
||||
style="width: 10em;"
|
||||
/>
|
||||
<script>prefill('destination')</script>
|
||||
|
||||
<input
|
||||
name="toc"
|
||||
id="toc"
|
||||
autocomplete="on"
|
||||
placeholder="TOC"
|
||||
style="width: 5em;"
|
||||
/>
|
||||
<script>prefill('toc')</script>
|
||||
|
||||
<input type="submit" value="Go!" style="width: 5em;">
|
||||
</form>
|
||||
</div>
|
||||
@@ -80,9 +213,20 @@
|
||||
|
||||
<br>
|
||||
|
||||
<div style="display: flex; margin-top: auto; margin-left: auto; margin-right: auto; width: fit-content; background-color: var(--D2); color: var(--A0); padding: 12px; border-radius: 9px 9px 0 0; border: 6px solid var(--D1);">
|
||||
Open Rail Data Disclaimer Etc. | No Guarantees or Whatever | We do freelance and dont want to be poor.
|
||||
<div class="footer">
|
||||
<span>
|
||||
Powered by National Rail Enquiries. This site is not accredited by National Rail. <br>
|
||||
We use information from
|
||||
<a href="https://opendata.nationalrail.co.uk/" target="_blank">National Rail Open Data</a>
|
||||
and
|
||||
<a href="https://raildata.org.uk/" target="_blank">Rail Data Marketplace</a>. <br>
|
||||
This service is not to be used for safety critical purposes. <br>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
|
||||
</html>
|
||||
|
||||
@@ -26,4 +26,6 @@ def fares_query(
|
||||
environ.get("BD_FARES_PASS", ""),
|
||||
),
|
||||
)
|
||||
if response.status_code != 200:
|
||||
return []
|
||||
return json.loads(response.content.decode()) # pyright: ignore[reportAny]
|
||||
|
||||
@@ -72,6 +72,10 @@ class FaresHandler(BaseHTTPRequestHandler):
|
||||
destination=destination,
|
||||
toc=query_terms.get("toc"),
|
||||
)
|
||||
if len(data) == 0:
|
||||
text = "No Fares Found."
|
||||
with open(template_path, "r") as rf:
|
||||
return rf.read().replace("<!-- Content -->", text)
|
||||
text = '<table style="margin-left: auto; margin-right: auto;">'
|
||||
text += (
|
||||
'<tr style="font-size: 1.6em;"> <th> Flow </th> <th> Fares </th> </tr>\n'
|
||||
|
||||
Reference in New Issue
Block a user