Commit 3feabf25 authored by Birte Kristina Friesel's avatar Birte Kristina Friesel
Browse files

Move moreinfo to ajax-requested sub-template 

This decreases the DOM size and allows for future speed improvements
(the backend no longer needs to precalculate routes etc for all trains)
parent 7ee9f881

lib/DBInfoscreen/Controller/Stationboard.pm

+40 −0
Original line number Diff line number Diff line
@@ -5,6 +5,7 @@ use Mojo::Base 'Mojolicious::Controller'; 
# License: 2-Clause BSD



use Cache::File;

use DateTime;

use File::Slurp qw(read_file write_file);

use List::Util qw(max);

use List::MoreUtils qw();
@@ -783,6 +784,45 @@ sub handle_request { 
			format => 'text',

		);

	}

	elsif ( my $train = $self->param('train') ) {

		delete $self->stash->{layout};



		my ($departure) = grep {

			$train eq ( $_->{train_type} // '' ) . ' '

			  . ( $_->{train_no} // $_->{train} // '' )

		} @departures;



		if ($departure) {



			my $linetype = 'bahn';

			if ( $departure->{train_type} eq 'S' ) {

				$linetype = 'sbahn';

			}

			elsif ($departure->{train_type} eq 'IC'

				or $departure->{train_type} eq 'ICE'

				or $departure->{train_type} eq 'EC'

				or $departure->{train_type} eq 'EN' )

			{

				$linetype = 'fern';

			}

			elsif ($departure->{train_type} eq 'THA'

				or $departure->{train_type} eq 'FLX'

				or $departure->{train_type} eq 'NJ' )

			{

				$linetype = 'ext';

			}



			$self->render(

				'_train_details',

				departure => $departure,

				linetype  => $linetype,

				dt_now    => DateTime->now( time_zone => 'Europe/Berlin' ),

			);

		}

		else {

			$self->render('not_found');

		}

	}

	else {

		my $station_name = $data->{station_name} // $station;

		$self->render(

public/static/collapse.js

+23 −24
Original line number Diff line number Diff line
@@ -8,32 +8,31 @@ $(document).ready(function() { 
			}

		});

	}

	$('div.app > ul > li, div.infoscreen > ul > li').each(function() {

		$(this).click(function() {

			$(this).children('.moreinfo').each(function() {

				if ($(this).hasClass('expanded-moreinfo')) {

					$(this).removeClass('expanded-moreinfo');

					$(this).addClass('collapsed-moreinfo');

					// Setting an empty hash causes the browser to scroll back

					// to the top -- we don't want that.

					//var posX = window.pageXOffset;

					//var posY = window.pageYOffset;

					//document.location.hash = '';

					//window.scrollTo(posX, posY);

				}

				else {

	$('div.app > ul > li').click(function() {

		var trainElem = $(this);

		$('.moreinfo').each(function() {

						if ($(this).hasClass('expanded-moreinfo')) {

							$(this).removeClass('expanded-moreinfo');

							$(this).addClass('collapsed-moreinfo');

						}

			var infoElem = $(this);

			$('.moreinfo .train-line').text(trainElem.data('train'));

			$('.moreinfo .train-no').text('');

			$('.moreinfo .train-origin').text(trainElem.data('from'));

			$('.moreinfo .train-dest').text(trainElem.data('to'));

			$('.moreinfo .minfo').text('');

			$('.moreinfo .mfooter').html('<div style="text-align: center; width: 100%;">Lade Daten, bitte warten...</div>');

			$('.moreinfo .verbose').html('');

			$('.moreinfo .mroute').html('');

			$('.moreinfo ul').html('');

			$.get(window.location.href, {train: trainElem.data('train')}, function(data) {

				$('.moreinfo').html(data);

			}).fail(function() {

				$('.moreinfo .mfooter').html('Der Zug ist abgefahren (Zug nicht gefunden)');

			});

					$(this).removeClass('collapsed-moreinfo');

					$(this).addClass('expanded-moreinfo');

					//document.location.hash = $(this).data('train');

				}

			infoElem.removeClass('collapsed-moreinfo');

			infoElem.addClass('expanded-moreinfo');

		});

	});

	$('.moreinfo').click(function() {

		$(this).removeClass('expanded-moreinfo');

		$(this).addClass('collapsed-moreinfo');

	});

	$('.moresettings-header').each(function() {

		$(this).click(function() {

public/static/dbf.min.js

+3 −1

File changed.

Preview size limit exceeded, changes collapsed.

public/static/default.css

+34 −34
Original line number Diff line number Diff line
@@ -101,50 +101,50 @@ div.app .replaced { 
	color: #660000;

}



div.app li .sbahn {

div.app .sbahn {

	font-weight:bold;

	border-radius: 30px;

	padding:3px 6px 2px 6px;

}



div.applight li .sbahn {

div.applight .sbahn {

	background-color:#95d79f;

}



div.appdark li .sbahn {

div.appdark .sbahn {

	background-color:#115511;

}



div.app li .bahn,

div.app li .fern,

div.app li .ext {

div.app .bahn,

div.app .fern,

div.app .ext {

	font-weight:bold;

	border-radius: 5px;

	padding:3px 5px 2px 5px;

}



div.applight li .bahn {

div.applight .bahn {

	background-color: #eeeeee;

}



div.appdark li .bahn {

div.appdark .bahn {

	background-color: #333333;

}



div.applight li .fern {

div.applight .fern {

	background-color: #ffdddd;

}



div.appdark li .fern {

div.appdark .fern {

	background-color: #551111;

}



div.applight li .ext {

div.applight .ext {

	background-color: #ffdddd;

	border: 2px solid #ff6666;

}



div.appdark li .ext {

div.appdark .ext {

	background-color: #551111;

	border: 2px solid #993333;

}
@@ -180,7 +180,7 @@ div.app li .info { 
	overflow: hidden;

}



div.app li .moreinfo {

div.app .moreinfo {

	font-size:2.1em;

	position:fixed;

	top:0em;
@@ -192,23 +192,23 @@ div.app li .moreinfo { 
	cursor: default;

}



div.applight li .moreinfo {

div.applight .moreinfo {

	background-color: #ffffff;

}



div.appdark li .moreinfo {

div.appdark .moreinfo {

	background-color: #000000;

}



div.app li .collapsed-moreinfo {

div.app .collapsed-moreinfo {

	display: none;

}



div.app li .expanded-moreinfo {

div.app .expanded-moreinfo {

	display: block;

}



div.app li .moreinfo .mheader {

div.app .moreinfo .mheader {

	text-align: center;

	font-size: 120%;

	padding-top: 0.5em;
@@ -218,66 +218,66 @@ div.app li .moreinfo .mheader { 
	border-bottom: 0.1em dashed #cccccc;

}



div.app li .moreinfo .mfooter {

div.app .moreinfo .mfooter {

	padding-top: 1em;

	padding-left: 1em;

	padding-right: 1em;

}



div.app li .moreinfo .reason,

div.app li .moreinfo .minfo {

div.app .moreinfo .reason,

div.app .moreinfo .minfo {

	color: #ff0000;

}



div.app li .moreinfo .verbose {

div.app .moreinfo .verbose {

	margin-bottom: 0.6em;

}



div.app li .moreinfo .timeinfo {

div.app .moreinfo .timeinfo {

	margin-bottom: 0.6em;

}



div.app li .moreinfo .mroute {

div.app .moreinfo .mroute {

	margin-bottom: 0.6em;

}



div.applight li .moreinfo .mroute .separator {

div.applight .moreinfo .mroute .separator {

	color: #999999;

}



div.appdark li .moreinfo .mroute .separator {

div.appdark .moreinfo .mroute .separator {

	color: #999999;

}



div.applight li .moreinfo .mroute .important-stop {

div.applight .moreinfo .mroute .important-stop {

	color: #000000;

}



div.appdark li .moreinfo .mroute .important-stop {

div.appdark .moreinfo .mroute .important-stop {

	color: #ffffff;

}



div.applight li .moreinfo .mroute .generic-stop {

div.applight .moreinfo .mroute .generic-stop {

	color: #555555;

}



div.appdark li .moreinfo .mroute .generic-stop {

div.appdark .moreinfo .mroute .generic-stop {

	color: #999999;

}



div.applight li .moreinfo .mroute .additional-stop {

div.applight .moreinfo .mroute .additional-stop {

	color: #009900;

}



div.appdark li .moreinfo .mroute .additional-stop {

div.appdark .moreinfo .mroute .additional-stop {

	color: #009900;

}



div.applight li .moreinfo .mroute .cancelled-stop {

div.applight .moreinfo .mroute .cancelled-stop {

	color: #cc0000;

}



div.appdark li .moreinfo .mroute .cancelled-stop {

div.appdark .moreinfo .mroute .cancelled-stop {

	color: #cc0000;

}

public/static/mobile.css

+2 −2
Original line number Diff line number Diff line
@@ -8,6 +8,6 @@ div.app > ul > li { 
	font-size: 35%;

}



div.app li .moreinfo {

	font-size: 2.6em;

div.app .moreinfo {

	font-size: 100%;

}