Added tournament-players component

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