jpe-controle/FencerJudgeFront/src/app/components/match/matches-id/matches-id.component.html
ExostFlash 343f69d928 modif
2025-06-03 15:24:58 +02:00

96 lines
2.9 KiB
HTML

<div class="container my-4" *ngIf="match && player1 && player2">
<h2 class="mb-4 text-center">Détail du Match</h2>
<div
class="card shadow border-start-5 border-{{
getMatchStateColor(match.state)
}}"
>
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-2">
<h5 class="mb-0">
{{ match.city }}, {{ match.country }}
<br />
<small class="text-muted"
>{{ match.date | date : "fullDate" }} -
{{ match.date | date : "shortTime" }}</small
>
</h5>
<span class="badge bg-light text-dark">{{ match.weapon }}</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-3">
<div class="text-start">
<strong>{{ player1.firstName }} {{ player1.name }}</strong
><br />
<small class="text-muted">{{ player1.club }}</small>
</div>
<div class="text-center">
<ng-container
*ngIf="
authService.isAuthenticated() && match.state != 1;
else displayScores
"
>
<span
class="badge bg-primary fs-4"
style="cursor: pointer"
(click)="incrementScore(1)"
>
{{ match.score1 }}
</span>
<span class="text-muted mx-2">vs</span>
<span
class="badge bg-primary fs-4"
style="cursor: pointer"
(click)="incrementScore(2)"
>
{{ match.score2 }}
</span>
</ng-container>
<ng-template #displayScores>
<span class="badge bg-primary fs-4">{{ match.score1 }}</span>
<span class="text-muted mx-2">vs</span>
<span class="badge bg-primary fs-4">{{ match.score2 }}</span>
</ng-template>
</div>
<div class="text-end">
<strong>{{ player2.firstName }} {{ player2.name }}</strong
><br />
<small class="text-muted">{{ player2.club }}</small>
</div>
</div>
<div class="mt-4">
<span class="badge bg-{{ getMatchStateColor(match.state) }} p-2 fs-6">
{{ getMatchStateLabel(match.state) }}
</span>
</div>
<div class="mt-3">
<h5>Arbitre</h5>
<div *ngIf="referee">
<p class="mb-0">
<strong>{{ referee.firstName }} {{ referee.name }}</strong>
</p>
<p class="text-muted">
Niveau : {{ getRefereeLevelLabel(referee.level) }}
</p>
</div>
<div *ngIf="!referee">
<p class="text-danger">Arbitre non trouvé.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Si erreur ou match introuvable -->
<div class="container my-5 text-center text-danger" *ngIf="!match">
<p>Match non trouvé.</p>
</div>
<a (click)="goToMatchDel()" *ngIf="authService.isAuthenticated()">Delete</a>