Creating a Bus Fare Comparison App with Angular 4 and Node.js

Creating a New Angular Project

Adding Angular Material

npm install --save hammerjs @angular/material @angular/cdk

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Creating the Search Card Component

Important File Changes

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-search-card',
  templateUrl: './search-card.component.html',
  styleUrls: ['./search-card.component.css']
})
export class SearchCardComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

<md-toolbar color="primary">
  <span>BusFare</span>
</md-toolbar>
<app-search-card></app-search-card>

Storing user search input

• Trip type (One way or return trip)
• Origin
• Destination
• Departure date
• Return date (if trip type is return)

export interface SearchCardInterface {
  tripType: string;
  origin: string;
  destination: string;
  departureDate: Date;
  arrivalDate: Date;
}

Imports

...
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MdButtonModule, MdCardModule, MdDatepickerModule, MdInputModule, MdNativeDateModule, MdRadioModule,
   MdToolbarModule } from '@angular/material';
import { FormsModule } from '@angular/forms';

...
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    MdButtonModule,
    MdCardModule,
    MdDatepickerModule,
    MdInputModule,
    MdNativeDateModule,
    MdRadioModule,
    MdToolbarModule
  ],
...

Creating the Search Service

import { Injectable } from '@angular/core';

import { SearchCardInterface } from './search-card.interface';

@Injectable()
export class SearchService {

  constructor() { }

  getSearchResults(model: SearchCardInterface) {
 }

}

import { Component, OnInit } from '@angular/core';
import { SearchCardInterface } from './search-card.interface';

import {SearchService} from './search-card.service';

@Component({
  selector: 'app-search-card',
  templateUrl: './search-card.component.html',
  styleUrls: ['./search-card.component.css']
})
export class SearchCardComponent implements OnInit {
  model: SearchCardInterface;

  constructor(private service: SearchService) { }

  ngOnInit() {
    this.model = {tripType: '0', origin: 'Bangalore', destination: 'Hyderabad', departureDate: new Date(),
    arrivalDate: new Date()};
  }

  onSubmit() {
    this.service.getSearchResults(this.model);
  }
}

import { Component } from '@angular/core';
import {SearchService} from './search-card.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [SearchService]
})
export class AppComponent {
  title = 'app';
}

Template

<md-card class="bus-ticket-card">
 <md-card-title>Book bus tickets online</md-card-title>
 <md-card-content>
 <form (ngSubmit)="onSubmit()" #searchForm="ngForm">
 <div>
 <md-radio-group name="tripType" [(ngModel)]="model.tripType" required>
 <md-radio-button value="0">One way</md-radio-button>
 <md-radio-button value="1">Round trip</md-radio-button>
 </md-radio-group>
 </div>
 <div>
 <md-input-container>
 <input mdInput name="origin" placeholder="Origin" [(ngModel)]="model.origin" required>
 </md-input-container>
 <md-input-container>
 <input mdInput name="destination" placeholder="Destination" [(ngModel)]="model.destination" required>
 </md-input-container>
 </div>
 <div>
 <md-input-container>
 <input mdInput name="departureDate" [(ngModel)]="model.departureDate" [mdDatepicker]="departPicker" placeholder="Depart:" required>
 <md-datepicker-toggle mdSuffix [for]="departPicker"></md-datepicker-toggle>
 </md-input-container>
 <md-datepicker [startAt]="model.departureDate" #departPicker></md-datepicker>
<md-input-container>
<input mdInput name="arrivalDate" [(ngModel)]="model.arrivalDate" [mdDatepicker]="returnPicker" placeholder="Return:" required>
 <md-datepicker-toggle mdSuffix [for]="returnPicker"></md-datepicker-toggle>
 </md-input-container>
 <md-datepicker [startAt]="model.arrivalDate" #returnPicker></md-datepicker>
 </div>
 <button md-raised-button color="accent" [disabled]="!searchForm.form.valid">Let's Go</button>
 </form>
 </md-card-content>

</md-card>

.bus-ticket-card{
    width: 400px;
    margin: 24px auto;
}

Updating getSearchResults stub

import {HttpClientModule} from '@angular/common/http';
...

  imports: [
    ...
    HttpClientModule,
    ...
  ]

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { HttpClient } from '@angular/common/http';

import { SearchCardInterface } from './search-card.interface';

@Injectable()
export class SearchService {

// Observable source
 private resultsSource = new Subject<any>();

// Observable stream
 results$ = this.resultsSource.asObservable();
constructor(private http: HttpClient) { }
getSearchResults(model: SearchCardInterface) {
 const baseUrl = 'http://developer.goibibo.com';
 const endpoint = '/api/bus/search/';
 const params = {
 app_id: 'APPID',
 app_key: 'APPKEY',
 format: 'json',
 source: model.origin,
 destination: model.destination,
 dateofdeparture: this.formatDate(model.departureDate),
 dateofarrival: this.formatDate(model.arrivalDate)
 }
 const url = `${baseUrl}${endpoint}?${this.objToUrlParams(params)}`;
 this.http.get(url).subscribe(data => {
 this.resultsSource.next(data['data']);
 });
 }
// This is an util method to return YYYYMMDD date string
 formatDate(date: Date): string {
 const mm = date.getMonth() + 1; // getMonth is zero indexed
 const dd = date.getDate();
 return `${date.getFullYear()}${ mm > 9 ? mm : '0' + mm}${dd > 9 ? dd : '0' + dd}`;
 }

// This is a method to convert a dictionary to url param string
 objToUrlParams(params): string {
 let toret = '';
 for (const key in params) {
 if (params.hasOwnProperty(key)) {
 toret += `${key}=${encodeURIComponent(params[key])}&`;
 }
 }
 return toret;
 }

};

Creating the Search Result Component

<md-toolbar color="primary">
  <span>BusFare</span>
</md-toolbar>
<app-search-card></app-search-card>
<app-search-result></app-search-result>

import { Component, OnInit } from '@angular/core';
import {SearchService} from './search-card.service';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'app-search-result',
  templateUrl: './search-result.component.html',
  styleUrls: ['./search-result.component.css']
})
export class SearchResultComponent implements OnInit {
  subscription: Subscription;
  results: object;

  constructor(private service: SearchService) {
    this.subscription = service.results$.subscribe(results => {
      this.results = results;
    })
  }

  ngOnInit() {

  }
}

<section *ngIf="results">
<h3>Search results</h3>
<table >
<thead>
<tr>
<th>origin</th>
<th>destination</th>
<th>seat</th>
<th>fare.totalfare</th>
<th>duration</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of results.onwardflights">
<td>{{item.origin}}</td>
<td>{{item.destination}}</td>
<td>{{item.seat}}</td>
<td>{{item.fare.totalfare}}</td>
<td>{{item.duration}}</td>
</tr>
</tbody>
</table>
</section>

Styling

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}
table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}
table tr {
  background: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}
table th,
table td {
  padding: .625em;
  text-align: center;
}
table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}
@media screen and (max-width: 600px) {
  table {
    border: 0;
  }
  table caption {
    font-size: 1.3em;
  }
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  table td:before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  table td:last-child {
    border-bottom: 0;
  }
}

Running the app

Conclusion

• Storing the API key on the client side is probably not acceptable in most scenarios.
• Loading animations can be added during search.
• Return date field should be disabled if “One way” is selected, no results will be displayed if the return date is earlier than the departure date.
• Using the Angular Material table component would improve the results display significantly.