diff options
| -rw-r--r-- | templates/wagenreihung.html.ep | 68 |
1 files changed, 38 insertions, 30 deletions
diff --git a/templates/wagenreihung.html.ep b/templates/wagenreihung.html.ep index 642c460..cbe240b 100644 --- a/templates/wagenreihung.html.ep +++ b/templates/wagenreihung.html.ep @@ -1,33 +1,41 @@ <div class="container"> -<div style="height: 2em;"> -(experimentell, die URL wird sich noch ändern und die Anzeige wird noch schöner) -</div> - -<div style="position: relative; width: 100%; height: 60ex;"> -% for my $section ($wr->sections) { -<div style="position: absolute; left: 1em; width: 2em; -top: <%= $section->{start_percent} %>%; bottom: <%= 100 - $section->{end_percent} %>%; text-align: center;"> -%= $section->{name} -</div> -% } -% for my $wagon ($wr->wagons) { -% my $bg = ''; -% if ($wagon->is_first_class) { -% $bg = 'background-color: #ffff99;'; -% } -<div style="position: absolute; left: 3em; right: 0em; -top: <%= $wagon->{position}{start_percent} %>%; bottom: <%= 100 - $wagon->{position}{end_percent} %>%; -border: 1px solid black; <%= $bg %>"> -% if ($wagon->is_locomotive or $wagon->is_powercar) { -LOK -% } -% else { -%= $wagon->number // '?' -% } - -%= $wagon->type -</div> -% } -</div> + <div style="position: relative; width: 100%; height: 60ex;"> +% for my $section ($wr->sections) { + <div style="position: absolute; left: 1em; width: 2em; + top: <%= $section->{start_percent} %>%; bottom: <%= 100 - $section->{end_percent} %>%; text-align: center;"> +%= $section->{name} + </div> +% } +% for my $wagon ($wr->wagons) { +% my $bg = ''; +% if ($wagon->is_first_class) { +% $bg = 'background-color: #ffff99;'; +% } + <div style="position: absolute; left: 6em; + top: <%= $wagon->{position}{start_percent} %>%; bottom: <%= 100 - $wagon->{position}{end_percent} %>%;"> +% if ($wr->direction == 100) { + ↓ +% } +% else { + ↑ +% } + </div> + <div style="position: absolute; left: 3em; + top: <%= $wagon->{position}{start_percent} %>%; bottom: <%= 100 - $wagon->{position}{end_percent} %>%; + min-width: 2em; text-align: right; + border: 1px solid black; padding-left: 0.2em; padding-right: 0.2em; <%= $bg %>"> +% if ($wagon->is_locomotive or $wagon->is_powercar) { + LOK +% } +% else { +%= $wagon->number // '?' +% } + </div> + <div style="position: absolute; left: 7em; right: 0em; + top: <%= $wagon->{position}{start_percent} %>%; bottom: <%= 100 - $wagon->{position}{end_percent} %>%;"> +%= $wagon->type + </div> +% } + </div> </div> |