Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
1 contributor

Users who have contributed to this file

<!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>