added auto refresh each 5 seconds

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

@@ -2,7 +2,7 @@ import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core'
 import {ChampionshipService} from '../../championship.service';
 import {ActivatedRoute} from '@angular/router';
 import {distinct, distinctUntilChanged, map} from 'rxjs/operators';
-import {combineLatest} from 'rxjs';
+import {combineLatest, Subscription, timer} from 'rxjs';
 import {TopmenuService} from '../../topmenu.service';
 
 @Component({
@@ -21,6 +21,7 @@ export class PouleComponent implements OnInit {
   // these are the best two times for each team, indexed by their id
   public bestTwo: {};
   public maxLaps = 0;
+  private subscription: Subscription;
 
   constructor(private championshipService: ChampionshipService, private route: ActivatedRoute, private topmenuService: TopmenuService) {
   }
@@ -36,6 +37,11 @@ export class PouleComponent implements OnInit {
       console.log(poule);
       console.log(championship);
 
+      if(this.subscription) {
+        this.subscription.unsubscribe();
+        this.subscription = undefined;
+      }
+
       this.championshipService.getPoules(tier, championship).subscribe(poules => {
         this.topmenuService.setPoules(poules);
       });
@@ -43,7 +49,10 @@ export class PouleComponent implements OnInit {
       this.topmenuService.setPoule(poule);
       this.topmenuService.setTier(tier);
 
-      this.loadData();
+      // load the data
+      this.subscription = timer(0, 5000).subscribe(t => {
+        this.loadData();
+      });
     });
 
   }
@@ -56,9 +65,8 @@ export class PouleComponent implements OnInit {
   }
 
   private loadData() {
-    this.teams = [];
-    this.times = [];
-    this.bestTwo = {};
+    // this.teams = [];
+    // this.times = [];
 
     console.log('loading data.');
 
@@ -85,6 +93,7 @@ export class PouleComponent implements OnInit {
       this.timesIndexed = {};
       this.teamtotaltimes = {};
       this.maxLaps = 0;
+      this.bestTwo = {};
       this.times.forEach(t => {
         if (!this.timesIndexed[t.idteam]) {
           this.timesIndexed[t.idteam] = [];

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

@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, ParamMap} from '@angular/router';
 import {ChampionshipService} from '../../championship.service';
-import {combineLatest} from 'rxjs';
+import {combineLatest, Observable, Subscription, timer} from 'rxjs';
 import {map} from 'rxjs/operators';
 import {TopmenuService} from '../../topmenu.service';
 
@@ -16,6 +16,8 @@ export class TierComponent implements OnInit {
   public poules: number[] = [];
   public idChampionship: number;
   public tierTimes: any[];
+  public timer: Observable<number> = timer(5000, 5000);
+  private subscription: Subscription;
 
   constructor(private route: ActivatedRoute, private championshipService: ChampionshipService, private topmenuService: TopmenuService) {
   }
@@ -26,6 +28,12 @@ export class TierComponent implements OnInit {
       this.route.paramMap.pipe(map(val => +val.get('tier'))),
       this.championshipService.getIdChampionship()
     ).subscribe(([tier, idChampionship]) => {
+      // stop subscribing the timer if we're already subscribed
+      if (this.subscription) {
+        this.subscription.unsubscribe();
+        this.subscription = undefined;
+      }
+
       // now we have both, or one of them changed...
       if (tier && idChampionship) {
         this.tier = tier;
@@ -46,6 +54,15 @@ export class TierComponent implements OnInit {
           console.log(val);
           this.tierTimes = val;
         });
+
+        // start firing an automatic refresh of the times
+        this.subscription = timer(5000, 5000).subscribe(t => {
+          this.championshipService.getTimesInTier(idChampionship, tier).subscribe(val => {
+            console.log('timer got the times!');
+            console.log(val);
+            this.tierTimes = val;
+          });
+        });
       }
     });
   }