<- Back

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 = 'hallo_welt123';

  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/[email protected]/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>