Navitia journeys

by Kisio Digital

HTML

<script src="https://gitcdn.xyz/repo/CanalTP/navitia/dev/documentation/slate/source/examples/jsFiddle/resources/feedback.js"></script>
<link rel="stylesheet" href="https://gitcdn.xyz/repo/CanalTP/navitia/dev/documentation/slate/source/examples/jsFiddle/resources/feedback.css">
<p>First journey:</p>
<table>
  <thead>
    <tr>
      <th>Section</th>
      <th>Departure</th>
      <th>Arrival</th>
      <th>From</th>
      <th>To</th>
      <th>Mode</th>
      <th>Type</th>
      <th>Physical Mode</th>
      <th>Code</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
<p class="raw-result">Raw result:</p>
<pre><code id=raw-result></code></pre>

CSS

body {
  font-family: Helvetica, Sans, Arial;
}

p:first-child {
  margin: 1.25em;
}

table {
  font-size: 1em;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  margin: 1.25em;
}

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}

td,
th {
  border: 1px solid #ddd;
  padding: 0.5em;
  text-align: center;
}

th {
  padding-top: 0.75em;
  padding-bottom: 0.75em;
  background-color: #4CAF50;
  color: white;
}

.raw-result {
  margin: 1.25em;
}

pre {
  background-color: ghostwhite;
  border: 1px solid silver;
  padding: 0.75em 1.25em;
  margin: 1.25em;
}

.json-key {
  color: brown;
}

.json-value {
  color: navy;
}

.json-string {
  color: olive;
}

JavaScript

/**
 * The following example aims at illustrating Navitia’s journey feature.
 * It requests an itinerary from a cool spot (our headquarter in Paris)
 * to another cool spot (the Eiffel Tower, Paris).
 * Please note that the transportation data that is used for this sandbox
 * is only an example for demo purposes an does not reflect
 * the actual transportation supply on the Parisian area.
 */

$.ajax({
  type: 'GET',
  url: 'https://api.navitia.io/v1/coverage/sandbox/journeys?from=2.3749036;48.8467927&to=2.2922926;48.8583736',
  dataType: 'json',
  headers: {
    Authorization: 'Basic ' + btoa('a61f4cd8-3007-4557-9f4c-214969369cca')
  },
  success: function(result) {
    displayJourney(result.journeys[0]);
    $("#raw-result").html(pretty.json.prettyPrint(result));
  },
  error: function(xhr, textStatus, errorThrown) {
    $("#raw-result").html('Error: ' + textStatus + ' ' + errorThrown);
  }
});


function displayJourney(journey) {
  var $tbody = $('tbody');

  $.each(journey.sections, function(index, section) {
    var $tr = $('<tr>');

    $tr.append($('<td>').html(index));
    $tr.append($('<td>').html(formatHour(section.departure_date_time)));
    $tr.append($('<td>').html(formatHour(section.arrival_date_time)));
    $tr.append($('<td>').html(section.from && section.from.name));
    $tr.append($('<td>').html(section.to && section.to.name));
    $tr.append($('<td>').html(section.mode));
    $tr.append($('<td>').html(section.type));
    $tr.append($('<td>').html(section.display_informations && section.display_informations.physical_mode));
    $tr.append($('<td>').html(section.display_informations && section.display_informations.code));

    $tbody.append($tr);
  });
}

function formatHour(navitiaDate) {
  return navitiaDate.substr(9).match(/.{2}/g).join(':');
}

if (!pretty)
  var pretty = {};

pretty.json = {
  replacer: function(match, pIndent, pKey, pVal, pEnd) {
    var key = '<span class=json-key>';
    var val = '<span class=json-value>';
    var str =...