Merge pull request #16 from AndreVarandas/create-history-events

feat(history): adds history page

src/app/app.component.ts

@@ -25,6 +25,7 @@ export class MyApp {
       { title: 'Cores', component: 'CoresPage' },
       { title: 'Dragons', component: 'DragonsPage' },
       { title: 'Upcoming Launches', component: 'FutureLaunchesPage' },
+      { title: 'History Events', component: 'HistoryPage' },
     ];
 
   }

src/models/HistoryEvent.ts

@@ -0,0 +1,13 @@
+export interface HistoryEvent {
+    id: number,
+    title: string,
+    event_date_utc: Date,
+    event_date_unix: number,
+    flight_number: number,
+    details: string,
+    links: {
+        reddit?: string,
+        article: string,
+        wikipedia: string
+    }
+}

src/pages/history/history.html

@@ -0,0 +1,26 @@
+<!--
+  Generated template for the HistoryPage page.
+
+  See http://ionicframework.com/docs/components/#navigation for more info on
+  Ionic pages and navigation.
+-->
+<ion-header>
+  <ion-navbar>
+    <button ion-button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-title>History Events</ion-title>
+  </ion-navbar>
+</ion-header>
+
+<ion-content>
+
+  <ion-list no-lines>
+    <button ion-item *ngFor="let history of histories" (click)="openArticle($event, history.links.article)">
+      <h2>{{ history.title }}</h2>
+      <p item-end>{{ history.event_date_utc | date: 'dd/MM/yy @ h:mma' }}</p>
+      <p>{{ history.details }}</p>
+    </button>
+  </ion-list>
+
+</ion-content>

src/pages/history/history.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { HistoryPage } from './history';
+
+@NgModule({
+  declarations: [
+    HistoryPage,
+  ],
+  imports: [
+    IonicPageModule.forChild(HistoryPage),
+  ],
+})
+export class HistoryPageModule {}

src/pages/history/history.scss

@@ -0,0 +1,3 @@
+page-history {
+
+}

src/pages/history/history.ts

@@ -0,0 +1,56 @@
+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams } from 'ionic-angular';
+import { CacheService, Cache } from 'ionic-cache-observable';
+import { InAppBrowser, InAppBrowserOptions } from '@ionic-native/in-app-browser';
+
+import { SpaceXProvider } from '../../providers/space-x/space-x';
+import { HistoryEvent } from '../../models/HistoryEvent';
+import { Observable } from 'rxjs/Observable';
+
+
+/**
+ * Generated class for the HistoryPage page.
+ *
+ * See https://ionicframework.com/docs/components/#navigation for more info on
+ * Ionic pages and navigation.
+ */
+
+@IonicPage()
+@Component({
+  selector: 'page-history',
+  templateUrl: 'history.html',
+})
+export class HistoryPage {
+
+  histories: Array<HistoryEvent>
+
+  constructor(public navCtrl: NavController,
+    public navParams: NavParams,
+    private spaceXProvider: SpaceXProvider,
+    private cacheService: CacheService,
+    private iab: InAppBrowser) { }
+
+  ionViewWillEnter() {
+
+    const historyEventsObservable: Observable<HistoryEvent[]> = this.spaceXProvider.getHistoryEvents();
+    this.cacheService.register('history-events', historyEventsObservable)
+      .mergeMap((cache: Cache<HistoryEvent[]>) => cache.get())
+      .subscribe((historyEvents) => this.histories = historyEvents);
+
+  }
+
+  openArticle(event, url) {
+
+    if (url) {
+      const options: InAppBrowserOptions = {
+        location: 'no',
+        zoom: 'no',
+        hideurlbar: 'yes',
+      };
+
+      const browser = this.iab.create(url, '_self', options);
+      browser.show();
+    }
+  }
+
+}

src/providers/space-x/space-x.ts

@@ -8,6 +8,7 @@ import { Core } from '../../models/Core';
 import { Dragon } from '../../models/Dragon';
 import { Mission } from '../../models/Mission';
 import { Launch } from '../../models/Launch';
+import { HistoryEvent } from '../../models/HistoryEvent';
 
 @Injectable()
 export class SpaceXProvider {
@@ -51,4 +52,9 @@ export class SpaceXProvider {
       .pipe(map((resp: Response) => <Mission[]>resp.json()));
   }
 
+  getHistoryEvents(): Observable<HistoryEvent[]> {
+    return this.http.get(this.BASE_URL + 'history')
+      .pipe(map((resp: Response) => <HistoryEvent[]>resp.json()));
+  }
+
 }