Added tournament-players component

src/app/components/tournament-manage/tournament-manage.component.html

@@ -175,7 +175,6 @@
                 @for (group of event.groups; track group.id) {
                   <mat-tab label="{{group.id}}">
                     <ng-template mat-tab-label>
-                      <!--<mat-icon>list</mat-icon>&nbsp;-->
                       {{ group.name }}
                       &nbsp;
                       @if (getActiveMatchCountForGroup(group) > 0) {
@@ -416,50 +415,7 @@
                   <mat-icon>group</mat-icon>
                   &nbsp;Spelerslijst
                 </ng-template>
-                <table class="table table-hover w-75 m-4">
-                  <thead>
-                    <tr>
-                      <th>Naam</th>
-                      <th>Onderdelen</th>
-                      <th>Kosten</th>
-                      <th>Betaald</th>
-                      <th>Aanwezig</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    @for (tournamentPlayer of tournament.tournamentPlayers; track tournamentPlayer.playerId) {
-                      <tr>
-                        <td>{{ tournamentPlayer.name }}</td>
-                        <td>
-                          @for (event of tournamentPlayer.events; track event) {
-                            {{ event }}&nbsp;
-                          }
-                        </td>
-                        <td>
-                          {{ tournament.costsPerEvent[tournamentPlayer.events.length - 1] | currency:'EUR':'symbol':'1.2-2':'nl' }}
-                        </td>
-                        <td>
-                          <mat-slide-toggle [(ngModel)]="tournamentPlayer.paid" (change)="playerPaid($event, tournamentPlayer.playerId)">
-                            @if (tournamentPlayer.paid) {
-                              Betaald
-                            } @else {
-                              Nog niet betaald
-                            }
-                          </mat-slide-toggle>
-                        </td>
-                        <td>
-                          <mat-slide-toggle [(ngModel)]="tournamentPlayer.present" (change)="playerPresent($event, tournamentPlayer.playerId)">
-                            @if (tournamentPlayer.present) {
-                              Aanwezig
-                            } @else {
-                              Nog niet aanwezig
-                            }
-                          </mat-slide-toggle>
-                        </td>
-                      </tr>
-                    }
-                  </tbody>
-                </table>
+                <app-tournament-players></app-tournament-players>
               </mat-tab>
             </mat-tab-group>
           </mat-tab>

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,

src/app/components/tournament-players/tournament-players.component.html

@@ -0,0 +1,54 @@
+@if (tournament) {
+<!--  <mat-card appearance="outlined" class="m-3">-->
+<!--    <mat-card-header>-->
+<!--      <h6>Toernooi</h6>-->
+<!--    </mat-card-header>-->
+<!--    <mat-card-content>-->
+      <table class="table table-hover w-75 m-4">
+        <thead>
+        <tr>
+          <th>Naam</th>
+          <th>Onderdelen</th>
+          <th>Kosten</th>
+          <th>Betaald</th>
+          <th>Aanwezig</th>
+        </tr>
+        </thead>
+        <tbody>
+          @for (tournamentPlayer of tournament.tournamentPlayers; track tournamentPlayer.playerId) {
+            <tr>
+              <td>{{ tournamentPlayer.name }}</td>
+              <td>
+                @for (event of tournamentPlayer.events; track event) {
+                  {{ event }}&nbsp;
+                }
+              </td>
+              <td>
+                {{ tournament.costsPerEvent[tournamentPlayer.events.length - 1] | currency:'EUR':'symbol':'1.2-2':'nl' }}
+              </td>
+              <td>
+                <mat-slide-toggle [(ngModel)]="tournamentPlayer.paid" (change)="playerPaid($event, tournamentPlayer.playerId)">
+                  @if (tournamentPlayer.paid) {
+                    Betaald
+                  } @else {
+                    Nog niet betaald
+                  }
+                </mat-slide-toggle>
+              </td>
+              <td>
+                <mat-slide-toggle [(ngModel)]="tournamentPlayer.present" (change)="playerPresent($event, tournamentPlayer.playerId)">
+                  @if (tournamentPlayer.present) {
+                    Aanwezig
+                  } @else {
+                    Nog niet aanwezig
+                  }
+                </mat-slide-toggle>
+              </td>
+            </tr>
+          }
+        </tbody>
+      </table>
+
+<!--    </mat-card-content>-->
+<!--  </mat-card>-->
+}

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.');
+    });
+  }
+
+}