PrivateCoffee/travelynx
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'deingithub-dep-board-ui'

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
public/static/css/dark.min.css vendored
View file

File diff suppressed because one or more lines are too long

4
public/static/css/light.min.css vendored
View file

File diff suppressed because one or more lines are too long

14
public/static/js/travelynx-actions.js
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,

2
public/static/js/travelynx-actions.min.js vendored
View file

File diff suppressed because one or more lines are too long

156
sass/src/common/local.scss
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;
}
}
}

3
sass/src/dark/_variables.scss
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;

2
sass/src/light/_variables.scss
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');

74
templates/_connections.html.ep
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 %>">
<a class="dep-time" href="#">
% 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)
% }
</a>
<span class="connect-platform-wrapper">
% if ($train->platform) {
% if ($checkin_from) {
<a>Gleis <%= $train->platform %></a>
<span>Gleis <%= $train->platform %></span>
% }
% else {
Gleis <%= $train->platform %>
% }
<br/>
% }
% if ($checkin_from) {
<a><%= $train->line %></a>
% }
% else {
<span class="dep-line <%= $train->type // q{} %>">
%= $train->line
% }
</td>
<td class="<%= $td_class %>">
% if ($checkin_from) {
<a><%= $via->{name} %></a>
</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')
⊖
</span>
</li>
% }
% else {
%= $train->departure->strftime('%H:%M')
% }
% if ($via_arr) {
→ <%= $via_arr %>
% }
% if ($train->departure_delay) {
%= sprintf('(%+d)', $train->departure_delay)
% }
</td>
</tr>
% }
</tbody></table></div>
</ul>

59
templates/_connections_hafas.html.ep
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>
% }
</tbody></table></div>
<span class="dep-line <%= $train->type // q{} %>">
%= $train->line
</span>
</span>
<span class="dep-dest">
%= $via->{name}
</span>
</li>
% }
</ul>

63
templates/_departures_hafas.html.ep
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>

66
templates/_departures_iris.html.ep
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>

28
templates/departures.html.ep
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">
<div class="row">
<div class="col s12">
% if ($api_link) {
% if (param('hafas')) {
<a href="<%= $api_link %>">zum Schienenverkehr</a>
<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 %>">zum Nahverkehr</a>
<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>
% }
</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>
% }