tiers now loading dynamically

src/app/app-routing.module.ts

@@ -2,9 +2,16 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {RouterModule, Routes} from '@angular/router';
 import {TierComponent} from './content/tier/tier.component';
+import {ChampionshipComponent} from './championship/championship.component';
 
 const routes: Routes = [
-  {path: 'championship/:idchampionship/tier/:idtier', component: TierComponent},
+  {
+    path: 'championship/:idchampionship',
+    component: ChampionshipComponent,
+    children: [
+      {path: 'tier/:idtier', component: TierComponent},
+    ]
+  },
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -4,34 +4,13 @@ import {NgModule} from '@angular/core';
 import {AppComponent} from './app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {MatButtonModule, MatCardModule, MatCheckboxModule} from '@angular/material';
-import {RouterModule, Routes} from '@angular/router';
 import {TopmenuComponent} from './topmenu/topmenu.component';
 import {ReclamespinnerComponent} from './reclamespinner/reclamespinner.component';
 import {PouleComponent} from './content/poule/poule.component';
 import {TierComponent} from './content/tier/tier.component';
 import {HttpClientModule} from '@angular/common/http';
 import {AppRoutingModule} from './app-routing.module';
-
+import { ChampionshipComponent } from './championship/championship.component';
-const appRoutes: Routes = [
-  {path : '', pathMatch: 'full', component: AppComponent},
-  {
-    path: 'championship/:idchampionship',
-    children: [
-      {path: 'tier/:idtier', component: TierComponent}
-    ]
-  },
-  // { path: 'hero/:id',      component: HeroDetailComponent },
-  // {
-  //   path: 'heroes',
-  //   component: HeroListComponent,
-  //   data: { title: 'Heroes List' }
-  // },
-  // { path: '',
-  //   redirectTo: '/heroes',
-  //   pathMatch: 'full'
-  // },
-  // { path: '**', component: PageNotFoundComponent }
-];
 
 @NgModule({
   declarations: [
@@ -39,7 +18,8 @@ const appRoutes: Routes = [
     TopmenuComponent,
     ReclamespinnerComponent,
     PouleComponent,
-    TierComponent
+    TierComponent,
+    ChampionshipComponent
   ],
   imports: [
     BrowserModule,

src/app/championship.service.ts

@@ -17,19 +17,29 @@ export class ChampionshipService implements OnInit {
 
   protected baseUrl = 'http://localhost:8080/';
   private championships: any[] = [];
+  // these are the tiers (from 1 ... x, as defined in database)
+  private tiers = new BehaviorSubject<number[]>([]);
 
   /**
    * What's the current championship? Could be null if not loaded yet.
    */
   private idChampionship = new BehaviorSubject<number>(null);
 
-
   constructor(private http: HttpClient,
               private route: ActivatedRoute) {
 
     // load the champs from the DB
     this.loadChampionships();
 
+    // whenever the currently set championsip changes, also update tiers
+    this.idChampionship.subscribe(id => {
+      console.log('idchamp');
+      console.log(id);
+      if(id) {
+        this.loadTiers(id);
+      }
+    });
+
   }
 
   private loadChampionships() {
@@ -40,6 +50,18 @@ export class ChampionshipService implements OnInit {
     });
   }
 
+  loadTiers(idChampionship: number) {
+    this.http.get<any[]>(`${this.baseUrl}championship/${idChampionship}/tiers`, this.httpOptions).subscribe(val => {
+      console.log('loaded tiers for championship');
+      console.log(val);
+      this.tiers.next(val.map(v => v.tier));
+    });
+  }
+
+  getTiers(): BehaviorSubject<number[]> {
+    return this.tiers;
+  }
+
   /**
    * Set the currently visible championship.
    * @param idChampionship
@@ -53,9 +75,7 @@ export class ChampionshipService implements OnInit {
   }
 
   getCurrentChampionship() {
-    console.log(this.championships);
     const theOne = this.championships.filter(val => val.idchampionship === this.idChampionship.value);
-    console.log(theOne);
     if (theOne && theOne.length > 0) {
       return theOne[0];
     } else {

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

@@ -11,14 +11,8 @@ export class TierComponent implements OnInit {
 
   constructor(private route: ActivatedRoute, private championshipService: ChampionshipService) {
 
-    // mark the championservice to set the right championship
-    route.paramMap.subscribe(val => {
-      console.log(val);
-      this.championshipService.setChampionship(+val.get('idchampionship'));
-    });
   }
 
-
   ngOnInit() {
   }
 

src/app/topmenu/topmenu.component.html

@@ -1,9 +1,6 @@
 <div class="button-row">
   <!--pick a year-->
   <button mat-raised-button>{{currentChampionship()}}</button>
-  <button mat-raised-button color="primary">Tier 1</button>
+  <button mat-raised-button color="primary" *ngFor="let tier of tiers" routerLink="/championship/20/tier/{{tier}}">Tier {{tier}}</button>
-  <button mat-raised-button color="accent">Tier 2</button>
-  <button mat-raised-button color="warn">Tier 3</button>
-  <button mat-raised-button disabled>Disabled</button>
   <a mat-button routerLink=".">Link</a>
 </div>

src/app/topmenu/topmenu.component.ts

@@ -10,6 +10,7 @@ import {ActivatedRoute, Router} from '@angular/router';
 export class TopmenuComponent implements OnInit {
 
   private idChampionship: number;
+  protected tiers: number[] = [];
 
   constructor(private championshipService: ChampionshipService,
               private route: ActivatedRoute,
@@ -17,6 +18,9 @@ export class TopmenuComponent implements OnInit {
   }
 
   ngOnInit() {
+    this.championshipService.getTiers().subscribe(tiers => {
+      this.tiers = tiers;
+    });
   }
 
   currentChampionship(): string {