diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts new file mode 100644 index 0000000..ddc36c1 --- /dev/null +++ b/src/app/app-routing.module.ts @@ -0,0 +1,21 @@ +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {RouterModule, Routes} from '@angular/router'; +import {TierComponent} from './content/tier/tier.component'; + +const routes: Routes = [ + {path: 'championship/:idchampionship/tier/:idtier', component: TierComponent}, +]; + +@NgModule({ + imports: [ + CommonModule, + RouterModule.forRoot(routes) + ], + declarations: [], + exports: [ + RouterModule + ] +}) +export class AppRoutingModule { +} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 270ea4e..550f7b6 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,10 +1,26 @@ -import { Component } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; +import {ActivatedRoute} from '@angular/router'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) -export class AppComponent { +export class AppComponent implements OnInit { title = 'koersepublicfrontend'; + + private idChampionship: number; + + constructor(private route: ActivatedRoute) { + } + + ngOnInit(): void { + // listen to the path ... what's the championship we're at? + this.route.paramMap.subscribe(val => { + this.idChampionship = +val.get('idchampionship'); + console.log('APP CHAMP'); + console.log(val); + console.log(this.idChampionship); + }); + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index d423079..18e382e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,17 +3,23 @@ import {NgModule} from '@angular/core'; import {AppComponent} from './app.component'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; -import {MatButtonModule, MatCardModule, MatCheckboxModule, MatTableModule} from '@angular/material'; +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 {HttpClient, HttpClientModule} from '@angular/common/http'; -import {Http} from '@angular/http'; +import {HttpClientModule} from '@angular/common/http'; +import {AppRoutingModule} from './app-routing.module'; const appRoutes: Routes = [ - {path: 'championship/:idchampionship/tier/:tier', component: TierComponent}, + {path : '', pathMatch: 'full', component: AppComponent}, + { + path: 'championship/:idchampionship', + children: [ + {path: 'tier/:idtier', component: TierComponent} + ] + }, // { path: 'hero/:id', component: HeroDetailComponent }, // { // path: 'heroes', @@ -37,15 +43,12 @@ const appRoutes: Routes = [ ], imports: [ BrowserModule, + AppRoutingModule, BrowserAnimationsModule, HttpClientModule, MatButtonModule, MatCheckboxModule, MatCardModule, - RouterModule.forRoot( - appRoutes - // { enableTracing: true } // <-- debugging purposes only - ) ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/content/tier/tier.component.ts b/src/app/content/tier/tier.component.ts index 2d0a417..e2dbf81 100644 --- a/src/app/content/tier/tier.component.ts +++ b/src/app/content/tier/tier.component.ts @@ -1,4 +1,6 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; +import {ActivatedRoute} from '@angular/router'; +import {ChampionshipService} from '../../championship.service'; @Component({ selector: 'app-tier', @@ -7,7 +9,15 @@ import { Component, OnInit } from '@angular/core'; }) export class TierComponent implements OnInit { - constructor() { } + 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() { } diff --git a/src/app/topmenu/topmenu.component.ts b/src/app/topmenu/topmenu.component.ts index 79edfef..89b34b0 100644 --- a/src/app/topmenu/topmenu.component.ts +++ b/src/app/topmenu/topmenu.component.ts @@ -1,6 +1,6 @@ import {Component, OnInit} from '@angular/core'; import {ChampionshipService} from '../championship.service'; -import {ActivatedRoute} from '@angular/router'; +import {ActivatedRoute, Router} from '@angular/router'; @Component({ selector: 'app-topmenu', @@ -12,21 +12,17 @@ export class TopmenuComponent implements OnInit { private idChampionship: number; constructor(private championshipService: ChampionshipService, - private route: ActivatedRoute) { + private route: ActivatedRoute, + private router: Router) { } ngOnInit() { - // listen to the path ... what's the championship we're at? - this.route.paramMap.subscribe(val => { - this.idChampionship = +val.get('idchampionship'); - }); - } currentChampionship(): string { - const anies = this.championshipService.getChampionships().filter(val => val.idchampionship === this.idChampionship); - if (anies && anies[0]) { - return anies[0].name; + const currentChampionship = this.championshipService.getCurrentChampionship(); + if (currentChampionship) { + return currentChampionship.name; } else { return '?'; }