113 lines
4 KiB
Text
113 lines
4 KiB
Text
<div class="card autorefresh blue-grey lighten-5">
|
|
<div class="card-content">
|
|
<i class="material-icons small right sync-failed-marker grey-text" style="display: none;">sync_problem</i>
|
|
<span class="card-title">Eingecheckt in <%= $journey->{train_type} %> <%= $journey->{train_no} %></span>
|
|
<p>
|
|
<div class="center countdown">
|
|
% if ($journey->{departure_countdown} > 120) {
|
|
Abfahrt in <%= sprintf('%.f', $journey->{departure_countdown} / 60) %> Minuten
|
|
% }
|
|
% elsif ($journey->{departure_countdown} > 60) {
|
|
Abfahrt in einer Minute
|
|
% }
|
|
% elsif ($journey->{departure_countdown} > 0) {
|
|
Abfahrt in weniger als einer Minute
|
|
% }
|
|
% elsif (defined $journey->{arrival_countdown}) {
|
|
% if ($journey->{arrival_countdown} > 60) {
|
|
Ankunft in <%= sprintf('%.f', $journey->{arrival_countdown} / 60) %>
|
|
Minute<%= sprintf('%.f', $journey->{arrival_countdown} / 60) == 1 ? '' : 'n' %>
|
|
% }
|
|
% elsif ($journey->{arrival_countdown} > 0) {
|
|
Ankunft in weniger als einer Minute
|
|
% }
|
|
% else {
|
|
Ziel erreicht
|
|
% }
|
|
% }
|
|
% elsif ($journey->{arr_name}) {
|
|
Ankunft in mehr als zwei Stunden
|
|
% }
|
|
</div>
|
|
<div class="progress purple lighten-4" style="height: 1ex;">
|
|
<div class="determinate purple darken-3" style="width: <%= sprintf('%.2f', 100 * ($journey->{journey_completion} // 0)); %>%;"></div>
|
|
</div>
|
|
</p>
|
|
% if ($journey->{arr_name}) {
|
|
<p>
|
|
<div style="float: left;">
|
|
<b><%= $journey->{dep_name} %></b><br/>
|
|
<b><%= $journey->{real_departure}->strftime('%H:%M') %></b>
|
|
% if ($journey->{real_departure}->epoch != $journey->{sched_departure}->epoch) {
|
|
(<%= sprintf('%+d', ($journey->{real_departure}->epoch - $journey->{sched_departure}->epoch)/60) %>)
|
|
% }
|
|
</div>
|
|
<div style="float: right; text-align: right;">
|
|
<b><%= $journey->{arr_name} %></b><br/>
|
|
% if ($journey->{real_arrival}->epoch) {
|
|
<b><%= $journey->{real_arrival}->strftime('%H:%M') %></b>
|
|
% if ($journey->{real_arrival}->epoch != $journey->{sched_arrival}->epoch) {
|
|
(<%= sprintf('%+d', ($journey->{real_arrival}->epoch - $journey->{sched_arrival}->epoch)/60) %>)
|
|
% }
|
|
% }
|
|
% else {
|
|
noch nicht bekannt
|
|
% }
|
|
</div>
|
|
<div style="clear: both;">
|
|
</div>
|
|
</p>
|
|
% }
|
|
% if (@{$journey->{messages} // []} > 0 and $journey->{messages}[0]) {
|
|
<p style="margin-bottom: 2ex;">
|
|
<ul>
|
|
% for my $message (reverse @{$journey->{messages} // []}) {
|
|
% if ($journey->{sched_departure}->epoch - $message->[0]->epoch < 1800) {
|
|
<li> <i class="material-icons tiny">warning</i> <%= $message->[0]->strftime('%H:%M') %>: <%= $message->[1] %></li>
|
|
% }
|
|
% }
|
|
</ul>
|
|
</p>
|
|
% }
|
|
% if (defined $journey->{arrival_countdown} and $journey->{arrival_countdown} <= 0) {
|
|
<p>
|
|
Der automatische Checkout erfolgt in wenigen Minuten. Zum Umsteigen:
|
|
Aktuelle Station in der Liste auswählen. Zum Weiterfahren: Neues
|
|
Ziel wählen.
|
|
</p>
|
|
% }
|
|
% elsif ($journey->{arr_name}) {
|
|
<p style="margin-top: 2em;">Ziel ändern?</p>
|
|
% }
|
|
% else {
|
|
<p>Ziel wählen:</p>
|
|
% }
|
|
<table>
|
|
<tbody>
|
|
% my $is_after = 0;
|
|
% for my $station (@{$journey->{route_after}}) {
|
|
% if ($journey->{arr_name} and $station eq $journey->{arr_name}) {
|
|
<tr><td><b><a class="action-checkout" data-station="<%= $station %>"><%= $station %></a></b></td></tr>
|
|
% }
|
|
% else {
|
|
<tr><td><a class="action-checkout" data-station="<%= $station %>"><%= $station %></a></td></tr>
|
|
% }
|
|
% }
|
|
</tbody>
|
|
</table>
|
|
% if ($journey->{arr_name}) {
|
|
<p>
|
|
Falls das Backend ausgefallen ist oder der Zug aus anderen
|
|
Gründen verloren ging: <a class="action-checkout"
|
|
data-force="1" data-station="<%= $journey->{arr_name}
|
|
%>">Ohne Echtzeitdaten in <%= $journey->{arr_name} %>
|
|
auschecken</a>.
|
|
</p>
|
|
% }
|
|
</div>
|
|
<div class="card-action">
|
|
<a class="action-undo blue-text" data-id="in_transit">
|
|
<i class="material-icons">undo</i> Checkin Rückgängig?
|
|
</a>
|
|
</div>
|
|
</div>
|