[ADD] Added header and bootstrap responsive theming

.angular-cli.json

@@ -3,39 +3,40 @@
   "project": {
     "name": "ars"
   },
-  "apps": [
-    {
-      "root": "src",
-      "outDir": "dist",
-      "assets": [
-        "assets",
-        "favicon.ico"
-      ],
-      "index": "index.html",
-      "main": "main.ts",
-      "polyfills": "polyfills.ts",
-      "test": "test.ts",
-      "tsconfig": "tsconfig.app.json",
-      "testTsconfig": "tsconfig.spec.json",
-      "prefix": "app",
-      "styles": [
-        "styles.css"
-      ],
-      "scripts": [],
-      "environmentSource": "environments/environment.ts",
-      "environments": {
-        "dev": "environments/environment.ts",
-        "prod": "environments/environment.prod.ts"
-      }
+  "apps": [{
+    "root": "src",
+    "outDir": "dist",
+    "assets": [
+      "assets",
+      "favicon.ico"
+    ],
+    "index": "index.html",
+    "main": "main.ts",
+    "polyfills": "polyfills.ts",
+    "test": "test.ts",
+    "tsconfig": "tsconfig.app.json",
+    "testTsconfig": "tsconfig.spec.json",
+    "prefix": "app",
+    "styles": [
+      "styles.css",
+      "assets/css/bootstrap.css"
+    ],
+    "scripts": [
+      "assets/js/jquery.min.js",
+      "assets/js/bootstrap.js"
+    ],
+    "environmentSource": "environments/environment.ts",
+    "environments": {
+      "dev": "environments/environment.ts",
+      "prod": "environments/environment.prod.ts"
     }
-  ],
+  }],
   "e2e": {
     "protractor": {
       "config": "./protractor.conf.js"
     }
   },
-  "lint": [
-    {
+  "lint": [{
       "project": "src/tsconfig.app.json",
       "exclude": "**/node_modules/**"
     },

src/app/app.component.html

@@ -1,9 +1 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{title}}!
-  </h1>
-  <img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
 <router-outlet></router-outlet>

src/app/app.module.ts

@@ -6,6 +6,7 @@ import { HttpModule } from '@angular/http';
 import { AppComponent } from './app.component';
 import { FlightDetailComponent } from './modules/flights/flight-detail/flight-detail.component';
 import { FlightSearchComponent } from './modules/flights/flight-search/flight-search.component';
+import { SharedModule } from './shared/shared.module';
 
 const appRoutes: Routes = [
   { path: 'search', component: FlightSearchComponent }
@@ -20,7 +21,8 @@ const appRoutes: Routes = [
   imports: [
     BrowserModule,
     RouterModule.forRoot(appRoutes),
-    HttpModule
+    HttpModule,
+    SharedModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/modules/flights/flight-search/flight-search.component.html

@@ -1,3 +1,6 @@
-<p>
-  <button (click)="searchFlights()">Search</button>
-</p>
+<button (click)="searchFlights()">
+  Search</button>
+<div *ngFor="let flight of flightsList">
+  <span>{{flight.origin}}</span>##
+</div>
+<app-header></app-header>

src/app/modules/flights/flight-search/flight-search.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { FlightService } from '../';
+import { Flight } from '../../../shared/resources/';
 
 @Component({
   selector: 'app-flight-search',
@@ -9,15 +10,17 @@ import { FlightService } from '../';
 })
 export class FlightSearchComponent implements OnInit {
 
+  private flightsList: Flight[];
+
   constructor(private flightService: FlightService) { }
 
   ngOnInit() {
   }
 
   searchFlights() {
     this.flightService.getFlightResults()
-      .subscribe((data: any) => {
-        console.log(data);
+      .subscribe((data: Flight[]) => {
+        this.flightsList = data;
       });
   }
 

src/app/modules/flights/flight-search/index.ts

@@ -0,0 +1 @@
+export * from './flight-search.component';

src/app/modules/flights/flight.service.ts

@@ -3,6 +3,8 @@ import { Http, Response } from '@angular/http';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
 
+import { RemoteFlight, FlightFromRemote, Flight } from '../../shared/resources/';
+
 @Injectable()
 export class FlightService {
     constructor(
@@ -11,7 +13,15 @@ export class FlightService {
 
     getFlightResults() {
         return this.http.get('../../assets/json/flight-search-results.json')
-            .map(res => res.json());
+            .map(res => res.json())
+            .map(data => data.data.onwardflights)
+            .map((remoteFlights: RemoteFlight[]) => {
+                let flights: Flight[] = [];
+                remoteFlights.forEach(flight => {
+                    flights.push(FlightFromRemote(flight));
+                });
+                return flights;
+            });
     }
 
 }

src/app/shared/components/header/header.component.html

@@ -0,0 +1,46 @@
+<header>
+  <!-- navigation -->
+  <div class="w3_navigation">
+    <nav class="navbar navbar-default">
+      <div class="navbar-header navbar-left">
+        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+          <span class="sr-only">Toggle navigation</span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+        </button>
+        <div class="w3_navigation_pos">
+          <h1>
+            <a href="index.html">
+              <span>W</span>acky
+              <span>T</span>rip</a>
+          </h1>
+        </div>
+      </div>
+      <!-- Collect the nav links, forms, and other content for toggling -->
+      <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
+        <nav class="cl-effect-4" id="cl-effect-4">
+          <ul class="nav navbar-nav menu__list">
+            <li>
+              <a href="index.html">Home</a>
+            </li>
+            <li>
+              <a href="#about" class=" scroll">About</a>
+            </li>
+            <li>
+              <a href="#team" class=" scroll">Team</a>
+            </li>
+            <li>
+              <a href="#gallery" class=" scroll">Destinations</a>
+            </li>
+            <li>
+              <a href="#contact" class=" scroll">Contact</a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </nav>
+  </div>
+  <div class="clearfix"></div>
+  <!-- //navigation -->
+</header>

src/app/shared/components/header/header.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+  let component: HeaderComponent;
+  let fixture: ComponentFixture<HeaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/header/header.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.css']
+})
+export class HeaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/shared/components/header/index.ts

@@ -0,0 +1 @@
+export * from './header.component';

src/app/shared/components/index.ts

@@ -0,0 +1 @@
+export * from './header/';

src/app/shared/shared.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { HeaderComponent } from './components/';
+
+@NgModule({
+    declarations: [HeaderComponent],
+    exports: [HeaderComponent]
+})
+export class SharedModule { }