Improvements to UX, introduced TOC filtering.
This commit is contained in:
+170
-26
@@ -1,5 +1,5 @@
|
|||||||
<!DOCTYPE HTML>
|
<!DOCTYPE HTML>
|
||||||
<html style="min-height: 100vh; display: flex;">
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<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">
|
<link rel="icon" type="image/x-icon" href="https://cdn.ballast-data.co.uk/Icon.svg">
|
||||||
|
|
||||||
<style>
|
<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 {
|
.level0 {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
@@ -16,34 +98,59 @@
|
|||||||
.col2 {
|
.col2 {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
input {
|
|
||||||
font-family: "Merriweather Sans";
|
input {
|
||||||
font-size: 1em;
|
font-family: "Merriweather Sans";
|
||||||
border: 3px solid var(--A1);
|
font-size: 1em;
|
||||||
}
|
border: 3px solid var(--A1);
|
||||||
input:hover {
|
}
|
||||||
background-color: var(--C2);
|
input:hover {
|
||||||
}
|
background-color: var(--C2);
|
||||||
|
}
|
||||||
</style>
|
</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>
|
</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>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<a href="/fares">
|
<a href="/fares"><img src="https://cdn.ballast-data.co.uk/Icon-NB.svg"></a>
|
||||||
<img src="https://cdn.ballast-data.co.uk/Icon-NB.svg">
|
|
||||||
</a>
|
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
Ballast-Data Product |
|
Ballast-Data Product <br>
|
||||||
Contact: Non-Doxxing Email Lorum Ipsum <br>
|
<a href="/">Home</a> |
|
||||||
Some Header Content
|
<a href="/fares">Fares</a> |
|
||||||
|
<a href="/stations">Stations</a> |
|
||||||
|
<a href="/about">About Us</a>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
@@ -51,9 +158,9 @@
|
|||||||
|
|
||||||
<br>
|
<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>
|
<br>
|
||||||
<a href="/fares">
|
<a href="/fares">
|
||||||
<img height=80px src="https://cdn.ballast-data.co.uk/Logo.svg">
|
<img height=80px src="https://cdn.ballast-data.co.uk/Logo.svg">
|
||||||
@@ -63,11 +170,37 @@
|
|||||||
|
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<div style="margin-left: auto; margin-right: auto; width: fit-content;">
|
<div class="query">
|
||||||
<form method="get" action="/fares">
|
<form method="get" action="/fares">
|
||||||
<input name="origin" placeholder="Origin*" style="width: 10em;">
|
<input
|
||||||
<input name="destination" placeholder="Destination*" style="width: 10em;">
|
name="origin"
|
||||||
<input name="toc" placeholder="TOC" style="width: 5em;">
|
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;">
|
<input type="submit" value="Go!" style="width: 5em;">
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
@@ -80,9 +213,20 @@
|
|||||||
|
|
||||||
<br>
|
<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);">
|
<div class="footer">
|
||||||
Open Rail Data Disclaimer Etc. | No Guarantees or Whatever | We do freelance and dont want to be poor.
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -26,4 +26,6 @@ def fares_query(
|
|||||||
environ.get("BD_FARES_PASS", ""),
|
environ.get("BD_FARES_PASS", ""),
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
|
if response.status_code != 200:
|
||||||
|
return []
|
||||||
return json.loads(response.content.decode()) # pyright: ignore[reportAny]
|
return json.loads(response.content.decode()) # pyright: ignore[reportAny]
|
||||||
|
|||||||
@@ -72,6 +72,10 @@ class FaresHandler(BaseHTTPRequestHandler):
|
|||||||
destination=destination,
|
destination=destination,
|
||||||
toc=query_terms.get("toc"),
|
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 = '<table style="margin-left: auto; margin-right: auto;">'
|
||||||
text += (
|
text += (
|
||||||
'<tr style="font-size: 1.6em;"> <th> Flow </th> <th> Fares </th> </tr>\n'
|
'<tr style="font-size: 1.6em;"> <th> Flow </th> <th> Fares </th> </tr>\n'
|
||||||
|
|||||||
Reference in New Issue
Block a user