connected-it/swiss-client
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Removed *ngFor
All checks were successful
Gitea/swiss-client/pipeline/head This commit looks good
Details

Browse Source
This commit is contained in:
Michel ten Voorde
2025-08-12 23:32:32 +02:00
parent af96ecda32
commit f88cd94316
25 changed files with 463 additions and 430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/components/court-selection/court-selection.component.html
View File

@@ -1,10 +1,11 @@
<h2 mat-dialog-title>Kies een baan:</h2> <h2 mat-dialog-title>Kies een baan:</h2>
<mat-dialog-content> <mat-dialog-content>
<button type="button" class="btn {{ data.availableCourts.indexOf(i + 1) < 0 ? 'btn-secondary' : 'btn-primary' }} btn-lg m-3" @for (item of [].constructor(data.totalCourts); track item) {
*ngFor="let item of [].constructor(data.totalCourts); let i = index" <button type="button" class="btn {{ data.availableCourts.indexOf($index + 1) < 0 ? 'btn-secondary' : 'btn-primary' }} btn-lg m-3"
[disabled]="data.availableCourts.indexOf(i + 1) < 0" [mat-dialog-close]="i + 1"> [disabled]="data.availableCourts.indexOf($index + 1) < 0" [mat-dialog-close]="$index + 1">
{{ i + 1 }} {{ $index + 1 }}
</button> </button>
}
<br> <br>
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions> <mat-dialog-actions>

2
src/app/components/court-selection/court-selection.component.ts
View File

