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