490 lines
25 KiB
HTML
490 lines
25 KiB
HTML
@if (tournament) {
|
|
<mat-card appearance="outlined">
|
|
<mat-card-content>
|
|
<mat-tab-group animationDuration="0ms" disableRipple="true">
|
|
|
|
@if (tournament.status == 'UPCOMING') {
|
|
<mat-tab>
|
|
<ng-template mat-tab-label>
|
|
<mat-icon>playlist_add_check</mat-icon>
|
|
Validaties
|
|
<button mat-icon-button [matMenuTriggerFor]="upcomingTournamentMenu" class="menu-button m-3">
|
|
<mat-icon>more_vert</mat-icon>
|
|
</button>
|
|
<mat-menu #upcomingTournamentMenu="matMenu">
|
|
<button mat-menu-item (click)="divideTournament()">
|
|
<mat-icon>play_arrow</mat-icon>
|
|
Deel toernooi in
|
|
</button>
|
|
</mat-menu>
|
|
</ng-template>
|
|
<app-tournament-validate></app-tournament-validate>
|
|
</mat-tab>
|
|
<mat-tab>
|
|
<ng-template mat-tab-label>
|
|
<mat-icon>settings</mat-icon>
|
|
Beheer
|
|
</ng-template>
|
|
<app-tournament-players [tournament]="tournament"></app-tournament-players>
|
|
</mat-tab>
|
|
}
|
|
|
|
@if (tournament.status == 'DIVIDED') {
|
|
<mat-tab>
|
|
<ng-template mat-tab-label>
|
|
<mat-icon>safety_divider</mat-icon>
|
|
Indeling
|
|
<button mat-icon-button [matMenuTriggerFor]="dividedTournamentMenu" class="menu-button m-3">
|
|
<mat-icon>more_vert</mat-icon>
|
|
</button>
|
|
<mat-menu #dividedTournamentMenu="matMenu">
|
|
<button mat-menu-item (click)="clearDivision()">
|
|
<mat-icon>highlight_remove</mat-icon>
|
|
Indeling wissen
|
|
</button>
|
|
<button mat-menu-item (click)="drawTournament()">
|
|
<mat-icon>safety_divider</mat-icon>
|
|
1e ronde loten
|
|
</button>
|
|
</mat-menu>
|
|
</ng-template>
|
|
<mat-card appearance="outlined" class="m-3">
|
|
<mat-card-header>
|
|
<h6>Totaal: {{ getTournamentMatchCount(tournament)}} wedstrijden</h6>
|
|
</mat-card-header>
|
|
</mat-card>
|
|
@for (event of tournament.events; track event.id) {
|
|
@if (event.groups.length > 0) {
|
|
<mat-card appearance="outlined" class="m-3">
|
|
<mat-card-header>
|
|
<h6>Indeling {{ TournamentEvent.getType(event.type) }} ({{ getEventMatchCount(event)}} wedstrijden)</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 }} <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 && team.player2) {
|
|
<td class="align-middle">{{ team.player2 | fullName }}</td>
|
|
<td class="align-middle">{{ team.player2.club }}</td>
|
|
<td class="align-middle">{{ getStrength(team.player2.strength.valueOf()) }}</td>
|
|
}
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</mat-expansion-panel>
|
|
}
|
|
</mat-accordion>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
}
|
|
}
|
|
</mat-tab>
|
|
<mat-tab>
|
|
<ng-template mat-tab-label>
|
|
<mat-icon>settings</mat-icon>
|
|
Beheer
|
|
</ng-template>
|
|
<app-tournament-players [tournament]="tournament"></app-tournament-players>
|
|
</mat-tab>
|
|
}
|
|
|
|
@if (tournament.status == 'ONGOING') {
|
|
<mat-tab>
|
|
<ng-template mat-tab-label>
|
|
<mat-icon>play_arrow</mat-icon>
|
|
Actieve wedstrijden
|
|
@if (this.activeMatches().length > 0) {
|
|
<span class="badge text-bg-success">{{ this.activeMatches().length }}</span>
|
|
}
|
|
</ng-template>
|
|
|
|
@if (this.activeMatches().length > 0) {
|
|
<h6 class="mt-3"></h6>
|
|
|
|
@for (activeMatch of this.activeMatches(); track activeMatch.match.id) {
|
|
<mat-expansion-panel>
|
|
<mat-expansion-panel-header>
|
|
<div class="col-md-2">Baan {{ activeMatch.match.court }}</div>
|
|
<div class="col-md-3">
|
|
<app-team-display
|
|
[team]="activeMatch.match.team1"
|
|
[event]="activeMatch.event"
|
|
[tournament]="this.tournament">
|
|
</app-team-display>
|
|
</div>
|
|
<div class="col-md-1">-</div>
|
|
<div class="col-md-3">
|
|
<app-team-display
|
|
[team]="activeMatch.match.team2"
|
|
[event]="activeMatch.event"
|
|
[tournament]="this.tournament">
|
|
</app-team-display>
|
|
</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-button (click)="stopMatch(activeMatch.match)">
|
|
<mat-icon>stop</mat-icon>
|
|
Wedstrijd stoppen
|
|
</button>
|
|
</mat-action-row>
|
|
</mat-expansion-panel>
|
|
<br>
|
|
}
|
|
} @else {
|
|
<h6 class="mt-3">Geen actieve wedstrijden</h6>
|
|
}
|
|
</mat-tab>
|
|
}
|
|
@if (tournament.status == 'ONGOING' || tournament.status == 'DRAWN') {
|
|
<mat-tab>
|
|
<ng-template mat-tab-label>
|
|
<mat-icon>list</mat-icon>
|
|
Onderdelen
|
|
</ng-template>
|
|
|
|
<mat-tab-group animationDuration="0ms" disableRipple="true">
|
|
@for (event of tournament.events; track event.id) {
|
|
@for (group of event.groups; track group.id) {
|
|
<mat-tab label="{{group.id}}">
|
|
<ng-template mat-tab-label>
|
|
@if (group.status == "FINISHED") {
|
|
<mat-icon>check</mat-icon>
|
|
}{{ group.name }}
|
|
|
|
@if (getActiveMatchCountForGroup(group) > 0) {
|
|
<span class="badge text-bg-success">{{ getActiveMatchCountForGroup(group) }}</span>
|
|
}
|
|
@if (group.status != 'FINISHED' && groupOnlyHasFinishedRounds(group)) {
|
|
<button mat-icon-button [matMenuTriggerFor]="groupMenu" class="menu-button m-3">
|
|
<mat-icon>more_vert</mat-icon>
|
|
</button>
|
|
<mat-menu #groupMenu="matMenu">
|
|
<button mat-menu-item (click)="finishGroup(group)">
|
|
<mat-icon>check</mat-icon>
|
|
Onderdeel afsluiten
|
|
</button>
|
|
</mat-menu>
|
|
}
|
|
@if (group.status == 'FINISHED') {
|
|
<button mat-icon-button [matMenuTriggerFor]="groupMenu" class="menu-button m-3">
|
|
<mat-icon>more_vert</mat-icon>
|
|
</button>
|
|
<mat-menu #groupMenu="matMenu">
|
|
<button mat-menu-item (click)="reopenGroup(group)">
|
|
<mat-icon>check</mat-icon>
|
|
Onderdeel heropenen
|
|
</button>
|
|
</mat-menu>
|
|
}
|
|
</ng-template>
|
|
<mat-tab-group
|
|
animationDuration="0ms"
|
|
disableRipple="true"
|
|
[(selectedIndex)]="activeRoundTab"
|
|
(selectedTabChange)="onRoundTabChange($event)">
|
|
@for (round of group.rounds; track round.id; let roundIndex = $index) {
|
|
<mat-tab label="{{round.id}}">
|
|
<ng-template mat-tab-label>
|
|
<mat-icon>{{ getRoundIcon(round.status) }}</mat-icon>
|
|
{{ round.name }}
|
|
|
|
<button mat-icon-button [matMenuTriggerFor]="activeRoundMenu" class="menu-button m-3">
|
|
<mat-icon>more_vert</mat-icon>
|
|
</button>
|
|
<mat-menu #activeRoundMenu="matMenu">
|
|
@if (round.status == 'NOT_STARTED') {
|
|
<button mat-menu-item (click)="startRound(round)">
|
|
<mat-icon>play_arrow</mat-icon>
|
|
Ronde starten
|
|
</button>
|
|
}
|
|
<button mat-menu-item (click)="printMatchSheets(round)">
|
|
<mat-icon>print</mat-icon>
|
|
Wedstrijdbriefjes printen
|
|
</button>
|
|
@if (!round.isFinalsRound) {
|
|
<button mat-menu-item (click)="printRoundOverview(round)">
|
|
<mat-icon>print</mat-icon>
|
|
Rondeoverzicht printen
|
|
</button>
|
|
}
|
|
@if (round.status == 'IN_PROGRESS' && checkRoundComplete(round)) {
|
|
<button mat-menu-item (click)="finishRound(round)">
|
|
<mat-icon>check</mat-icon>
|
|
Ronde afsluiten
|
|
</button>
|
|
}
|
|
@if (group.status != 'FINISHED' && round.status == 'FINISHED' && (roundIndex + 1) == group.rounds.length && !round.isFinalsRound) {
|
|
<button mat-menu-item (click)="newRound(group)">
|
|
<mat-icon>playlist_add</mat-icon>
|
|
Nieuwe ronde
|
|
</button>
|
|
}
|
|
</mat-menu>
|
|
</ng-template>
|
|
|
|
<h6 class="mt-3">Wedstrijden</h6>
|
|
|
|
@if (round.status == 'NOT_STARTED') {
|
|
<table class="table table-hover m-4 wide w-95">
|
|
<tbody>
|
|
@for (match of round.matches; track match.id) {
|
|
<tr>
|
|
<td class="align-middle w-team">
|
|
<app-team-display
|
|
[team]="match.team1"
|
|
[event]="event"
|
|
[tournament]="tournament">
|
|
</app-team-display>
|
|
</td>
|
|
<td class="align-middle w-sep">-</td>
|
|
<td class="align-middle w-team">
|
|
<app-team-display
|
|
[team]="match.team2"
|
|
[event]="event"
|
|
[tournament]="tournament">
|
|
</app-team-display>
|
|
</td>
|
|
<td class="align-middle w-fill"></td>
|
|
</tr>
|
|
}
|
|
@if (round.drawnOut) {
|
|
<tr>
|
|
<td class="align-middle w-100" colspan="4">
|
|
<b>Deze ronde uitgeloot:</b> {{ round.drawnOut | teamText }}
|
|
</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
<!-- }-->
|
|
} @else if (round.status == 'IN_PROGRESS') {
|
|
<table class="table table-hover m-4 wide w-95">
|
|
<tbody>
|
|
@for (match of round.matches; track match.id) {
|
|
<tr>
|
|
<td class="align-middle w-team" [ngClass]="{'winner': checkWinner(match) == 1}">
|
|
<app-team-display
|
|
[team]="match.team1"
|
|
[event]="event"
|
|
[tournament]="tournament">
|
|
</app-team-display>
|
|
</td>
|
|
<td class="align-middle w-sep">-</td>
|
|
<td class="align-middle w-team" [ngClass]="{'winner': checkWinner(match) == 2}">
|
|
<app-team-display
|
|
[team]="match.team2"
|
|
[event]="event"
|
|
[tournament]="tournament">
|
|
</app-team-display>
|
|
</td>
|
|
<td class="align-middle w-fill">
|
|
@if (match.status == 'NOT_STARTED') {
|
|
<button mat-button (click)="startMatch(match)">
|
|
<mat-icon>play_arrow</mat-icon>
|
|
Wedstrijd starten
|
|
</button>
|
|
} @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">
|
|
@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>
|
|
<mat-menu #finishedMatchMenu="matMenu">
|
|
<button mat-menu-item (click)="editResult(match, group, round)">
|
|
<mat-icon>edit</mat-icon>
|
|
Uitslag bewerken
|
|
</button>
|
|
</mat-menu>
|
|
</div>
|
|
}
|
|
</td>
|
|
</tr>
|
|
}
|
|
@if (round.drawnOut) {
|
|
<tr>
|
|
<td class="align-middle w-100" colspan="4"><b>Deze ronde uitgeloot:</b> {{ round.drawnOut | teamText }}</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
} @else if (round.status == 'FINISHED') {
|
|
<table class="table table-hover m-4 wide {{ this.groupIsDoublesType(group) ? 'w-95' : 'w-95' }}">
|
|
<tbody>
|
|
@for (match of round.matches; track match.id) {
|
|
<tr>
|
|
<td class="align-middle w-team" [ngClass]="{'winner': checkWinner(match) == 1}">
|
|
<app-team-display
|
|
[team]="match.team1"
|
|
[event]="event"
|
|
[tournament]="tournament">
|
|
</app-team-display>
|
|
</td>
|
|
<td class="align-middle w-sep">-</td>
|
|
<td class="align-middle w-team" [ngClass]="{'winner': checkWinner(match) == 2}">
|
|
<app-team-display
|
|
[team]="match.team2"
|
|
[event]="event"
|
|
[tournament]="tournament">
|
|
</app-team-display>
|
|
</td>
|
|
<td class="align-middle w-fill">
|
|
<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>
|
|
}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
}
|
|
@if (round.drawnOut) {
|
|
<tr>
|
|
<td class="align-middle w-100" colspan="4"><b>Deze ronde uitgeloot:</b> {{ round.drawnOut | teamText }}</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
}
|
|
|
|
@if (!round.isFinalsRound) {
|
|
<h6 class="mt-3">Stand</h6>
|
|
|
|
<table class="table w-75 m-4">
|
|
<caption>Tussen haakjes de gemiddelden per gespeelde wedstrijd</caption>
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>
|
|
@if (event.doublesEvent) {
|
|
Team
|
|
} @else {
|
|
Speler
|
|
}
|
|
</th>
|
|
<th>Gespeeld</th>
|
|
<th>Punten</th>
|
|
<th>Games</th>
|
|
<th>Wedstrijdpunten</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="table-group-divider">
|
|
@for (entry of getStandingsForRound(round, group).entries; track entry.position) {
|
|
<tr>
|
|
<td class="align-middle">{{ entry.position }}</td>
|
|
<td class="align-middle">{{ entry.team | teamText }}</td>
|
|
<td class="align-middle">{{ entry.played }}</td>
|
|
<td class="align-middle">
|
|
@if (entry.played > 0 ) {
|
|
{{ entry.points }} ({{ entry.points / entry.played | number: '1.0-2' }})
|
|
}
|
|
</td>
|
|
<td class="align-middle">
|
|
@if (entry.played > 0 ) {
|
|
{{ entry.gamesWon }}-{{ entry.gamesLost}} ({{ (entry.gamesWon - entry.gamesLost) / entry.played | number: '1.0-2' }})
|
|
}
|
|
</td>
|
|
<td class="align-middle">
|
|
@if (entry.played > 0 ) {
|
|
{{ entry.pointsWon }}-{{ entry.pointsLost }} ({{ (entry.pointsWon - entry.pointsLost) / entry.played | number: '1.0-2' }})
|
|
}
|
|
</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
} @else if (round.isFinalsRound && round.status == 'FINISHED') {
|
|
<h6 class="mt-3">Uitslag</h6>
|
|
|
|
<table class="table w-50 m-4">
|
|
<tbody>
|
|
<tr>
|
|
<td>1e Plaats</td>
|
|
<td>{{ (checkWinner(round.matches[0]) == 1 ? round.matches[0].team1 : round.matches[0].team2) | teamText }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2e Plaats</td>
|
|
<td>{{ (checkWinner(round.matches[0]) == 1 ? round.matches[0].team2 : round.matches[0].team1) | teamText }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>3e Plaats</td>
|
|
<td>{{ (checkWinner(round.matches[1]) == 1 ? round.matches[1].team1 : round.matches[1].team2) | teamText }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
}
|
|
</mat-tab>
|
|
}
|
|
</mat-tab-group>
|
|
</mat-tab>
|
|
}
|
|
}
|
|
</mat-tab-group>
|
|
</mat-tab>
|
|
|
|
<mat-tab>
|
|
<ng-template mat-tab-label>
|
|
<mat-icon>settings</mat-icon>
|
|
Beheer
|
|
</ng-template>
|
|
<app-tournament-players [tournament]="tournament"></app-tournament-players>
|
|
</mat-tab>
|
|
}
|
|
</mat-tab-group>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
}
|