Added match counter

src/app/app.routes.ts

@@ -1,12 +1,9 @@
-import { Routes } from '@angular/router';
-import { PlayerListComponent} from "./components/player-list/player-list.component";
+import {Routes} from '@angular/router';
+import {PlayerListComponent} from "./components/player-list/player-list.component";
 import {PlayerEditComponent} from "./components/player-edit/player-edit.component";
 import {TournamentListComponent} from "./components/tournament-list/tournament-list.component";
 import {TournamentEditComponent} from "./components/tournament-edit/tournament-edit.component";
 import {PlayerRegistrationsComponent} from "./components/player-registrations/player-registrations.component";
-import {TournamentRegistrationsComponent} from "./components/tournament-registrations/tournament-registrations.component";
-import {TournamentValidateComponent} from "./components/tournament-validate/tournament-validate.component";
-import {TournamentDivideComponent} from "./components/tournament-divide/tournament-divide.component";
 import {TournamentDrawComponent} from "./components/tournament-draw/tournament-draw.component";
 import {TournamentManageComponent} from "./components/tournament-manage/tournament-manage.component";
 import {MatchSheetsComponent} from "./components/match-sheets/match-sheets.component";
@@ -21,14 +18,12 @@ export const routes: Routes = [
   { path: 'tournaments/add', component: TournamentEditComponent, canActivate: [AuthGuard], data: { header: 'Nieuw Toernooi' }},
   { path: 'tournaments/:id/edit', component: TournamentEditComponent, canActivate: [AuthGuard], data: { header: 'Bewerk Toernooi' }},
   { path: 'tournaments/:id/registrations', component: TournamentPlayersComponent, canActivate: [AuthGuard], data: { header: 'Inschrijvingen' }},
-  { path: 'tournaments/:id/validate', component: TournamentValidateComponent, canActivate: [AuthGuard], data: { header: 'Toernooi' }},
-  { path: 'tournaments/:id/divide', component: TournamentDivideComponent, canActivate: [AuthGuard], data: { header: 'Toernooi valideren' }},
   { path: 'tournaments/:id/draw', component: TournamentDrawComponent, canActivate: [AuthGuard], data: { header: 'Toernooi loten' }},
   { path: 'tournaments/:id/manage', component: TournamentManageComponent, canActivate: [AuthGuard]},
   { path: 'tournaments/:id/manage/:tab', component: TournamentManageComponent, canActivate: [AuthGuard], data: { header: 'Toernooien' }},
   { path: 'players', component: PlayerListComponent, canActivate: [AuthGuard], data: { header: 'Spelers' }},
   { path: 'players/add', component: PlayerEditComponent, canActivate: [AuthGuard], data: { header: 'Nieuwe Speler' }},
-  { path: 'players/edit/:id', component: PlayerEditComponent, canActivate: [AuthGuard], data: { header: 'Bewerk Speler' }},
+  { path: 'players/:id/edit', component: PlayerEditComponent, canActivate: [AuthGuard], data: { header: 'Bewerk Speler' }},
   { path: 'players/:id/registrations', component: PlayerRegistrationsComponent, canActivate: [AuthGuard]},
   { path: 'tournaments/:id/rounds/:roundId/matchsheets', component: MatchSheetsComponent, canActivate: [AuthGuard]},
   { path: 'tournaments/:id/rounds/:roundId/overview', component: RoundOverviewComponent, canActivate: [AuthGuard], data: { header: 'Rondeoverzicht' }},

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

@@ -1,13 +1,32 @@
-<h2 mat-dialog-title>Kies een baan:</h2>
 <mat-dialog-content>
-  @for (item of [].constructor(data.totalCourts); track item) {
-    <button type="button" class="btn {{ data.availableCourts.indexOf($index + 1) < 0 ? 'btn-secondary' : 'btn-primary' }} btn-lg m-3"
-            [disabled]="data.availableCourts.indexOf($index + 1) < 0" [mat-dialog-close]="$index + 1">
+  <h3>Kies een baan:</h3>
+  @for (item of [].constructor(data.totalCourts); track $index) {
+    <button type="button"
+      class="btn {{ this.court == ($index + 1) ? 'btn-primary' : (data.availableCourts.indexOf($index + 1) < 0 ? 'btn-outline-secondary' : 'btn-outline-primary') }} btn-lg m-3"
+      [disabled]="data.availableCourts.indexOf($index + 1) < 0"
+      (click)="selectCourt($index + 1)">
       {{ $index + 1 }}
     </button>
   }
   <br>
+  <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 (court && counter) {
+    <button mat-button [mat-dialog-close]="{court: court, counter: counter}">Wedstrijd starten</button>
+  }
   <button mat-button (click)="onAnnulerenClick()">Annuleren</button>
 </mat-dialog-actions>

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

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

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

@@ -3,20 +3,29 @@ import {
   MAT_DIALOG_DATA,
   MatDialogActions,
   MatDialogClose,
-  MatDialogContent, MatDialogRef,
-  MatDialogTitle
+  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-court-selection',
   imports: [
-        MatDialogTitle,
     MatDialogContent,
     MatButton,
     MatDialogClose,
-        MatDialogActions
+    MatDialogActions,
+    MatFormField,
+    MatLabel,
+    MatOption,
+    MatSelect,
+    FormsModule,
+
   ],
     templateUrl: './court-selection.component.html',
     styleUrl: './court-selection.component.scss'
@@ -24,16 +33,22 @@ import {MatButton} from "@angular/material/button";
 export class CourtSelectionComponent {
 
   court: number;
+  counter: TournamentPlayer;
 
   readonly dialogRef = inject(MatDialogRef<CourtSelectionComponent>);
 
   constructor(@Inject(MAT_DIALOG_DATA) public data: {
     match: Match,
     availableCourts: number[],
-    totalCourts: number
+    totalCourts: number,
+    availableCounters: TournamentPlayer[]
   }) {}
 
   onAnnulerenClick() {
     this.dialogRef.close();
   }
+
+  selectCourt(selectedCourt: number) {
+    this.court = selectedCourt;
+  }
 }

src/app/components/player-list/player-list.component.html

@@ -25,7 +25,7 @@
         <ng-container matColumnDef="action">
           <th mat-header-cell *matHeaderCellDef></th>
           <td mat-cell *matCellDef="let player">
-            <a mat-button [routerLink]="['/players/edit', player.id]">
+            <a mat-button [routerLink]="['/players', player.id, 'edit']">
               <mat-icon>edit</mat-icon>
               Bewerk
             </a>

src/app/components/player-registrations/player-registrations.component.html

@@ -16,7 +16,6 @@
                 </div>
                 <div class="col-md-4">
                   @if (eventRegistration.doublesEvent) {
-                    <ng-container>
                     <mat-form-field appearance="fill">
                       <mat-label>Partner</mat-label>
                       <mat-select [value]="eventRegistration.partner" [disabled]="!tournamentRegistration.editable || !eventRegistration.registered" [(ngModel)]="eventRegistration.partner">
@@ -28,7 +27,6 @@
                         }
                       </mat-select>
                     </mat-form-field>
-                    </ng-container>
                   }
                 </div>
                 <div class="col-6"></div>

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

@@ -1,57 +0,0 @@
-@if (tournament) {
-  <mat-card appearance="outlined">
-    <mat-card-header>
-      <h5>Indeling voor {{ tournament.name }}</h5>
-    </mat-card-header>
-    <mat-card-content>
-      @for (event of tournament.events; track event.id) {
-        <mat-card appearance="outlined" class="m-3">
-          <mat-card-header>
-            <h6>Indeling {{ TournamentEvent.getType(event.type) }}</h6>
-          </mat-card-header>
-          <mat-card-content>
-            <mat-accordion multi="true">
-              @for (group of event.groups; track group.id) {
-                <mat-expansion-panel>
-                  <mat-expansion-panel-header>
-                    <mat-panel-title>
-                      {{ group.name }}&nbsp;<span class="badge text-bg-success">{{ group.teams.length }}</span>
-                    </mat-panel-title>
-                  </mat-expansion-panel-header>
-                  <table class="table {{ event.doublesEvent ? 'w-100' : 'w-50' }}">
-                    <thead class="thead-dark">
-                    <tr>
-                      <th scope="col" class="w-20">Naam</th>
-                      <th scope="col" class="w-20">Club</th>
-                      <th scope="col" class="w-10">Speelsterkte</th>
-                      @if (event.doublesEvent) {
-                        <th scope="col" class="w-20">Partner</th>
-                        <th scope="col" class="w-20">Club</th>
-                        <th scope="col" class="w-10">Speelsterkte</th>
-                      }
-                    </tr>
-                    </thead>
-                    <tbody>
-                      @for (team of group.teams; track team.id) {
-                        <tr>
-                          <td class="align-middle">{{ team.player1 | fullName }}</td>
-                          <td class="align-middle">{{ team.player1.club }}</td>
-                          <td class="align-middle">{{ getStrength(team.player1.strength.valueOf()) }}</td>
-                          @if (event.doublesEvent) {
-                            <td class="align-middle">{{ team.player2 | fullName }}</td>
-                            <td class="align-middle">{{ team.player2?.club }}</td>
-                            <td class="align-middle">{{ team.player2 ? getStrength(team.player2!.strength.valueOf()) : '' }}</td>
-                          }
-                        </tr>
-                      }
-                    </tbody>
-                  </table>
-                </mat-expansion-panel>
-              }
-            </mat-accordion>
-          </mat-card-content>
-        </mat-card>
-      }
-    </mat-card-content>
-  </mat-card>
-}

src/app/components/tournament-divide/tournament-divide.component.scss

@@ -1,3 +0,0 @@
-td, th {
-  background-color: transparent !important;
-}

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

@@ -1,58 +0,0 @@
-import {Component, OnInit} from '@angular/core';
-import {Tournament} from "../../model/tournament";
-import {TournamentService} from "../../service/tournament.service";
-import {ActivatedRoute, Router} from "@angular/router";
-import {MatCard, MatCardContent, MatCardHeader} from "@angular/material/card";
-import {
-  MatAccordion,
-  MatExpansionPanel,
-  MatExpansionPanelHeader,
-  MatExpansionPanelTitle
-} from "@angular/material/expansion";
-import {Event} from "../../model/event";
-import {Strength} from "../../model/player";
-import {FullNamePipe} from "../../pipes/fullname-pipe";
-
-@Component({
-    selector: 'app-tournament-divide',
-  imports: [
-    MatCard,
-    MatCardHeader,
-    MatCardContent,
-    MatExpansionPanel,
-    MatExpansionPanelTitle,
-    MatExpansionPanelHeader,
-    FullNamePipe,
-    MatAccordion
-  ],
-    templateUrl: './tournament-divide.component.html',
-    styleUrl: './tournament-divide.component.scss'
-})
-export class TournamentDivideComponent implements OnInit {
-  tournament?: Tournament;
-
-  constructor(
-    private tournamentService: TournamentService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {}
-
-  ngOnInit() {
-    const id = this.route.snapshot.paramMap.get('id');
-    this.tournamentService.getById(Number(id)).subscribe(data => {
-      this.tournament = data;
-    });
-    // this.tournamentService.getDivision(Number(id)).subscribe(data => {
-    //   this.tournamentDivision = data;
-    // });
-  }
-
-  protected readonly TournamentEvent = Event;
-
-  getStrength(strength: string) {
-    for (let [key, value] of Object.entries(Strength)) {
-      if (key == strength) return value;
-    }
-    return "";
-  }
-}

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

@@ -1,10 +1,5 @@
 @if (tournament) {
   <mat-card appearance="outlined">
-<!--
-    <mat-card-header>
-      <h5>{{ tournament.name }}</h5>
-    </mat-card-header>
--->
     <mat-card-content>
       <mat-tab-group animationDuration="0ms" disableRipple="true">
 
@@ -108,56 +103,43 @@
           <mat-tab>
             <ng-template mat-tab-label>
               <mat-icon>play_arrow</mat-icon>
-              &nbsp;Actieve wedstrijden
-              &nbsp;
+              &nbsp;Actieve wedstrijden&nbsp;&nbsp;
               @if (this.activeMatches().length > 0) {
                 <span class="badge text-bg-success">{{ this.activeMatches().length }}</span>
               }
             </ng-template>
 
             @if (this.activeMatches().length > 0) {
-              <table class="table table-hover w-100 m-4">
-                <thead>
-                  <tr>
-                    <th colspan="3">Wedstrijd</th>
-                    <th>Onderdeel/Ronde</th>
-                    <th>Start</th>
-                    <th>Baan</th>
-                    <th></th>
-                  </tr>
-                </thead>
-                <tbody>
+              <h6 class="mt-3">Actieve wedstrijden</h6>
+
               @for (activeMatch of this.activeMatches(); track activeMatch.match.id) {
-                    <tr>
-                      <td class="align-middle">{{ activeMatch.match.team1 | teamText }}</td>
-                      <td class="align-middle">-</td>
-                      <td class="align-middle">{{ activeMatch.match.team2 | teamText }}</td>
-                      <td class="align-middle">{{ activeMatch.group.name }} {{ activeMatch.round.name }}</td>
-                      <td class="align-middle">{{ activeMatch.match.startTime | date: 'HH:mm' }}</td>
-                      <td class="align-middle">{{ activeMatch.match.court }}</td>
-                      <td nowrap class="align-middle">
+                <mat-expansion-panel>
+                  <mat-expansion-panel-header>
+                    <div class="col-md-2">Baan {{ activeMatch.match.court }}</div>
+                    <div class="col-md-3">{{ activeMatch.match.team1 | teamText }}</div>
+                    <div class="col-md-1">-</div>
+                    <div class="col-md-3">{{ activeMatch.match.team2 | teamText }}</div>
+                    <div class="col-md-3">{{ activeMatch.group.name }} {{ activeMatch.round.name }}</div>
+                  </mat-expansion-panel-header>
+                  <div class="row">
+                    <div class="col-md-3">Teller: {{ activeMatch.match.counter | fullName }}</div>
+                    <div class="col-md-5"></div>
+                    <div class="col-md-2">Starttijd: {{ activeMatch.match.startTime | date: 'HH:mm' }}</div>
+                    <div class="col-md-2">Duur: {{ getDuration(activeMatch.match.startTime) | date: 'mm:ss' }}</div>
+                  </div>
+                  <mat-action-row>
                     <button class="align-baseline" mat-button (click)="editResult(activeMatch.match, activeMatch.group, activeMatch.round)">
                       <mat-icon>edit</mat-icon>
                       Uitslag invoeren
                     </button>
-                        <button mat-icon-button [matMenuTriggerFor]="activeMatchMenu" [matMenuTriggerData]="{ match: activeMatch.match }" class="menu-button">
-                          <mat-icon>more_vert</mat-icon>
-                        </button>
-                      </td>
-                    </tr>
-                  }
-                </tbody>
-              </table>
-
-              <mat-menu #activeMatchMenu="matMenu">
-                <ng-template matMenuContent let-match="match">
-                  <button mat-button (click)="stopMatch(match)">
+                    <button mat-button (click)="stopMatch(activeMatch.match)">
                       <mat-icon>stop</mat-icon>
                       Wedstrijd stoppen
                     </button>
-                </ng-template>
-              </mat-menu>
-
+                  </mat-action-row>
+                </mat-expansion-panel>
+                <br>
+              }
             } @else {
               <h6 class="mt-3">Geen actieve wedstrijden</h6>
             }
@@ -223,11 +205,11 @@
                                   <mat-icon>play_arrow</mat-icon>
                                   Ronde starten
                                 </button>
+                              }
                               <button mat-menu-item (click)="printMatchSheets(round)">
                                 <mat-icon>print</mat-icon>
                                 Wedstrijdbriefjes printen
                               </button>
-                              }
                               <button mat-menu-item (click)="printRoundOverview(round)">
                                 <mat-icon>print</mat-icon>
                                 Rondeoverzicht printen
@@ -402,8 +384,7 @@
               }
             </mat-tab-group>
           </mat-tab>
