Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
160 lines (132 sloc) 4.59 KB
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Stationboard Example - Transport API</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="../media/css/layout.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script>
$(function () {
var station = '8501120';
function refresh() {
if (station) {
$.get('../v1/stationboard', {id: station, limit: 15}, function(data) {
$('#stationboard tbody').empty();
$(data.stationboard).each(function () {
var prognosis, departure, delay, line = '<tr><td>';
departure = moment(this.stop.departure);
if (this.stop.prognosis.departure) {
prognosis = moment(this.stop.prognosis.departure);
delay = (prognosis.valueOf() - departure.valueOf()) / 60000;
line += departure.format('HH:mm') + ' <strong>+' + delay + ' min</strong>';
} else {
line += departure.format('HH:mm');
}
line += '</td><td>' + this.name + '</td><td>' + this.to + '</td></tr>';
$('#stationboard tbody').append(line);
});
}, 'json');
}
}
$('#station').autocomplete({
source: function (request, response) {
$.get('../v1/locations', {query: request.term, type: 'station'}, function(data) {
response($.map(data.stations, function(station) {
return {
label: station.name,
station: station
}
}));
}, 'json');
},
select: function (event, ui) {
station = ui.item.station.id;
refresh();
}
});
setInterval(refresh, 30000);
refresh();
});
</script>
<style>
h3 {
margin: 40px 0 20px;
}
.ui-widget,
.ui-widget input {
font-family: Arial, sans-serif;
font-size: 13px;
}
.ui-autocomplete {
text-align: left;
}
strong {
color: #d10505;
}
.column {
float: right;
}
.media {
padding-top: 30px;
}
table {
border-collapse: collapse;
width: 100%;
}
td, th {
padding: 8px;
line-height: 18px;
vertical-align: top;
border-bottom: 1px solid #DDD;
}
</style>
</head>
<body>
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
<header>
<h1><a href="../">Transport</a></h1>
<p>Swiss public transport API</p>
</header>
<article>
<p class="pull-right">
<a class="btn btn-link" href="https://github.com/OpendataCH/Transport/blob/master/web/examples/stationboard.html" target="_blank">
<span class="glyphicon glyphicon-new-window"></span>
Source Code
</a>
</p>
<h3>Stationboard Example</h3>
<div class="ui-widget station">
<input class="form-control" id="station" value="Lausanne" placeholder="Station" />
</div>
<div class="media">
</div>
<table id="stationboard">
<colgroup>
<col width="120">
<col width="140">
<col width="230">
</colgroup>
<thead>
<tr>
<th align="left">Zeit</th>
<th>&nbsp;</th>
<th align="left">Nach</th>
</tr>
</thead>
<tbody></tbody>
</table>
</article>
<footer class="footer">
<hr>
<p>Powered by <a href="http://opendata.ch/">Opendata.ch</a></p>
</footer>
</div>
</div>
</body>
</html>