WIP: substitutions

src/app/components/substitute-selection/substitute-selection.component.html

@@ -0,0 +1,23 @@
+<mat-dialog-content>
+  <h3>Kies een invaller voor {{ data.player.name }}:</h3>
+
+  <div class="col-md-6">
+    <mat-form-field appearance="fill">
+      <mat-label>Invaller</mat-label>
+      <mat-select [(ngModel)]="substitute">
+        <mat-option>Geen</mat-option>
+        @for (player of data.availablePlayers; track player.playerId) {
+          <mat-option [value]="player">
+            {{ player.name }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  </div>
+</mat-dialog-content>
+<mat-dialog-actions>
+  @if (substitute) {
+    <button mat-button [mat-dialog-close]="{substitute: substitute}">Invaller selecteren</button>
+  }
+  <button mat-button (click)="onAnnulerenClick()">Annuleren</button>
+</mat-dialog-actions>

src/app/components/substitute-selection/substitute-selection.component.ts

@@ -0,0 +1,46 @@
+import {Component, inject, Inject} from '@angular/core';
+import {MatButton} from "@angular/material/button";
+import {
+  MAT_DIALOG_DATA,
+  MatDialogActions,
+  MatDialogClose,
+  MatDialogContent,
+  MatDialogRef
+} from "@angular/material/dialog";
+import {MatFormField} from "@angular/material/form-field";
+import {MatLabel} from "@angular/material/form-field";
+import {MatOption, MatSelect} from "@angular/material/select";
+import {TournamentPlayer} from "../../model/tournamentPlayer";
+import {FormsModule} from "@angular/forms";
+
+@Component({
+  selector: 'app-substitute-selection',
+  imports: [
+    MatButton,
+    MatDialogActions,
+    MatDialogContent,
+    MatFormField,
+    MatLabel,
+    MatOption,
+    MatSelect,
+    FormsModule,
+    MatDialogClose
+  ],
+  templateUrl: './substitute-selection.component.html',
+  styleUrl: './substitute-selection.component.scss'
+})
+export class SubstituteSelectionComponent {
+
+  substitute: TournamentPlayer;
+
+  readonly dialogRef = inject(MatDialogRef<SubstituteSelectionComponent>);
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: {
+    player: TournamentPlayer,
+    availablePlayers: TournamentPlayer[]
+  }) {}
+
+  onAnnulerenClick() {
+    this.dialogRef.close();
+  }
+}

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

@@ -11,6 +11,7 @@
       <th>Betaald</th>
       @if (tournament.status == 'ONGOING') {
         <th>Aanwezig</th>
+        <th></th>
       }
     </tr>
     </thead>
@@ -48,6 +49,22 @@
                 }
               </mat-slide-toggle>
             </td>
+            <td>
+              <button mat-icon-button [matMenuTriggerFor]="dividedTournamentMenu" class="menu-button">
+                <mat-icon>more_vert</mat-icon>
+              </button>
+              <mat-menu #dividedTournamentMenu="matMenu">
+                <button mat-menu-item (click)="findSubstitute(tournamentPlayer)">
+                  <mat-icon>autorenew</mat-icon>
+                  Invaller kiezen
+                </button>
+                <button mat-menu-item> <!--(click)="drawTournament()"-->
+                  <mat-icon>do_not_disturb_on</mat-icon>
+                  Deelname stoppen
+                </button>
+              </mat-menu>
+
+            </td>
           }
         </tr>
       }

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

@@ -1,4 +1,4 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, inject, Input, OnInit} from '@angular/core';
 import {CurrencyPipe} from "@angular/common";
 import {MatSlideToggle, MatSlideToggleChange} from "@angular/material/slide-toggle";
 import {TournamentService} from "../../service/tournament.service";
@@ -6,13 +6,25 @@ import {ActivatedRoute, Router} from "@angular/router";
 import {Tournament} from "../../model/tournament";
 import {FormsModule} from "@angular/forms";
 import {MatSnackBar} from "@angular/material/snack-bar";
+import {MatIcon} from "@angular/material/icon";
+import {MatIconButton} from "@angular/material/button";
+import {MatMenu, MatMenuItem, MatMenuTrigger} from "@angular/material/menu";
+import {CourtSelectionComponent} from "../court-selection/court-selection.component";
+import {MatDialog} from "@angular/material/dialog";
+import {SubstituteSelectionComponent} from "../substitute-selection/substitute-selection.component";
+import {TournamentPlayer} from "../../model/tournamentPlayer";
 
 @Component({
   selector: 'app-tournament-players',
   imports: [
     CurrencyPipe,
     MatSlideToggle,
-    FormsModule
+    FormsModule,
+    MatIcon,
+    MatIconButton,
+    MatMenu,
+    MatMenuItem,
+    MatMenuTrigger
   ],
   templateUrl: './tournament-players.component.html',
   standalone: true,
@@ -49,4 +61,25 @@ export class TournamentPlayersComponent implements OnInit {
     });
   }
 
+  substituteSelectionDialog = inject(MatDialog);
+
+  findSubstitute(player: TournamentPlayer) {
+    this.substituteSelectionDialog.open(SubstituteSelectionComponent, {
+      data: {
+        player: player,
+        availablePlayers: this.tournament.tournamentPlayers
+      },
+      minWidth: '800px',
+      minHeight: '250px'
+    }).afterClosed().subscribe(result => {
+      if (result != undefined) {
+        console.log('Substitute selected for ' + player.name + ', namely: ' + result.substitute.name);
+        this.tournamentService.startMatch(this.tournament.id, match.id, result.court, result.counter.playerId).subscribe(data => {
+          this.tournament = data;
+        });
+      }
+    });
+
+  }
+
 }

src/app/service/tournament.service.ts

@@ -92,6 +92,10 @@ export class TournamentService {
     return this.http.patch<void>(`${this.tournamentsUrl}/${tournamentId}/players/${playerId}/present/${paid}`, null);
   }
 
+  public playerSubstitute(tournamentId: number, playerId: number, substituteId: number): Observable<Tournament> {
+    return this.http.post<Tournament>(`${this.tournamentsUrl}/${tournamentId}/players/${playerId}/substitute/${substituteId}`, null)
+  }
+
   public addTestData(): Observable<void> {
     return this.http.get<void>(`${environment.backendUrl}/testdata`);
   }