added ranking and connected with back

src/app/pages/login/login.component.html

@@ -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

@@ -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

@@ -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">
+        @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">
-            <p class="w-8 h-8 flex items-center justify-center rounded-full border border-gray-400 bg-yellow-300 m-0">1</p>
+
+                @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">Mathys</p>
+                    <p class="mb-0 font-bold">{{ user.username }}</p>
-                <p class="mt-0 text-xs text-gray-500">52 défis - 18 victoires</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">412</strong> pts</p>
+                <p class="text-gray-400 m-0"><strong class="text-black">{{ user.getUserStatsDto.score }}</strong> pts
-        </div>
+                </p>
-        <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

@@ -1,5 +1,7 @@
-import {Component} from '@angular/core';
+import {Component, inject, OnInit, signal} from '@angular/core';
-import {IonicModule} from "@ionic/angular";
+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