feat(rocket): adds rocket list and detail pages

fix #3, fix #4

src/app/app.component.ts

@@ -27,6 +27,7 @@ export class MyApp {
       { title: 'Upcoming Launches', component: 'FutureLaunchesPage' },
       { title: 'History Events', component: 'HistoryPage' },
       { title: 'Launchpads', component: 'LaunchPadsPage' },
+      { title: 'Rockets', component: 'RocketPage' },
     ];
 
   }

src/models/Rocket.ts

@@ -1,21 +1,95 @@
-import { Core } from "./Core";
-import { Payload } from "./Payload";
-
 export interface Rocket {
-    rocket_id: string,
-    rocket_name: string,
-    rocket_type: string,
+    id: number,
+    active: boolean,
+    stages: number,
+    boosters: number,
+    cost_per_launch: number,
+    success_rate_pct: number,
+    first_flight: Date,
+    country: string,
+    company: string,
+    height: {
+        meters: number,
+        feet: number
+    },
+    diameter: {
+        meters: number,
+        feet: number
+    },
+    mass: {
+        kg: number,
+        lb: number
+    },
+    payload_weights: [
+        {
+            id: string,
+            name: string
+            kg: number,
+            lb: number
+        }
+    ],
     first_stage: {
-        cores: Array<Core>
+        reusable: boolean,
+        engines: number,
+        fuel_amount_tons: number,
+        burn_time_sec: number,
+        thrust_sea_level: {
+            kN: number,
+            lbf: number
+        },
+        thrust_vacuum: {
+            kN: number,
+            lbf: number
+        }
     },
     second_stage: {
-        block: 5,
-        payloads: Array<Payload>
+        engines: number,
+        fuel_amount_tons: number,
+        burn_time_sec: number,
+        thrust: {
+            kN: number,
+            lbf: number
+        },
+        payloads: {
+            option_1: string,
+            option_2: string,
+            composite_fairing: {
+                height: {
+                    meters: number,
+                    feet: number
+                },
+                diameter: {
+                    meters: number,
+                    feet: number
+                }
+            }
+        }
     },
-    fairings: {
-        reused: boolean,
-        recovery_attempt: boolean,
-        recovered: boolean,
-        ship?: string
-    }
+    engines: {
+        number: number,
+        type: string,
+        version: string,
+        layout: string,
+        engine_loss_max: number,
+        propellant_1: string,
+        propellant_2: string,
+        thrust_sea_level: {
+            kN: number,
+            lbf: number
+        },
+        thrust_vacuum: {
+            kN: number,
+            lbf: number
+        },
+        thrust_to_weight: number
+    },
+    landing_legs: {
+        number: number,
+        material: string
+    },
+    wikipedia: string,
+    description: string,
+    rocket_id: string,
+    rocket_name: string,
+    rocket_type: string
 }

src/pages/launch-pads/launch-pads.html

@@ -17,14 +17,13 @@
 
 <ion-content padding>
 
-
-
-
   <ion-card *ngFor="let launchpad of launchpads">
     <ion-card-header>
       {{ launchpad.location.name }} - {{ launchpad.location.region }}
       <div class="launchpad-card-subtitle">
-        {{ launchpad.status }} - (Lat: {{ launchpad.location.latitude }}, Lng: {{ launchpad.location.longitude }})
+        {{ launchpad.status }}
+        <br>
+        (Lat: {{ launchpad.location.latitude }}, Lng: {{ launchpad.location.longitude }})
       </div>
     </ion-card-header>
     <ion-card-content>
@@ -38,5 +37,4 @@
     </ion-card-content>
   </ion-card>
 
-
 </ion-content>

src/pages/rocket-details/rocket-details.html