@@ -7,7 +7,6 @@ import {
MatDialogTitle MatDialogTitle
} from "@angular/material/dialog"; } from "@angular/material/dialog";
import {Match} from "../../model/match"; import {Match} from "../../model/match";
import {NgForOf} from "@angular/common";
import {MatButton} from "@angular/material/button"; import {MatButton} from "@angular/material/button";
@Component({ @Component({
@@ -15,7 +14,6 @@ import {MatButton} from "@angular/material/button";
imports: [ imports: [
MatDialogTitle, MatDialogTitle,
MatDialogContent, MatDialogContent,
NgForOf,
MatButton, MatButton,
MatDialogClose, MatDialogClose,
MatDialogActions MatDialogActions

10
src/app/components/match-result/match-result.component.ts
View File

@@ -3,19 +3,19 @@ import {
MAT_DIALOG_DATA, MAT_DIALOG_DATA,
MatDialogActions, MatDialogActions,
MatDialogClose, MatDialogClose,
MatDialogContent, MatDialogRef, MatDialogContent,
MatDialogRef,
MatDialogTitle MatDialogTitle
} from "@angular/material/dialog"; } from "@angular/material/dialog";
import {MatButton, MatIconButton} from "@angular/material/button"; import {MatButton} from "@angular/material/button";
import {DatePipe, NgClass, NgForOf} from "@angular/common"; import {NgClass} from "@angular/common";
import {MatIcon} from "@angular/material/icon";
import {TeamPipe} from "../../pipes/team-pipe"; import {TeamPipe} from "../../pipes/team-pipe";
import {FullNamePipe} from "../../pipes/fullname-pipe"; import {FullNamePipe} from "../../pipes/fullname-pipe";
import {Match} from "../../model/match"; import {Match} from "../../model/match";
import {MatFormField, MatInput} from "@angular/material/input"; import {MatFormField, MatInput} from "@angular/material/input";
import {FormsModule, ReactiveFormsModule} from "@angular/forms"; import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {Result} from "../../model/result"; import {Result} from "../../model/result";
import {MatGridList, MatGridTile, MatGridTileText} from "@angular/material/grid-list"; import {MatGridList, MatGridTile} from "@angular/material/grid-list";
import {Round} from "../../model/round"; import {Round} from "../../model/round";
import {Group} from "../../model/group"; import {Group} from "../../model/group";
import {Game} from "../../model/game"; import {Game} from "../../model/game";

5
src/app/components/match-sheets/match-sheets.component.html
View File

@@ -1,5 +1,5 @@
@if (round) { @if (round) {
<ng-container *ngFor="let match of round.matches"> @for (match of round.matches; track match.id) {
<div class="nobreak"> <div class="nobreak">
<mat-card appearance="outlined"> <mat-card appearance="outlined">
<mat-card-content> <mat-card-content>
@@ -54,10 +54,9 @@
{{ group.name }} {{ round.name }} {{ group.name }} {{ round.name }}
</div> </div>
</div> </div>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
</div> </div>
<br> <br>
</ng-container> }
} }

2
src/app/components/match-sheets/match-sheets.component.ts
View File

@@ -7,7 +7,6 @@ import {Round} from "../../model/round";
import {TeamPipe} from "../../pipes/team-pipe"; import {TeamPipe} from "../../pipes/team-pipe";
import {FullNamePipe} from "../../pipes/fullname-pipe"; import {FullNamePipe} from "../../pipes/fullname-pipe";
import {Group} from "../../model/group"; import {Group} from "../../model/group";
import {NgForOf} from "@angular/common";
import {MatFormField} from "@angular/material/form-field"; import {MatFormField} from "@angular/material/form-field";
import {MatInput} from "@angular/material/input"; import {MatInput} from "@angular/material/input";
import {ReactiveFormsModule} from "@angular/forms"; import {ReactiveFormsModule} from "@angular/forms";
@@ -19,7 +18,6 @@ import {TitleService} from "../../service/title.service";
MatCard, MatCard,
MatCardContent, MatCardContent,
TeamPipe, TeamPipe,
NgForOf,
MatFormField, MatFormField,
MatInput, MatInput,
ReactiveFormsModule ReactiveFormsModule

8
src/app/components/player-edit/player-edit.component.html
View File

@@ -60,9 +60,11 @@
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<mat-label>Speelsterkte</mat-label> <mat-label>Speelsterkte</mat-label>
<mat-select [(ngModel)]="player.strength" name="strength" required> <mat-select [(ngModel)]="player.strength" name="strength" required>
<mat-option *ngFor="let strengthOption of Strength | keyvalue" [value]="strengthOption.key"> @for (strengthOption of Strength | keyvalue; track strengthOption) {
{{ strengthOption.value }} <mat-option [value]="strengthOption.key">
</mat-option> {{ strengthOption.value }}
</mat-option>
}
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</div> </div>

3
src/app/components/player-edit/player-edit.component.ts
View File

@@ -9,7 +9,7 @@ import {MatIcon} from "@angular/material/icon";
import {MatRadioButton, MatRadioGroup} from "@angular/material/radio"; import {MatRadioButton, MatRadioGroup} from "@angular/material/radio";
import {MatCard, MatCardActions, MatCardContent} from "@angular/material/card"; import {MatCard, MatCardActions, MatCardContent} from "@angular/material/card";
import {MatOption, MatSelect} from "@angular/material/select"; import {MatOption, MatSelect} from "@angular/material/select";
import {KeyValuePipe, NgForOf} from "@angular/common"; import {KeyValuePipe} from "@angular/common";
import {MatAnchor, MatButton} from "@angular/material/button"; import {MatAnchor, MatButton} from "@angular/material/button";
import {TitleService} from "../../service/title.service"; import {TitleService} from "../../service/title.service";
import {MatSnackBar} from "@angular/material/snack-bar"; import {MatSnackBar} from "@angular/material/snack-bar";
@@ -33,7 +33,6 @@ import {NgxMaskDirective} from "ngx-mask";
MatSelect, MatSelect,
MatOption, MatOption,
KeyValuePipe, KeyValuePipe,
NgForOf,
MatButton, MatButton,
MatAnchor, MatAnchor,
ReactiveFormsModule, ReactiveFormsModule,

90
src/app/components/player-registrations/player-registrations.component.html
View File

@@ -1,50 +1,54 @@
@if (player && tournamentRegistrations && allPlayers) { @if (player && tournamentRegistrations && allPlayers) {
<mat-card appearance="outlined"> <mat-card appearance="outlined">
<mat-card-content> <mat-card-content>
<mat-card *ngFor="let tournamentRegistration of getTournamentRegistrations()" appearance="outlined" class="mb-3"> @for (tournamentRegistration of getTournamentRegistrations(); track tournamentRegistration.id) {
<mat-card-header> <mat-card appearance="outlined" class="mb-3">
<h6>{{ tournamentRegistration.name }}</h6> <mat-card-header>
</mat-card-header> <h6>{{ tournamentRegistration.name }}</h6>
<mat-card-content> </mat-card-header>
<ng-container *ngFor="let eventRegistration of tournamentRegistration.events"> <mat-card-content>
<div class="row event-row"> @for (eventRegistration of tournamentRegistration.events; track eventRegistration.id) {
<div class="col-md-2"> <div class="row event-row">
<mat-checkbox [disabled]="!tournamentRegistration.editable" [(ngModel)]="eventRegistration.registered" (change)="updateModelWhenEventChecked(eventRegistration, $event)" name="registered"> <div class="col-md-2">
{{ EventRegistration.getType(eventRegistration.type) }} <mat-checkbox [disabled]="!tournamentRegistration.editable" [(ngModel)]="eventRegistration.registered" (change)="updateModelWhenEventChecked(eventRegistration, $event)" name="registered">
</mat-checkbox> {{ EventRegistration.getType(eventRegistration.type) }}
</mat-checkbox>
</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">
<mat-option>Geen</mat-option>
@for (player of getRelevantPlayers(eventRegistration.type); track player.id) {
<mat-option [value]="player.id">
{{ player | fullName }}
</mat-option>
}
</mat-select>
</mat-form-field>
</ng-container>
}
</div>
<div class="col-6"></div>
</div> </div>
<div class="col-md-4"> }
@if (eventRegistration.doublesEvent) { </mat-card-content>
<ng-container> @if (tournamentRegistration.editable) {
<mat-form-field appearance="fill"> <mat-card-actions>
<mat-label>Partner</mat-label> <button mat-button (click)="saveRegistration(tournamentRegistration, $event)" [disabled]="waitingForBackend">
<mat-select [value]="eventRegistration.partner" [disabled]="!tournamentRegistration.editable || !eventRegistration.registered" [(ngModel)]="eventRegistration.partner"> <mat-icon>save</mat-icon>
<mat-option>Geen</mat-option> Opslaan
<mat-option *ngFor="let player of getRelevantPlayers(eventRegistration.type)" [value]="player.id"> </button>
{{ player | fullName }} <a mat-button routerLink="/players">
</mat-option> <mat-icon>cancel</mat-icon>
</mat-select> Annuleren
</mat-form-field> </a>
</ng-container> </mat-card-actions>
} }
</div> </mat-card>
<div class="col-6"></div> }
</div>
</ng-container>
</mat-card-content>
@if (tournamentRegistration.editable) {
<mat-card-actions>
<button mat-button (click)="saveRegistration(tournamentRegistration, $event)" [disabled]="waitingForBackend">
<mat-icon>save</mat-icon>
Opslaan
</button>
<a mat-button routerLink="/players">
<mat-icon>cancel</mat-icon>
Annuleren
</a>
</mat-card-actions>
}
</mat-card>
@if (!this.showAll) { @if (!this.showAll) {
<button mat-button (click)="this.showAll = true"> <button mat-button (click)="this.showAll = true">
<mat-icon>search</mat-icon> <mat-icon>search</mat-icon>

3
src/app/components/player-registrations/player-registrations.component.ts
View File

@@ -6,7 +6,6 @@ import {MatCard, MatCardActions, MatCardContent, MatCardHeader} from "@angular/m
import {MatFormField, MatLabel} from "@angular/material/form-field"; import {MatFormField, MatLabel} from "@angular/material/form-field";
import {FormsModule, ReactiveFormsModule} from "@angular/forms"; import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {RegistrationService} from "../../service/registration.service"; import {RegistrationService} from "../../service/registration.service";
import {NgFor, NgIf} from "@angular/common";
import {MatCheckbox, MatCheckboxChange} from "@angular/material/checkbox"; import {MatCheckbox, MatCheckboxChange} from "@angular/material/checkbox";
import {EventRegistration, TournamentRegistration} from "../../model/tournamentRegistration"; import {EventRegistration, TournamentRegistration} from "../../model/tournamentRegistration";
import {MatOption} from "@angular/material/core"; import {MatOption} from "@angular/material/core";
@@ -25,11 +24,9 @@ import {TitleService} from "../../service/title.service";
MatCardHeader, MatCardHeader,
MatFormField, MatFormField,
MatLabel, MatLabel,
NgFor,
ReactiveFormsModule, ReactiveFormsModule,
FormsModule, FormsModule,
MatCheckbox, MatCheckbox,
NgIf,
MatCardActions, MatCardActions,
RouterLink, RouterLink,
MatOption, MatOption,

84
src/app/components/round-overview/round-overview.component.html
View File

@@ -3,12 +3,14 @@
@if (round.status != 'FINISHED') { @if (round.status != 'FINISHED') {
<table class="table table-sm m-4 wide w-100"> <table class="table table-sm m-4 wide w-100">
<tbody> <tbody>
<tr *ngFor="let match of round.matches"> @for (match of round.matches; track match.id) {
<td class="align-middle" style="width: 45%;">{{ match.team1 | teamText }}</td> <tr>
<td class="align-middle w-sep">-</td> <td class="align-middle" style="width: 45%;">{{ match.team1 | teamText }}</td>
<td class="align-middle" style="width: 45%;">{{ match.team2 | teamText }}</td> <td class="align-middle w-sep">-</td>
<td class="align-middle w-sep"></td> <td class="align-middle" style="width: 45%;">{{ match.team2 | teamText }}</td>
</tr> <td class="align-middle w-sep"></td>
</tr>
}
@if (round.drawnOut) { @if (round.drawnOut) {
<tr> <tr>
<td class="align-middle w-100" colspan="4"><b>Deze ronde uitgeloot:</b> {{ round.drawnOut | teamText }}</td> <td class="align-middle w-100" colspan="4"><b>Deze ronde uitgeloot:</b> {{ round.drawnOut | teamText }}</td>
@@ -19,30 +21,34 @@
} @else { } @else {
<table class="table table-sm m-4 wide w-100"> <table class="table table-sm m-4 wide w-100">
<tbody> <tbody>
<tr *ngFor="let match of round.matches"> @for (match of round.matches; track match.id) {
<td class="align-middle" style="width: 30%;"> <tr>
@if (event.doublesEvent) { <td class="align-middle" style="width: 30%;">
{{ match.team1.player1 | fullName }} /<br>{{ match.team1.player2 | fullName }} @if (event.doublesEvent) {
} @else { {{ match.team1.player1 | fullName }} /<br>{{ match.team1.player2 | fullName }}
{{ match.team1.player1 | fullName }} } @else {
} {{ match.team1.player1 | fullName }}
<td class="align-middle w-sep">-</td> }
<td class="align-middle" style="width: 30%;"> <td class="align-middle w-sep">-</td>
@if (event.doublesEvent) { <td class="align-middle" style="width: 30%;">
{{ match.team2.player1 | fullName }} /<br>{{ match.team2.player2 | fullName }} @if (event.doublesEvent) {
} @else { {{ match.team2.player1 | fullName }} /<br>{{ match.team2.player2 | fullName }}
{{ match.team2.player1 | fullName }} } @else {
} {{ match.team2.player1 | fullName }}
</td> }
<td class="align-middle" style="width: 35%;"> </td>
<div class="row result align-items-center"> <td class="align-middle" style="width: 35%;">
<span *ngFor="let game of match.games" class="col-3">{{ game.score1 }}-{{ game.score2 }}</span> <div class="row result align-items-center">
@if (match.games.length == 2) { @for (game of match.games; track game.id) {
<span class="col-3"></span> <span class="col-3">{{ game.score1 }}-{{ game.score2 }}</span>
} }
</div> @if (match.games.length == 2) {
</td> <span class="col-3"></span>
</tr> }
</div>
</td>
</tr>
}
@if (round.drawnOut) { @if (round.drawnOut) {
<tr> <tr>
<td class="align-middle w-100" colspan="4"><b>Deze ronde uitgeloot:</b> {{ round.drawnOut | teamText }}</td> <td class="align-middle w-100" colspan="4"><b>Deze ronde uitgeloot:</b> {{ round.drawnOut | teamText }}</td>
@@ -78,14 +84,16 @@
</tr> </tr>
</thead> </thead>
<tbody class="table-group-divider"> <tbody class="table-group-divider">
<tr *ngFor="let entry of round.standings.entries"> @for (entry of round.standings.entries; track entry.position) {
<td class="align-middle">{{ entry.position }}</td> <tr>
<td class="align-middle">{{ entry.team | teamText }}</td> <td class="align-middle">{{ entry.position }}</td>
<td class="align-middle">{{ entry.played }}</td> <td class="align-middle">{{ entry.team | teamText }}</td>
<td class="align-middle">{{ entry.points / entry.played | number: '1.0-2' }}</td> <td class="align-middle">{{ entry.played }}</td>
<td class="align-middle">{{ (entry.gamesWon - entry.gamesLost) / entry.played | number: '1.0-2' }}</td> <td class="align-middle">{{ entry.points / entry.played | number: '1.0-2' }}</td>
<td class="align-middle">{{ (entry.pointsWon - entry.pointsLost) / entry.played | number: '1.0-2' }}</td> <td class="align-middle">{{ (entry.gamesWon - entry.gamesLost) / entry.played | number: '1.0-2' }}</td>
</tr> <td class="align-middle">{{ (entry.pointsWon - entry.pointsLost) / entry.played | number: '1.0-2' }}</td>
</tr>
}
</tbody> </tbody>
</table> </table>
} }

3
src/app/components/round-overview/round-overview.component.ts
View File

@@ -5,7 +5,7 @@ import {Group} from "../../model/group";
import {Round} from "../../model/round"; import {Round} from "../../model/round";
import {TournamentService} from "../../service/tournament.service"; import {TournamentService} from "../../service/tournament.service";
import {ActivatedRoute, Router} from "@angular/router"; import {ActivatedRoute, Router} from "@angular/router";
import {DecimalPipe, NgForOf} from "@angular/common"; import {DecimalPipe} from "@angular/common";
import {TeamPipe} from "../../pipes/team-pipe"; import {TeamPipe} from "../../pipes/team-pipe";
import {FullNamePipe} from "../../pipes/fullname-pipe"; import {FullNamePipe} from "../../pipes/fullname-pipe";
import {TitleService} from "../../service/title.service"; import {TitleService} from "../../service/title.service";
@@ -13,7 +13,6 @@ import {TitleService} from "../../service/title.service";
@Component({ @Component({
selector: 'app-round-overview', selector: 'app-round-overview',
imports: [ imports: [
NgForOf,
TeamPipe, TeamPipe,
DecimalPipe, DecimalPipe,
FullNamePipe FullNamePipe

90
src/app/components/tournament-divide/tournament-divide.component.html
View File

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

3
src/app/components/tournament-divide/tournament-divide.component.ts
View File

@@ -3,7 +3,6 @@ import {Tournament} from "../../model/tournament";
import {TournamentService} from "../../service/tournament.service"; import {TournamentService} from "../../service/tournament.service";
import {ActivatedRoute, Router} from "@angular/router"; import {ActivatedRoute, Router} from "@angular/router";
import {MatCard, MatCardContent, MatCardHeader} from "@angular/material/card"; import {MatCard, MatCardContent, MatCardHeader} from "@angular/material/card";
import {NgForOf, NgIf} from "@angular/common";
import { import {
MatAccordion, MatAccordion,
MatExpansionPanel, MatExpansionPanel,
@@ -19,12 +18,10 @@ import {FullNamePipe} from "../../pipes/fullname-pipe";
imports: [ imports: [
MatCard, MatCard,
MatCardHeader, MatCardHeader,
NgIf,
MatCardContent, MatCardContent,
MatExpansionPanel, MatExpansionPanel,
MatExpansionPanelTitle, MatExpansionPanelTitle,
MatExpansionPanelHeader, MatExpansionPanelHeader,
NgForOf,
FullNamePipe, FullNamePipe,
MatAccordion MatAccordion
], ],

70
src/app/components/tournament-draw/tournament-draw.component.html
View File

@@ -4,38 +4,44 @@
<h5>Loting voor {{ tournament.name }}</h5> <h5>Loting voor {{ tournament.name }}</h5>
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<mat-card *ngFor="let event of tournament.events" appearance="outlined" class="m-3"> @for (event of tournament.events; track event.id) {
<mat-card-header> <mat-card appearance="outlined" class="m-3">
<h6>Loting {{ TournamentEvent.getType(event.type) }}</h6> <mat-card-header>
</mat-card-header> <h6>Loting {{ TournamentEvent.getType(event.type) }}</h6>
<mat-card-content> </mat-card-header>
<mat-accordion multi="true"> <mat-card-content>
<mat-expansion-panel *ngFor="let group of event.groups"> <mat-accordion multi="true">
<mat-expansion-panel-header> @for (group of event.groups; track group.id) {
<mat-panel-title> <mat-expansion-panel>
{{ group.name }}&nbsp;<span class="badge text-bg-success">{{ group.teams.length }}</span> <mat-expansion-panel-header>
</mat-panel-title> <mat-panel-title>
</mat-expansion-panel-header> {{ group.name }}&nbsp;<span class="badge text-bg-success">{{ group.teams.length }}</span>
<table class="table {{ event.doublesEvent ? 'w-100' : 'w-50' }}"> </mat-panel-title>
<thead class="thead-dark"> </mat-expansion-panel-header>
<tr> <table class="table {{ event.doublesEvent ? 'w-100' : 'w-50' }}">
<th scope="col" class="w-25">Team 1</th> <thead class="thead-dark">
<th scope="col" style="width: 5%">-</th> <tr>
<th scope="col" class="w-25">Team 2</th> <th scope="col" class="w-25">Team 1</th>
</tr> <th scope="col" style="width: 5%">-</th>
</thead> <th scope="col" class="w-25">Team 2</th>
<tbody> </tr>
<tr *ngFor="let match of group.rounds[0].matches"> </thead>
<td class="align-middle">{{ match.team1 | teamText }}</td> <tbody>
<td class="align-middle">-</td> @for (match of group.rounds[0].matches; track match.id) {
<td class="align-middle">{{ match.team2 | teamText }}</td> <tr>
</tr> <td class="align-middle">{{ match.team1 | teamText }}</td>
</tbody> <td class="align-middle">-</td>
</table> <td class="align-middle">{{ match.team2 | teamText }}</td>
</mat-expansion-panel> </tr>
</mat-accordion> }
</mat-card-content> </tbody>
</mat-card> </table>
</mat-expansion-panel>
}
</mat-accordion>
</mat-card-content>
</mat-card>
}
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
} }

3
src/app/components/tournament-draw/tournament-draw.component.ts
View File

@@ -3,7 +3,6 @@ import {Tournament} from "../../model/tournament";
import {TournamentService} from "../../service/tournament.service"; import {TournamentService} from "../../service/tournament.service";
import {ActivatedRoute, Router} from "@angular/router"; import {ActivatedRoute, Router} from "@angular/router";
import {MatCard, MatCardContent, MatCardHeader} from "@angular/material/card"; import {MatCard, MatCardContent, MatCardHeader} from "@angular/material/card";
import {NgForOf, NgIf} from "@angular/common";
import { import {
MatAccordion, MatAccordion,
MatExpansionPanel, MatExpansionPanel,
@@ -18,13 +17,11 @@ import {FullNamePipe} from "../../pipes/fullname-pipe";
selector: 'app-tournament-draw', selector: 'app-tournament-draw',
imports: [ imports: [
MatCard, MatCard,
NgIf,
MatCardContent, MatCardContent,
MatCardHeader, MatCardHeader,
MatExpansionPanel, MatExpansionPanel,
MatExpansionPanelHeader, MatExpansionPanelHeader,
MatExpansionPanelTitle, MatExpansionPanelTitle,
NgForOf,
TeamPipe, TeamPipe,
MatAccordion MatAccordion
], ],

4
src/app/components/tournament-list/tournament-list.component.html
View File

@@ -11,7 +11,7 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@for (tournament of getActiveTournaments(); track tournament) { @for (tournament of getActiveTournaments(); track tournament.id) {
<tr> <tr>
<td class="align-middle">{{ tournament.id }}</td> <td class="align-middle">{{ tournament.id }}</td>
<td class="align-middle"><a [routerLink]="['/tournaments', tournament.id, 'manage']">{{ tournament.name }}</a></td> <td class="align-middle"><a [routerLink]="['/tournaments', tournament.id, 'manage']">{{ tournament.name }}</a></td>
@@ -38,7 +38,7 @@
</tr> </tr>
} }
@if (showInactive) { @if (showInactive) {
@for (tournament of getInactiveTournaments(); track tournament) { @for (tournament of getInactiveTournaments(); track tournament.id) {
<tr> <tr>
<td class="align-middle">{{ tournament.id }}</td> <td class="align-middle">{{ tournament.id }}</td>
<td class="align-middle"><a [routerLink]="['/tournaments', tournament.id, 'manage']">{{ tournament.name }}</a></td> <td class="align-middle"><a [routerLink]="['/tournaments', tournament.id, 'manage']">{{ tournament.name }}</a></td>

3
src/app/components/tournament-list/tournament-list.component.ts
View File

@@ -1,5 +1,4 @@
import {AfterContentChecked, Component, OnInit} from '@angular/core'; import {AfterContentChecked, Component, OnInit} from '@angular/core';
import {NgFor, NgIf} from "@angular/common";
import {RouterLink} from "@angular/router"; import {RouterLink} from "@angular/router";
import {Tournament} from "../../model/tournament"; import {Tournament} from "../../model/tournament";
import {TournamentService} from "../../service/tournament.service"; import {TournamentService} from "../../service/tournament.service";
@@ -12,7 +11,7 @@ import {TitleService} from "../../service/title.service";
@Component({ @Component({
selector: 'app-tournament-list', selector: 'app-tournament-list',
imports: [ imports: [
NgFor, RouterLink, NgIf, MatAnchor, MatIcon, MatCard, MatCardContent, MatButton, MatTableModule RouterLink, MatAnchor, MatIcon, MatCard, MatCardContent, MatButton, MatTableModule
], ],
templateUrl: './tournament-list.component.html', templateUrl: './tournament-list.component.html',
styleUrl: './tournament-list.component.scss' styleUrl: './tournament-list.component.scss'

313
src/app/components/tournament-manage/tournament-manage.component.html
View File

@@ -51,7 +51,7 @@
<h6>Totaal: {{ getTournamentMatchCount(tournament)}} wedstrijden</h6> <h6>Totaal: {{ getTournamentMatchCount(tournament)}} wedstrijden</h6>
</mat-card-header> </mat-card-header>
</mat-card> </mat-card>
@for (event of tournament.events; track event) { @for (event of tournament.events; track event.id) {
@if (event.groups.length > 0) { @if (event.groups.length > 0) {
<mat-card appearance="outlined" class="m-3"> <mat-card appearance="outlined" class="m-3">
<mat-card-header> <mat-card-header>
@@ -59,39 +59,43 @@
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<mat-accordion multi="true"> <mat-accordion multi="true">
<mat-expansion-panel *ngFor="let group of event.groups"> @for (group of event.groups; track group.id) {
<mat-expansion-panel-header> <mat-expansion-panel>
<mat-panel-title> <mat-expansion-panel-header>
{{ group.name }}&nbsp;<span class="badge text-bg-success">{{ group.teams.length }}</span> <mat-panel-title>
</mat-panel-title> {{ group.name }}&nbsp;<span class="badge text-bg-success">{{ group.teams.length }}</span>
</mat-expansion-panel-header> </mat-panel-title>
<table class="table {{ event.doublesEvent ? 'w-100' : 'w-50' }}"> </mat-expansion-panel-header>
<thead class="thead-dark"> <table class="table {{ event.doublesEvent ? 'w-100' : 'w-50' }}">
<tr> <thead class="thead-dark">
<th scope="col" class="w-20">Naam</th> <tr>
<th scope="col" class="w-20">Club</th> <th scope="col" class="w-20">Naam</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-20">Club</th>
<th scope="col" class="w-10">Speelsterkte</th> <th scope="col" class="w-10">Speelsterkte</th>
} @if (event.doublesEvent) {
</tr> <th scope="col" class="w-20">Partner</th>
</thead> <th scope="col" class="w-20">Club</th>
<tbody> <th scope="col" class="w-10">Speelsterkte</th>
<tr *ngFor="let team of group.teams"> }
<td class="align-middle">{{ team.player1 | fullName }}</td> </tr>
<td class="align-middle">{{ team.player1.club }}</td> </thead>
<td class="align-middle">{{ getStrength(team.player1.strength.valueOf()) }}</td> <tbody>
@if (event.doublesEvent) { @for (team of group.teams; track team.id) {
<td class="align-middle">{{ team.player2 | fullName }}</td> <tr>
<td class="align-middle">{{ team.player2?.club }}</td> <td class="align-middle">{{ team.player1 | fullName }}</td>
<td class="align-middle">{{ getStrength(team.player2?.strength?.valueOf()) }}</td> <td class="align-middle">{{ team.player1.club }}</td>
} <td class="align-middle">{{ getStrength(team.player1.strength.valueOf()) }}</td>
</tr> @if (event.doublesEvent && team.player2) {
</tbody> <td class="align-middle">{{ team.player2 | fullName }}</td>
</table> <td class="align-middle">{{ team.player2.club }}</td>
</mat-expansion-panel> <td class="align-middle">{{ getStrength(team.player2.strength.valueOf()) }}</td>
}
</tr>
}
</tbody>
</table>
</mat-expansion-panel>
}
</mat-accordion> </mat-accordion>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
@@ -167,8 +171,8 @@
</ng-template> </ng-template>
<mat-tab-group animationDuration="0ms" disableRipple="true"> <mat-tab-group animationDuration="0ms" disableRipple="true">
<ng-container *ngFor="let event of tournament.events"> @for (event of tournament.events; track event.id) {
<ng-container *ngFor="let group of event.groups"> @for (group of event.groups; track group.id) {
<mat-tab label="{{group.id}}"> <mat-tab label="{{group.id}}">
<ng-template mat-tab-label> <ng-template mat-tab-label>
<!--<mat-icon>list</mat-icon>&nbsp;--> <!--<mat-icon>list</mat-icon>&nbsp;-->
@@ -205,7 +209,7 @@
disableRipple="true" disableRipple="true"
[(selectedIndex)]="activeRoundTab" [(selectedIndex)]="activeRoundTab"
(selectedTabChange)="onRoundTabChange($event)"> (selectedTabChange)="onRoundTabChange($event)">
<ng-container *ngFor="let round of group.rounds; index as roundIndex"> @for (round of group.rounds; track round.id; let roundIndex = $index) {
<mat-tab label="{{round.id}}"> <mat-tab label="{{round.id}}">
<ng-template mat-tab-label> <ng-template mat-tab-label>
<mat-icon>{{ getRoundIcon(round.status) }}</mat-icon> <mat-icon>{{ getRoundIcon(round.status) }}</mat-icon>
@@ -249,61 +253,67 @@
@if (round.status == 'NOT_STARTED') { @if (round.status == 'NOT_STARTED') {
<table class="table table-hover m-4 wide w-100"> <table class="table table-hover m-4 wide w-100">
<tbody> <tbody>
<tr *ngFor="let match of round.matches"> @for (match of round.matches; track match.id) {
<td class="align-middle w-team">{{ match.team1 | teamText }}</td> <tr>
<td class="align-middle w-sep">-</td> <td class="align-middle w-team">{{ match.team1 | teamText }}</td>
<td class="align-middle w-team">{{ match.team2 | teamText }}</td> <td class="align-middle w-sep">-</td>
<td class="align-middle w-fill"></td> <td class="align-middle w-team">{{ match.team2 | teamText }}</td>
</tr> <td class="align-middle w-fill"></td>
@if (round.drawnOut) { </tr>
<tr> }
<td class="align-middle w-100" colspan="4"><b>Deze ronde uitgeloot:</b> {{ round.drawnOut | teamText }}</td> @if (round.drawnOut) {
</tr> <tr>
} <td class="align-middle w-100" colspan="4"><b>Deze ronde uitgeloot:</b> {{ round.drawnOut | teamText }}</td>
</tr>
}
</tbody> </tbody>
</table> </table>
} @else if (round.status == 'IN_PROGRESS') { } @else if (round.status == 'IN_PROGRESS') {
<table class="table table-hover m-4 wide w-100"> <table class="table table-hover m-4 wide w-100">
<tbody> <tbody>
<tr *ngFor="let match of round.matches"> @for (match of round.matches; track match.id) {
<td class="align-middle w-team" [ngClass]="{'winner': checkWinner(match) == 1}">{{ match.team1 | teamText }}</td> <tr>
<td class="align-middle w-sep">-</td> <td class="align-middle w-team" [ngClass]="{'winner': checkWinner(match) == 1}">{{ match.team1 | teamText }}</td>
<td class="align-middle w-team" [ngClass]="{'winner': checkWinner(match) == 2}">{{ match.team2 | teamText }}</td> <td class="align-middle w-sep">-</td>
<td class="align-middle w-fill"> <td class="align-middle w-team" [ngClass]="{'winner': checkWinner(match) == 2}">{{ match.team2 | teamText }}</td>
@if (match.status == 'NOT_STARTED') { <td class="align-middle w-fill">
<button mat-button (click)="startMatch(match)"> @if (match.status == 'NOT_STARTED') {
<mat-icon>play_arrow</mat-icon> <button mat-button (click)="startMatch(match)">
Wedstrijd starten <mat-icon>play_arrow</mat-icon>
</button> Wedstrijd starten
} @else if (match.status == 'IN_PROGRESS') {
<button mat-button (click)="editResult(match, group, round)">
<mat-icon>edit</mat-icon>
Uitslag invoeren
</button>
<button mat-button (click)="stopMatch(match)">
<mat-icon>stop</mat-icon>
Wedstrijd stoppen
</button>
} @else if (match.status == 'FINISHED') {
<div class="row result align-items-center">
<span *ngFor="let game of match.games" class="col-2">{{ game.score1 }}-{{ game.score2 }}</span>
@if (match.games.length == 2) {
<span class="col-2"></span>
}
<button mat-icon-button [matMenuTriggerFor]="finishedMatchMenu" class="menu-button m-3">
<mat-icon>more_vert</mat-icon>
</button> </button>
<mat-menu #finishedMatchMenu="matMenu"> } @else if (match.status == 'IN_PROGRESS') {
<button mat-menu-item (click)="editResult(match, group, round)"> <button mat-button (click)="editResult(match, group, round)">
<mat-icon>edit</mat-icon> <mat-icon>edit</mat-icon>
Uitslag bewerken Uitslag invoeren
</button>
<button mat-button (click)="stopMatch(match)">
<mat-icon>stop</mat-icon>
Wedstrijd stoppen
</button>
} @else if (match.status == 'FINISHED') {
<div class="row result align-items-center">
@for (game of match.games; track game.id) {
<span class="col-2">{{ game.score1 }}-{{ game.score2 }}</span>
}
@if (match.games.length == 2) {
<span class="col-2"></span>
}
<button mat-icon-button [matMenuTriggerFor]="finishedMatchMenu" class="menu-button m-3">
<mat-icon>more_vert</mat-icon>
</button> </button>
</mat-menu> <mat-menu #finishedMatchMenu="matMenu">
</div> <button mat-menu-item (click)="editResult(match, group, round)">
} <mat-icon>edit</mat-icon>
</td> Uitslag bewerken
</tr> </button>
</mat-menu>
</div>
}
</td>
</tr>
}
@if (round.drawnOut) { @if (round.drawnOut) {
<tr> <tr>
<td class="align-middle w-100" colspan="4"><b>Deze ronde uitgeloot:</b> {{ round.drawnOut | teamText }}</td> <td class="align-middle w-100" colspan="4"><b>Deze ronde uitgeloot:</b> {{ round.drawnOut | teamText }}</td>
@@ -314,19 +324,23 @@
} @else if (round.status == 'FINISHED') { } @else if (round.status == 'FINISHED') {
<table class="table table-hover m-4 wide {{ this.groupIsDoublesType(group) ? 'w-100' : 'w-100' }}"> <table class="table table-hover m-4 wide {{ this.groupIsDoublesType(group) ? 'w-100' : 'w-100' }}">
<tbody> <tbody>
<tr *ngFor="let match of round.matches"> @for (match of round.matches; track match.id) {
<td class="align-middle w-team" [ngClass]="{'winner': checkWinner(match) == 1}">{{ match.team1 | teamText }}</td> <tr>
<td class="align-middle w-sep">-</td> <td class="align-middle w-team" [ngClass]="{'winner': checkWinner(match) == 1}">{{ match.team1 | teamText }}</td>
<td class="align-middle w-team" [ngClass]="{'winner': checkWinner(match) == 2}">{{ match.team2 | teamText }}</td> <td class="align-middle w-sep">-</td>
<td class="align-middle w-fill"> <td class="align-middle w-team" [ngClass]="{'winner': checkWinner(match) == 2}">{{ match.team2 | teamText }}</td>
<div class="row result align-items-center"> <td class="align-middle w-fill">
<span *ngFor="let game of match.games" class="col-2">{{ game.score1 }}-{{ game.score2 }}</span> <div class="row result align-items-center">
@if (match.games.length == 2) { @for (game of match.games; track game.id) {
<span class="col-2"></span> <span class="col-2">{{ game.score1 }}-{{ game.score2 }}</span>
} }
</div> @if (match.games.length == 2) {
</td> <span class="col-2"></span>
</tr> }
</div>
</td>
</tr>
}
@if (round.drawnOut) { @if (round.drawnOut) {
<tr> <tr>
<td class="align-middle w-100" colspan="4"><b>Deze ronde uitgeloot:</b> {{ round.drawnOut | teamText }}</td> <td class="align-middle w-100" colspan="4"><b>Deze ronde uitgeloot:</b> {{ round.drawnOut | teamText }}</td>
@@ -357,34 +371,36 @@
</tr> </tr>
</thead> </thead>
<tbody class="table-group-divider"> <tbody class="table-group-divider">
<tr *ngFor="let entry of getStandingsForRound(round, group).entries"> @for (entry of getStandingsForRound(round, group).entries; track entry.position) {
<td class="align-middle">{{ entry.position }}</td> <tr>
<td class="align-middle">{{ entry.team | teamText }}</td> <td class="align-middle">{{ entry.position }}</td>
<td class="align-middle">{{ entry.played }}</td> <td class="align-middle">{{ entry.team | teamText }}</td>
<td class="align-middle"> <td class="align-middle">{{ entry.played }}</td>
@if (entry.played > 0 ) { <td class="align-middle">
{{ entry.points }} ({{ entry.points / entry.played | number: '1.0-2' }}) @if (entry.played > 0 ) {
} {{ entry.points }} ({{ entry.points / entry.played | number: '1.0-2' }})
</td> }
<td class="align-middle"> </td>
@if (entry.played > 0 ) { <td class="align-middle">
{{ entry.gamesWon }}-{{ entry.gamesLost}} ({{ (entry.gamesWon - entry.gamesLost) / entry.played | number: '1.0-2' }}) @if (entry.played > 0 ) {
} {{ entry.gamesWon }}-{{ entry.gamesLost}} ({{ (entry.gamesWon - entry.gamesLost) / entry.played | number: '1.0-2' }})
</td> }
<td class="align-middle"> </td>
@if (entry.played > 0 ) { <td class="align-middle">
{{ entry.pointsWon }}-{{ entry.pointsLost }} ({{ (entry.pointsWon - entry.pointsLost) / entry.played | number: '1.0-2' }}) @if (entry.played > 0 ) {
} {{ entry.pointsWon }}-{{ entry.pointsLost }} ({{ (entry.pointsWon - entry.pointsLost) / entry.played | number: '1.0-2' }})
</td> }
</tr> </td>
</tr>
}
</tbody> </tbody>
</table> </table>
</mat-tab> </mat-tab>
</ng-container> }
</mat-tab-group> </mat-tab-group>
</mat-tab> </mat-tab>
</ng-container> }
</ng-container> }
</mat-tab-group> </mat-tab-group>
</mat-tab> </mat-tab>
} }
@@ -411,38 +427,39 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let tournamentPlayer of tournament.tournamentPlayers"> @for (tournamentPlayer of tournament.tournamentPlayers; track tournamentPlayer.playerId) {
<td>{{ tournamentPlayer.name }}</td> <tr>
<td> <td>{{ tournamentPlayer.name }}</td>
<ng-container *ngFor="let event of tournamentPlayer.events"> <td>
{{ event }}&nbsp; @for (event of tournamentPlayer.events; track event) {
</ng-container> {{ 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>
</td> <td>
<td> {{ tournament.costsPerEvent[tournamentPlayer.events.length - 1] | currency:'EUR':'symbol':'1.2-2':'nl' }}
<mat-slide-toggle [(ngModel)]="tournamentPlayer.present" (change)="playerPresent($event, tournamentPlayer.playerId)"> </td>
@if (tournamentPlayer.present) { <td>
Aanwezig <mat-slide-toggle [(ngModel)]="tournamentPlayer.paid" (change)="playerPaid($event, tournamentPlayer.playerId)">
} @else { @if (tournamentPlayer.paid) {
Nog niet aanwezig Betaald
} } @else {
</mat-slide-toggle> Nog niet betaald
</td> }
</tr> </mat-slide-toggle>
</td>
<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> </tbody>
</table> </table>
</mat-tab> </mat-tab>
</mat-tab-group> </mat-tab-group>
</mat-tab> </mat-tab>

4
src/app/components/tournament-manage/tournament-manage.component.ts
View File

@@ -6,7 +6,7 @@ import {
MatExpansionPanelTitle MatExpansionPanelTitle
} from "@angular/material/expansion"; } from "@angular/material/expansion";
import {MatCard, MatCardContent, MatCardHeader} from "@angular/material/card"; import {MatCard, MatCardContent, MatCardHeader} from "@angular/material/card";
import {CurrencyPipe, DatePipe, DecimalPipe, NgClass, NgForOf, NgIf} from "@angular/common"; import {CurrencyPipe, DatePipe, DecimalPipe, NgClass} from "@angular/common";
import {TeamPipe} from "../../pipes/team-pipe"; import {TeamPipe} from "../../pipes/team-pipe";
import {TournamentService} from "../../service/tournament.service"; import {TournamentService} from "../../service/tournament.service";
import {ActivatedRoute, Router} from "@angular/router"; import {ActivatedRoute, Router} from "@angular/router";
@@ -44,8 +44,6 @@ import {TitleService} from "../../service/title.service";
MatExpansionPanel, MatExpansionPanel,
MatExpansionPanelHeader, MatExpansionPanelHeader,
MatExpansionPanelTitle, MatExpansionPanelTitle,
NgForOf,
NgIf,
TeamPipe, TeamPipe,
MatIcon, MatIcon,
NgClass, NgClass,

58
src/app/components/tournament-registrations/tournament-registrations.component.html
View File

@@ -4,35 +4,39 @@
<h5>Inschrijvingen voor {{ tournament.name }}</h5> <h5>Inschrijvingen voor {{ tournament.name }}</h5>
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<mat-card *ngFor="let event of tournament.events" appearance="outlined" class="m-3"> @for (event of tournament.events; track event.id) {
<mat-card-header> <mat-card appearance="outlined" class="m-3">
<h6>{{ TournamentEvent.getType(event.type) }} ({{ event.registrations.length}} inschrijvingen)</h6> <mat-card-header>
</mat-card-header> <h6>{{ TournamentEvent.getType(event.type) }} ({{ event.registrations.length}} inschrijvingen)</h6>
<mat-card-content> </mat-card-header>
<table class="table {{ event.doublesEvent ? 'w-100' : 'w-50' }}"> <mat-card-content>
<thead class="thead-dark"> <table class="table {{ event.doublesEvent ? 'w-100' : 'w-50' }}">
<tr> <thead class="thead-dark">
<th scope="col" class="w-25">Naam</th> <tr>
<th scope="col" class="w-25">Club</th> <th scope="col" class="w-25">Naam</th>
@if (event.doublesEvent) {
<th scope="col" class="w-25">Partner</th>
<th scope="col" class="w-25">Club</th> <th scope="col" class="w-25">Club</th>
@if (event.doublesEvent) {
<th scope="col" class="w-25">Partner</th>
<th scope="col" class="w-25">Club</th>
}
</tr>
</thead>
<tbody>
@for (registration of event.registrations; track registration.id) {
<tr>
<td class="align-middle">{{ registration.player | fullName }}</td>
<td class="align-middle">{{ registration.player.club }}</td>
@if (event.doublesEvent) {
<td class="align-middle">{{ registration.partner?.club }}</td>
<td class="align-middle">{{ registration.partner | fullName }}</td>
}
</tr>
} }
</tr> </tbody>
</thead> </table>
<tbody> </mat-card-content>
<tr *ngFor="let registration of event.registrations"> </mat-card>
<td class="align-middle">{{ registration.player | fullName }}</td> }
<td class="align-middle">{{ registration.player.club }}</td>
@if (event.doublesEvent) {
<td class="align-middle">{{ registration.partner?.club }}</td>
<td class="align-middle">{{ registration.partner | fullName }}</td>
}
</tr>
</tbody>
</table>
</mat-card-content>
</mat-card>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
} }

3
src/app/components/tournament-registrations/tournament-registrations.component.ts
View File

@@ -3,7 +3,6 @@ import {MatCard, MatCardContent, MatCardHeader} from "@angular/material/card";
import {Tournament} from "../../model/tournament"; import {Tournament} from "../../model/tournament";
import {TournamentService} from "../../service/tournament.service"; import {TournamentService} from "../../service/tournament.service";
import {ActivatedRoute, Router} from "@angular/router"; import {ActivatedRoute, Router} from "@angular/router";
import {NgForOf, NgIf} from "@angular/common";
import {Event} from "../../model/event"; import {Event} from "../../model/event";
import {FullNamePipe} from "../../pipes/fullname-pipe"; import {FullNamePipe} from "../../pipes/fullname-pipe";
import {TitleService} from "../../service/title.service"; import {TitleService} from "../../service/title.service";
@@ -14,8 +13,6 @@ import {TitleService} from "../../service/title.service";
MatCard, MatCard,
MatCardHeader, MatCardHeader,
MatCardContent, MatCardContent,
NgForOf,
NgIf,
FullNamePipe FullNamePipe
], ],
templateUrl: './tournament-registrations.component.html', templateUrl: './tournament-registrations.component.html',

114
src/app/components/tournament-validate/tournament-validate.component.html
View File

@@ -11,63 +11,71 @@
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<ul> <ul>
<li *ngFor="let validation of tournamentValidation.validations"> @for (validation of tournamentValidation.validations; track validation) {
<mat-icon class="text-{{ getColorForSeverity(validation.severity) }}">{{ getIconForSeverity(validation.severity) }}</mat-icon> <li>
{{ validation.message }} <mat-icon class="text-{{ getColorForSeverity(validation.severity) }}">{{ getIconForSeverity(validation.severity) }}</mat-icon>
</li> {{ validation.message }}
</li>
}
</ul> </ul>
</mat-expansion-panel> </mat-expansion-panel>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card *ngFor="let event of tournament.events" appearance="outlined" class="m-3"> @for (event of tournament.events; track event.id) {
<mat-card-header> <mat-card appearance="outlined" class="m-3">
<h6>{{ TournamentEvent.getType(event.type) }}</h6> <mat-card-header>
</mat-card-header> <h6>{{ TournamentEvent.getType(event.type) }}</h6>
<mat-card-content> </mat-card-header>
<mat-accordion multi="true"> <mat-card-content>
<mat-expansion-panel [disabled]="event.registrations.length == 0"> <mat-accordion multi="true">
<mat-expansion-panel-header> <mat-expansion-panel [disabled]="event.registrations.length == 0">
<mat-panel-title> <mat-expansion-panel-header>
Inschrijvingen&nbsp;<span class="badge {{ event.registrations.length == 0 ? 'text-bg-danger' : 'text-bg-success'}}">{{ event.registrations.length }}</span> <mat-panel-title>
</mat-panel-title> Inschrijvingen&nbsp;<span class="badge {{ event.registrations.length == 0 ? 'text-bg-danger' : 'text-bg-success'}}">{{ event.registrations.length }}</span>
</mat-expansion-panel-header> </mat-panel-title>
<table class="table {{ event.doublesEvent ? 'w-100' : 'w-50' }}"> </mat-expansion-panel-header>
<thead class="thead-dark"> <table class="table {{ event.doublesEvent ? 'w-100' : 'w-50' }}">
<tr> <thead class="thead-dark">
<th scope="col" class="w-25">Naam</th> <tr>
<th scope="col" class="w-25">Club</th> <th scope="col" class="w-25">Naam</th>
@if (event.doublesEvent) {
<th scope="col" class="w-25">Partner</th>
<th scope="col" class="w-25">Club</th> <th scope="col" class="w-25">Club</th>
@if (event.doublesEvent) {
<th scope="col" class="w-25">Partner</th>
<th scope="col" class="w-25">Club</th>
}
</tr>
</thead>
<tbody>
@for (registration of event.registrations; track registration.id) {
<tr>
<td class="align-middle">{{ registration.player | fullName }}</td>
<td class="align-middle">{{ registration.player.club }}</td>
@if (event.doublesEvent) {
<td class="align-middle">{{ registration.partner | fullName }}</td>
<td class="align-middle">{{ registration.partner?.club }}</td>
}
</tr>
}
</tbody>
</table>
</mat-expansion-panel>
<mat-expansion-panel [disabled]="getEventValidation(event.id)?.validations?.length == 0">
<mat-expansion-panel-header>
<mat-panel-title>
Validaties&nbsp;<span class="badge {{ Validation.hasErrors(getEventValidation(event.id)?.validations) ? 'text-bg-danger' : 'text-bg-success'}}">{{ getEventValidation(event.id)?.validations?.length }}</span>
</mat-panel-title>
</mat-expansion-panel-header>
<ul>
@for (validation of getEventValidation(event.id)?.validations; track validation) {
<li>
<mat-icon class="text-{{ getColorForSeverity(validation.severity) }}">{{ getIconForSeverity(validation.severity) }}</mat-icon>
<player-link [validationMessage]="validation.message"></player-link>
</li>
} }
</tr> </ul>
</thead> </mat-expansion-panel>
<tbody> </mat-accordion>
<tr *ngFor="let registration of event.registrations"> </mat-card-content>
<td class="align-middle">{{ registration.player | fullName }}</td> </mat-card>
<td class="align-middle">{{ registration.player.club }}</td> }
@if (event.doublesEvent) {
<td class="align-middle">{{ registration.partner | fullName }}</td>
<td class="align-middle">{{ registration.partner?.club }}</td>
}
</tr>
</tbody>
</table>
</mat-expansion-panel>
<mat-expansion-panel [disabled]="getEventValidation(event.id)?.validations?.length == 0">
<mat-expansion-panel-header>
<mat-panel-title>
Validaties&nbsp;<span class="badge {{ Validation.hasErrors(getEventValidation(event.id)?.validations) ? 'text-bg-danger' : 'text-bg-success'}}">{{ getEventValidation(event.id)?.validations?.length }}</span>
</mat-panel-title>
</mat-expansion-panel-header>
<ul>
<li *ngFor="let validation of getEventValidation(event.id)?.validations">
<mat-icon class="text-{{ getColorForSeverity(validation.severity) }}">{{ getIconForSeverity(validation.severity) }}</mat-icon>
<player-link [validationMessage]="validation.message"></player-link>
</li>
</ul>
</mat-expansion-panel>
</mat-accordion>
</mat-card-content>
</mat-card>
} }

3
src/app/components/tournament-validate/tournament-validate.component.ts
View File

@@ -1,7 +1,6 @@
import {Component, OnInit} from '@angular/core'; import {Component, OnInit} from '@angular/core';
import {MatCard, MatCardContent, MatCardHeader} from "@angular/material/card"; import {MatCard, MatCardContent, MatCardHeader} from "@angular/material/card";
import {Tournament} from "../../model/tournament"; import {Tournament} from "../../model/tournament";
import {NgForOf, NgIf} from "@angular/common";
import {Event} from "../../model/event"; import {Event} from "../../model/event";
import {TournamentService} from "../../service/tournament.service"; import {TournamentService} from "../../service/tournament.service";
import {ActivatedRoute, Router} from "@angular/router"; import {ActivatedRoute, Router} from "@angular/router";
@@ -24,11 +23,9 @@ import {PlayerLinkComponent} from "../player-link/player-link.component";
MatCard, MatCard,
MatCardHeader, MatCardHeader,
MatCardContent, MatCardContent,
NgForOf,
MatExpansionPanel, MatExpansionPanel,
MatExpansionPanelTitle, MatExpansionPanelTitle,
MatExpansionPanelHeader, MatExpansionPanelHeader,
NgIf,
MatAccordion, MatAccordion,
MatIcon, MatIcon,
FullNamePipe, FullNamePipe,

1
src/app/model/game.ts
View File

@@ -1,4 +1,5 @@
export class Game { export class Game {
id: number;
score1: number; score1: number;
score2: number; score2: number;
} }

3
src/app/model/team.ts
View File

@@ -2,6 +2,7 @@ import {Player} from "./player";
import {FullNamePipe} from "../pipes/fullname-pipe"; import {FullNamePipe} from "../pipes/fullname-pipe";
export class Team { export class Team {
id: number;
player1: Player; player1: Player;
player2: Player; player2: Player | null;
} }