Ajout de la page listant les pièges

Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.css

@@ -0,0 +1,3 @@
+table {
+  width: 100%;
+}

Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.html

@@ -0,0 +1,37 @@
+<table mat-table [dataSource]="dataSourceTable">
+  <ng-container matColumnDef="id">
+    <th mat-header-cell *matHeaderCellDef>ID</th>
+    <td mat-cell *matCellDef="let element">{{element.id}}</td>
+  </ng-container>
+
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef>Name</th>
+    <td mat-cell *matCellDef="let element">{{element.name}} <a href='http://{{element.website}}'>ici</a></td>
+  </ng-container>
+
+  <ng-container matColumnDef="latitude">
+    <th mat-header-cell *matHeaderCellDef>Latitude</th>
+    <td mat-cell *matCellDef="let element">{{element.latitude}}</td>
+  </ng-container>
+  <ng-container matColumnDef="longitude">
+    <th mat-header-cell *matHeaderCellDef>Longitude</th>
+    <td mat-cell *matCellDef="let element">{{element.longitude}}</td>
+  </ng-container>
+
+  <ng-container matColumnDef="address">
+    <th mat-header-cell *matHeaderCellDef>Address</th>
+    <td mat-cell *matCellDef="let element"><span [innerHTML]="element.address"></span></td>
+  </ng-container>
+  <ng-container matColumnDef="email">
+    <th mat-header-cell *matHeaderCellDef>E-mail</th>
+    <td mat-cell *matCellDef="let element">{{element.email}}</td>
+  </ng-container>
+  <ng-container matColumnDef="type">
+    <th mat-header-cell *matHeaderCellDef>Type</th>
+    <td mat-cell *matCellDef="let element">{{element.type}}</td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>
+<mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>

Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.spec.ts

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

Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit, ViewChild } from "@angular/core";
+import { MatPaginator, MatTableDataSource } from "@angular/material";
+
+import { ServiceApiGet } from "../../services/service-api-get.service";
+import { ServiceComm } from "../../services/service-comm.service";
+import { GearResp } from "../../models/gear";
+
+@Component({
+  selector: "app-list-of-gears",
+  templateUrl: "./list-of-gears.component.html",
+  styleUrls: ["./list-of-gears.component.css"]
+})
+export class ListOfGearsComponent implements OnInit {
+  public displayedColumns: Array<string> = [
+    "id",
+    "name",
+    "latitude",
+    "longitude",
+    "address",
+    "email",
+    "type"
+  ];
+  public dataSourceTable;
+  public resultsLength = 0;
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+
+  constructor(
+    private serviceApi: ServiceApiGet,
+    private serviceComm: ServiceComm
+  ) {}
+
+  ngOnInit() {
+    this.serviceComm.updatedComponentTitle("List of gears");
+    this.getListOfGears();
+  }
+
+  getListOfGears() {
+    this.serviceApi.getListOfGears().subscribe(data => {
+      this.dataSourceTable = new MatTableDataSource<GearResp>(data);
+      this.dataSourceTable.paginator = this.paginator;
+      this.resultsLength = data.length;
+    });
+  }
+}