This starts building on the user page, displaying flights.

config/environment.dev.ts

@@ -1,4 +1,5 @@
 export const environment = {
   production: false,
-  devHost:"http://localhost:3000"
+  baseApiUrl: "http://localhost:8080",
+  jwtEnabled: true
 };

src/app/+cart/cart.component.html

@@ -1,3 +1,8 @@
 <p>
   cart works!
+
+  <a class="button" (click)="createFakeBooking()">Click here to simulate a booking</a>
+
 </p>
+<div *ngIf="error" class="bg-danger text-danger">Error: {{error | json}}</div>
+<div *ngIf="added" class="bg-success">Added: {{added | json }}</div>

src/app/+cart/cart.component.ts

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { Response } from '@angular/http';
+import { AuthService, IUser, UtilityService } from '../shared';
+import { environment } from '../';
 
 @Component({
   moduleId: module.id,
@@ -7,9 +10,37 @@ import { Component, OnInit } from '@angular/core';
 })
 export class CartComponent implements OnInit {
 
-  constructor() {}
+  authService: AuthService;
+  utility: UtilityService;
+  error: string;
+  added: Array<any>;
+
+  constructor(authService: AuthService, utility: UtilityService) {
+      this.authService = authService;
+      this.utility = utility;
+  }
 
   ngOnInit() {
   }
 
+  createFakeBooking() {
+      let flight = {
+          "username": this.authService.getUser(),
+          "flights": [ {
+              "name": "Fake Flight",
+              "date": "6/23/2016",
+              "sourceairport": "CDG",
+              "destinationairport": "SFO"
+          } ]
+      };
+      return this.utility.makePostRequest(environment.baseApiUrl + "/api/user/flights", [], flight).then((response: any) => {
+          let result = response.data as any;
+          this.added = result.added;
+          this.error = null;
+      }, (error) => {
+          this.added = null;
+          this.error = error;
+      });
+  }
+
 }

src/app/+hotels/hotels.component.html

@@ -1,3 +1,74 @@
-<p>
-  hotels works!
-</p>
+<div class="panel panel-default">
+  <div class="panel-heading">
+      <h3>Find Hotels</h3>
+  </div>
+  <div class="panel-body">
+  <form [ngFormModel]="hotelForm"
+        (ngSubmit)="findHotels(hotelForm.value)"
+        class="form-inline"
+        [class.has-error]="!hotelForm.valid">
+
+    <div class="form-group"
+      [class.has-error]="!hotelForm.find('description').valid">
+      <label for="descriptionInput">Description</label>
+      <input type="text"
+             id="descriptionInput"
+             placeholder="optional keyword"
+             #desc="ngForm"
+             [ngFormControl]="hotelForm.controls['description']"
+             class="form-control">
+    </div>
+
+    <div class="form-group"
+        [class.has-error]="!hotelForm.find('location').valid">
+      <label for="locationInput">Location</label>
+      <input type="text"
+             id="locationInput"
+             placeholder="eg. 'London', 'France'..."
+             #loc="ngForm"
+             [ngFormControl]="hotelForm.controls['location']"
+             class="form-control">
+    </div>
+
+    <button type="submit" class="btn btn-primary btn-sm">Find Hotels</button>
+  </form>
+</div>
+</div>
+
+<div class="panel panel-default" *ngIf="data">
+    <div class="panel-heading">
+        <h3 class="panel-title">Matching POIs</h3>
+    </div>
+    <div class="panel-body">
+        <div *ngIf="data.length == 0">
+            No matching POI
+        </div>
+        <table *ngIf="data.length > 0" class="table table-striped">
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Address</th>
+                    <th>Description</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr *ngFor="let line of data">
+                    <td class="header">{{line.name}}</td>
+                    <td>{{line.address}}</td>
+                    <td>{{line.description}}</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+    <div class="panel-footer">
+        <span *ngIf="data.length">
+        {{data.length}} matching point of interests (note that some might not be hotels).</span>
+    </div>
+</div>
+
+<div class="has-error" *ngIf="error">
+    <div class="help-block">There was an error (<a data-toggle="collapse" data-target="#errorDetail">click for details</a>)
+    </div>
+
+    <div id="errorDetail" class="collapse">{{error | json}}</div>
+</div>

src/app/+hotels/hotels.component.ts

@@ -1,15 +1,90 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy, Injectable, Inject } from '@angular/core';
+import {
+  CORE_DIRECTIVES,
+  FORM_DIRECTIVES,
+  FormBuilder,
+  ControlGroup,
+  Validators
+} from '@angular/common';
+import { Response } from "@angular/http";
+import { UtilityService } from "../shared/utility.service";
+import { Narration, NarrationService } from "../shared/narration.service";
+import { environment } from "../";
+import { Observable } from 'rxjs/Rx';
 
 @Component({
   moduleId: module.id,
   selector: 'app-hotels',
+  directives: [CORE_DIRECTIVES, FORM_DIRECTIVES],
   templateUrl: 'hotels.component.html'
 })
