Update counter

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

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

src/app/components/counter-selection/counter-selection.component.scss

@@ -0,0 +1,4 @@
+button:disabled {
+  cursor: not-allowed;
+  pointer-events: all !important;
+}

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

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

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

@@ -161,6 +161,10 @@
                         <mat-icon>edit</mat-icon>
                         Uitslag invoeren
                       </button>
+                      <button mat-button (click)="changeCounter(activeMatch.match)">
+                        <mat-icon>person</mat-icon>
+                        Teller wijzigen
+                      </button>
                       <button mat-button (click)="stopMatch(activeMatch.match)">
                         <mat-icon>stop</mat-icon>
                         Wedstrijd stoppen
@@ -329,6 +333,10 @@
                                           <mat-icon>edit</mat-icon>
                                           Uitslag invoeren
                                         </button>
+                                        <button mat-button (click)="changeCounter(match)">
+                                          <mat-icon>person</mat-icon>
+                                          Teller
+                                        </button>
                                         <button mat-button (click)="stopMatch(match)">
                                           <mat-icon>stop</mat-icon>
                                           Wedstrijd stoppen

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

@@ -35,6 +35,7 @@ import {TournamentPlayersComponent} from "../tournament-players/tournament-playe
 import {TournamentPlayer} from "../../model/tournamentPlayer";
 import {MatTooltip} from "@angular/material/tooltip";
 import {TeamDisplayComponent} from "../team-display/team-display.component";
+import {CounterSelectionComponent} from "../counter-selection/counter-selection.component";
 
 @Component({
   selector: 'app-tournament-manage',
@@ -367,6 +368,7 @@ export class TournamentManageComponent implements OnInit, OnDestroy {
 
   matchResultDialog = inject(MatDialog);
   courtSelectionDialog = inject(MatDialog);
+  counterSelectionDialog = inject(MatDialog);
 
   editResult(match: Match, event: Event, group: Group, round: Round) {
     this.matchResultDialog.open(MatchResultComponent, {
@@ -427,6 +429,23 @@ export class TournamentManageComponent implements OnInit, OnDestroy {
     return count;
   }
 
+  changeCounter(match: Match) {
+    this.counterSelectionDialog.open(CounterSelectionComponent, {
+      data: {
+        match: match,
+        availableCounters: this.getAvailableCounters(match)
+      },
+      minWidth: '800px',
+      minHeight: '250px'
+    }).afterClosed().subscribe(result => {
+      if (result != undefined) {
+        this.tournamentService.updateCounter(this.tournament.id, match.id, result.counter.playerId).subscribe(data => {
+          this.tournament = data;
+        });
+      }
+    });
+
+  }
 }
 
 class ActiveMatch {

src/app/service/tournament.service.ts

@@ -97,6 +97,10 @@ export class TournamentService {
     return this.http.post<Tournament>(`${this.tournamentsUrl}/${tournamentId}/players/${playerId}/substitutions`, substitutions)
   }
 
+  public updateCounter(tournamentId: number, matchId: number, counter: number): Observable<Tournament> {
+    return this.http.patch<Tournament>(`${this.tournamentsUrl}/${tournamentId}/matches/${matchId}/update?counter=${counter}`, null);
+  }
+
   public addTestData(): Observable<void> {
     return this.http.get<void>(`${environment.backendUrl}/testdata`);
   }