53 lines
1.8 KiB
HTML
53 lines
1.8 KiB
HTML
<div class="container my-4">
|
|
<h2 class="mb-4 text-center">Liste des Matchs</h2>
|
|
|
|
<div class="row g-4">
|
|
<div class="col-md-6" *ngFor="let match of matches">
|
|
<div
|
|
class="card shadow-sm border-start-5"
|
|
[ngClass]="getMatchBorderColor(match.state)"
|
|
style="cursor: pointer"
|
|
(click)="goToMatchDetail(match.id)"
|
|
>
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<h5 class="mb-0">
|
|
{{ match.city }} —
|
|
<small class="text-muted">{{
|
|
match.date | date : "longDate"
|
|
}}</small>
|
|
</h5>
|
|
<span class="badge bg-light text-dark">{{ match.weapon }}</span>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div class="text-start">
|
|
<strong>{{ getPlayerName(match.player1ID) }}</strong>
|
|
<span class="badge bg-primary ms-2">{{ match.score1 }}</span>
|
|
</div>
|
|
|
|
<div class="text-center text-muted">vs</div>
|
|
|
|
<div class="text-end">
|
|
<strong>{{ getPlayerName(match.player2ID) }}</strong>
|
|
<span class="badge bg-primary ms-2">{{ match.score2 }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-3">
|
|
<span
|
|
class="badge"
|
|
[ngClass]="{
|
|
'bg-secondary': match.state === MatchState.NOT_STARTED,
|
|
'bg-warning text-dark': match.state === MatchState.ONGOING,
|
|
'bg-success': match.state === MatchState.OVER
|
|
}"
|
|
>
|
|
{{ getMatchStatusLabel(match.state) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|