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,