-        }
-        @if (tournament.status == 'ONGOING' || tournament.status == 'DRAWN') {
+
           <mat-tab>
             <ng-template mat-tab-label>
               <mat-icon>settings</mat-icon>

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

@@ -24,3 +24,11 @@ td.w-sep {
 td.w-fill {
   width: 35%;
 }
+
+.w-90 {
+  width: 90% !important;
+}
+
+.material-tooltip {
+  white-space: pre-line;
+}

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

@@ -1,7 +1,7 @@
 import {Component, inject, Input, OnDestroy, OnInit} from '@angular/core';
 import {
   MatAccordion,
-  MatExpansionPanel,
+  MatExpansionPanel, MatExpansionPanelActionRow,
   MatExpansionPanelHeader,
   MatExpansionPanelTitle
 } from "@angular/material/expansion";
@@ -25,13 +25,15 @@ import {MatDialog} from "@angular/material/dialog";
 import {MatchResultPipe} from "../../pipes/match-result-pipe";
 import {Event} from "../../model/event";
 import {TournamentValidateComponent} from "../tournament-validate/tournament-validate.component";
-import {Strength} from "../../model/player";
+import {Player, Strength} from "../../model/player";
 import {MatSlideToggleChange} from "@angular/material/slide-toggle";
 import {MatSnackBar} from "@angular/material/snack-bar";
 import {CourtSelectionComponent} from "../court-selection/court-selection.component";
 import {Standings} from "../../model/standings";
 import {HeaderService} from "../../service/header.service";
 import {TournamentPlayersComponent} from "../tournament-players/tournament-players.component";
+import {TournamentPlayer} from "../../model/tournamentPlayer";
+import {MatTooltip} from "@angular/material/tooltip";
 
 @Component({
     selector: 'app-tournament-manage',
@@ -60,7 +62,8 @@ import {TournamentPlayersComponent} from "../tournament-players/tournament-playe
     DecimalPipe,
     TournamentValidateComponent,
     MatMenuContent,
-    TournamentPlayersComponent
+    TournamentPlayersComponent,
+    MatExpansionPanelActionRow,
   ],
     providers: [
         FullNamePipe,
@@ -102,6 +105,16 @@ export class TournamentManageComponent implements OnInit, OnDestroy {
     this.headerService.clearTitle();
   }
 
+  getDuration(startTime: string | Date): Date {
+    const start = new Date(startTime);
+    const now = new Date();
+    const diffInMs = now.getTime() - start.getTime();
+
+    // Convert milliseconds to a Date object starting from epoch
+    // This allows the date pipe to format it as mm:ss
+    return new Date(diffInMs);
+  }
+
   onRoundTabChange(event: MatTabChangeEvent) {
     const index = event.index;
     this.router.navigate(
@@ -152,6 +165,7 @@ export class TournamentManageComponent implements OnInit, OnDestroy {
       this.tournament = data;
     });
   }
+
   reopenGroup(group: Group) {
     this.tournamentService.reopenGroup(this.tournament.id, group.id).subscribe(data => {
       this.tournament = data;
@@ -183,20 +197,24 @@ export class TournamentManageComponent implements OnInit, OnDestroy {
       alert('Geen banen beschikbaar!');
     } else if (this.matchContainsPlayersThatArePlaying(match)) {
       alert('Deze wedstrijd bevat spelers die al aan het spelen zijn!');
+    } else if (this.matchContainsPlayersThatAreCounting(match)) {
+      alert('Deze wedstrijd bevat spelers die aan het tellen zijn!');
     } else {
       this.courtSelectionDialog.open(CourtSelectionComponent, {
         data: {
           match: match,
           availableCourts: this.getAvailableCourts(),
-          totalCourts: this.tournament.courts
+          totalCourts: this.tournament.courts,
+          availableCounters: this.getAvailableCounters()
         },
         minWidth: '800px',
         minHeight: '250px'
       }).afterClosed().subscribe(result => {
         if (result != undefined) {
-          this.tournamentService.startMatch(this.tournament.id, match.id, result).subscribe(data => {
+          console.log('Start match on court ' + result.court + ' with counter ' + result.counter.name);
+          this.tournamentService.startMatch(this.tournament.id, match.id, result.court, result.counter.playerId).subscribe(data => {
             this.tournament = data;
-          })
+          });
         }
       });
     }
@@ -219,6 +237,22 @@ export class TournamentManageComponent implements OnInit, OnDestroy {
     return playersThatArePlaying.length > 0;
   }
 
+  matchContainsPlayersThatAreCounting(match: Match): boolean {
+    let currentCounters: number[] = [];
+    for (let activeMatch of this.activeMatches()) {
+      currentCounters.push(activeMatch.match.counter.id);
+    }
+
+    let matchPlayers: number[] = [];
+    matchPlayers.push(match.team1.player1.id);
+    if (match.team1.player2) matchPlayers.push(match.team1.player2.id);
+    matchPlayers.push(match.team2.player1.id);
+    if (match.team2.player2) matchPlayers.push(match.team2.player2.id);
+
+    let playersThatAreCounting = currentCounters.filter(Set.prototype.has, new Set(matchPlayers));
+    return playersThatAreCounting.length > 0;
+  }
+
   getAvailableCourts(): number[] {
     const maxCourts = this.tournament.courts;
     const activeCourts = this.activeMatches().map(activeMatch => activeMatch.match.court);
@@ -229,6 +263,21 @@ export class TournamentManageComponent implements OnInit, OnDestroy {
     return courts.filter(court => activeCourts.indexOf(court) < 0);
   }
 
+  getAvailableCounters(): TournamentPlayer[] {
+    const activePlayerIds = new Set(
+      this.activeMatches().flatMap(activeMatch => [
+        activeMatch.match.team1.player1.id,
+        activeMatch.match.team1.player2?.id,
+        activeMatch.match.team2.player1.id,
+        activeMatch.match.team2.player2?.id
+      ].filter(id => id !== undefined))
+    );
+
+    return this.tournament.tournamentPlayers.filter(
+      player => !player.counting && !activePlayerIds.has(player.playerId)
+    );
+  }
+
   stopMatch(match: Match) {
     this.tournamentService.stopMatch(this.tournament.id, match.id).subscribe(data => {
       this.tournament = data;
@@ -241,18 +290,6 @@ export class TournamentManageComponent implements OnInit, OnDestroy {
     })
   }
 
-  playerPaid($event: MatSlideToggleChange, playerId: number) {
-    this.tournamentService.playerPaid(this.tournament.id, playerId, $event.checked).subscribe(() => {
-      this._snackBar.open('Opgeslagen.');
-    });
-  }
-
-  playerPresent($event: MatSlideToggleChange, playerId: number) {
-    this.tournamentService.playerPresent(this.tournament.id, playerId, $event.checked).subscribe(() => {
-      this._snackBar.open('Opgeslagen.');
-    });
-  }
-
   getStrength(strength: string | undefined) {
     if (strength == undefined) return "";
     for (let [key, value] of Object.entries(Strength)) {

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

@@ -1,9 +1,4 @@
 @if (tournament) {
-<!--  <mat-card appearance="outlined" class="m-3">-->
-<!--    <mat-card-header>-->
-<!--      <h6>Toernooi</h6>-->
-<!--    </mat-card-header>-->
-<!--    <mat-card-content>-->
   <table class="table table-hover w-75 m-4">
     <thead>
     <tr>
@@ -48,7 +43,4 @@
       }
     </tbody>
   </table>
-
-<!--    </mat-card-content>-->
-<!--  </mat-card>-->
 }

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

@@ -0,0 +1,3 @@
+td, th {
+  background-color: transparent !important;
+}

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

@@ -1,5 +1,4 @@
 import {Component, OnInit} from '@angular/core';
-import {MatCard, MatCardContent, MatCardHeader} from "@angular/material/card";
 import {CurrencyPipe} from "@angular/common";
 import {MatSlideToggle, MatSlideToggleChange} from "@angular/material/slide-toggle";
 import {TournamentService} from "../../service/tournament.service";
@@ -11,10 +10,6 @@ import {MatSnackBar} from "@angular/material/snack-bar";
 @Component({
   selector: 'app-tournament-players',
   imports: [
-    MatCard,
-    MatCardContent,
-    MatCardHeader,
-    // MatIcon,
     CurrencyPipe,
     MatSlideToggle,
     FormsModule

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

@@ -1,7 +1,7 @@
 @if (tournamentValidation && tournament) {
   <mat-card appearance="outlined" class="m-3">
     <mat-card-header>
-      <h6>Toernooi</h6>
+      <h6>Toernooi ({{ getTournamentMatchCount(tournament)}} wedstrijden)</h6>
     </mat-card-header>
     <mat-card-content>
       <mat-expansion-panel [disabled]="tournamentValidation.validations.length == 0">
@@ -24,7 +24,7 @@
   @for (event of tournament.events; track event.id) {
     <mat-card appearance="outlined" class="m-3">
       <mat-card-header>
-        <h6>{{ TournamentEvent.getType(event.type) }}</h6>
+        <h6>{{ TournamentEvent.getType(event.type) }} ({{ getEventMatchCount(event)}} wedstrijden)</h6>
       </mat-card-header>
       <mat-card-content>
         <mat-accordion multi="true">

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

@@ -98,4 +98,24 @@ export class TournamentValidateComponent implements OnInit {
     return hasErrors;
   }
 
+  getEventMatchCount(event: Event) {
+    let numTeams = 0;
+    if (event.doublesEvent) {
+      numTeams = event.registrations.length / 2;
+    } else {
+      numTeams = event.registrations.length;
+    }
+    let rounds = numTeams <= 4 ? 3 : 4;
+    let matchesPerRound = Math.trunc(numTeams / 2);
+
+    return rounds * matchesPerRound;
+  }
+
+  getTournamentMatchCount(tournament: Tournament) {
+    let count = 0;
+    for (let event of tournament.events) {
+      count += this.getEventMatchCount(event);
+    }
+    return count;
+  }
 }

src/app/model/match.ts

@@ -1,5 +1,6 @@
 import { Team } from "./team";
 import {Game} from "./game";
+import {Player} from "./player";
 
 export class Match {
   id: number;
@@ -11,4 +12,5 @@ export class Match {
   endTime: Date;
   games: Game[];
   court: number;
+  counter: Player;
 }

src/app/model/tournamentPlayer.ts

@@ -5,4 +5,6 @@ export class TournamentPlayer {
   events: string[];
   paid: boolean;
   present: boolean;
+  counting: boolean;
+  counts: number;
 }

src/app/pipes/team-pipe.ts

@@ -10,10 +10,8 @@ export class TeamPipe implements PipeTransform {
 
   transform(team: any, args?: any): any {
     if (team.player2 != null) {
-      // return this.player1.getFullName() + " / " + this.player2.getFullName();
       return this.fullNamePipe.transform(team.player1) + " / " + this.fullNamePipe.transform(team.player2);
     }
-    // return this.player1.getFullName();
     return this.fullNamePipe.transform(team.player1);
   }
 }

src/app/service/tournament.service.ts

@@ -72,8 +72,8 @@ export class TournamentService {
     return this.http.post<Tournament>(`${this.tournamentsUrl}/${tournamentId}/groups/${groupId}/new`, null);
   }
 
-  public startMatch(tournamentId: number, matchId: number, court: number): Observable<Tournament> {
-    return this.http.post<Tournament>(`${this.tournamentsUrl}/${tournamentId}/matches/${matchId}/start/${court}`, null);
+  public startMatch(tournamentId: number, matchId: number, court: number, counter: number): Observable<Tournament> {
+    return this.http.post<Tournament>(`${this.tournamentsUrl}/${tournamentId}/matches/${matchId}/start?court=${court}&counter=${counter}`, null);
   }
 
   public stopMatch(tournamentId: number, matchId: number): Observable<Tournament> {