getting times into the frontend

src/app/championship.service.ts

@@ -102,4 +102,34 @@ export class ChampionshipService implements OnInit {
   getPoules(tier: number, idChampionship: any): Observable<number[]> {
     return this.http.get<any[]>(`${this.baseUrl}championship/${idChampionship}/tier/${tier}/poules`, this.httpOptions);
   }
+
+  /**
+   * Get all the data for this poule.
+   * @param idChampionship
+   * @param tier
+   * @param poule
+   */
+  getPoule(idChampionship: number, tier: number, poule: number) {
+
+  }
+
+  /**
+   * Get all the teams in a specific poule.
+   * @param idChampionship
+   * @param tier
+   * @param poule
+   */
+  getTeamsInPoule(idChampionship: number, tier: number, poule: number) {
+    return this.http.get<any[]>(`${this.baseUrl}championship/${idChampionship}/tier/${tier}/poule/${poule}/teams`, this.httpOptions);
+  }
+
+  /**
+   * Get all publishes times in a poule.
+   * @param idChampionship
+   * @param tier
+   * @param poule
+   */
+  getTimesInPoule(idChampionship: number, tier: number, poule: number) {
+    return this.http.get<any[]>(`${this.baseUrl}championship/${idChampionship}/tier/${tier}/poule/${poule}/times`, this.httpOptions);
+  }
 }

src/app/content/poule/poule.component.html

@@ -1,24 +1,22 @@
 <mat-card>
   <mat-card-header>
     <mat-card-title>
-      Poule {{poule}} {{tier}} {{idChampionship}}
+      Poule {{poule}}
     </mat-card-title>
   </mat-card-header>
   <mat-card-content>
     <table>
       <tr>
         <td>Team</td>
-        <td>Ronde 1</td>
-        <td>Ronde 2</td>
-        <td>Ronde 3</td>
+        <td *ngFor="let y of ' '.repeat(maxRaces).split(''), let x = index">Race {{x+1}}</td>
         <td>Gem. beste 2</td>
       </tr>
-      <tr>
-        <td>Jos en Frank</td>
-        <td>2 mins</td>
-        <td>2 mins</td>
-        <td>2 mins</td>
-        <td>2 mins</td>
+      <tr *ngFor="let team of teams">
+        <td>{{team.name}}</td>
+        <td *ngFor="let y of ' '.repeat(maxRaces).split(''), let x = index">
+          {{getTime(x, team.idteam)}}
+        </td>
+        <td>Gem. beste 2</td>
       </tr>
     </table>
   </mat-card-content>

src/app/content/poule/poule.component.ts

@@ -1,4 +1,5 @@
 import {Component, Input, OnInit} from '@angular/core';
+import {ChampionshipService} from '../../championship.service';
 
 @Component({
   selector: 'app-poule',
@@ -16,10 +17,77 @@ export class PouleComponent implements OnInit {
   @Input()
   tier: number;
 
-  constructor() {
+  protected teams: any[] = [];
+  protected times: any[] = [];
+  protected maxRaces = 0;
+  private timesIndexed: {};
+
+  constructor(private championshipService: ChampionshipService) {
   }
 
   ngOnInit() {
+    console.log('POULE COMP: ' + this.poule + '  ' + this.idChampionship + '  ' + this.tier);
+    // fetch the poule data
+    this.championshipService.getTeamsInPoule(this.idChampionship, this.tier, this.poule).subscribe(val => {
+      this.teams = val;
+      console.log('teams in poule');
+      console.log(val);
+
+      // calculate the maximum of the racecounts... this influences the amount of columns in the table
+      let maxRaces = 0;
+      this.teams.forEach(t => {
+        if (t.racecount > maxRaces) {
+          maxRaces = t.racecount;
+        }
+      });
+      this.maxRaces = maxRaces;
+    });
+    this.championshipService.getTimesInPoule(this.idChampionship, this.tier, this.poule).subscribe(val => {
+      this.times = val;
+      console.log('times');
+      console.log(val);
+
+      // preprocess this array -> map idteam on the laptime array so we can index it using 0..n-1
+      this.timesIndexed = {};
+      this.times.forEach(t => {
+        if (!this.timesIndexed[t.idteam]) {
+          this.timesIndexed[t.idteam] = [];
+        }
+        this.timesIndexed[t.idteam].push({laptimesms: t.laptimesms, penaltysum: t.penaltysum});
+      });
+
+      console.log('preprocessed');
+      console.log(this.timesIndexed);
+    });
+  }
+
+  /**
+   * Get an array of laps:
+   * [{ lap: 1, time: xxxx}, {lap : 2, time: yyyy}]
+   */
+  getTimesForRace(raceNr: number, idTeam: number) {
+    // what is the 'raceNr'd idrace? first get the unique idraces, they're already sorted, then take the 'raceNr'd one.
+    // const anies = this.times.filter(t => t.idteam === idTeam);
+    // if (anies && anies.length >= raceNr) {
+    //   console.log('anies');
+    //   console.log(anies);
+    //   return anies[raceNr - 1];
+    // } else {
+    //   return [];
+    // }
+  }
+
+  getTime(lapNr: number, idTeam: number) {
+    // console.log('lapnr/idteam' + lapNr + '  ' + idTeam);
+    // console.log(this.timesIndexed);
+    // console.log(this.timesIndexed[idTeam][lapNr]);
+    if (!this.timesIndexed
+      || !this.timesIndexed[idTeam]
+      || !this.timesIndexed[idTeam][lapNr]
+      || !this.timesIndexed[idTeam][lapNr].laptimesms) {
+      return null;
+    }
+    return this.timesIndexed[idTeam][lapNr].laptimesms;
   }
 
 }

src/app/content/tier/tier.component.ts

@@ -29,6 +29,7 @@ export class TierComponent implements OnInit {
         // ... load the corresponding poules
         this.championshipService.getPoules(tier, idChampionship).subscribe(poules => {
           this.poules = poules;
+          console.log(this.poules);
         });
       }
     });