Sistemato un po' il codice

This commit is contained in:
Lorenzo Sanesi
2026-04-04 12:56:09 +02:00
parent aa5ca9bbe3
commit 3d4eac4ea5
12 changed files with 254 additions and 188 deletions
@@ -36,47 +36,53 @@
</div>
<!-- History List -->
<div *ngIf="isLoading()" class="flex flex-col items-center justify-center py-12">
<div class="w-10 h-10 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
<p class="mt-4 text-on-surface-variant text-sm font-medium">Loading history...</p>
</div>
@if (isLoading()) {
<div class="flex flex-col items-center justify-center py-12">
<div class="w-10 h-10 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
<p class="mt-4 text-on-surface-variant text-sm font-medium">Loading history...</p>
</div>
} @else {
<div class="space-y-4">
@for (challenge of historyChallenges(); track challenge.id) {
<div class="bg-surface rounded-3xl p-5 soft-shadow border border-black/5 active:scale-[0.98] transition-transform cursor-pointer" [routerLink]="['/challenge-detail', challenge.id]">
<div class="flex justify-between items-start mb-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-2xl bg-surface-container flex items-center justify-center">
<mat-icon class="text-primary">history</mat-icon>
</div>
<div>
<h4 class="font-headline font-bold text-on-surface">{{ challenge.title }}</h4>
<p class="text-xs text-on-surface-variant font-medium">{{ challenge.endDate | date:'mediumDate' }}</p>
</div>
</div>
<span
class="px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest"
[class.bg-secondary-container]="challenge.status === 'COMPLETED'"
[class.text-secondary]="challenge.status === 'COMPLETED'"
[class.bg-error-container]="challenge.status === 'EXPIRED'"
[class.text-error]="challenge.status === 'EXPIRED'"
>
{{ challenge.status }}
</span>
</div>
<div class="flex justify-between items-center pt-2 border-t border-black/5 mt-2">
<div class="flex items-center gap-2">
<mat-icon class="text-sm text-on-surface-variant">groups</mat-icon>
<span class="text-xs font-bold text-on-surface-variant">{{ challenge.participants.length }}</span>
</div>
<div class="text-lg font-headline font-black text-primary">€{{ challenge.stake }}</div>
</div>
</div>
}
<div *ngIf="!isLoading()" class="space-y-4">
<div *ngFor="let challenge of historyChallenges()" class="bg-surface rounded-3xl p-5 soft-shadow border border-black/5 active:scale-[0.98] transition-transform cursor-pointer" [routerLink]="['/challenge-detail', challenge._id]">
<div class="flex justify-between items-start mb-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-2xl bg-surface-container flex items-center justify-center">
<mat-icon class="text-primary">history</mat-icon>
</div>
<div>
<h4 class="font-headline font-bold text-on-surface">{{ challenge.title }}</h4>
<p class="text-xs text-on-surface-variant font-medium">{{ challenge.endDate | date:'mediumDate' }}</p>
</div>
@if (historyChallenges().length === 0) {
<div class="flex flex-col items-center justify-center py-20 text-center bg-surface-container-low rounded-3xl border border-dashed border-on-surface-variant/20">
<mat-icon class="text-6xl text-on-surface-variant/10 mb-4">history_toggle_off</mat-icon>
<h3 class="text-xl font-headline font-bold">No History Found</h3>
<p class="text-on-surface-variant mt-2">Try searching for something else or join a new bet!</p>
</div>
<span
class="px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest"
[class.bg-secondary-container]="challenge.status === 'COMPLETED'"
[class.text-secondary]="challenge.status === 'COMPLETED'"
[class.bg-error-container]="challenge.status === 'EXPIRED'"
[class.text-error]="challenge.status === 'EXPIRED'"
>
{{ challenge.status }}
</span>
</div>
<div class="flex justify-between items-center pt-2 border-t border-black/5 mt-2">
<div class="flex items-center gap-2">
<mat-icon class="text-sm text-on-surface-variant">groups</mat-icon>
<span class="text-xs font-bold text-on-surface-variant">{{ challenge.participants.length }}</span>
</div>
<div class="text-lg font-headline font-black text-primary">€{{ challenge.stake }}</div>
</div>
}
</div>
<div *ngIf="historyChallenges().length === 0" class="flex flex-col items-center justify-center py-20 text-center bg-surface-container-low rounded-3xl border border-dashed border-on-surface-variant/20">
<mat-icon class="text-6xl text-on-surface-variant/10 mb-4">history_toggle_off</mat-icon>
<h3 class="text-xl font-headline font-bold">No History Found</h3>
<p class="text-on-surface-variant mt-2">Try searching for something else or join a new bet!</p>
</div>
</div>
}
</main>
</div>