diff --git a/src/app/app.component.html b/src/app/app.component.html
index 4c04a3d..c16560c 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -7,7 +7,7 @@
-->
-
{{ title }}
+ {{ header }}
list
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7dcf6a8..a776589 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,26 +1,24 @@
import {Component, OnDestroy, OnInit} from '@angular/core';
-import {ActivatedRoute, Router, RouterLink, RouterOutlet} from '@angular/router';
+import {ActivatedRoute, NavigationEnd, Router, RouterLink, RouterOutlet} from '@angular/router';
import {CommonModule, NgOptimizedImage} from "@angular/common";
import {MatAnchor, MatButton} from "@angular/material/button";
import {MatIcon} from "@angular/material/icon";
import {MatToolbar} from "@angular/material/toolbar";
-import {TitleService} from "./service/title.service";
-import {Subscription} from "rxjs";
+import {filter, map, Subscription} from "rxjs";
import {MatMenu, MatMenuItem, MatMenuTrigger} from "@angular/material/menu";
import {UserService} from "./authentication/user.service";
import {TournamentService} from "./service/tournament.service";
+import {HeaderService} from "./service/header.service";
@Component({
selector: 'app-root',
- imports: [RouterOutlet, CommonModule, RouterLink, MatAnchor, MatIcon, MatButton, MatToolbar, NgOptimizedImage, MatMenuTrigger, MatMenu, MatMenuItem],
- providers: [TitleService],
+ imports: [RouterOutlet, CommonModule, RouterLink, MatAnchor, MatIcon, MatButton, MatToolbar, NgOptimizedImage, MatMenuTrigger, MatMenu, MatMenuItem],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
-export class AppComponent implements OnInit, OnDestroy {
+export class AppComponent implements OnInit {
- title: string;
- titleSubscription: Subscription;
+ header: string;
user: string;
userSubscription: Subscription;
@@ -28,18 +26,32 @@ export class AppComponent implements OnInit, OnDestroy {
protected userService: UserService,
private router: Router,
protected activatedRoute: ActivatedRoute,
- private titleService: TitleService,
- private tournamentService: TournamentService
+ private tournamentService: TournamentService,
+ private headerService: HeaderService
) {
}
ngOnInit() {
- this.titleSubscription = this.titleService.currentTitle.subscribe(newTitle => this.title = newTitle);
this.userSubscription = this.userService.currentUser.subscribe(newUser => this.user = newUser);
- }
- ngOnDestroy(): void {
- this.titleSubscription.unsubscribe();
+ this.router.events.pipe(
+ filter(event => event instanceof NavigationEnd),
+ map(() => {
+ let currentRoute = this.activatedRoute;
+ while (currentRoute.firstChild) {
+ currentRoute = currentRoute.firstChild;
+ }
+ return currentRoute.snapshot.data['header'] || '';
+ })
+ ).subscribe(header => {
+ this.header = header;
+ });
+
+ this.headerService.header$.subscribe(override => {
+ if (override) {
+ this.header = override;
+ }
+ });
}
logOut() {
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 4dc2dbf..1377584 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -15,21 +15,21 @@ import {AuthGuard} from "./authentication/authguard";
import {LoginComponent} from "./components/login/login.component";
export const routes: Routes = [
- { path: '', component: TournamentListComponent, canActivate: [AuthGuard], title: 'Toernooien' },
- { path: 'tournaments', component: TournamentListComponent, canActivate: [AuthGuard], title: 'Toernooien' },
- { path: 'tournaments/add', component: TournamentEditComponent, canActivate: [AuthGuard], title: 'Nieuw Toernooi' },
- { path: 'tournaments/:id/edit', component: TournamentEditComponent, canActivate: [AuthGuard], title: 'Bewerk Toernooi' },
- { path: 'tournaments/:id/registrations', component: TournamentRegistrationsComponent, canActivate: [AuthGuard], title: 'Inschrijvingen' },
- { path: 'tournaments/:id/validate', component: TournamentValidateComponent, canActivate: [AuthGuard], title: 'Toernooi' },
- { path: 'tournaments/:id/divide', component: TournamentDivideComponent, canActivate: [AuthGuard], title: 'Toernooi valideren' },
- { path: 'tournaments/:id/draw', component: TournamentDrawComponent, canActivate: [AuthGuard], title: 'Toernooi loten' },
- { path: 'tournaments/:id/manage', component: TournamentManageComponent, canActivate: [AuthGuard] },
- { path: 'tournaments/:id/manage/:tab', component: TournamentManageComponent, canActivate: [AuthGuard], title: 'Toernooien' },
- { path: 'players', component: PlayerListComponent, canActivate: [AuthGuard], title: 'Spelers' },
- { path: 'players/add', component: PlayerEditComponent, canActivate: [AuthGuard], title: 'Nieuwe Speler' },
- { path: 'players/edit/:id', component: PlayerEditComponent, canActivate: [AuthGuard], title: 'Bewerk Speler' },
- { path: 'players/:id/registrations', component: PlayerRegistrationsComponent, canActivate: [AuthGuard], title: 'Inschrijvingen' },
- { path: 'tournaments/:id/rounds/:roundId/matchsheets', component: MatchSheetsComponent, canActivate: [AuthGuard], title: 'Wedstrijdbriefjes' },
- { path: 'tournaments/:id/rounds/:roundId/overview', component: RoundOverviewComponent, canActivate: [AuthGuard], title: 'Rondeoverzicht' },
- { path: 'auth/login', component: LoginComponent }
+ { path: '', component: TournamentListComponent, canActivate: [AuthGuard], data: { header: 'Toernooien' }},
+ { path: 'tournaments', component: TournamentListComponent, canActivate: [AuthGuard], data: { header: 'Toernooien' }},
+ { path: 'tournaments/add', component: TournamentEditComponent, canActivate: [AuthGuard], data: { header: 'Nieuw Toernooi' }},
+ { path: 'tournaments/:id/edit', component: TournamentEditComponent, canActivate: [AuthGuard], data: { header: 'Bewerk Toernooi' }},
+ { path: 'tournaments/:id/registrations', component: TournamentRegistrationsComponent, canActivate: [AuthGuard], data: { header: 'Inschrijvingen' }},
+ { path: 'tournaments/:id/validate', component: TournamentValidateComponent, canActivate: [AuthGuard], data: { header: 'Toernooi' }},
+ { path: 'tournaments/:id/divide', component: TournamentDivideComponent, canActivate: [AuthGuard], data: { header: 'Toernooi valideren' }},
+ { path: 'tournaments/:id/draw', component: TournamentDrawComponent, canActivate: [AuthGuard], data: { header: 'Toernooi loten' }},
+ { path: 'tournaments/:id/manage', component: TournamentManageComponent, canActivate: [AuthGuard]},
+ { path: 'tournaments/:id/manage/:tab', component: TournamentManageComponent, canActivate: [AuthGuard], data: { header: 'Toernooien' }},
+ { path: 'players', component: PlayerListComponent, canActivate: [AuthGuard], data: { header: 'Spelers' }},
+ { path: 'players/add', component: PlayerEditComponent, canActivate: [AuthGuard], data: { header: 'Nieuwe Speler' }},
+ { path: 'players/edit/:id', component: PlayerEditComponent, canActivate: [AuthGuard], data: { header: 'Bewerk Speler' }},
+ { path: 'players/:id/registrations', component: PlayerRegistrationsComponent, canActivate: [AuthGuard]},
+ { path: 'tournaments/:id/rounds/:roundId/matchsheets', component: MatchSheetsComponent, canActivate: [AuthGuard]},
+ { path: 'tournaments/:id/rounds/:roundId/overview', component: RoundOverviewComponent, canActivate: [AuthGuard], data: { header: 'Rondeoverzicht' }},
+ { path: 'auth/login', component: LoginComponent, data: { header: 'Inloggen'}}
];
diff --git a/src/app/components/login/login.component.ts b/src/app/components/login/login.component.ts
index 8ca2578..75731c7 100644
--- a/src/app/components/login/login.component.ts
+++ b/src/app/components/login/login.component.ts
@@ -10,7 +10,6 @@ import {AuthenticationService} from "../../authentication/authentication.service
import {UserService} from "../../authentication/user.service";
import {LoginCredentials} from "../../authentication/loginCredentials";
import {User} from "../../authentication/user";
-import {TitleService} from "../../service/title.service";
@Component({
@@ -38,7 +37,6 @@ export class LoginComponent implements OnInit {
private authenticationService: AuthenticationService,
private router: Router,
private userPersistenceService: UserService,
- private titleService: TitleService,
) {
this.initializeForm();
}
@@ -52,7 +50,6 @@ export class LoginComponent implements OnInit {
ngOnInit() {
this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
- this.titleService.setTitle("Inloggen");
}
login() {
diff --git a/src/app/components/match-sheets/match-sheets.component.ts b/src/app/components/match-sheets/match-sheets.component.ts
index 555cd82..fec5211 100644
--- a/src/app/components/match-sheets/match-sheets.component.ts
+++ b/src/app/components/match-sheets/match-sheets.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
import {MatCard, MatCardContent} from "@angular/material/card";
import {TournamentService} from "../../service/tournament.service";
import {ActivatedRoute, Router} from "@angular/router";
@@ -10,7 +10,7 @@ import {Group} from "../../model/group";
import {MatFormField} from "@angular/material/form-field";
import {MatInput} from "@angular/material/input";
import {ReactiveFormsModule} from "@angular/forms";
-import {TitleService} from "../../service/title.service";
+import {HeaderService} from "../../service/header.service";
@Component({
selector: 'app-match-sheets',
@@ -29,7 +29,7 @@ import {TitleService} from "../../service/title.service";
templateUrl: './match-sheets.component.html',
styleUrl: './match-sheets.component.scss'
})
-export class MatchSheetsComponent implements OnInit {
+export class MatchSheetsComponent implements OnInit, OnDestroy {
tournament: Tournament;
group: Group;
@@ -39,7 +39,7 @@ export class MatchSheetsComponent implements OnInit {
private tournamentService: TournamentService,
private route: ActivatedRoute,
private router: Router,
- private titleService: TitleService
+ private headerService: HeaderService
) {
}
@@ -55,7 +55,7 @@ export class MatchSheetsComponent implements OnInit {
if (round.id == roundId) {
this.group = group;
this.round = round;
- this.titleService.setTitle(`Wedstrijdbriefjes ${this.group.name} ${this.round.name}`);
+ this.headerService.setTitle(`Wedstrijdbriefjes ${this.group.name} ${this.round.name}`);
return;
}
}
@@ -64,4 +64,8 @@ export class MatchSheetsComponent implements OnInit {
});
}
+ ngOnDestroy() {
+ this.headerService.clearTitle()
+ }
+
}
diff --git a/src/app/components/player-edit/player-edit.component.ts b/src/app/components/player-edit/player-edit.component.ts
index 45db4cd..b9d06da 100644
--- a/src/app/components/player-edit/player-edit.component.ts
+++ b/src/app/components/player-edit/player-edit.component.ts
@@ -11,7 +11,6 @@ import {MatCard, MatCardActions, MatCardContent} from "@angular/material/card";
import {MatOption, MatSelect} from "@angular/material/select";
import {KeyValuePipe} from "@angular/common";
import {MatAnchor, MatButton} from "@angular/material/button";
-import {TitleService} from "../../service/title.service";
import {MatSnackBar} from "@angular/material/snack-bar";
import {NgxMaskDirective} from "ngx-mask";
@@ -50,7 +49,6 @@ export class PlayerEditComponent implements OnInit {
private playerService: PlayerService,
private route: ActivatedRoute,
private router: Router,
- private titleService: TitleService,
private _snackBar: MatSnackBar,
) {
this.player = new Player();
@@ -59,13 +57,11 @@ export class PlayerEditComponent implements OnInit {
ngOnInit() {
const id = this.route.snapshot.paramMap.get('id');
if (id) {
- this.titleService.setTitle("Bewerk Speler");
this.isEditMode = true;
this.playerService.getById(Number(id)).subscribe(data => {
this.player = data;
});
} else {
- this.titleService.setTitle("Nieuwe Speler");
}
}
diff --git a/src/app/components/player-link/player-link.component.ts b/src/app/components/player-link/player-link.component.ts
index 4b17804..ac87e6a 100644
--- a/src/app/components/player-link/player-link.component.ts
+++ b/src/app/components/player-link/player-link.component.ts
@@ -1,11 +1,11 @@
import {Component, Input, OnInit} from '@angular/core';
-import {MatAnchor} from "@angular/material/button";
+// import {MatAnchor} from "@angular/material/button";
import {RouterLink} from "@angular/router";
@Component({
selector: 'player-link',
imports: [
- MatAnchor,
+ // MatAnchor,
RouterLink
],
templateUrl: './player-link.component.html',
diff --git a/src/app/components/player-list/player-list.component.ts b/src/app/components/player-list/player-list.component.ts
index da6b424..bbbe40a 100644
--- a/src/app/components/player-list/player-list.component.ts
+++ b/src/app/components/player-list/player-list.component.ts
@@ -6,7 +6,6 @@ import {MatAnchor} from "@angular/material/button";
import {MatIcon} from "@angular/material/icon";
import {MatCard, MatCardContent} from "@angular/material/card";
import {FullNamePipe} from "../../pipes/fullname-pipe";
-import {TitleService} from "../../service/title.service";
import {
MatCell,
MatCellDef,
@@ -42,13 +41,11 @@ export class PlayerListComponent implements AfterViewInit {
@ViewChild(MatSort) sort: MatSort;
constructor(
- private titleService: TitleService,
private playerService: PlayerService,
private fullNamePipe: FullNamePipe) {
}
ngAfterViewInit() {
- this.titleService.setTitle("Spelers");
this.playerService.getAll().subscribe(data => {
this.players = data;
this.dataSource = new MatTableDataSource(this.players);
diff --git a/src/app/components/player-registrations/player-registrations.component.ts b/src/app/components/player-registrations/player-registrations.component.ts
index 429448d..94920a8 100644
--- a/src/app/components/player-registrations/player-registrations.component.ts
+++ b/src/app/components/player-registrations/player-registrations.component.ts
@@ -14,7 +14,7 @@ import {MatIcon} from "@angular/material/icon";
import {MatAnchor, MatButton} from "@angular/material/button";
import {MatSnackBar} from "@angular/material/snack-bar";
import {FullNamePipe} from "../../pipes/fullname-pipe";
-import {TitleService} from "../../service/title.service";
+import {HeaderService} from "../../service/header.service";
@Component({
selector: 'app-player-registrations',
@@ -57,15 +57,15 @@ export class PlayerRegistrationsComponent implements OnInit {
private registrationService: RegistrationService,
private route: ActivatedRoute,
private router: Router,
- private titleService: TitleService,
- private fullNamePipe: FullNamePipe
+ private fullNamePipe: FullNamePipe,
+ private headerService: HeaderService,
) {}
ngOnInit() {
const id = this.route.snapshot.paramMap.get('id');
this.playerService.getById(Number(id)).subscribe(data => {
this.player = data;
- this.titleService.setTitle(`Inschrijvingen van ${this.fullNamePipe.transform(this.player)}`);
+ this.headerService.setTitle(`Inschrijvingen van ${this.fullNamePipe.transform(this.player)}`);
});
this.registrationService.getTournamentRegistrationsByPlayerId(Number(id)).subscribe(data => {
this.tournamentRegistrations = data;
diff --git a/src/app/components/round-overview/round-overview.component.ts b/src/app/components/round-overview/round-overview.component.ts
index e4d0d15..105bb45 100644
--- a/src/app/components/round-overview/round-overview.component.ts
+++ b/src/app/components/round-overview/round-overview.component.ts
@@ -8,7 +8,6 @@ import {ActivatedRoute, Router} from "@angular/router";
import {DecimalPipe} from "@angular/common";
import {TeamPipe} from "../../pipes/team-pipe";
import {FullNamePipe} from "../../pipes/fullname-pipe";
-import {TitleService} from "../../service/title.service";
@Component({
selector: 'app-round-overview',
@@ -36,12 +35,10 @@ export class RoundOverviewComponent implements OnInit {
private tournamentService: TournamentService,
private route: ActivatedRoute,
private router: Router,
- private titleService: TitleService
) {
}
ngOnInit() {
- this.titleService.setTitle("Rondeoverzicht");
const tournamentId = this.route.snapshot.paramMap.get('id');
let roundId = Number(this.route.snapshot.paramMap.get('roundId'));
diff --git a/src/app/components/tournament-edit/tournament-edit.component.ts b/src/app/components/tournament-edit/tournament-edit.component.ts
index 6593cff..cad78c6 100644
--- a/src/app/components/tournament-edit/tournament-edit.component.ts
+++ b/src/app/components/tournament-edit/tournament-edit.component.ts
@@ -11,7 +11,6 @@ import {MatInput} from "@angular/material/input";
import {MatRadioButton, MatRadioGroup} from "@angular/material/radio";
import {CurrencyPipe, registerLocaleData} from "@angular/common";
import nl from "@angular/common/locales/nl";
-import {TitleService} from "../../service/title.service";
import {NgxMaskDirective} from "ngx-mask";
import {MatSnackBar} from "@angular/material/snack-bar";
import {MatCheckbox} from "@angular/material/checkbox";
@@ -54,7 +53,6 @@ export class TournamentEditComponent implements OnInit {
private currencyPipe: CurrencyPipe,
private route: ActivatedRoute,
private router: Router,
- private titleService: TitleService,
private _snackBar: MatSnackBar,
) {
this.tournament = new Tournament();
@@ -63,13 +61,11 @@ export class TournamentEditComponent implements OnInit {
ngOnInit() {
const id = this.route.snapshot.paramMap.get('id');
if (id) {
- this.titleService.setTitle("Bewerk Toernooi");
this.isEditMode = true;
this.tournamentService.getById(Number(id)).subscribe(data => {
this.tournament = data;
})
} else {
- this.titleService.setTitle("Nieuw Toernooi");
}
}
diff --git a/src/app/components/tournament-list/tournament-list.component.ts b/src/app/components/tournament-list/tournament-list.component.ts
index 19597c8..88cb4df 100644
--- a/src/app/components/tournament-list/tournament-list.component.ts
+++ b/src/app/components/tournament-list/tournament-list.component.ts
@@ -6,7 +6,7 @@ import {MatAnchor, MatButton} from "@angular/material/button";
import {MatIcon} from "@angular/material/icon";
import {MatCard, MatCardContent} from "@angular/material/card";
import {MatTableModule} from "@angular/material/table";
-import {TitleService} from "../../service/title.service";
+import {HeaderService} from "../../service/header.service";
@Component({
selector: 'app-tournament-list',
@@ -16,14 +16,13 @@ import {TitleService} from "../../service/title.service";
templateUrl: './tournament-list.component.html',
styleUrl: './tournament-list.component.scss'
})
-export class TournamentListComponent implements OnInit, AfterContentChecked {
+export class TournamentListComponent implements OnInit {
tournaments: Tournament[];
showInactive: boolean = false;
constructor(
- private tournamentService: TournamentService,
- private titleService: TitleService
+ private tournamentService: TournamentService
) {}
ngOnInit() {
@@ -32,10 +31,6 @@ export class TournamentListComponent implements OnInit, AfterContentChecked {
});
}
- ngAfterContentChecked() {
- this.titleService.setTitle("Toernooien");
- }
-
protected readonly Tournament = Tournament;
clearDraw(tournament: Tournament) {
diff --git a/src/app/components/tournament-manage/tournament-manage.component.ts b/src/app/components/tournament-manage/tournament-manage.component.ts
index 6bb4730..9b465cd 100644
--- a/src/app/components/tournament-manage/tournament-manage.component.ts
+++ b/src/app/components/tournament-manage/tournament-manage.component.ts
@@ -1,4 +1,4 @@
-import {Component, inject, Input, OnInit} from '@angular/core';
+import {Component, inject, Input, OnDestroy, OnInit} from '@angular/core';
import {
MatAccordion,
MatExpansionPanel,
@@ -31,7 +31,7 @@ import {MatSnackBar} from "@angular/material/snack-bar";
import {CourtSelectionComponent} from "../court-selection/court-selection.component";
import {Standings} from "../../model/standings";
import {Title} from '@angular/platform-browser';
-import {TitleService} from "../../service/title.service";
+import {HeaderService} from "../../service/header.service";
@Component({
selector: 'app-tournament-manage',
@@ -71,7 +71,7 @@ import {TitleService} from "../../service/title.service";
templateUrl: './tournament-manage.component.html',
styleUrl: './tournament-manage.component.scss'
})
-export class TournamentManageComponent implements OnInit {
+export class TournamentManageComponent implements OnInit, OnDestroy {
@Input() tournament: Tournament;
@@ -82,8 +82,7 @@ export class TournamentManageComponent implements OnInit {
private _snackBar: MatSnackBar,
private route: ActivatedRoute,
private router: Router,
- private titleService: TitleService,
- private title: Title
+ private headerService: HeaderService,
) {
}
@@ -96,11 +95,14 @@ export class TournamentManageComponent implements OnInit {
})
this.tournamentService.getById(Number(id)).subscribe(data => {
this.tournament = data;
- this.titleService.setTitle(this.tournament.name);
- this.title.setTitle(this.tournament.name);
+ this.headerService.setTitle(this.tournament.name);
});
}
+ ngOnDestroy() {
+ this.headerService.clearTitle();
+ }
+
onRoundTabChange(event: MatTabChangeEvent) {
const index = event.index;
this.router.navigate(
diff --git a/src/app/components/tournament-registrations/tournament-registrations.component.ts b/src/app/components/tournament-registrations/tournament-registrations.component.ts
index f1dc135..427b51d 100644
--- a/src/app/components/tournament-registrations/tournament-registrations.component.ts
+++ b/src/app/components/tournament-registrations/tournament-registrations.component.ts
@@ -5,7 +5,6 @@ import {TournamentService} from "../../service/tournament.service";
import {ActivatedRoute, Router} from "@angular/router";
import {Event} from "../../model/event";
import {FullNamePipe} from "../../pipes/fullname-pipe";
-import {TitleService} from "../../service/title.service";
@Component({
selector: 'app-tournament-registrations',
@@ -26,11 +25,9 @@ export class TournamentRegistrationsComponent implements OnInit {
private tournamentService: TournamentService,
private route: ActivatedRoute,
private router: Router,
- private titleService: TitleService
) {}
ngOnInit() {
- this.titleService.setTitle("Inschrijvingen");
const id = this.route.snapshot.paramMap.get('id');
this.tournamentService.getById(Number(id)).subscribe(data => {
this.tournament = data;
diff --git a/src/app/service/header.service.ts b/src/app/service/header.service.ts
new file mode 100644
index 0000000..f3c5fcf
--- /dev/null
+++ b/src/app/service/header.service.ts
@@ -0,0 +1,17 @@
+// header.service.ts
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({ providedIn: 'root' })
+export class HeaderService {
+ private headerSource = new BehaviorSubject(null);
+ header$ = this.headerSource.asObservable();
+
+ setTitle(header: string) {
+ this.headerSource.next(header);
+ }
+
+ clearTitle() {
+ this.headerSource.next(null);
+ }
+}
diff --git a/src/app/service/title.service.ts b/src/app/service/title.service.ts
deleted file mode 100644
index 527f0d7..0000000
--- a/src/app/service/title.service.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
-
-@Injectable()
-export class TitleService {
-
- private title = new BehaviorSubject('');
- currentTitle = this.title.asObservable();
-
- constructor() { }
-
- setTitle(message: string) {
- this.title.next(message);
- }
-
-}