Frontend: Add base alert box.

Signed-off-by: Fred Boniface <fred@fjla.uk>
This commit is contained in:
Fred Boniface 2023-01-19 23:42:22 +00:00
parent 302b749834
commit d8e37f1b6d
6 changed files with 114 additions and 23 deletions

View File

@ -3,8 +3,10 @@
* Backend - Add Indexes: * Backend - Add Indexes:
- "stations": 3ALPHA, STANOX, TIPLOC - "stations": 3ALPHA, STANOX, TIPLOC
- "corpus": 3ALPHA, NLC, NLCDESC(TEXT) - "corpus": 3ALPHA, NLC, NLCDESC(TEXT)
* Backend - Tidy up nrcc messages. Remove `<p></p>` and `\n`.
* Frontend - Implement paginated NRCC Notices as they take up lots of space. * Frontend - Implement paginated NRCC Notices as they take up lots of space.
- Carousel: https://www.section.io/engineering-education/how-to-make-an-image-carousel-for-your-website/ - Carousel: https://www.section.io/engineering-education/how-to-make-an-image-carousel-for-your-website/
- "Active Alerts" dropdown accordian?
* Frontend - If Ferry Services Present - Load at bottom of screen. * Frontend - If Ferry Services Present - Load at bottom of screen.
* Frontend - Decide what to do with Bus Services. * Frontend - Decide what to do with Bus Services.
* Frontend - Implement error pages - will need to look at including these on the proxy container too? * Frontend - Implement error pages - will need to look at including these on the proxy container too?

View File

@ -34,12 +34,15 @@
</div> </div>
</div> </div>
<div id="nrcc_notices"> <div id="alerts">
<p> <div id="alerts_bar">
Example NRCC Message Here... ... ... <img id="alert_icon" src="./images/nav/alert_icon.svg" alt="">
NRCC Messages can sometimes be long, and sometimes <p id="alert_bar_note">There are <span id="alert_number">no</span> active alerts</p>
short so this must be accounted for. <button id="alert_expand_arrow">&#8897;</button>
</p> <div id="alerts_msg">
<p>\nThe lifts are out of order between Platforms 1 &amp; 2 and the station at Cardiff Central station.</p>","\nDisruption in the Bristol area due to a number of incidents. More details can be found in <a href=\"http://nationalrail.co.uk/service_disruptions/315247.aspx\">Latest Travel News.</a>","\nBuses replace trains between Radyr and Cardiff Central. More details can be found in <a href=\"http://https://t.co/vj5Fty90sw\">Latest Travel News</a>.","\nPoor weather affecting services in Wales due to flooding on the railway More details can be found in <a href=\"https://t.co/uBU966PUmX\">Latest Travel News</a>.","Poor weather affecting services across the South West of England. More details can be found in <a href=\"http://nationalrail.co.uk/service_disruptions/315471.aspx\">Latest Travel News</a>
</div>
</div>
</div> </div>
<div id="output"> <div id="output">
@ -58,6 +61,17 @@
<div id="ferry" class="hide-when-loading"> <div id="ferry" class="hide-when-loading">
<p>Ferry Services</p> <p>Ferry Services</p>
<table>
<tr>
<th class="name">Origin</th>
<th class="name">Dest.</th>
<th class="plat"></th>
<th class="time">Sch Arr.</th>
<th class="time">Exp Arr.</th>
<th class="time">Sch Dep.</th>
<th class="time">Exp Dep.</th>
</tr>
</table>
</div> </div>
<div id="error_notice" class="main-notice hide-when-loading"> <div id="error_notice" class="main-notice hide-when-loading">

View File

