tram.html

<!-- these are all the configured station tabs -->
<tabs view-selection-string="{{TramCtrl.viewSelectionString}}" mode="view"></tabs>

<div class="row">
  <div class="{{TramCtrl.viewSelection().length > 1 ? 'multi-col' : ''}} col-sm-{{TramCtrl.viewSelection().length > 1 ? 6 : 12}} col-md-{{TramCtrl.viewSelection().length > 1 ? 6 : 12}}" ng-repeat="view in (TramCtrl.viewSelection())">

    <table class="tram-table">
      <tr class="tram-row" ng-repeat="tram in (TramCtrl.trams[view] | limitTo:12)">

        <td class="number-cell"><span class="number number-{{tram.number}} {{tram.special}}">{{tram.number}}</span></td>

        <td class="station">{{tram.nice_to}}</td>

        <td class="departure {{tram.undelayed_departure.getTime() != tram.departure.getTime() ? 'delayed-departure' :''}}">
          <div>{{tram.departure.hours()}}:{{tram.departure.minutes().toString().length == 1 ? '0'+tram.departure.minutes() : tram.departure.minutes()}}</div>
          <div class="undelayed">{{(tram.delay_in_minutes > 0) ? (tram.undelayed_departure.hours()+':'+(tram.undelayed_departure.minutes().toString().length == 1 ? '0'+tram.undelayed_departure.minutes() : tram.undelayed_departure.minutes())) : ''}}</div>
        </td>

        <td class="text-right time time{{tram.in_hours}}{{tram.in_minutes}}">
          <img src="images/tram.png"></img>
          <div>{{tram.in_hours > 0 ? '> 59' : (tram.in_hours != 0 && tram.in_minutes < 10 ? '0' : '') + tram.in_minutes}}</div>
        </td>

      </tr>
    </table>
  </div>
</div>