fixed the routing bug

src/app/app-routing.module.ts

@@ -11,13 +11,12 @@ const routes: Routes = [
     component: ChampionshipComponent,
     children: [
       {
-        path: 'tier/:tier', component: TierComponent, children: [
-          {path: 'poule/:poule', component: PouleComponent}
-        ]
+        path: 'tier/:tier', component: TierComponent
       },
+
+      {path: 'tier/:tier/poule/:poule', component: PouleComponent}
     ]
-  },
-];
+  }];
 
 @NgModule({
   imports: [

src/app/championship/championship.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import {ChampionshipService} from '../championship.service';
 import {ActivatedRoute} from '@angular/router';
+import {TopmenuService} from '../topmenu.service';
 
 @Component({
   selector: 'app-championship',
@@ -9,13 +10,15 @@ import {ActivatedRoute} from '@angular/router';
 })
 export class ChampionshipComponent implements OnInit {
 
-  constructor(private route: ActivatedRoute, private championshipService: ChampionshipService) { }
+  constructor(private route: ActivatedRoute, private championshipService: ChampionshipService, private topmenuService: TopmenuService) { }
 
   ngOnInit() {
      // mark the championservice to set the right championship
     this.route.paramMap.subscribe(val => {
       console.log(val);
-      this.championshipService.setChampionship(+val.get('idchampionship'));
+      let idChampionship = +val.get('idchampionship');
+      this.championshipService.setChampionship(idChampionship);
+      this.topmenuService.setChampionship(idChampionship);
     });
   }
 

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

@@ -35,13 +35,11 @@
 
       <!--do a penalty for this race/team combo-->
       <div class="penaltycell" [ngStyle]="{'grid-column':2, 'grid-row':2+(teamindex*(maxRaces+1))+raceindex+1}">
-        <span class="timecell">{{getPenaltySum(raceindex, team.idteam) | number:'1.0-0'}}<span class="timeletter">s</span></span>
+        <span class="timecell seconds">{{getPenaltySum(raceindex, team.idteam) | number:'1.0-0'}}</span>
       </div>
       <div class="totalcell" [ngStyle]="{'grid-column':3, 'grid-row':2+(teamindex*(maxRaces+1))+raceindex+1}">
-        <span class="timecell">{{getRaceTime(raceindex, team.idteam) | minutes}}</span>
-        <span class="timeletter">m</span>
-        <span class="timecell">{{getRaceTimeSeconds(raceindex, team.idteam)}}</span>
-        <span class="timeletter">s</span>
+        <span class="timecell minutes">{{getRaceTime(raceindex, team.idteam) | minutes}}</span>
+        <span class="timecell seconds">{{getRaceTimeSeconds(raceindex, team.idteam)}}</span>
       </div>
 
 
@@ -51,10 +49,8 @@
     <div class="resultcell" [ngStyle]="{'grid-column':4,
   'grid-row-start':2+(teamindex*(maxRaces+1))+1,
   'grid-row-end': 2+(teamindex*(maxRaces+1))+1+maxRaces}">
-      <span class="timecell">{{getAvgOfBestTwo(team.idteam) | minutes}}</span>
-      <span class="timeletter">m</span>
-      <span class="timecell">{{((getAvgOfBestTwo(team.idteam)/1000)%60).toFixed(2)}}</span>
-      <span class="timeletter">s</span>
+      <span class="timecell minutes">{{getAvgOfBestTwo(team.idteam) | minutes}}</span>
+      <span class="timecell seconds">{{((getAvgOfBestTwo(team.idteam)/1000)%60).toFixed(2)}}</span>
     </div>
   </ng-container>
 

src/app/content/poule/poule.component.scss

@@ -24,3 +24,13 @@
   font-size: 60%;
 }
 
+.timecell.seconds:after {
+ content: 's';
+  font-size: 60%;
+}
+
+.timecell.minutes:after {
+  content: 'm';
+  font-size: 60%;
+}
+

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

@@ -1,8 +1,9 @@
 import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
 import {ChampionshipService} from '../../championship.service';
 import {ActivatedRoute} from '@angular/router';
-import {map} from 'rxjs/operators';
+import {distinct, distinctUntilChanged, map} from 'rxjs/operators';
 import {combineLatest} from 'rxjs';
+import {TopmenuService} from '../../topmenu.service';
 
 @Component({
   selector: 'app-poule',
@@ -11,40 +12,48 @@ import {combineLatest} from 'rxjs';
 })
 export class PouleComponent implements OnInit {
 
-  poule: number;
-  idChampionship: number;
-  tier: number;
-
   protected teams: any[] = [];
   protected times: any[] = [];
   protected maxRaces = 0;
   private timesIndexed: {};
   protected maxLaps = 0;
 
-  constructor(private championshipService: ChampionshipService, private route: ActivatedRoute) {
+  constructor(private championshipService: ChampionshipService, private route: ActivatedRoute, private topmenuService: TopmenuService) {
   }
 
   ngOnInit() {
-    const tier$ = this.route.parent.params.pipe(map(v => v['tier']));
-    const poule$ = this.route.params.pipe(map(v => v['poule']));
-    const championship$ = this.route.parent.parent.params.pipe(map(v => v['idchampionship']));
+    const tier$ = this.route.params.pipe(map(v => v['tier']), distinctUntilChanged());
+    const poule$ = this.route.params.pipe(map(v => v['poule']), distinctUntilChanged());
+    const championship$ = this.route.parent.params.pipe(map(v => v['idchampionship']), distinctUntilChanged());
 
     combineLatest(tier$, poule$, championship$).subscribe(([tier, poule, championship]) => {
       console.log('tier/poule/champ changed');
       console.log(tier);
       console.log(poule);
       console.log(championship);
-      this.tier = tier;
-      this.poule = poule;
-      this.idChampionship = championship;
+
+      this.championshipService.getPoules(tier, championship).subscribe(poules => {
+        this.topmenuService.setPoules(poules);
+      });
+
+      this.topmenuService.setPoule(poule);
+
+      this.topmenuService.setTier(tier);
+
       this.loadData();
     });
 
   }
 
   private loadData() {
+    this.teams = [];
+    this.times = [];
+
+    console.log('loading data.');
+
     // fetch the poule data
-    this.championshipService.getTeamsInPoule(this.idChampionship, this.tier, this.poule).subscribe(val => {
+    this.championshipService.getTeamsInPoule(this.topmenuService.championship$.value, this.topmenuService.tier$.value, this.topmenuService.poule$.value)
+      .subscribe(val => {
         this.teams = val;
 
         // calculate the maximum of the racecounts... this influences the amount of columns in the table
@@ -56,7 +65,7 @@ export class PouleComponent implements OnInit {
         });
         this.maxRaces = maxRaces;
       });
-    this.championshipService.getTimesInPoule(this.idChampionship, this.tier, this.poule).subscribe(val => {
+    this.championshipService.getTimesInPoule(this.topmenuService.championship$.value, this.topmenuService.tier$.value, this.topmenuService.poule$.value).subscribe(val => {
       this.times = val;
 
       // preprocess this array -> map idteam on the laptime array so we can index it using 0..n-1

src/app/content/tier/tier.component.html

@@ -1,9 +1 @@
-<div class="button-row">
-  <!--pick a year-->
-  <button mat-raised-button *ngFor="let poule of poules" routerLink="./poule/{{poule}}" routerLinkActive="active">
-    Poule {{poule}}
-  </button>
-</div>
-
-<router-outlet></router-outlet>
-
+TIER TEST

src/app/content/tier/tier.component.scss

@@ -9,10 +9,3 @@ app-poule {
   display: grid;
 }
 
-button.active {
- background-color: #1dd21d;
-}
-.button-row {
-  text-align: center;
-  margin-top: 10px;
-}

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

@@ -3,6 +3,7 @@ import {ActivatedRoute, ParamMap} from '@angular/router';
 import {ChampionshipService} from '../../championship.service';
 import {combineLatest} from 'rxjs';
 import {map} from 'rxjs/operators';
+import {TopmenuService} from '../../topmenu.service';
 
 @Component({
   selector: 'app-tier',
@@ -15,7 +16,7 @@ export class TierComponent implements OnInit {
   protected poules: number[] = [];
   protected idChampionship: number;
 
-  constructor(private route: ActivatedRoute, private championshipService: ChampionshipService) {
+  constructor(private route: ActivatedRoute, private championshipService: ChampionshipService, private topmenuService: TopmenuService) {
 
     // we need the current championship and we need the current tier... combine them
     combineLatest(
@@ -25,11 +26,14 @@ export class TierComponent implements OnInit {
       // now we have both, or one of them changed...
       if (tier && idChampionship) {
         this.tier = tier;
+        this.topmenuService.setTier(tier);
+        this.topmenuService.setPoule(null);
         this.idChampionship = idChampionship;
         console.log('refreshing tier/championship combo: '+this.tier+' '+this.idChampionship);
         // ... load the corresponding poules
         this.championshipService.getPoules(tier, idChampionship).subscribe(poules => {
           this.poules = poules;
+          this.topmenuService.setPoules(poules);
           console.log(this.poules);
         });
       }

src/app/topmenu/topmenu.component.html

@@ -3,8 +3,15 @@
   <button mat-raised-button (click)="openDialog()">
     {{currentChampionship()}}
   </button>
-  <button mat-raised-button color="primary" *ngFor="let tier of tiers" routerLink="/championship/20/tier/{{tier}}">
+  <button mat-raised-button color="primary" *ngFor="let tier of tiers" routerLink="/championship/{{currentChampionshipId()}}/tier/{{tier}}">
     <mat-icon svgIcon="{{getTierIcon(tier)}}"></mat-icon>
     {{getTierName(tier)}}
   </button>
 </div>
+<div class="button-row">
+  <!--pick a year-->
+  <button mat-raised-button *ngFor="let poule of (poules|async)" routerLink="/championship/{{currentChampionshipId()}}/tier/{{tier | async}}/poule/{{poule}}"
+  [ngClass]="{'active': pouleActive(poule)}">
+    Poule {{poule}}
+  </button>
+</div>

src/app/topmenu/topmenu.component.scss

@@ -2,3 +2,6 @@
   text-align: center;
   margin-top: 10px;
 }
+button.active {
+  background-color: #1dd21d;
+}

src/app/topmenu/topmenu.component.ts

@@ -4,6 +4,7 @@ import {ActivatedRoute, Router} from '@angular/router';
 import {ChampionshipselectordialogComponent} from '../championshipselectordialog/championshipselectordialog.component';
 import {MatDialog, MatIconRegistry} from '@angular/material';
 import {DomSanitizer} from '@angular/platform-browser';
+import {TopmenuService} from '../topmenu.service';
 
 @Component({
   selector: 'app-topmenu',
@@ -20,7 +21,8 @@ export class TopmenuComponent implements OnInit {
               private router: Router,
               public dialog: MatDialog,
               private matIconRegistry: MatIconRegistry,
-              private domSanitizer: DomSanitizer) {
+              private domSanitizer: DomSanitizer,
+              private topmenuService: TopmenuService) {
     this.matIconRegistry.addSvgIcon(`stroller`, this.domSanitizer.bypassSecurityTrustResourceUrl('assets/svg/stroller.svg'));
     this.matIconRegistry.addSvgIcon(`car-color`, this.domSanitizer.bypassSecurityTrustResourceUrl('assets/svg/car-color.svg'));
     this.matIconRegistry.addSvgIcon(`delivery-bike`, this.domSanitizer.bypassSecurityTrustResourceUrl('assets/svg/deliverybike.svg'));
@@ -33,6 +35,14 @@ export class TopmenuComponent implements OnInit {
     });
   }
 
+  get poules() {
+    return this.topmenuService.poules$;
+  }
+
+  get tier() {
+    return this.topmenuService.tier$;
+  }
+
   currentChampionship(): string {
     const currentChampionship = this.championshipService.getCurrentChampionship();
     if (currentChampionship) {
@@ -42,6 +52,15 @@ export class TopmenuComponent implements OnInit {
     }
   }
 
+  currentChampionshipId(): number {
+    const currentChampionship = this.championshipService.getCurrentChampionship();
+    if (currentChampionship) {
+      return currentChampionship.idchampionship;
+    } else {
+      return -1;
+    }
+  }
+
   openDialog(): void {
     const dialogRef = this.dialog.open(ChampionshipselectordialogComponent, {
       width: '500px',
@@ -87,4 +106,8 @@ export class TopmenuComponent implements OnInit {
       return 'tier' + tier;
     }
   }
+
+  pouleActive(poule): boolean {
+    return this.topmenuService.poule$.value == poule;
+  }
 }