@ -0,0 +1,10 @@
<?xml version="1.0"?>
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://web.resource.org/cc/" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:svg="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" enable-background="new 0 0 448 433" viewBox="0 0 448 433">
<radialGradient id="XMLID_1_" gradientUnits="userSpaceOnUse" cy="393.79" cx="216.7" r="296.7">
<stop stop-color="#F4D708" offset="0"/>
<stop stop-color="#FCB400" offset="1"/>
</radialGradient>
<path d="m8.551 390.5l184.85-368.8s26.409-31.504 52.815 0c26.41 31.501 180.19 370.65 180.19 370.65s3.105 18.534-27.961 18.534-361.94 0-361.94 0-23.299 0-27.959-20.38z" fill="url(#XMLID_1_)"/>
<path stroke="#E2A713" stroke-width="5" d="m8.551 390.5l184.85-368.8s26.409-31.504 52.815 0c26.41 31.501 180.19 370.65 180.19 370.65s3.105 18.534-27.961 18.534-361.94 0-361.94 0-23.299 0-27.959-20.38z" fill="none"/>
<path d="m212.5 292.63c-13.168-79.969-19.75-123.12-19.75-129.45 0-7.703 2.551-13.926 7.66-18.676 5.105-4.746 10.871-7.121 17.293-7.121 6.949 0 12.82 2.535 17.609 7.598s7.188 11.023 7.188 17.883c0 6.543-6.668 49.801-20 129.77h-10zm27 38.17c0 6.098-2.156 11.301-6.469 15.613-4.313 4.309-9.461 6.465-15.453 6.465-6.098 0-11.301-2.156-15.613-6.465-4.313-4.313-6.465-9.516-6.465-15.613 0-5.992 2.152-11.141 6.465-15.453s9.516-6.469 15.613-6.469c5.992 0 11.141 2.156 15.453 6.469s6.48 9.45 6.48 15.44z"/>
<metadata><rdf:RDF><cc:Work><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><cc:license rdf:resource="http://creativecommons.org/licenses/publicdomain/"/><dc:publisher><cc:Agent rdf:about="http://openclipart.org/"><dc:title>Openclipart</dc:title></cc:Agent></dc:publisher><dc:title>Warning Notification</dc:title><dc:date>2007-02-08T17:08:47</dc:date><dc:description>Beveled yellow caution sign</dc:description><dc:source>http://openclipart.org/detail/3130/warning-notification-by-eastshores</dc:source><dc:creator><cc:Agent><dc:title>eastshores</dc:title></cc:Agent></dc:creator><dc:subject><rdf:Bag><rdf:li>alert</rdf:li><rdf:li>caution</rdf:li><rdf:li>clip art</rdf:li><rdf:li>clipart</rdf:li><rdf:li>icon</rdf:li><rdf:li>image</rdf:li><rdf:li>media</rdf:li><rdf:li>public domain</rdf:li><rdf:li>svg</rdf:li><rdf:li>warning</rdf:li></rdf:Bag></dc:subject></cc:Work><cc:License rdf:about="http://creativecommons.org/licenses/publicdomain/"><cc:permits rdf:resource="http://creativecommons.org/ns#Reproduction"/><cc:permits rdf:resource="http://creativecommons.org/ns#Distribution"/><cc:permits rdf:resource="http://creativecommons.org/ns#DerivativeWorks"/></cc:License></rdf:RDF></metadata></svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

View File

@ -63,6 +63,19 @@ async function parseTime(string){
} }
// Sometimes the origin or destination names are undefined, need to catch that // Sometimes the origin or destination names are undefined, need to catch that
async function parseName(){ async function parseName() {
return; return;
}
// Display Alert Messages
async function displayAlerts() {
document.getElementById("output").style = "margin-top:95px" // Adjust margin of train table div.
}
async function expandAlerts() {
return
}
async function deflateAlerts() {
return
} }

View File

@ -1,3 +1,8 @@
/* Hide when loading */
.hide-when-loading {
display: none;
}
/* Main Notices: */ /* Main Notices: */
.main-notice { .main-notice {
display: none; display: none;
@ -64,36 +69,65 @@
margin: 3px; margin: 3px;
} }
#footer { /* NRCC Notices */
#alerts{
position: fixed; position: fixed;
bottom: 0; width: 100%;
left: 0;
top: 0;
}
#alerts_bar{
position: absolute;
margin-top:50px;
left: 0; left: 0;
width: 100%; width: 100%;
height: 40px; height: 40px;
background-color: var(--overlay-color); background-color: darkorange;
color: white;
} }
#footer img { #alert_icon{
height: 35px; position: absolute;
left: 10px;
margin-top: 5px;
width: 30px;
height: 30px;
} }
.hide-when-loading { #alert_bar_note {
display: none; position: relative;
} text-align: center;
/* NRCC Notices */
#nrcc_notices {
margin-top: 60px;
font-size: 14px;
}
#nrcc_notices p {
width: 95%;
margin: auto; margin: auto;
margin-top: 8px;
font-weight: 900;
}
#alert_expand_arrow {
position: absolute;
right: 0;
top: 0;
padding: 10px;
padding-right: 15px;
padding-left: 30px;
background: none;
border: none;
font-weight: 900;
color: white;
}
#alerts_msg{
position: absolute;
left: 0;
top: 40px;
width: 100%;
background-color: pink;
} }
/* Content */ /* Content */
#output { #output {
width: 100%; width: 100%;
margin-top: 95px; /* SHOULD BE REMOVED AFTER IMPLEMENTING ALERTS */
} }
table { table {
@ -137,6 +171,20 @@ table {
animation: pulse 1.5s linear infinite; animation: pulse 1.5s linear infinite;
} }
/* Footer: */
#footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
background-color: var(--overlay-color);
}
#footer img {
height: 35px;
}
/* Animations */ /* Animations */
@keyframes pulse { @keyframes pulse {
50% { 50% {

View File

@ -82,6 +82,10 @@
} }
/* MAIN */ /* MAIN */
html{
width: 100%;
height: 100%;
}
body { body {
background-color: var(--main-bg-color); background-color: var(--main-bg-color);
color: var(--main-text-color); color: var(--main-text-color);