Merge branch 'deingithub-dep-board-ui'

This commit is contained in:
Birte Kristina Friesel 2023-10-27 18:36:35 +02:00
commit adb830baa9
No known key found for this signature in database
GPG key ID: 19E6E524EBB177BA
12 changed files with 319 additions and 164 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -298,6 +298,20 @@ $(document).ready(function() {
$('a[href]').click(function() {
$('nav .preloader-wrapper').addClass('active');
});
$('a[href="#now"]').keydown(function(event) {
// also trigger click handler on keyboard enter
if (event.keyCode == 13) {
event.preventDefault();
event.target.click();
}
});
$('a[href="#now"]').click(function(event) {
event.preventDefault();
$('nav .preloader-wrapper').removeClass('active');
now_el = $('#now')[0];
now_el.previousElementSibling.querySelector(".dep-time").focus();
now_el.scrollIntoView({behavior: "smooth", block: "center"});
});
const elems = document.querySelectorAll('.carousel');
const instances = M.Carousel.init(elems, {
fullWidth: true,

File diff suppressed because one or more lines are too long

View file

@ -21,10 +21,6 @@
color: #f5c4ce !important;
}
td.cancelled {
text-decoration: line-through;
}
.wagons span {
margin-right: 0.5ex;
color: #808080;
@ -72,7 +68,153 @@ ul.suggestions {
}
}
table.departures tr.now td {
padding-top: 2em;
padding-bottom: 2em;
.departures li {
transition: background .3s;
display: grid;
grid-template-columns: 10ch 10ch 1fr;
align-items: center;
&:not(#now):hover, &:focus-within {
background-color: $departures-highlight-color;
outline: 2px solid $link-color;
}
&.cancelled {
background-color: $departures-cancelled-color;
font-style: italic;
.dep-line {
background-color: transparent;
border: 1px solid;
color: $off-black;
}
.dep-time::after {
content: "";
font-style: normal;
}
}
&#now {
background-color: $departures-highlight-color;
padding: 2rem 20px;
grid-template-columns: 10ch 1fr;
strong {
font-weight: bold;
}
}
}
.departures .dep-time {
color: $off-black;
&:focus {
outline: none;
}
}
.departures .dep-dest {
margin-left: 0.8rem;
.followee-checkin {
font-size: 0.9rem;
display: block;
i.material-icons {
vertical-align: middle;
}
}
}
.departures .dep-line {
text-align: center;
padding: .2rem;
color: white;
background: color('grey', 'darken-3');
border-radius: .2rem;
display: inline-block;
font-weight: 600;
line-height: 1;
height: fit-content;
width: fit-content;
min-width: 6ch;
margin: 0 auto;
&.Bus, &.RUF, &.AST {
background-color: #a3167e;
border-radius: 5rem;
padding: .2rem .5rem;
}
&.STR {
background-color: #c5161c;
border-radius: 5rem;
padding: .2rem .5rem;
}
&.S, &.RS, &.RER, &.SKW {
background-color: #008d4f;
border-radius: 5rem;
padding: .2rem .5rem;
}
&.U, &.STB, &.M {
background-color: #014e8d;
border-radius: 5rem;
padding: .2rem .5rem;
}
&.RE, &.IRE, &.REX {
background-color: #ff4f00;
}
&.RB, &.MEX, &.TER, &.R {
background-color: #1f4a87;
}
// DE
&.IC, &.ICE, &.EC, &.ECE, &.D,
// CH
&.IR,
// FR
&.TGV, &.OGV, &.EST,
// PL
&.TLK, &.EIC {
background-color: #ff0404;
font-weight: 900;
font-style: italic;
padding: .2rem;
}
&.RJ, &.RJX {
background-color: #c63131;
}
&.NJ, &.EN {
background-color: #29255b;
}
&.WB {
background-color: #2e85ce;
}
&.FLX {
background-color: #71d800;
color: black;
}
}
.departures.connections {
li {
grid-template-columns: 15ch 10ch 1fr;
}
.connect-platform-wrapper {
text-align: center;
span {
display: block;
}
}
}
@media screen and (max-width: 600px) {
.departures li {
grid-template-columns: 10ch 1fr;
.dep-line, .dep-time, .connect-platform-wrapper {
grid-column: 1;
text-align: center;
}
.dep-dest {
grid-column: 2;
grid-row: 1 / span 2;
}
}
.departures.connections li {
grid-template-columns: 15ch 1fr;
.connect-platform-wrapper span {
display: inline;
}
}
}

View file

@ -21,3 +21,6 @@ $table-striped-color: color('grey', 'darken-4');
$button-flat-color: $off-black;
$card-bg-color: color('grey', 'darken-4');
$card-link-color: $link-color;
$departures-highlight-color: $table-striped-color;
$departures-cancelled-color: #702020;

View file

@ -6,3 +6,5 @@ $collection-link-color: color('shades', 'black');
$card-bg-color: color('blue-grey', 'lighten-5');
$inactive-color: color('grey', 'darken-2');
$input-label-color: color('shades', 'black');
$departures-highlight-color: color('grey', 'lighten-3');
$departures-cancelled-color: color('red', 'lighten-4');

View file

@ -1,39 +1,48 @@
<div><table class="striped"><tbody>
<ul class="collection departures connections">
% for my $res (@{$connections}) {
% my ($train, $via, $via_arr, $load) = @{$res};
% $via_arr = $via_arr ? $via_arr->strftime('%H:%M') : q{};
% my $td_class = '';
% my $row_class = '';
% my $link_class = 'action-checkin';
% if ($train->is_cancelled) {
% $td_class = 'cancelled';
% $row_class = 'cancelled';
% $link_class = 'action-cancelled-from';
% }
% if ($checkin_from) {
<tr class="<%= $link_class %>" data-station="<%= $train->station_uic %>" data-train="<%= $train->train_id %>" data-ts="<%= ($train->sched_departure // $train->departure)->epoch %>" data-dest="<%= $via->{name} %>">
<li class="collection-item <%= $row_class %> <%= $link_class %>"
data-station="<%= $train->station_uic %>"
data-train="<%= $train->train_id %>"
data-ts="<%= ($train->sched_departure // $train->departure)->epoch %>"
data-dest="<%= $via->{name} %>">
% }
% else {
<tr>
<li class="collection-item">
% }
<td class="<%= $td_class %>">
% if ($train->platform) {
% if ($checkin_from) {
<a>Gleis <%= $train->platform %></a>
% }
% else {
Gleis <%= $train->platform %>
% }
<br/>
% }
% if ($checkin_from) {
<a><%= $train->line %></a>
<a class="dep-time" href="#">
% if ($train->departure_is_cancelled) {
%= $train->sched_departure->strftime('%H:%M')
% }
% else {
%= $train->line
%= $train->departure->strftime('%H:%M')
% }
</td>
<td class="<%= $td_class %>">
% if ($checkin_from) {
<a><%= $via->{name} %></a>
% if ($via_arr) {
→ <%= $via_arr %>
% }
% if ($train->departure_delay) {
%= sprintf('(%+d)', $train->departure_delay)
% }
</a>
<span class="connect-platform-wrapper">
% if ($train->platform) {
<span>Gleis <%= $train->platform %></span>
% }
<span class="dep-line <%= $train->type // q{} %>">
%= $train->line
</span>
</span>
<span class="dep-dest">
% if ($train->is_cancelled) {
Fahrt nach <%= $via->{name} %> entfällt
% }
% else {
%= $via->{name}
@ -61,22 +70,7 @@
% if ($train->{message_id}{70} or $train->{message_id}{71}) {
<i class="material-icons tiny" aria-label="Ohne WLAN">portable_wifi_off</i>
% }
</td>
<td>
% if ($train->departure_is_cancelled) {
%= $train->sched_departure->strftime('%H:%M')
% }
% else {
%= $train->departure->strftime('%H:%M')
% }
% if ($via_arr) {
→ <%= $via_arr %>
% }
% if ($train->departure_delay) {
%= sprintf('(%+d)', $train->departure_delay)
% }
</td>
</tr>
</span>
</li>
% }
</tbody></table></div>
</ul>

View file

@ -1,48 +1,26 @@
<div><table class="striped"><tbody>
<ul class="collection departures connections">
% for my $res (@{$connections}) {
% my ($train, $via, $via_arr) = @{$res};
% $via_arr = $via_arr ? $via_arr->strftime('%H:%M') : q{};
% my $td_class = '';
% my $row_class = '';
% my $link_class = 'action-checkin';
% if ($train->is_cancelled) {
% $td_class = 'cancelled';
% $row_class = 'cancelled';
% $link_class = 'action-cancelled-from';
% }
% if ($checkin_from) {
<tr class="<%= $link_class %>" data-station="<%= $train->station_eva %>" data-train="<%= $train->id %>" data-ts="<%= ($train->sched_datetime // $train->datetime)->epoch %>" data-dest="<%= $via->{name} %>">
<li class="collection-item <%= $row_class %> <%= $link_class %>"
data-station="<%= $train->station_eva %>"
data-train="<%= $train->id %>"
data-ts="<%= ($train->sched_datetime // $train->datetime)->epoch %>"
data-dest="<%= $via->{name} %>">
% }
% else {
<tr>
<li class="collection-item">
% }
<td class="<%= $td_class %>">
% if ($train->platform) {
% if ($checkin_from) {
<a>Gleis <%= $train->platform %></a>
% }
% else {
Gleis <%= $train->platform %>
% }
<br/>
% }
% if ($checkin_from) {
<a><%= $train->line %></a>
% }
% else {
%= $train->line
% }
</td>
<td class="<%= $td_class %>">
% if ($checkin_from) {
<a><%= $via->{name} %></a>
% }
% else {
%= $via->{name}
% }
</td>
<td>
<a class="dep-time" href="#">
% if ($train->is_cancelled) {
%= $train->sched_datetime->strftime('%H:%M')
% }
% else {
%= $train->datetime->strftime('%H:%M')
@ -53,7 +31,18 @@
% if ($train->delay) {
%= sprintf('(%+d)', $train->delay)
% }
</td>
</tr>
</a>
<span class="connect-platform-wrapper">
% if ($train->platform) {
<span>Gleis <%= $train->platform %></span>
% }
<span class="dep-line <%= $train->type // q{} %>">
%= $train->line
</span>
</span>
<span class="dep-dest">
%= $via->{name}
</span>
</li>
% }
</tbody></table></div>
</ul>

View file

@ -1,39 +1,28 @@
<table class="striped departures">
<tbody>
<ul class="collection departures">
% my $orientation_bar_shown = param('train');
% my $now_epoch = now->epoch;
% for my $result (@{$results}) {
% my $td_class = '';
% my $row_class = '';
% my $link_class = 'action-checkin';
% if ($result->is_cancelled) {
% $td_class = "cancelled";
% $row_class = "cancelled";
% $link_class = 'action-cancelled-from';
% }
% if (not $orientation_bar_shown and $result->datetime->epoch < $now_epoch) {
% $orientation_bar_shown = 1;
<tr class="now">
<td>
</td>
<td>
<strong>— Anfragezeitpunkt —</strong>
</td>
<td><strong>
<li class="collection-item" id="now">
<strong class="dep-time">
%= now->strftime('%H:%M')
</strong></td>
</tr>
</strong>
<strong>— Anfragezeitpunkt —</strong>
</li>
% }
<tr class="<%= $link_class %>" data-station="<%= $result->station_eva %>" data-train="<%= $result->id %>" data-ts="<%= ($result->sched_datetime // $result->datetime)->epoch %>" data-tr="3">
<td>
<a>
<%= $result->line %>
</a>
</td>
<td class="<%= $td_class %>">
<a>
<%= $result->destination %>
</a>
</td>
<td class="<%= $td_class %>">
<li class="collection-item <%= $link_class %> <%= $row_class %>"
data-station="<%= $result->station_eva %>"
data-train="<%= $result->id %>"
data-ts="<%= ($result->sched_datetime // $result->datetime)->epoch %>"
>
<a class="dep-time" href="#">
%= $result->datetime->strftime('%H:%M')
% if ($result->delay) {
(<%= sprintf('%+d', $result->delay) %>)
@ -41,8 +30,24 @@
% elsif (not defined $result->delay and not $result->is_cancelled) {
<i class="material-icons" aria-label="Keine Echtzeitdaten vorhanden" style="font-size: 16px;">gps_off</i>
% }
</td>
</tr>
</a>
<span class="dep-line <%= $result->type // q{} %>">
%= $result->line
</span>
<span class="dep-dest">
% if ($result->is_cancelled) {
Fahrt nach <%= $result->destination %> entfällt
% }
% else {
%= $result->destination
% for my $checkin (@{$checkin_by_train->{$result->id} // []}) {
<span class="followee-checkin">
<i class="material-icons tiny" aria-label="Eine Person, der du folgst, ist hier eingecheckt">people</i>
<%= $checkin->{followee_name} %> → <%= $checkin->{arr_name} // '???' %>
</span>
% }
% }
</span>
</li>
% }
</tbody>
</table>
</ul>

View file

@ -1,42 +1,28 @@
<table class="striped departures">
<tbody>
<ul class="collection departures">
% my $orientation_bar_shown = param('train');
% my $now_epoch = now->epoch;
% for my $result (@{$results}) {
% my $td_class = '';
% my $row_class = '';
% my $link_class = 'action-checkin';
% if ($result->departure_is_cancelled) {
% $td_class = "cancelled";
% $row_class = "cancelled";
% $link_class = 'action-cancelled-from';
% }
% if (not $orientation_bar_shown and $result->departure->epoch < $now_epoch) {
% $orientation_bar_shown = 1;
<tr class="now">
<td>
</td>
<td>
<strong>— Anfragezeitpunkt —</strong>
</td>
<td><strong>
<li class="collection-item" id="now">
<strong class="dep-time">
%= now->strftime('%H:%M')
</strong></td>
</tr>
</strong>
<strong>— Anfragezeitpunkt —</strong>
</li>
% }
<tr class="<%= $link_class %>" data-station="<%= $result->station_uic %>" data-train="<%= $result->train_id %>" data-ts="<%= ($result->sched_departure // $result->departure)->epoch %>" data-tr="3">
<td>
<a>
<%= $result->line %>
</a>
</td>
<td class="<%= $td_class %>">
<a>
<%= $result->destination %>
</a>
% for my $checkin (@{$checkin_by_train->{$result->train_id} // []}) {
<br/>(<%= $checkin->{followee_name} %> → <%= $checkin->{arr_name} // '???' %>)
% }
</td>
<td class="<%= $td_class %>">
<li class="collection-item <%= $link_class %> <%= $row_class %>"
data-station="<%= $result->station_uic %>"
data-train="<%= $result->train_id %>"
data-ts="<%= ($result->sched_departure // $result->departure)->epoch %>"
>
<a class="dep-time" href="#">
% if ($result->departure_hidden) {
(<%= $result->departure->strftime('%H:%M') %>)
% }
@ -49,8 +35,24 @@
% elsif (not $result->has_realtime and $result->start->epoch < $now_epoch) {
<i class="material-icons" aria-label="Keine Echtzeitdaten vorhanden" style="font-size: 16px;">gps_off</i>
% }
</td>
</tr>
</a>
<span class="dep-line <%= $result->type // q{} %>">
%= $result->line
</span>
<span class="dep-dest">
% if ($result->departure_is_cancelled) {
Fahrt nach <%= $result->destination %> entfällt
% }
% else {
%= $result->destination
% for my $checkin (@{$checkin_by_train->{$result->train_id} // []}) {
<span class="followee-checkin">
<i class="material-icons tiny" aria-label="Eine Person, der du folgst, ist hier eingecheckt">people</i>
<%= $checkin->{followee_name} %> → <%= $checkin->{arr_name} // '???' %>
</span>
% }
% }
</span>
</li>
% }
</tbody>
</table>
</ul>

View file

@ -1,24 +1,28 @@
<div class="row">
<div class="col s12 center-align">
<i class="tiny material-icons "><%= param('hafas') ? 'directions' : 'train' %></i>
<b><%= $station %></b>
<div class="col s12">
<h2>
<i class="material-icons " aria-hidden="true"><%= param('hafas') ? 'directions' : 'train' %></i>
<%= $station %>
</h2>
% for my $related_station (sort { $a->{name} cmp $b->{name} } @{$related_stations}) {
<br/>+ <%= $related_station->{name} %>
+ <%= $related_station->{name} %> <br/>
% }
</div>
</div>
% if ($api_link) {
<div class="row">
<div class="col s12 center-align">
% if (param('hafas')) {
<a href="<%= $api_link %>">zum Schienenverkehr</a>
% }
% else {
<a href="<%= $api_link %>">zum Nahverkehr</a>
% }
</div>
<div class="row">
<div class="col s12">
% if ($api_link) {
% if (param('hafas')) {
<a href="<%= $api_link %>" class="btn-small"><i class="material-icons left" aria-hidden="true">train</i>zum Schienenverkehr</a>
% }
% else {
<a href="<%= $api_link %>" class="btn-small"><i class="material-icons left" aria-hidden="true">directions</i>zum Nahverkehr</a>
% }
% }
<a class="btn-small" href="#now"><i class="material-icons left" aria-hidden="true">vertical_align_center</i>Jetzt</a>
</div>
% }
</div>
% my $have_connections = 0;
% if ($user_status->{checked_in}) {
<div class="row">
@ -49,7 +53,7 @@
<i class="material-icons left" aria-hidden="true">undo</i> Rückgängig
</a>
<a class="action-checkout right" data-station="<%= $eva %>" data-force="1">
<i class="material-icons left">gps_off</i>
<i class="material-icons left" aria-hidden="true">gps_off</i>
Hier auschecken
</a>
% }