kvb-status/index.html at master · KoelnAPI/kvb-status · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>KVB Bahn-Status - Powered by Köln API</title>
    <meta name="description" content="Aktuelle Meldungen von der KVB zum Bahnverkehr, smartphone-freundlich dargestellt.">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
    <style type="text/css">
    body {
      margin-bottom: 20px;
      font-family: 'Open Sans', sans-serif;
    }
    h1 {
      font-weight: 700;
      color: #333;
    }
    .nav-pills li {
      background-color: #eee;
    }
    .table.stationtable td {
      padding-left: 2px;
      padding-right: 0px;
    }
    .panel-heading.stationspanel {
      padding-left: 0px;
    }
    .panel-body.stationspanel {
      padding-left: 0px;
    }
    .icon {
      background-size: 32px 32px;
      display: inline-block;
      padding-left: 45px;
      padding-right: 10px;
      line-height: 32px;
      background-repeat: no-repeat;
      background-position: left center;
    }
    .bahnicon {
      background-image: url(/img/bahn_64.png);
    }
    .busicon {
      background-image: url(/img/bus_64.png);
    }
    </style>
  </head>
  <body>
    <div class="container">

      <h1>KVB Status</h1>

      <p>Ein Service von <a href="http://www.koelnapi.de/">Köln API</a>. Angaben ohne Gewähr. Alle hier gezeigten Meldungen stammen von den Kölner Verkehrsbetrieben. Aktualisierung alle 5 Minuten.</p>

      <ul class="nav nav-tabs" style="margin-top: 10px; margin-bottom: 10px">
        <li class="active"><a href="./"><span class="icon bahnicon">Bahn</span></a></li>
        <li><a href="/bus/"><span class="icon busicon">Bus</span></a></li>
      </ul>

      <div class="well well-sm"><small>Zuletzt aktualisiert: <span id="lastmod">Wird geladen...</span></small></div>

      <div id="content"></div>

      <p><a href="http://www.kvb-koeln.de/german/home/mofis_bahn.html"><span class="glyphicon glyphicon-chevron-right"></span> Meldungsseite der KVB</a></p>

      <p><a href="https://github.com/KoelnAPI/kvb-status"><span class="glyphicon glyphicon-chevron-right"></span> Projektseite auf Github</a></p>
    </div> <!-- / class=container -->
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
    <script src="moment.js"></script>
    <script>
    $(document).ready(function(){
      // load messages
      moment.lang("de");
      var loadData = function() {
        var url = "messages_bahn.min.json";
        $.getJSON(url, function(data){
          //console.log(data);
          var lastmod = moment(data.last_modified);
          $("#lastmod").text(lastmod.format("dddd, Do MMMM YYYY, H:mm") + " Uhr (" + lastmod.fromNow() + ")");
          $("#content").empty();
          if (data.messages.length == 0) {
            $("#content").append('<div class="alert alert-success">Aktuell liegen keine Meldungen vor.</div>')
          } else {
            // add menu
            var numDisruptions = 0;
            var numOther = data.messages.length;
            var disruptionElement = $('<div id="stoerungen"><h2>Störungen</h2></div>');
            var otherElement = $('<div id="other"><h2>Sonstige Meldungen</h2></div>');
            // count disruptions
            $.each(data.messages, function(i, message){
              if (message.type == "St\u00f6rungsmeldung") {
                numDisruptions++;
                numOther--;
                // append to container
                var panel = $('<div class="panel panel-default"></div>');
                var panelBody = $('<div class="panel-body"><p>'+ message.text +'</p></div>')
                // affected stations
                if (message.station_info && message.station_info.length) {
                  panelBody.append('<div class="panel-heading stationspanel"><a role="button" class="btn btn-default" data-toggle="collapse" href="#collapse'+ i +'">Betroffene Haltestellen <span class="badge">'+ message.station_info.length +'</span></a></div>');
                  var table = $('<table class="table stationtable"></table>');
                  $.each(message.station_info, function(s, station_info) {
                    if (station_info.direction) {
                      table.append('<tr><td><span class="label label-default">'+ station_info.station +'</span> nach <span class="label label-default">'+ station_info.direction +'</span></td></tr>');
                    } else {
                      table.append('<tr><td><span class="label label-default">'+ station_info.station + '</span></td></tr>');
                    }
                  });
                  var collapseInnerContainer = $('<div class="panel-body stationspanel"></div>');
                  collapseInnerContainer.append(table);
                  var collapseContainer = $('<div id="collapse'+ i +'" class="panel-collapse collapse"></div>');
                  collapseContainer.append(collapseInnerContainer);
                  panelBody.append(collapseContainer);
                }
                panel.append(panelBody);
                disruptionElement.append(panel);
              } else {
                var panel = $('<div class="panel panel-default"><div class="panel-body">'+ message.text +'</div></div>');
                otherElement.append(panel);
              }
            });
            var menu = $('<ul class="nav nav-pills nav-stacked"></ul>');
            if (numDisruptions) {
              menu.append('<li><a href="#stoerungen">St\u00f6rungen <span class="badge">'+ numDisruptions +'</span></a></li>');
            }
            if (numOther) {
              menu.append('<li><a href="#other">Sonstige Meldungen <span class="badge">'+ numOther +'</span></a></li>');
            }
            $("#content").append(menu);
            if (numDisruptions) {
              $("#content").append(disruptionElement);
            }
          }
        });
      }
      loadData();
    });
    </script>
  </body>
</html>