Invallers

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

@@ -1,23 +1,29 @@
+<h2 mat-dialog-title>Kies een invaller voor {{ data.player.name }}:</h2>
 <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>
+  @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)]="substitution.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>
+    </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,15 +445,7 @@
               <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>
+            <app-tournament-players [tournament]="tournament"></app-tournament-players>
           </mat-tab>
         }
       </mat-tab-group>

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

@@ -1,73 +1,106 @@
 @if (tournament) {
-  <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>
-    <tbody>
-      @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;
-            }
-          </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>
-          @if (tournament.status == 'ONGOING') {
-            <td>
-              <mat-slide-toggle [(ngModel)]="tournamentPlayer.present" (change)="playerPresent($event, tournamentPlayer.playerId)">
-                @if (tournamentPlayer.present) {
-                  Aanwezig
-                } @else {
-                  Nog niet aanwezig
-                }
-              </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>
+  <mat-tab-group animationDuration="0ms" disableRipple="true">
+    <mat-tab>
+      <ng-template mat-tab-label>
+        <mat-icon>euro</mat-icon>
+        &nbsp;Administratie
+      </ng-template>
 
-            </td>
+      <table class="table table-hover w-75 m-4">
+        <thead>
+        <tr>
+          <th>Naam</th>
+          <th>Onderdelen</th>
+          <th>Kosten</th>
+          <th>Betaald</th>
+          @if (tournament.status == 'ONGOING') {
+            <th>Aanwezig</th>
           }
         </tr>
-      }
-    </tbody>
-  </table>
+        </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>
+              @if (tournament.status == 'ONGOING') {
+                <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-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>
+                  </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>
+            }
+          </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;
         });
       }