Merge pull request #9 from johanah29/alexis

Finish capsule details

src/app/app.component.html

@@ -1 +1,8 @@
-<router-outlet></router-outlet>
+<div class="container">
+    <div class="row">
+        <div class="col-md-12"> 
+            <h1 class="my-3">SpaceX Programmes de lancement</h1>
+        </div>
+        <router-outlet></router-outlet>
+    </div>
+</div>

src/app/components/capsule/capsule.component.html

@@ -1 +1,16 @@
-<p *ngIf="capsule">capsule: {{capsule.capsule_serial}}</p>
+<div *ngIf="capsule">
+    <div class="card">
+        <div class="card-body">
+            <h5 class="card-title">{{ capsule.capsule_serial }}</h5>
+            <h6 class="card-subtitle mb-2 text-muted">{{ capsule.type }}</h6>
+            <p class="card-text">{{ capsule.details }}</p>
+
+            <h4 style="text-align: center; margin-top: 24px">Lancements avec la capsules</h4>
+            <div *ngFor="let launch of launches">
+                <h5>flight id: {{ launch.flight_number }}</h5>
+                <h5>Date du lancement: {{ launch.launch_date_local | date: 'dd LLL y H\'h\'mm' }}</h5>
+                <p>{{ launch.details }}</p>
+            </div>
+        </div>
+    </div>
+</div>

src/app/components/capsule/capsule.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { CapsulesService } from 'src/app/services/capsules.service';
+import { LaunchesService } from 'src/app/services/launches.service';
 
 @Component({
   selector: 'app-capsule',
@@ -9,9 +10,11 @@ import { CapsulesService } from 'src/app/services/capsules.service';
 })
 export class CapsuleComponent implements OnInit {
   capsule: any;
+  launches: Array<any> = [];
 
   constructor(
     private capsuleService: CapsulesService,
+    private launchesService: LaunchesService,
     private route: ActivatedRoute
   ) { }
 
@@ -21,6 +24,15 @@ export class CapsuleComponent implements OnInit {
     if(id != null) {
       this.capsuleService.getOneCapsule(id).toPromise().then(capsule => {
         this.capsule = capsule;
+
+        this.capsule.missions.forEach((mission: any) => {
+          console.log(mission.flight)
+          this.launchesService.getOneLaunch(mission.flight).toPromise().then(launch => {
+            this.launches.push(launch);
+          });
+        });
+
+        console.log(this.capsule, this.launches);
       })
     } else {
       console.log("error: capsule serial null")

src/app/components/launch-programs/launch-programs.component.css

@@ -1,10 +1,3 @@
-h1 {
-    color: #000;
-    background-color: #fff;
-    border-radius: 5px;
-    text-align: center;
-    padding: 10px;
-}
 .filter-header-wrap {
     display: flex;
     justify-content: space-between;

src/app/components/launch-programs/launch-programs.component.html

@@ -1,18 +1,8 @@
-<br>
-<div class="container">
-    <div class="row">
-        <div class="col-md-12"> 
-            <h1 class="my-3">SpaceX Programmes de lancement</h1>
-        </div>
-        <br>
-        <br>
-        <div class="col-md-12">
-            <p *ngIf="isLoading" class="loading-text">Veuillez patienter pendant le chargement des données...</p>
-            <div *ngIf="!isLoading" class="row">
-                <div *ngFor ="let item of launchDataArray" class="col-md-4">
-                    <app-launch-detail [data]="item"></app-launch-detail>
-                </div>
-            </div>
+<div class="col-md-12">
+    <p *ngIf="isLoading" class="loading-text">Veuillez patienter pendant le chargement des données...</p>
+    <div *ngIf="!isLoading" class="row">
+        <div *ngFor ="let item of launchDataArray" class="col-md-4">
+            <app-launch-detail [data]="item"></app-launch-detail>
         </div>
     </div>
 </div>

src/app/components/list-capsule/list-capsule.component.html

@@ -1,4 +1,4 @@
-<h1>Liste des Capsules</h1>
+<h2>Liste des Capsules</h2>
 
 <table class="table">
     <thead>

src/styles.css

@@ -1,5 +1,19 @@
 /* You can add global styles to this file, and also import other style files */
+h1 {
+    color: #000;
+    background-color: #fff;
+    border-radius: 5px;
+    text-align: center;
+    padding: 10px;
+}
+
+h2 {
+    color: #000;
+    background-color: rgba(255, 255, 255, 0);
+    text-align: left;
+}
+
 body {
-    background-color: #32b794;
+    background-color: #a3cae4;
     font-family: Arial, Helvetica, sans-serif!important;
 }