Show a pearl-string of a trip
Display a simple pearl-string of a trip utilising the trip endpoint. The Pearls visualize if a station is in the future or in the past.
Demo
Code excerpt
jQuery(function($){
const mobilitybox_access_token = '---LOGIN_OR_REGISTER_FOR_FREE_TO_INSERT_API_KEY_HERE---';
const mobilitybox = new Mobilitybox(mobilitybox_access_token);
mobilitybox.get_attributions().then((attributions)=>{
$(".attributions").html(attributions.html);
})
mobilitybox.find_stations_by_name({query: "Hamburg Dammtor"}).then((stations)=>{
var station = stations[0];
station.get_next_departures().then((departures)=>{
var trip_id = departures[0].id;
mobilitybox.get_trip({id: trip_id}).then((trip)=>{
TripHTML(trip).appendTo($(".stops"));
trip.stops.map((stop, index, all_stops)=>{
const is_start_station = index === 0;
const is_end_station = index === all_stops.length-1;
StopHTML(stop, is_start_station, is_end_station).appendTo($(".stops"));
})
});
}, Date.now() + 25*60*1000);
})
});
function TripHTML(trip){
return jQuery(
'<a href="#" class="list-group-item list-group-item-action active">'+
'<div class="d-flex w-100 justify-content-between">'+
'<h5 class="mb-1">'+trip.name+'</h5>'+
'<span>'+trip.origins_from().name+' - '+trip.destination().name+'</span>'+
'<span>'+trip.date_formatted()+'</span>'+
'</div>'+
'</a>'
)
}
function StopHTML(stop, is_start_station, is_end_station){
const pearl_type = (is_start_station?"start":(is_end_station?"end":"between"));
return jQuery(
'<a href="#" class="list-group-item list-group-item-action">'+
'<div class="d-flex w-100">'+
'<span class="flex-shrink-0 mr-1 align-self-strech pearl pearl-between pearl-'+stop.status+' pearl-'+pearl_type+'"><span class="inner-pearl"></span></span>'+
'<h5 class="mb-1 flex-grow-1 align-self-center text-break">'+stop.station.name+'</h5>'+
'<div>'+
'<span>'+(stop.arrival.scheduled_at_formatted() || "")+'</span><br>'+
'<b>'+(stop.departure.scheduled_at_formatted() || "")+'</b>'+
'</div>'+
'</div>'+
'</a>'
)
}
Full HTML-Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Show a pearl-string of a trip</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://unpkg.com/mobilitybox/dist/mobilitybox.min.js"></script>
<style>
body {
background-color: silver;
padding-bottom: 30px;
}
.attributions {
border-radius: 0 3px 0 0;
background-color: white;
border-left: 0;
border-bottom: 0;
padding: 5px;
font-size: 10px;
}
.pearl {
display: block;
position: relative;
width: 20px;
margin-top: -12px;
margin-bottom: -12px;
}
.pearl::before {
display: block;
position: absolute;
content: " ";
top: 0;
bottom: calc(50% + 10px);
left: 8px;
right: 8px;
background-color: green;
}
.pearl::after {
display: block;
position: absolute;
content: " ";
bottom: 0;
top: calc(50% + 10px);
left: 8px;
right: 8px;
background-color: green;
}
.inner-pearl {
position: absolute;
height: 20px;
top: calc(50% - 10px);
left: 0;
right: 0;
border: 4px solid silver;
border-radius: 50%;
}
.pearl-start::before {
display: none;
}
.pearl-end::after {
display: none;
}
.pearl-past .inner-pearl {
border-color: silver;
}
.pearl-past::before {
background-color: silver;
}
.pearl-past::after {
background-color: silver;
}
.pearl-future .inner-pearl {
border-color: rgb(0, 123, 255);
}
.pearl-future::before {
background-color: rgb(0, 123, 255);
}
.pearl-future::after {
background-color: rgb(0, 123, 255);
}
.pearl-current .inner-pearl {
border-color: rgb(0, 123, 255);
background-color: rgb(0, 123, 255);
}
.pearl-current::before {
background-color: silver;
}
.pearl-current::after {
background-color: rgb(0, 123, 255);
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm">
<br />
<div class="list-group stops"></div>
</div>
</div>
</div>
<span class="fixed-bottom">
<span class="attributions border text-muted font-weight-light"></span>
</span>
<script type="text/javascript">
jQuery(function($){
const mobilitybox_access_token = '---LOGIN_OR_REGISTER_FOR_FREE_TO_INSERT_API_KEY_HERE---';
const mobilitybox = new Mobilitybox(mobilitybox_access_token);
mobilitybox.get_attributions().then((attributions)=>{
$(".attributions").html(attributions.html);
})
mobilitybox.find_stations_by_name({query: "Hamburg Dammtor"}).then((stations)=>{
var station = stations[0];
station.get_next_departures().then((departures)=>{
var trip_id = departures[0].id;
mobilitybox.get_trip({id: trip_id}).then((trip)=>{
TripHTML(trip).appendTo($(".stops"));
trip.stops.map((stop, index, all_stops)=>{
const is_start_station = index === 0;
const is_end_station = index === all_stops.length-1;
StopHTML(stop, is_start_station, is_end_station).appendTo($(".stops"));
})
});
}, Date.now() + 25*60*1000);
})
});
function TripHTML(trip){
return jQuery(
'<a href="#" class="list-group-item list-group-item-action active">'+
'<div class="d-flex w-100 justify-content-between">'+
'<h5 class="mb-1">'+trip.name+'</h5>'+
'<span>'+trip.origins_from().name+' - '+trip.destination().name+'</span>'+
'<span>'+trip.date_formatted()+'</span>'+
'</div>'+
'</a>'
)
}
function StopHTML(stop, is_start_station, is_end_station){
const pearl_type = (is_start_station?"start":(is_end_station?"end":"between"));
return jQuery(
'<a href="#" class="list-group-item list-group-item-action">'+
'<div class="d-flex w-100">'+
'<span class="flex-shrink-0 mr-1 align-self-strech pearl pearl-between pearl-'+stop.status+' pearl-'+pearl_type+'"><span class="inner-pearl"></span></span>'+
'<h5 class="mb-1 flex-grow-1 align-self-center text-break">'+stop.station.name+'</h5>'+
'<div>'+
'<span>'+(stop.arrival.scheduled_at_formatted() || "")+'</span><br>'+
'<b>'+(stop.departure.scheduled_at_formatted() || "")+'</b>'+
'</div>'+
'</div>'+
'</a>'
)
}
</script>
</body>
</html>