umts/pvta-multiplatform

<ion-header>
  <ion-navbar color="primary">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title role="heading">{{title}}</ion-title>
    <ion-buttons end>
      <button aria-hidden="true" ion-button icon-only (click)="goToStopMapPage()">
        <ion-icon name="compass"></ion-icon>
      </button>
      <button ion-button icon-only item-right clear
      (click)="liked = !liked; toggleStopHeart();"
      attr.aria-label="{{liked ? 'Unlike stop' : 'Like stop'}}">
        <ion-icon name="{{liked ? 'ios-heart' : 'ios-heart-outline'}}"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
  <ion-toolbar color="primary" *ngIf="!isInternetExplorer">
    <ion-item color="primary">
      <ion-label style="color: white;">Order Departures By</ion-label>
      <ion-select [(ngModel)]="order">
        <ion-option value="route">Route</ion-option>
        <ion-option value="time">Time</ion-option>
      </ion-select>
    </ion-item>
  </ion-toolbar>
</ion-header>

<ion-content text-wrap aria-label="This page auto refreshes content. To stop this, navigate to Settings and change the Auto refresh timing to off">
  <ion-item-group *ngIf="alerts.length > 0">
    <ion-toolbar color="danger">
      <ion-title role="heading">
        Alerts
      </ion-title>
    </ion-toolbar>
    <ion-list role="list" aria-label="alerts">
      <ion-item text-wrap icon-left *ngFor="let alert of alerts">
        <ion-icon aria-hidden="true" name="alert"></ion-icon>
        {{alert.Message}}
      </ion-item>
    </ion-list>
  </ion-item-group>
  <ion-refresher (ionRefresh)="pullToRefresh($event)">
    <ion-refresher-content pullingText="Pull to refresh departures...">
    </ion-refresher-content>
  </ion-refresher>
  <ion-list aria-label="upcoming departures at this stop" role="list">
    <div *ngIf="order == 'route'">
      <div *ngFor="let direction of departuresByDirection">
        <div ion-item (click)="toggleRouteDropdown(direction)" [style.background-color]="'#'+routeList[direction.RouteId]?.Color" [style.color]="'white'">
          <ion-grid no-padding>
            <ion-row align-items-center>
              <ion-col col-3 class="route-shortname">
                {{routeList[direction.RouteId]?.RouteAbbreviation}}
              </ion-col>
              <ion-col col-4 style="text-align: left;">
                {{direction.Departures[0].Trip.InternetServiceDesc}}
              </ion-col>
              <ion-col col-4 style="text-align: center;">
                <p class="white">
                  {{direction.Departures[0].Times.eExact}}
                </p>
                <p class="white">
                  ({{direction.Departures[0].Times.eRelativeWithPrefix}})
                </p>
              </ion-col>
              <ion-col >
                <ion-icon class="accordion-icon" [name]="isRouteDropdownShown(direction) ? 'ios-arrow-up' : 'ios-arrow-down'"></ion-icon>
              </ion-col>
            </ion-row>
          </ion-grid>
        </div>
        <!-- When a route has been expanded, show its departures -->
        <div ion-item [hidden]="!isRouteDropdownShown(direction)" (click)="goToRoutePage(direction.RouteId)">
          <ion-grid class="expanded-grid">
            <ion-row align-items-center>
              <ion-col class="bold">
                Destination
              </ion-col>
              <ion-col>
                <div class="center">
                  <b>Scheduled</b>
                </div>
              </ion-col>
              <ion-col>
                <div class="center">
                  <b>Estimated</b>
                </div>
              </ion-col>
            </ion-row>
            <ion-row *ngFor="let departure of direction.Departures" class="expanded-row">
              <ion-col>
                {{departure.Trip.InternetServiceDesc}}
              </ion-col>
              <ion-col>
                <div class="center departure-padding">
                  {{departure.Times.sExact}}<br>
                  ({{departure.Times.sRelativeWithPrefix}})
                </div>
              </ion-col>
              <ion-col class="center departure-padding">
                <div>
                  {{departure.Times.eExact}}<br>
                  ({{departure.Times.eRelativeWithPrefix}})
                </div>
              </ion-col>
            </ion-row>
          </ion-grid>
        </div>
      </div>
    </div>
    <div *ngIf="order == 'time'">
      <div ion-item *ngFor="let direction of departuresByTime"
      (click)="goToRoutePage(direction.RouteId)"
      [style.background-color]="'#'+routeList[direction.RouteId]?.Color"
      class="white">
        <ion-grid>
          <ion-row align-items-center>
            <ion-col col-3 class="route-shortname">
              {{routeList[direction.RouteId]?.RouteAbbreviation}}
            </ion-col>
            <ion-col col-4 style="text-align: left;">
              {{direction.Departures?.Trip.InternetServiceDesc}}
            </ion-col>
            <ion-col col-4 style="text-align: center;">
              <p style="color: white;">
                {{direction.Departures?.Times.eExact}}
              </p>
              <p style="color: white">
                ({{direction.Departures?.Times.eRelativeWithPrefix}})
              </p>
            </ion-col>
            <ion-col>
              <ion-icon class="forward-icon" [name]="'ios-arrow-forward'"></ion-icon>
            </ion-col>
          </ion-row>
        </ion-grid>
      </div>
    </div>
  </ion-list>

  <ion-toolbar *ngIf="!departuresByDirection.length && stop">
    {{stop.Description}} has no departures for at least the next 3 hours.
  </ion-toolbar>

  <ion-item>
    <i>Disclaimer:</i>
    <p>
      Real-time data is an estimate and may be incorrect or unavailable.<br>
      Please continue to reference official schedules as necessary.
    </p>
  </ion-item>
</ion-content>