Merge branch 'main' into abakar

package.json

@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~12.2.9",
-    "@angular/cli": "~12.2.9",
+    "@angular/cli": "^12.2.17",
     "@angular/compiler-cli": "~12.2.0",
     "@types/jasmine": "~3.8.0",
     "@types/node": "^12.11.1",

src/app/app-routing.module.ts

@@ -1,7 +1,14 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { CapsuleComponent } from './component/capsule/capsule.component';
+import { ListCapsuleComponent } from './component/list-capsule/list-capsule.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  { path: '', pathMatch: 'full', component: ListCapsuleComponent },
+  { path: 'capsules', component: ListCapsuleComponent},
+  { path: 'capsule/:id', component: CapsuleComponent},
+  { path: '**', redirectTo: ''}
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.module.ts

@@ -6,13 +6,19 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { LaunchDetailComponent } from './components/launch-detail/alunch-detail.component';
 import { LunchProgramsComponent } from './components/launch-programs/launch-programs.component';
+import { ListCapsuleComponent } from './components/list-capsule/list-capsule.component';
+import { CapsuleComponent } from './components/capsule/capsule.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    LaunchDetailComponent,LunchProgramsComponent
+    LaunchDetailComponent,
+    LunchProgramsComponent,
+    ListCapsuleComponent,
+    CapsuleComponent
   ],
   imports: [
+    AppRoutingModule,
     BrowserModule,
     AppRoutingModule,
     HttpClientModule

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

@@ -0,0 +1 @@
+<p *ngIf="capsule">capsule: {{capsule.capsule_serial}}</p>

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

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

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

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { CapsulesService } from 'src/app/services/capsules.service';
+
+@Component({
+  selector: 'app-capsule',
+  templateUrl: './capsule.component.html',
+  styleUrls: ['./capsule.component.css']
+})
+export class CapsuleComponent implements OnInit {
+  capsule: any;
+
+  constructor(
+    private capsuleService: CapsulesService,
+    private route: ActivatedRoute
+  ) { }
+
+  ngOnInit(): void {
+    const id = this.route.snapshot.paramMap.get('id');
+
+    if(id != null) {
+      this.capsuleService.getOneCapsule(id).toPromise().then(capsule => {
+        this.capsule = capsule;
+      })
+    } else {
+      console.log("error: capsule serial null")
+    }
+  }
+
+}

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

@@ -0,0 +1,4 @@
+tbody tr:hover {
+    cursor: pointer;
+    background-color: rgb(184, 181, 167);
+}

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

@@ -0,0 +1,19 @@
+<h1>Liste des Capsules</h1>
+
+<table class="table">
+    <thead>
+        <tr>
+            <th>id</th>
+            <th>Launch Date</th>
+            <th>status</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr *ngFor="let capsule of listCapsules" (click)="redirectToCapsule(capsule.capsule_serial)">
+            <td>{{ capsule.capsule_serial }}</td>
+            <td>{{ capsule.original_launch | date: 'dd LLL y H\'h\'mm' }}</td>
+            <td>{{ capsule.status }}</td>
+        </tr>
+    </tbody>
+</table>
+

src/app/components/list-capsule/list-capsule.component.spec.ts

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

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

@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { CapsulesService } from 'src/app/services/capsules.service';
+
+@Component({
+  selector: 'app-list-capsule',
+  templateUrl: './list-capsule.component.html',
+  styleUrls: ['./list-capsule.component.css']
+})
+export class ListCapsuleComponent implements OnInit {
+  listCapsules: any;
+
+  constructor(
+    private capsulesService: CapsulesService,
+    private router: Router
+  ) { }
+
+  ngOnInit(): void {
+    this.capsulesService.getCapsules().subscribe(capsules => {
+      this.listCapsules = capsules;
+      console.log(capsules);
+    })
+  }
+
+  redirectToCapsule(id: String): void {
+    this.router.navigate(["capsule/" + id]);
+  }
+
+}

src/app/services/capsules.service.ts

@@ -16,10 +16,11 @@ export class CapsulesService {
   constructor(private http: HttpClient) { }
 
   public getCapsules():Observable<any> {
-    return this.http.get<any>(CAPSULES_API, httpOptions);
+    const test = this.http.get<any>(CAPSULES_API, httpOptions);
+    return test;
   }
 
-  public getOneCapsule(capsule_serial:number):Observable<any> {
+  public getOneCapsule(capsule_serial:String):Observable<any> {
     return this.http.get<any>(CAPSULES_API+'/'+capsule_serial, httpOptions);
   }