@@ -0,0 +1,125 @@
+<!--
+  Generated template for the RocketDetailsPage page.
+
+  See http://ionicframework.com/docs/components/#navigation for more info on
+  Ionic pages and navigation.
+-->
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>{{ rocket?.rocket_name }} Details</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content padding>
+
+  <ion-card *ngIf="rocket">
+    <ion-card-header>
+      {{ rocket.rocket_name }}
+      <p *ngIf="rocket.active">Active</p>
+      <p *ngIf="!rocket.active">Inactive</p>
+    </ion-card-header>
+    <ion-card-content class="rocket-details-card-content">
+      {{ rocket.description }}
+
+      <div class="rocket-card-divider"></div>
+
+      <ion-grid no-padding>
+        <ion-row>
+          <ion-col col-6>
+            <h3>Company</h3>
+            {{ rocket.company }}
+          </ion-col>
+          <ion-col col-6>
+            <h3>Country</h3>
+            {{ rocket.country }}
+          </ion-col>
+        </ion-row>
+        <br>
+        <ion-row>
+          <ion-col col-6>
+            <h3>Cost per launch</h3>
+            {{ rocket.cost_per_launch | currency }}
+          </ion-col>
+          <ion-col col-6>
+            <h3>Success rate</h3>
+            {{ rocket.success_rate_pct }} %
+          </ion-col>
+        </ion-row>
+        <br>
+        <ion-row>
+          <ion-col col-6>
+            <h3>Height</h3>
+            {{ rocket.height.meters }} meters
+          </ion-col>
+          <ion-col col-6>
+            <h3>Diameter</h3>
+            {{ rocket.diameter.meters }} meters
+          </ion-col>
+        </ion-row>
+        <br>
+        <ion-row>
+          <ion-col col-6>
+            <h3>Mass</h3>
+            {{ rocket.mass.kg }} Kg
+          </ion-col>
+          <ion-col col-6>
+            <h3>First Flight</h3>
+            {{ rocket.first_flight }}
+          </ion-col>
+        </ion-row>
+
+
+      </ion-grid>
+
+      <div class="rocket-card-divider"></div>
+
+      <ion-grid no-padding>
+        <h3>Engines</h3>
+        <ion-row>
+          <ion-col col-6>
+            Nº of Engines: {{ rocket.engines.number }}
+          </ion-col>
+          <ion-col col-6>
+            Type: {{ rocket.engines.type }}
+          </ion-col>
+        </ion-row>
+        <ion-row>
+          <ion-col col-6>
+            Version: {{ rocket.engines.version }}
+          </ion-col>
+          <ion-col col-6>
+            Layout: {{ rocket.engines.layout }}
+          </ion-col>
+        </ion-row>
+        <ion-row>
+          <ion-col col-6>
+            Propellant 1: {{ rocket.engines.propellant_1 }}
+          </ion-col>
+          <ion-col col-6>
+            Propellant 2: {{ rocket.engines.propellant_2 }}
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+
+      <div class="rocket-card-divider"></div>
+
+      <ion-grid no-padding>
+        <h3>Landing Legs</h3>
+        <ion-row>
+          <ion-col col-6>
+            Quantity: {{ rocket.landing_legs.number }}
+          </ion-col>
+          <ion-col col-6>
+            Material: {{ rocket.landing_legs.material }}
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+      <div class="rocket-card-divider"></div>
+      <h3 (click)="openRocketWikipedia($event, rocket.wikipedia)">{{ rocket.rocket_name }} Wikipedia</h3>
+    </ion-card-content>
+  </ion-card>
+
+</ion-content>

src/pages/rocket-details/rocket-details.module.ts

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

src/pages/rocket-details/rocket-details.scss

@@ -0,0 +1,13 @@
+page-rocket-details {
+
+}
+
+.rocket-card-divider {
+    margin: 2rem 0;
+}
+
+.rocket-details-card-content {
+    h2, h3 {
+        color: #f7f7f7;
+    }
+}

src/pages/rocket-details/rocket-details.ts

@@ -0,0 +1,49 @@
+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams } from 'ionic-angular';
+import { InAppBrowser, InAppBrowserOptions } from '@ionic-native/in-app-browser';
+
+import { Rocket } from '../../models/Rocket';
+import { HomePage } from '../home/home';
+
+/**
+ * Generated class for the RocketDetailsPage page.
+ *
+ * See https://ionicframework.com/docs/components/#navigation for more info on
+ * Ionic pages and navigation.
+ */
+
+@IonicPage()
+@Component({
+  selector: 'page-rocket-details',
+  templateUrl: 'rocket-details.html',
+})
+export class RocketDetailsPage {
+
+  rocket: Rocket;
+
+  constructor(public navCtrl: NavController,
+    public navParams: NavParams,
+    private iab: InAppBrowser) {
+
+    this.rocket = this.navParams.get('rocket');
+    if (!this.rocket) {
+      this.navCtrl.setRoot(HomePage);
+      this.navCtrl.popToRoot();
+    }
+
+  }
+
+  openRocketWikipedia(event, url) {
+    if (url) {
+      const options: InAppBrowserOptions = {
+        location: 'no',
+        zoom: 'no',
+        hideurlbar: 'yes',
+      };
+
+      const browser = this.iab.create(url, '_self', options);
+      browser.show();
+    }
+  }
+
+}

src/pages/rocket/rocket.html

@@ -0,0 +1,32 @@
+<!--
+  Generated template for the RocketPage 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>Rockets</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content>
+
+  <ion-list no-lines>
+    <button
+      ion-item
+      (click)="onRocketTap($event, rocket)"
+      *ngFor="let rocket of rockets">
+        <h3>{{ rocket.rocket_name }}</h3>
+        <p item-end *ngIf="rocket.active">Active</p>
+        <p item-end *ngIf="!rocket.active">Inactive</p>
+    </button>
+  </ion-list>
+
+</ion-content>

src/pages/rocket/rocket.module.ts

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