Invallers

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

@@ -1,10 +1,14 @@
+<h2 mat-dialog-title>Kies een invaller voor {{ data.player.name }}:</h2>
 <mat-dialog-content>
-  <h3>Kies een invaller voor {{ data.player.name }}:</h3>
-
+  @for (substitution of data.player.substitutions; track $index) {
+    <div class="row mt-3">
+      <div class="col-md-3">
+        <h5>{{ Event.getType(substitution.event) }}</h5>
+      </div>
       <div class="col-md-6">
         <mat-form-field appearance="fill">
           <mat-label>Invaller</mat-label>
-      <mat-select [(ngModel)]="substitute">
+          <mat-select [(ngModel)]="substitution.substitute">
             <mat-option>Geen</mat-option>
             @for (player of data.availablePlayers; track player.playerId) {
               <mat-option [value]="player">
@@ -14,10 +18,12 @@
           </mat-select>
         </mat-form-field>
       </div>
+    </div>
+  }
 </mat-dialog-content>
 <mat-dialog-actions>
-  @if (substitute) {
-    <button mat-button [mat-dialog-close]="{substitute: substitute}">Invaller selecteren</button>
-  }
+<!--  @if (substitute) {-->
+    <button mat-button [mat-dialog-close]="{substitutions: data.player.substitutions}">Opslaan</button>
+<!--  }-->
   <button mat-button (click)="onAnnulerenClick()">Annuleren</button>
 </mat-dialog-actions>

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

@@ -5,33 +5,35 @@ import {
   MatDialogActions,
   MatDialogClose,
   MatDialogContent,
-  MatDialogRef
+  MatDialogRef, MatDialogTitle
 } 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";
+import {Event} from "../../model/event";
 
 @Component({
   selector: 'app-substitute-selection',
   imports: [
     MatButton,
     MatDialogActions,
+    MatDialogTitle,
     MatDialogContent,
     MatFormField,
     MatLabel,
     MatOption,
     MatSelect,
     FormsModule,
-    MatDialogClose
+    MatDialogClose,
   ],
   templateUrl: './substitute-selection.component.html',
   styleUrl: './substitute-selection.component.scss'
 })
 export class SubstituteSelectionComponent {
 
-  substitute: TournamentPlayer;
+  substitute: TournamentPlayer[];
 
   readonly dialogRef = inject(MatDialogRef<SubstituteSelectionComponent>);
 
@@ -43,4 +45,6 @@ export class SubstituteSelectionComponent {
   onAnnulerenClick() {
     this.dialogRef.close();
   }
+
+  protected readonly Event = Event;
 }

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

@@ -445,16 +445,8 @@
               <mat-icon>settings</mat-icon>
               &nbsp;Beheer
             </ng-template>
-            <mat-tab-group animationDuration="0ms" disableRipple="true">
-              <mat-tab>
-                <ng-template mat-tab-label>
-                  <mat-icon>group</mat-icon>
-                  &nbsp;Spelerslijst
-                </ng-template>
             <app-tournament-players [tournament]="tournament"></app-tournament-players>
           </mat-tab>
-            </mat-tab-group>
-          </mat-tab>
         }
       </mat-tab-group>
     </mat-card-content>

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

@@ -1,17 +1,20 @@
 @if (tournament) {
+  <mat-tab-group animationDuration="0ms" disableRipple="true">
+    <mat-tab>
+      <ng-template mat-tab-label>
+        <mat-icon>euro</mat-icon>
+        &nbsp;Administratie
+      </ng-template>
+
       <table class="table table-hover w-75 m-4">
         <thead>
         <tr>
           <th>Naam</th>
-      @if (tournament.status == 'ONGOING') {
-        <th>Wedstrijden geteld</th>
-      }
           <th>Onderdelen</th>
           <th>Kosten</th>
           <th>Betaald</th>
           @if (tournament.status == 'ONGOING') {
             <th>Aanwezig</th>
-        <th></th>
           }
         </tr>
         </thead>
@@ -19,9 +22,6 @@
           @for (tournamentPlayer of tournament.tournamentPlayers; track tournamentPlayer.playerId) {
             <tr>
               <td>{{ tournamentPlayer.name }}</td>
-          @if (tournament.status == 'ONGOING') {
-            <td>{{ tournamentPlayer.counts }}</td>
-          }
               <td>
                 @for (event of tournamentPlayer.events; track event) {
                   {{ event }}&nbsp;
@@ -49,6 +49,38 @@
                     }
                   </mat-slide-toggle>
                 </td>
+              }
+            </tr>
+          }
+        </tbody>
+      </table>
+    </mat-tab>
+    @if (tournament.status == 'ONGOING') {
+      <mat-tab>
+        <ng-template mat-tab-label>
+          <mat-icon>group</mat-icon>
+          &nbsp;Tellers en invallers
+        </ng-template>
+
+        <table class="table table-hover w-75 m-4">
+          <thead>
+          <tr>
+            <th>Naam</th>
+            <th>Wedstrijden geteld</th>
+            <th>Onderdelen</th>
+            <th></th>
+          </tr>
+          </thead>
+          <tbody>
+            @for (tournamentPlayer of tournament.tournamentPlayers; track tournamentPlayer.playerId) {
+              <tr>
+                <td>{{ tournamentPlayer.name }}</td>
+                <td>{{ tournamentPlayer.counts }}</td>
+                <td>
+                  @for (event of tournamentPlayer.events; track event) {
+                    {{ event }}&nbsp;
+                  }
+                </td>
                 <td>
                   <button mat-icon-button [matMenuTriggerFor]="dividedTournamentMenu" class="menu-button">
                     <mat-icon>more_vert</mat-icon>
@@ -63,11 +95,12 @@
                       Deelname stoppen
                     </button>
                   </mat-menu>
-
                 </td>
-          }
               </tr>
             }
           </tbody>
         </table>
+      </mat-tab>
+    }
+  </mat-tab-group>
 }

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

@@ -13,6 +13,7 @@ import {CourtSelectionComponent} from "../court-selection/court-selection.compon
 import {MatDialog} from "@angular/material/dialog";
 import {SubstituteSelectionComponent} from "../substitute-selection/substitute-selection.component";
 import {TournamentPlayer} from "../../model/tournamentPlayer";
+import {MatTab, MatTabGroup, MatTabLabel} from "@angular/material/tabs";
 
 @Component({
   selector: 'app-tournament-players',
@@ -24,7 +25,10 @@ import {TournamentPlayer} from "../../model/tournamentPlayer";
     MatIconButton,
     MatMenu,
     MatMenuItem,
-    MatMenuTrigger
+    MatMenuTrigger,
+    MatTab,
+    MatTabGroup,
+    MatTabLabel
   ],
   templateUrl: './tournament-players.component.html',
   standalone: true,
@@ -74,7 +78,7 @@ export class TournamentPlayersComponent implements OnInit {
     }).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.tournamentService.playerSubstitute(this.tournament.id, player.playerId, result.substitute.playerId).subscribe(data => {
           this.tournament = data;
         });
       }

src/app/model/tournamentPlayer.ts

@@ -7,4 +7,11 @@ export class TournamentPlayer {
   present: boolean;
   counting: boolean;
   counts: number;
+  substitutions: TournamentPlayerSubstitution[];
+}
+
+export class TournamentPlayerSubstitution {
+  substitutionId: number;
+  event: string;
+  substitute: TournamentPlayer;
 }