From 76acf809bd44fb9f1bf94df1d180885dbda1152d Mon Sep 17 00:00:00 2001 From: Michel ten Voorde Date: Fri, 15 Aug 2025 09:39:40 +0200 Subject: [PATCH] Added tournament-players component --- src/app/app.routes.ts | 3 +- .../tournament-manage.component.html | 46 +------------- .../tournament-manage.component.ts | 61 +++++++++---------- .../tournament-players.component.html | 54 ++++++++++++++++ .../tournament-players.component.scss | 0 .../tournament-players.component.ts | 55 +++++++++++++++++ 6 files changed, 142 insertions(+), 77 deletions(-) create mode 100644 src/app/components/tournament-players/tournament-players.component.html create mode 100644 src/app/components/tournament-players/tournament-players.component.scss create mode 100644 src/app/components/tournament-players/tournament-players.component.ts diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 1377584..098c864 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -13,13 +13,14 @@ import {MatchSheetsComponent} from "./components/match-sheets/match-sheets.compo import {RoundOverviewComponent} from "./components/round-overview/round-overview.component"; import {AuthGuard} from "./authentication/authguard"; import {LoginComponent} from "./components/login/login.component"; +import {TournamentPlayersComponent} from "./components/tournament-players/tournament-players.component"; export const routes: Routes = [ { 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/registrations', component: TournamentPlayersComponent, 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' }}, diff --git a/src/app/components/tournament-manage/tournament-manage.component.html b/src/app/components/tournament-manage/tournament-manage.component.html index 1d7fd90..c72a6bf 100644 --- a/src/app/components/tournament-manage/tournament-manage.component.html +++ b/src/app/components/tournament-manage/tournament-manage.component.html @@ -175,7 +175,6 @@ @for (group of event.groups; track group.id) { - {{ group.name }}   @if (getActiveMatchCountForGroup(group) > 0) { @@ -416,50 +415,7 @@ group  Spelerslijst - - - - - - - - - - - - @for (tournamentPlayer of tournament.tournamentPlayers; track tournamentPlayer.playerId) { - - - - - - - - } - -
NaamOnderdelenKostenBetaaldAanwezig
{{ tournamentPlayer.name }} - @for (event of tournamentPlayer.events; track event) { - {{ event }}  - } - - {{ tournament.costsPerEvent[tournamentPlayer.events.length - 1] | currency:'EUR':'symbol':'1.2-2':'nl' }} - - - @if (tournamentPlayer.paid) { - Betaald - } @else { - Nog niet betaald - } - - - - @if (tournamentPlayer.present) { - Aanwezig - } @else { - Nog niet aanwezig - } - -
+ diff --git a/src/app/components/tournament-manage/tournament-manage.component.ts b/src/app/components/tournament-manage/tournament-manage.component.ts index 9b465cd..4c163a2 100644 --- a/src/app/components/tournament-manage/tournament-manage.component.ts +++ b/src/app/components/tournament-manage/tournament-manage.component.ts @@ -6,7 +6,7 @@ import { MatExpansionPanelTitle } from "@angular/material/expansion"; import {MatCard, MatCardContent, MatCardHeader} from "@angular/material/card"; -import {CurrencyPipe, DatePipe, DecimalPipe, NgClass} from "@angular/common"; +import {DatePipe, DecimalPipe, NgClass} from "@angular/common"; import {TeamPipe} from "../../pipes/team-pipe"; import {TournamentService} from "../../service/tournament.service"; import {ActivatedRoute, Router} from "@angular/router"; @@ -26,43 +26,42 @@ import {MatchResultPipe} from "../../pipes/match-result-pipe"; import {Event} from "../../model/event"; import {TournamentValidateComponent} from "../tournament-validate/tournament-validate.component"; import {Strength} from "../../model/player"; -import {MatSlideToggle, MatSlideToggleChange} from "@angular/material/slide-toggle"; +import {MatSlideToggleChange} from "@angular/material/slide-toggle"; 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 {HeaderService} from "../../service/header.service"; +import {TournamentPlayersComponent} from "../tournament-players/tournament-players.component"; @Component({ selector: 'app-tournament-manage', - imports: [ - FullNamePipe, - MatAccordion, - MatCard, - MatCardContent, - MatCardHeader, - MatExpansionPanel, - MatExpansionPanelHeader, - MatExpansionPanelTitle, - TeamPipe, - MatIcon, - NgClass, - MatMenu, - MatMenuItem, - MatMenuTrigger, - FormsModule, - DatePipe, - MatTabGroup, - MatTab, - MatTabLabel, - MatButton, - MatIconButton, - DecimalPipe, - TournamentValidateComponent, - MatSlideToggle, - CurrencyPipe, - MatMenuContent - ], + imports: [ + FullNamePipe, + MatAccordion, + MatCard, + MatCardContent, + MatCardHeader, + MatExpansionPanel, + MatExpansionPanelHeader, + MatExpansionPanelTitle, + TeamPipe, + MatIcon, + NgClass, + MatMenu, + MatMenuItem, + MatMenuTrigger, + FormsModule, + DatePipe, + MatTabGroup, + MatTab, + MatTabLabel, + MatButton, + MatIconButton, + DecimalPipe, + TournamentValidateComponent, + MatMenuContent, + TournamentPlayersComponent + ], providers: [ FullNamePipe, TeamPipe, diff --git a/src/app/components/tournament-players/tournament-players.component.html b/src/app/components/tournament-players/tournament-players.component.html new file mode 100644 index 0000000..a7966cc --- /dev/null +++ b/src/app/components/tournament-players/tournament-players.component.html @@ -0,0 +1,54 @@ +@if (tournament) { + + + + + + + + + + + + + + + + + @for (tournamentPlayer of tournament.tournamentPlayers; track tournamentPlayer.playerId) { + + + + + + + + } + +
NaamOnderdelenKostenBetaaldAanwezig
{{ tournamentPlayer.name }} + @for (event of tournamentPlayer.events; track event) { + {{ event }}  + } + + {{ tournament.costsPerEvent[tournamentPlayer.events.length - 1] | currency:'EUR':'symbol':'1.2-2':'nl' }} + + + @if (tournamentPlayer.paid) { + Betaald + } @else { + Nog niet betaald + } + + + + @if (tournamentPlayer.present) { + Aanwezig + } @else { + Nog niet aanwezig + } + +
+ + + +} diff --git a/src/app/components/tournament-players/tournament-players.component.scss b/src/app/components/tournament-players/tournament-players.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/tournament-players/tournament-players.component.ts b/src/app/components/tournament-players/tournament-players.component.ts new file mode 100644 index 0000000..139bf7c --- /dev/null +++ b/src/app/components/tournament-players/tournament-players.component.ts @@ -0,0 +1,55 @@ +import {Component, OnInit} from '@angular/core'; +import {MatCard, MatCardContent, MatCardHeader} from "@angular/material/card"; +import {CurrencyPipe} from "@angular/common"; +import {MatSlideToggle, MatSlideToggleChange} from "@angular/material/slide-toggle"; +import {TournamentService} from "../../service/tournament.service"; +import {ActivatedRoute, Router} from "@angular/router"; +import {Tournament} from "../../model/tournament"; +import {FormsModule} from "@angular/forms"; +import {MatSnackBar} from "@angular/material/snack-bar"; + +@Component({ + selector: 'app-tournament-players', + imports: [ + MatCard, + MatCardContent, + MatCardHeader, + // MatIcon, + CurrencyPipe, + MatSlideToggle, + FormsModule + ], + templateUrl: './tournament-players.component.html', + styleUrl: './tournament-players.component.scss' +}) +export class TournamentPlayersComponent implements OnInit { + + tournament: Tournament; + + constructor( + private tournamentService: TournamentService, + private _snackBar: MatSnackBar, + private route: ActivatedRoute, + private router: Router, + ) {} + + ngOnInit() { + const id = this.route.snapshot.paramMap.get('id'); + this.tournamentService.getById(Number(id)).subscribe(data => { + this.tournament = data; + }); + } + + playerPaid($event: MatSlideToggleChange, playerId: number) { + this.tournamentService.playerPaid(this.tournament.id, playerId, $event.checked).subscribe(() => { + this._snackBar.open('Opgeslagen.'); + }); + } + + playerPresent($event: MatSlideToggleChange, playerId: number) { + this.tournamentService.playerPresent(this.tournament.id, playerId, $event.checked).subscribe(() => { + this._snackBar.open('Opgeslagen.'); + }); + } + +}