sanchezvem/BeReadyFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added ranking and connected with back

Browse Source
This commit is contained in:
sanchezvem
2026-03-26 23:21:39 +01:00
parent 9346bf9ee3
commit 0428a69d15
4 changed files with 67 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/login/login.component.html
+1 -1
View File
@@ -1,4 +1,4 @@
<div class="flex flex-col items-center justify-center min-h-screen p-6 space-y-4">
<div class="flex flex-col items-center justify-center min-h-screen p-6 space-y-4 overflow-x-hidden">
<img src="BeReady.png" alt="BeReady-Logo" class="w-1/3 max-w-xs">
<p class="text-gray-500 text-sm text-center w-3/5 leading-snug relative">
src/app/pages/login/login.component.ts
-3
View File
@@ -77,8 +77,6 @@ export class LoginComponent {
color: 'danger'
});
await toast.present();
// this.user().userForm.reset();
return false;
}
try {
@@ -93,6 +91,5 @@ export class LoginComponent {
});
await toast.present();
}
}
}
src/app/pages/ranking/ranking.component.html
+29 -31
View File
@@ -3,37 +3,35 @@
</ion-header>
<ion-content style="--background: #f7f6f2;">
<div class="rounded-3xl px-5 m-3 bg-white overflow-auto font-mono">
<div class="grid grid-cols-[auto_1fr_auto] items-center gap-4 mt-0 mb-0">
<p class="w-8 h-8 flex items-center justify-center rounded-full border border-gray-400 bg-yellow-300 m-0">1</p>
<div>
<p class="mb-0 font-bold">Mathys</p>
<p class="mt-0 text-xs text-gray-500">52 défis - 18 victoires</p>
@for (user of users(); track user.id; let i = $index) {
<div class="grid grid-cols-[auto_1fr_auto] items-center gap-4 mt-0 mb-0">
@if (i === 0) {
<p class="w-8 h-8 flex items-center justify-center rounded-full border border-gray-400 bg-yellow-300 m-0">
{{ i + 1 }}
</p>
} @else if (i === 1) {
<p class="w-8 h-8 flex items-center justify-center rounded-full border border-gray-400 bg-gray-200 m-0">
{{ i + 1 }}
</p>
} @else if (i === 2) {
<p class="w-8 h-8 flex items-center justify-center rounded-full border border-gray-400 bg-orange-300 m-0">
{{ i + 1 }}
</p>
} @else {
<p class="w-8 h-8 flex items-center justify-center rounded-full border border-gray-400 m-0">
{{ i + 1 }}
</p>
}
<div>
<p class="mb-0 font-bold">{{ user.username }}</p>
<p class="mt-0 text-xs text-gray-500">{{ user.getUserStatsDto.totalChallenge }} défis
- {{ user.getUserStatsDto.totalWin }} victoires</p>
</div>
<p class="text-gray-400 m-0"><strong class="text-black">{{ user.getUserStatsDto.score }}</strong> pts
</p>
</div>
<p class="text-gray-400 m-0"><strong class="text-black">412</strong> pts</p>
</div>
<div class="grid grid-cols-[auto_1fr_auto] items-center gap-4 mt-0 mb-0">
<p class="w-8 h-8 flex items-center justify-center rounded-full border border-gray-400 bg-gray-200 m-0">2</p>
<div>
<p class="mb-0 font-bold">Léa</p>
<p class="mt-0 text-xs text-gray-500">47 défis - 15 victoires</p>
</div>
<p class="text-gray-400 m-0"><strong class="text-black">389</strong> pts</p>
</div>
<div class="grid grid-cols-[auto_1fr_auto] items-center gap-4 mt-0 mb-0">
<p class="w-8 h-8 flex items-center justify-center rounded-full border border-gray-400 bg-orange-300 m-0">3</p>
<div>
<p class="mb-0 font-bold">Noah</p>
<p class="mt-0 text-xs text-gray-500">41 défis - 12 victoires</p>
</div>
<p class="text-gray-400 m-0"><strong class="text-black">354</strong> pts</p>
</div>
<div class="grid grid-cols-[auto_1fr_auto] items-center gap-4 mt-0 mb-0">
<p class="w-8 h-8 flex items-center justify-center rounded-full border border-gray-400 bg-gray-50 m-0 text-sm">4</p>
<div>
<p class="mb-0 font-bold">Camille</p>
<p class="mt-0 text-xs text-gray-500">38 défis - 10 victoires</p>
</div>
<p class="text-gray-400 m-0"><strong class="text-black">321</strong> pts</p>
</div>
}
</div>
</ion-content>
src/app/pages/ranking/ranking.component.ts
+37 -3
View File
@@ -1,5 +1,7 @@
import {Component} from '@angular/core';
import {IonicModule} from "@ionic/angular";
import {Component, inject, OnInit, signal} from '@angular/core';
import {IonicModule, LoadingController, ToastController} from "@ionic/angular";
import {GetUserDto, OverallrankingService, UsersService} from "../../services/api";
import {firstValueFrom} from "rxjs";
@Component({
selector: 'app-ranking',
@@ -9,5 +11,37 @@ import {IonicModule} from "@ionic/angular";
IonicModule
]
})
export class RankingComponent {
export class RankingComponent implements OnInit {
private overallRankingService = inject(OverallrankingService);
private loadCtrl = inject(LoadingController);
private toastCtrl = inject(ToastController);
users = signal<GetUserDto[]>([]);
async ngOnInit() {
await this.fetchUsers();
}
async fetchUsers() {
const loading = await this.loadCtrl.create({
message: 'Chargement...',
duration: 1000,
spinner: 'circles'
});
await loading.present();
try {
const users = await firstValueFrom(this.overallRankingService.getOverallRankingEndpoint());
this.users.set(users);
} catch (e) {
const toast = await this.toastCtrl.create({
message: 'Impossible de charger les joueurs',
duration: 2000,
color: 'primary'
});
await toast.present();
}
}
}
//TODO: FAIRE NOS SERVICES POUR TOAST ET LOADING