clean template: Show detail RIS / IRIS messages when hovering over a departure

3 files changed, 52 insertions, 4 deletions

diff --git a/cgi/index.pl b/cgi/index.pl
index 1613438..83a3e30 100644
--- a/cgi/index.pl
+++ b/cgi/index.pl
@@ -132,7 +132,7 @@ sub handle_request {
 		if ( @lines and not( any { $line =~ m{^$_} } @lines ) ) {
 			next;
 		}
-		my $info;
+		my ( $info, $moreinfo );
 		if ( $backend eq 'iris' ) {
 			my $delaymsg
 			  = join( ', ', map { $_->[1] } $result->delay_messages );
@@ -154,9 +154,14 @@ sub handle_request {
 				$info .= ' +++ ';
 			}
 			$info .= $qosmsg;
+
+			$moreinfo = [ $result->messages ];
 		}
 		else {
 			$info = $result->info;
+			if ($info) {
+				$moreinfo = [ [ 'RIS', $info ] ];
+			}
 		}
 
 		if ( $info eq '+0' ) {
@@ -183,6 +188,7 @@ sub handle_request {
 				destination => $result->destination,
 				platform    => $platform,
 				info        => $info,
+				moreinfo    => $moreinfo,
 				delay       => $delay,
 			}
 		);
diff --git a/cgi/templates/clean.html.ep b/cgi/templates/clean.html.ep
index 085407b..ae1167c 100644
--- a/cgi/templates/clean.html.ep
+++ b/cgi/templates/clean.html.ep
@@ -10,6 +10,26 @@
 <span class="line">
 %= $departure->{train}
 </span>
+% if ($departure->{moreinfo} and @{$departure->{moreinfo}}) {
+<span class="moreinfo">
+<ul>
+% for my $pair (@{$departure->{moreinfo}}) {
+<li>
+% if ($pair->[0]->isa('DateTime')) {
+%= $pair->[0]->strftime('%H:%M')
+% }
+% else {
+%= $pair->[0]
+% }
+:
+<span class="reason">
+%= $pair->[1]
+</span>
+</li>
+% }
+</ul>
+</span>
+% }
 % if ($departure->{info} and length $departure->{info}) {
 <span class="info">
 %= $departure->{info}
diff --git a/cgi/templates/layouts/default.html.ep b/cgi/templates/layouts/default.html.ep
index bf147ca..2c0f858 100644
--- a/cgi/templates/layouts/default.html.ep
+++ b/cgi/templates/layouts/default.html.ep
@@ -29,7 +29,7 @@
 		width:100%;
 	}
 
-	div.displayclean ul {
+	div.displayclean > ul {
 		position:absolute;
 		width:100%;
 		background-color:#F8F8F8;
@@ -42,8 +42,8 @@
 		border-bottom: 1px solid #cccccc;
 	}
 
-	div.displayclean li {
-		height:7em;
+	div.displayclean > ul > li {
+		min-height:7em;
 		background-color:#F8F8F8;
 		display:block;
 		border-width:1px 0;
@@ -86,6 +86,28 @@
 		overflow: hidden;
 	}
 
+	div.displayclean li .moreinfo {
+		color:#000000;
+		font-size:2.1em;
+		position:absolute;
+		top:5px;
+		left:8em;
+		min-height: 1em;
+		width: 70%;
+		background-color: white;
+		border: 1px solid black;
+		z-index: 5;
+		visibility: hidden;
+	}
+
+	div.displayclean li:hover .moreinfo {
+		visibility: visible;
+	}
+
+	div.displayclean li .moreinfo .reason {
+		color: #ff0000;
+	}
+
 	div.displayclean li .dest {
 		color:#000000;
 		font-weight:bold;