gtfs_realtime_viz

<style>
  .viz-tool table {
    border-collapse: collapse;
    text-align: left;
  }
  .viz-tool td, .viz-tool th {
    border-bottom: 1px solid #ddd;
    margin: 0;
    padding: 0;
  }
  .viz-tool .viz-comment {
    border: 1px solid #ddd;
    height: 50px;
    margin-top: 1em;
    padding: 0.5em;
  }
  .viz-tool table.viz-ladder {
    width: 100%;
  }
  .viz-tool table.viz-all-vehicles td, .viz-tool table.viz-all-vehicles th{
    padding: 0 1em;
  }
  .viz-tool .viz-position {
    width: 14%;
  }
  .viz-tool.viz-hidden {
    display: none;
  }
</style>

<button id="viz-tool-previous-button">Previous</button>
<button id="viz-tool-next-button">Next</button>

<%= for {{comment, vehicles_by_stop}, i} <- Enum.with_index(@vehicle_archive) do %>
  <div id="viz-<%= i %>" class="viz-tool viz-hidden">
    <div class="viz-comment"><%= comment %></div>

    <h2>Routes</h2>

    <%= for {route_name, stops} <- @routes do %>
      <h3><%= route_name %></h3>
      <table class="viz-ladder">
        <tr>
          <th class="viz-position">Transit
          <th class="viz-position">Incoming</th>
          <th class="viz-position">At</th>
          <th>Station</th>
          <th class="viz-position">At</th>
          <th class="viz-position">Incoming</th>
          <th class="viz-position">Transit</th>
        </tr>

        <%= for {stop_name, stop_id_0, stop_id_1} <- stops do %>
          <% vs0 = vehicles_by_stop[stop_id_0] || [] %>
          <% vs1 = vehicles_by_stop[stop_id_1] || [] %>

          <tr>
            <td><%= trainify(vs0, :IN_TRANSIT_TO, "🚂") %></td>
            <td><%= trainify(vs0, :INCOMING_AT, "🚂") %></td>
            <td><%= trainify(vs0, :STOPPED_AT, "🚂") %></td>
            <td><%= stop_name %></td>
            <td><%= trainify(vs1, :STOPPED_AT, "🚂") %></td>
            <td><%= trainify(vs1, :INCOMING_AT, "🚂") %></td>
            <td><%= trainify(vs1, :IN_TRANSIT_TO, "🚂") %></td>
          </tr>
        <% end %>
      </table>
    <% end %>

    <h2>All Vehicles</h2>
    <div>
      <table class="viz-all-vehicles">
        <thead>
          <tr>
            <th>Veh. ID</th>
            <th>Veh. Label</th>
            <th>Route ID</th>
            <th>Trip ID</th>
            <th>Sched. Rel.</th>
            <th>Stop ID</th>
            <th>Status</th>
            <th>Stop Seq.</th>
            <th>Position</th>
          </tr>
        </thead>
        <tbody>
          <%= for {_id, vehicles} <- vehicles_by_stop, vehicle <- vehicles do %>
            <tr>
              <%= if (veh = vehicle.vehicle) do %>
                <td><%= veh.id %></td>
                <td><%= veh.label %></td>
              <% else %>
                <td>n/a</td>
                <td>n/a</td>
              <% end %>
              <%= if (trip = vehicle.trip) do %>
                <td><%= trip.route_id %></td>
                <td><%= trip.trip_id %></td>
                <td><%= trip.schedule_relationship %></td>
              <% else %>
                <td>n/a</td>
                <td>n/a</td>
                <td>n/a</td>
              <% end %>
              <td><%= vehicle.stop_id %></td>
              <td><%= vehicle.current_status %></td>
              <td><%= vehicle.current_stop_sequence %></td>
              <%= if (pos = vehicle.position) do %>
                <td><%= "(#{Float.round(pos.latitude, 5)}, #{Float.round(pos.longitude, 5)})" %></td>
              <% else %>
                <td>n/a</td>
              <% end %>
            </tr>
          <% end %>
        </tbody>
      </table>
    </div>
  </div>
<% end %>

<script>
  (function(){
    var vizShown = 0;
    var vizPbCount = document.querySelectorAll(".viz-tool").length;

    var prevButton = document.getElementById("viz-tool-previous-button");
    var nextButton = document.getElementById("viz-tool-next-button");

    function render(){
      // set disabled states for Prev/Next buttons
      prevButton.disabled = (vizShown === 0);
      nextButton.disabled = (vizShown === vizPbCount - 1)

      // hide all PB visualizations
      var allViz = document.querySelectorAll(".viz-tool");
      var i = 0;
      for(i; i < allViz.length; i++){
        allViz[i].classList.add("viz-hidden");
      }

      // unhide the relevant one
      document.getElementById("viz-" + vizShown).classList.remove("viz-hidden");
    }

    prevButton.addEventListener("click", function(){
      vizShown--;
      render();
    })

    nextButton.addEventListener("click", function(){
      vizShown++;
      render();
    })

    render();
  })();
</script>