-export class HotelsComponent implements OnInit {
 
-  constructor() {}
+@Injectable()
+
+export class HotelsComponent implements OnInit, OnDestroy {
+
+  hotelForm: ControlGroup;
+  utility: UtilityService;
+  private _narrations: NarrationService;
+  data;
+  error;
+
+  constructor(fb: FormBuilder, utility: UtilityService, narrationService: NarrationService) {
+    this.hotelForm = fb.group({
+       'description': [''],
+       'location':  ['']
+    });
+    this.utility = utility;
+    this._narrations = narrationService;
+  }
 
   ngOnInit() {
+      this._narrations.add("Entered Hotels component", "You navigated to the Hotels search form");
   }
 
-}
+  ngOnDestroy() {
+      this._narrations.clear();
+  }
+
+  findHotels(value: any): void {
+      var location = value.location;
+      var description = value.description;
+
+      var url = environment.baseApiUrl + "/api/hotel/";
+      var hasDescription = (description != null && description != "");
+      var hasLocation = (location != null && location != "");
+      if (hasDescription && hasLocation) {
+          url = url + description + "/" + location + "/";
+      } else if (hasLocation) {
+          url = url + "*/" + location + "/";
+      } else if (hasDescription) {
+          url = url + description + "/"
+      }
+
+      this._narrations.addPre("GET to " + url, "The search parameters were:", JSON.stringify(value));
+
+    this.utility.makeGetRequestObs(url, [])
+    .map((response: Response) => response.json())
+    .subscribe(
+        (val: any) => {
+            this.data = val.data;
+
+            //we expect 2 context requests
+            if (val.context.length == 2) {
+                this._narrations.addPre("FTS query executed in the backend", "The following FTS query was executed in the backend:", val.context[0]);
+                this._narrations.addPre("Subdocument query executed in the backend", "The following subdocument fetch was executed in the backend:", val.context[1]);
+                this._narrations.add("SUCCESS", "Found " + this.data.length + " matching hotels");
+            } else {
+                this._narrations.fallbackPre(2, "SUCCESS (found " + this.data.length + " matching hotels)", val.context);
+            }
+
+
+        },
+        (error: any) => {
+            this.data = null;
+            this.error = error;
+            this._narrations.addPre("ERROR", "There was an error:", JSON.stringify(this.error, null, 2));
+        }
+    );
+  }
+}

src/app/+login/login.component.html

@@ -7,7 +7,7 @@
         <form role="form" class="form-signin" name="loginForm" novalidate>
         <h3 class="form-signin-heading" [hidden]="!isNew">Please Take a Moment to Create an Account</h3>
         <h3 class="form-signin-heading" [hidden]="isNew">Please Enter Your Username and Password</h3>
-        <div class="alert alert-warning" role="alert" [hidden]="!loginError">{{loginError}}</div>
+        <div class="alert alert-warning" role="alert" [hidden]="!loginError">{{loginError | json}}</div>
         <input type="text" placeholder="Please Enter Your Email Address" required [(ngModel)]="username" (keyup)="loginError=null" class="form-control" />
         <input type="password" placeholder="Enter a password" required="" [(ngModel)]="password" (keyup)="loginError=null" class="form-control" />
         <label class="checkbox">

src/app/+user/user.component.html

@@ -1,3 +1,39 @@
-<p>
-  user works!
-</p>
+<div>
+<div class="panel panel-default">
+    <div class="panel-heading">
+        <h3 class="panel-title">Flights booked for {{user}}:</h3>
+    </div>
+    <div class="panel-body">
+        <div *ngIf="booked && booked.length == 0">
+            <h3>{{user}}, you have no booked flights</h3>
+            <p>
+                <a [routerLink]="[ '/home']"><i class="glyphicon glyphicon-send"></i>&nbsp;search flights</a>
+                or
+                <a [routerLink]="[ '/cart']"><i class="glyphicon glyphicon-shopping-cart"></i>&nbsp;purchase flights in the cart
+              </a>.
+            </p>
+        </div>
+        <table *ngIf="booked && booked.length > 0" class="table table-striped">
+            <thead>
+                <tr>
+                    <th>Description</th>
+                    <th>Date</th>
+                    <th>From</th>
+                    <th>To</th>
+                    <th>Booked Via</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr *ngFor="let b of booked">
+                    <td>{{b.name}}</td>
+                    <td>{{b.date}}</td>
+                    <td>{{b.sourceairport}}</td>
+                    <td>{{b.destinationairport}}</td>
+                    <td>{{b.bookedon}}</td>
+                </tr>
+            </tbody>
+        </table>
+        <div *ngIf="error" class="bg-danger text-danger"><h4>Error: </h4><span class="help-text">{{error}}</span></div>
+    </div>
+    <div class="panel-footer"></div>
+</div>

src/app/+user/user.component.ts

@@ -1,15 +1,45 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Injectable } from '@angular/core';
+import { Response } from '@angular/http';
+import { ROUTER_DIRECTIVES } from '@angular/router'
+import { AuthService, IUser, UtilityService } from '../shared';
+import { environment } from "../";
 
+@Injectable()
 @Component({
   moduleId: module.id,
   selector: 'app-user',
-  templateUrl: 'user.component.html'
+  templateUrl: 'user.component.html',
+  directives: [ ROUTER_DIRECTIVES ]
 })
 export class UserComponent implements OnInit {
+  authService: AuthService;
+  user: string;
+  error: any;
+  booked: Array<any>;
+  utility: UtilityService;
 
-  constructor() {}
+  constructor(authService: AuthService, utilityService: UtilityService) {
+      this.authService = authService;
+      this.utility = utilityService;
+  }
 
   ngOnInit() {
+      this.user = this.authService.getUser();
+
+      var searchParams = "username=" + this.user;
+
+      this.utility.makeGetRequestObs(environment.baseApiUrl, ["api", "user", "flights"], searchParams)
+        .map((response: Response) => response.json())
+        .subscribe(
+        (val) => {
+            this.booked = val.data;
+            console.log("found booked flights: " + val.data);
+        },
+        (error: any) => {
+            this.booked = null;
+            this.error = error;
+        }
+    );
   }
 
 }

src/app/environment.ts

@@ -3,5 +3,7 @@
 // The build system defaults to the dev environment
 
 export const environment = {
-  production: false
+  production: false,
+  baseApiUrl: "http://localhost:3000",
+  jwtEnabled: true
 };