summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--public/css/default.css60
-rw-r--r--templates/barform.html.ep32
-rw-r--r--templates/filterform.html.ep83
-rw-r--r--templates/generalbar.html.ep31
-rw-r--r--templates/individualform.html.ep11
-rw-r--r--templates/intro.html.ep98
-rw-r--r--templates/layouts/default.html.ep64
-rw-r--r--templates/meldungbar.html.ep31
-rw-r--r--templates/topform.html.ep3
-rw-r--r--templates/toplist.html.ep52
10 files changed, 237 insertions, 228 deletions
diff --git a/public/css/default.css b/public/css/default.css
index 8d76d39..92d5f51 100644
--- a/public/css/default.css
+++ b/public/css/default.css
@@ -1,5 +1,6 @@
body {
- font-family: sans-serif;
+ padding-left: 0.4em;
+ padding-right: 0.4em;
}
div.intro,
@@ -22,63 +23,6 @@ div.about {
color: #666666;
}
-input, select {
- border: 1px solid black;
-}
-
-input.dimension {
- width: 4em;
-}
-
-input.delay {
- width: 3em;
-}
-
-input.train_no {
- width: 4em;
-}
-
-div.field {
- width: 100%;
- clear: both;
-}
-
-div.field div.desc {
- float: left;
- width: 12em;
- text-align: right;
- padding-right: 0.5em;
-}
-
-div.individuallist table {
- margin-top: 1em;
- border-collapse: collapse;
-}
-
-div.individuallist th,
-div.individuallist td {
- border: 1px solid #bbbbbb;
- margin: 0;
- padding: 0.2em;
-}
-
-div.individuallist .cancelled {
- text-decoration: line-through;
- text-decoration-color: red;
-}
-
-div.individuallist span.undelay {
- color: #008800;
-}
-
-div.individuallist span.delay0 {
- color: #888888;
-}
-
-div.individuallist span.delay {
- color: #880000;
-}
-
svg {
font: 10px sans-serif;
}
diff --git a/templates/barform.html.ep b/templates/barform.html.ep
deleted file mode 100644
index 50ae5fc..0000000
--- a/templates/barform.html.ep
+++ /dev/null
@@ -1,32 +0,0 @@
-<div>
-% if (not defined param('want_msg')) {
-% param(want_msg => 0);
-% }
-%= form_for bar => begin
-%= radio_button 'want_msg' => 0
-Allgemeiner Bargraph:
-% my %yargs = %{$self->barplot_args->{y}};
-% my @yarg_keys = sort keys %yargs;
-%= select_field ysource => [map {[$yargs{$_}->{desc}, $_]} @yarg_keys]
-<br/>
-%= radio_button 'want_msg' => 1
-Meldungs-Bargraph:
-% %yargs = %{$self->barplot_args->{msg}};
-% @yarg_keys = sort keys %yargs;
-%= select_field msgnum => [map {[$yargs{$_}->{desc}, $_]} @yarg_keys]
-<br/>
-aufgeteilt nach
-% my %xargs = %{$self->barplot_args->{x}};
-% my @xarg_keys = sort keys %xargs;
-%= select_field xsource => [map {[$xargs{$_}->{desc}, $_]} @xarg_keys]
-mit
-Abmessungen
-%= text_field 'width' => 960, class => 'dimension'
-x
-%= text_field 'height' => 500, class => 'dimension'
-Pixel.
-%= submit_button 'Go'
-<br/>
-Optionale Einschränkungen:
-%= include 'filterform';
-% end
diff --git a/templates/filterform.html.ep b/templates/filterform.html.ep
index 614b36a..44d0ed0 100644
--- a/templates/filterform.html.ep
+++ b/templates/filterform.html.ep
@@ -1,72 +1,55 @@
% my $filter_opts = $self->barplot_filters;
-<div class="field">
- <div class="desc">
- Linie:
- </div>
- <div>
+<div class="row">
+ <div class="input-field col s4">
+ <label class="active">Linie</label>
%= select_field filter_line => $filter_opts->{lines}
</div>
-</div>
-<div class="field">
- <div class="desc">
- Zugtyp:
- </div>
- <div>
+ <div class="input-field col s4">
+ <label class="active">Zugtyp</label>
%= select_field filter_train_type => $filter_opts->{train_types}
</div>
-</div>
-<div class="field">
- <div class="desc">
- Zugnummer:
- </div>
- <div>
+ <div class="input-field col s4">
+ <label>Zugnummer</label>
%= text_field 'filter_train_no', class => 'train_no'
</div>
</div>
-<div class="field">
- <div class="desc">
- Bahnhof:
- </div>
- <div>
+<div class="row">
+ <div class="input-field col s6">
+ <label class="active">Bahnhof</label>
%= select_field filter_station => $filter_opts->{stations}
</div>
-</div>
-<div class="field">
- <div class="desc">
- Zielbahnhof:
- </div>
- <div>
+ <div class="input-field col s6">
+ <label class="active">Zielbahnhof</label>
%= select_field filter_destination => $filter_opts->{destinations}
</div>
</div>
-<div class="field">
- <div class="desc">
- Fahrten:
- </div>
- <div>
+<div class="row">
+ <div class="input-field col s12">
+ <label class="active">Ausfälle</label>
%= select_field filter_cancellation => [['Alle' => q{}], ['Ohne Zugausfälle' => 'no_cancelled'], ['Nur Zugausfälle' => 'only_cancelled']]
</div>
</div>
-<div class="field">
- <div class="desc">
- Verspätung zwischen
- </div>
- <div>
+<div class="row">
+ <div class="input-field col s3">
+ <label>Verspätung Min</label>
%= text_field 'filter_delay_min', class => 'delay', placeholder => '-∞'
- und
+ </div>
+ <div class="input-field col s3">
+ <label>Verspätung Max</label>
%= text_field 'filter_delay_max', class => 'delay', placeholder => '+∞'
- Minuten (inklusive).
</div>
-</div>
-<div class="field">
- <div class="desc">
- Zeitraum von
+ <div class="input-field col s3">
+ <label>Start</label>
+ %= date_field 'filter_date_start', class => 'datepicker'
+ </div>
+ <div class="input-field col s3">
+ <label>Ende</label>
+ %= date_field 'filter_date_stop', class => 'datepicker'
</div>
- <div>
- %= date_field 'filter_date_start', class => 'datetime'
- (inklusive) bis
- %= date_field 'filter_date_stop', class => 'datetime'
- (exklusive)
- %= submit_button 'Go'
+</div>
+<div class="row">
+ <div class="col offset-s5">
+ <button class="btn waves-effect waves-light" type="submit" name="action">Submit<i class="material-icons right">send</i>
+ </button>
</div>
</div>
diff --git a/templates/generalbar.html.ep b/templates/generalbar.html.ep
new file mode 100644
index 0000000..ed0cfb2
--- /dev/null
+++ b/templates/generalbar.html.ep
@@ -0,0 +1,31 @@
+% if (not defined param('want_msg')) {
+ % param(want_msg => 0);
+ % }
+ %= form_for bar => begin
+ <input type="hidden" value="0" name="want_msg"/>
+ <div class="row">
+ <div class="input-field col s12">
+ <label class="active">Bartyp</label>
+ % my %yargs = %{$self->barplot_args->{y}};
+ % my @yarg_keys = sort keys %yargs;
+ %= select_field ysource => [map {[$yargs{$_}->{desc}, $_]} @yarg_keys]
+ </div>
+ </div>
+ <div class="row">
+ <div class="input-field col s4">
+ <label class="active">aufgeteilt nach</label>
+ % my %xargs = %{$self->barplot_args->{x}};
+ % my @xarg_keys = sort keys %xargs;
+ %= select_field xsource => [map {[$xargs{$_}->{desc}, $_]} @xarg_keys]
+ </div>
+ <div class="input-field col s4">
+ <label>Breite</label>
+ %= text_field 'width' => 960, class => 'dimension'
+ </div>
+ <div class="input-field col s4">
+ <label>Höhe</label>
+ %= text_field 'height' => 500, class => 'dimension'
+ </div>
+ </div>
+ %= include 'filterform';
+ % end
diff --git a/templates/individualform.html.ep b/templates/individualform.html.ep
index 1dba798..689527d 100644
--- a/templates/individualform.html.ep
+++ b/templates/individualform.html.ep
@@ -1,10 +1,11 @@
-<div>
Details zu individuellen Zugfahrten. Es werden nur maximal 1000 Ergebnisse
angezeigt.
%= form_for individual => begin
-Sortieren nach:
-%= select_field order_by => [['Zeit ↓', 'scheduled_time.d'], ['Zeit ↑', 'scheduled_time.a'], ['Verspätung ↓', 'delay.d'], ['Verspätung ↑', 'delay.a']]
-%= submit_button 'Go';
-<br/>
+<div class="row">
+ <div class="input-field col s12">
+ <label class="active">Sortierung</label>
+ %= select_field order_by => [['Zeit ↓', 'scheduled_time.d'], ['Zeit ↑', 'scheduled_time.a'], ['Verspätung ↓', 'delay.d'], ['Verspätung ↑', 'delay.a']]
+ </div>
+</div>
%= include 'filterform';
% end
diff --git a/templates/intro.html.ep b/templates/intro.html.ep
index 2292967..cecd010 100644
--- a/templates/intro.html.ep
+++ b/templates/intro.html.ep
@@ -3,20 +3,20 @@
<b>dbdb</b>
<div class="intro">
-Diese Seite sammelt Ankunfts- und Abfahrtsdaten einiger deutschen Bahnhöfe und
-berechnet daraus Statistiken zu Pünktlichkeit, Verspätungsmeldungen und
-ähnlichem. Das ist ein reines Freizeitprojekt (und aktuell ziemlich unfertig),
-für die Korrektheit und Vollständigkeit gibt es selbstverständlich keine
-Garantie. Vernünftiges Layout und Design kommt irgendwann™ mal.
+ Diese Seite sammelt Ankunfts- und Abfahrtsdaten einiger deutschen Bahnhöfe und
+ berechnet daraus Statistiken zu Pünktlichkeit, Verspätungsmeldungen und
+ ähnlichem. Das ist ein reines Freizeitprojekt (und aktuell ziemlich unfertig),
+ für die Korrektheit und Vollständigkeit gibt es selbstverständlich keine
+ Garantie. Vernünftiges Layout und Design kommt irgendwann™ mal.
</div>
<b>Bitte beachten</b>
<div class="usage">
-Die Deutsche Bahn ist über eine solche Statistiksammlung möglicherweise
-nicht ganz glücklich, daher bleibt diese Seite nichtöffentlich.
-Einzelne Graphen / Statistiken dürfen gerne (<b>ohne</b> Quellenangabe)
-weitergegeben werden. Zugangsdaten (soweit vorhanden) bitte nur mit
-Verstand weitergeben, im Zweifelsfall werden sie irgendwann geändert.
+ Die Deutsche Bahn ist über eine solche Statistiksammlung möglicherweise
+ nicht ganz glücklich, daher bleibt diese Seite nichtöffentlich.
+ Einzelne Graphen / Statistiken dürfen gerne (<b>ohne</b> Quellenangabe)
+ weitergegeben werden. Zugangsdaten (soweit vorhanden) bitte nur mit
+ Verstand weitergeben, im Zweifelsfall werden sie irgendwann geändert.
</div>
<b>Datengrundlage</b>
@@ -36,32 +36,56 @@ Bedeutung der msg-Spalten siehe
% }
</div>
-<div class="globalstats">
-In der Datenbank sind <b><%= $stats->{departures} %></b> Fahrten
-an <b><%= $stats->{days} %></b> Tagen,
-davon
-<b><%= $stats->{realtime} %></b>
-(<b><%= sprintf('%.1f%%', $stats->{realtime_rate} * 100) %></b>) mit Echtzeitdaten.
-Es gab
-<b><%= $stats->{delayed} %></b> (<%= sprintf('%.1f%%', $stats->{delayed_rate} * 100) %>)
-Züge mit mehr als 5 Minuten Verspätung und
-<b><%= $stats->{canceled} %></b> (<%= sprintf('%.1f%%', $stats->{canceled_rate} * 100) %>)
-Zugausfälle. Pünktlich auf die Minute waren
-<b><%= $stats->{ontime} %></b> (<%= sprintf('%.1f%%', $stats->{ontime_rate} * 100) %>)
-Abfahrten.
-<br/>
-Insgesamt wurden
-<b><%= sprintf('%d', $stats->{delay_sum} / 60) %> Stunden</b> an Verspätungen eingefahren,
-dabei ist ein Zug durchschnittlich
-<b><%= sprintf('%.2f', $stats->{delay_avg}) %> Minuten</b> zu spät.
-</div>
+ <div class="globalstats">
+ In der Datenbank sind <b><%= $stats->{departures} %></b> Fahrten
+ an <b><%= $stats->{days} %></b> Tagen,
+ davon
+ <b><%= $stats->{realtime} %></b>
+ (<b><%= sprintf('%.1f%%', $stats->{realtime_rate} * 100) %></b>) mit Echtzeitdaten.
+ Es gab
+ <b><%= $stats->{delayed} %></b> (<%= sprintf('%.1f%%', $stats->{delayed_rate} * 100) %>)
+ Züge mit mehr als 5 Minuten Verspätung und
+ <b><%= $stats->{canceled} %></b> (<%= sprintf('%.1f%%', $stats->{canceled_rate} * 100) %>)
+ Zugausfälle. Pünktlich auf die Minute waren
+ <b><%= $stats->{ontime} %></b> (<%= sprintf('%.1f%%', $stats->{ontime_rate} * 100) %>)
+ Abfahrten.
+ <br/>
+ Insgesamt wurden
+ <b><%= sprintf('%d', $stats->{delay_sum} / 60) %> Stunden</b> an Verspätungen eingefahren,
+ dabei ist ein Zug durchschnittlich
+ <b><%= sprintf('%.2f', $stats->{delay_avg}) %> Minuten</b> zu spät.
+ </div>
-<div class="forms">
-<b>Bargraph</b>:
-%= include 'barform';
-<br/>
-<b>Top-Liste</b>:
-%= include 'topform';
-<b>Einzelne Züge</b>:
-%= include 'individualform';
+ <div class="container">
+ <div class="row z-depth-2">
+ <div class="col s12">
+ <ul class="tabs">
+ <li class="tab col s3">
+ <a href="#general">Allgemein</a>
+ </li>
+ <li class="tab col s3">
+ <a href="#meldung">Meldungen</a>
+ </li>
+ <li class="tab col s3">
+ <a href="#top">Top</a>
+ </li>
+ <li class="tab col s3">
+ <a href="#single">Einzeln</a>
+ </li>
+ </ul>
+ </div>
+ <div id="general" class="col s12">
+ %= include 'generalbar';
+ </div>
+ <div id="meldung" class="col s12">
+ %= include 'meldungbar';
+ </div>
+ <div id="top" class="col s12">
+ %= include 'topform';
+ </div>
+ <div id="single" class="col s12">
+ %= include 'individualform';
+ </div>
+ </div>
+ </div>
</div>
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
index 1c58277..59d9f5a 100644
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -2,33 +2,51 @@
<html>
<head>
<title><%= stash('title') ? "dbdb - " . stash('title') : 'dbdb' %></title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="msapplication-tap-highlight" content="no">
<meta charset="utf-8">
-% if ($self->stash('refresh_interval')) {
- <meta http-equiv="refresh" content="<%= $self->stash('refresh_interval') %>"/>
-% }
+ % if ($self->stash('refresh_interval')) {
+ <meta http-equiv="refresh" content="<%= $self->stash('refresh_interval') %>"/>
+ % }
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.css">
- %= stylesheet '/css/default.css'
- %= javascript '/js/d3.min.js'
- %= javascript '/js/d3.tip.v0.6.3.js'
- %= javascript '/js/d3funcs.js'
-</head>
-<body style="<%= (stash('hide_opts') ? 'margin: 0; padding: 0;' : q{}) %>">
+ %= stylesheet '/css/default.css'
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>
+ %= javascript '/js/d3.min.js'
+ %= javascript '/js/d3.tip.v0.6.3.js'
+ %= javascript '/js/d3funcs.js'
-% if (my $error = stash 'error') {
-<div class="error">Backend-Fehler:</div>
-<div>
-<pre>
-%= $error
-</pre>
-</div>
-% }
+ <script>
+ $(document).ready(function() {
+ $('select').material_select();
+ $('.datepicker').pickadate({
+ selectMonths: true, // Creates a dropdown to control month
+ selectYears: 15 // Creates a dropdown of 15 years to control year
+ });
+ $('ul.tabs').tabs();
+ });
+ </script>
+ </head>
+ <body>
-%= content
+ % if (my $error = stash 'error') {
+ <div class="error">Backend-Fehler:</div>
+ <div>
+ <pre>
+ %= $error
+ </pre>
+ </div>
+ % }
-<div class="about">
-version <%= stash('version') // '???' %>
-</div>
+ %= content
-</body>
-</html>
+ <div class="about">
+ version <%= stash('version') // '???' %>
+ </div>
+
+ </body>
+ </html>
diff --git a/templates/meldungbar.html.ep b/templates/meldungbar.html.ep
new file mode 100644
index 0000000..e94a3cc
--- /dev/null
+++ b/templates/meldungbar.html.ep
@@ -0,0 +1,31 @@
+% if (not defined param('want_msg')) {
+ % param(want_msg => 1);
+ % }
+ %= form_for bar => begin
+ <input type="hidden" value="1" name="want_msg"/>
+ <div class="row">
+ <div class="input-field col s12">
+ <label class="active">Bartyp</label>
+ % my %yargs = %{$self->barplot_args->{msg}};
+ % my @yarg_keys = sort keys %yargs;
+ %= select_field msgnum => [map {[$yargs{$_}->{desc}, $_]} @yarg_keys]
+ </div>
+ </div>
+ <div class="row">
+ <div class="input-field col s4">
+ <label class="active">aufgeteilt nach</label>
+ % my %xargs = %{$self->barplot_args->{x}};
+ % my @xarg_keys = sort keys %xargs;
+ %= select_field xsource => [map {[$xargs{$_}->{desc}, $_]} @xarg_keys]
+ </div>
+ <div class="input-field col s4">
+ <label>Breite</label>
+ %= text_field 'width' => 960, class => 'dimension'
+ </div>
+ <div class="input-field col s4">
+ <label>Höhe</label>
+ %= text_field 'height' => 500, class => 'dimension'
+ </div>
+ </div>
+ %= include 'filterform';
+ % end
diff --git a/templates/topform.html.ep b/templates/topform.html.ep
index cb35c2f..26a4b78 100644
--- a/templates/topform.html.ep
+++ b/templates/topform.html.ep
@@ -1,6 +1,3 @@
-<div>
%= form_for top => begin
-Nach Häufigkeit sortierte Verspätungs- und Qualitätsmeldungen.
-Die Einschränkungen sind alle optional.
%= include 'filterform';
% end
diff --git a/templates/toplist.html.ep b/templates/toplist.html.ep
index f639e36..d3bda6f 100644
--- a/templates/toplist.html.ep
+++ b/templates/toplist.html.ep
@@ -1,22 +1,34 @@
-%= include 'topform';
+<div class="container">
+ <ul class="collapsible" data-collapsible="accordion">
+ <li>
+ <div class="collapsible-header">Form</div>
+ <div class="collapsible-body">
+ <div style="padding: 0 0.75rem">
+ %= include 'topform';
+ </div>
+ </div>
+ </li>
+ </ul>
+</div>
% if (@{$toplist} == 0) {
-<div class="error">
-Keine Daten mit diesen Parametern gefunden.
-</div>
-% }
-% else {
-<div class="toplist">
-<table>
-<tr><th>Meldung</th><th>Anteil</th><th>Anzahl</th></tr>
-% my $max = stash('toplist')->[0][2];
-% for my $entry (@{ stash('toplist') // [] }) {
-% my ($desc, $percent, $raw) = @{$entry};
-<tr>
-<td style="position: relative;"><div style="z-index: -1; position: absolute; width:<%= int($raw * 100 / $max) %>%; background-color: #e2e2e2;">&nbsp;</div><%= $desc %></td>
-<td><%= $percent %></td>
-<td><%= $raw %></td></tr>
-% }
-</table>
-</div>
-% }
+ <div class="error">
+ Keine Daten mit diesen Parametern gefunden.
+ </div>
+ % }
+ % else {
+ <div class="toplist">
+ <table>
+ <tr><th>Meldung</th><th>Anteil</th><th>Anzahl</th></tr>
+ % my $max = stash('toplist')->[0][2];
+ % for my $entry (@{ stash('toplist') // [] }) {
+ % my ($desc, $percent, $raw) = @{$entry};
+ <tr>
+ <td style="position: relative;"><div style="z-index: -1; position: absolute; width:<%= int($raw * 100 / $max) %>%; background-color: #e2e2e2;">&nbsp;</div><%= $desc %></td>
+ <td><%= $percent %></td>
+ <td><%= $raw %></td>
+ </tr>
+ % }
+ </table>
+ </div>
+ % }
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-22 05:36:32 +0000