Fixed error with modal and datas
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
@if (friends().length > 0) {
|
||||
<div class="rounded-3xl px-5 m-3 bg-white overflow-auto font-mono border-1 border-gray-300">
|
||||
<div class="rounded-3xl px-5 m-3 bg-white font-mono border-1 border-gray-300">
|
||||
<ion-list>
|
||||
@for (friend of friends(); track friend.friendId; let i = $index) {
|
||||
@if (i == friends().length - 1) {
|
||||
@@ -8,7 +8,9 @@
|
||||
<img alt="Silhouette of a person's head"
|
||||
src="https://ionicframework.com/docs/img/demos/avatar.svg"/>
|
||||
</ion-avatar>
|
||||
<ion-label class="text-xs font-mono font-bold">{{ friend.username }}</ion-label>
|
||||
<ion-label class="text-xs font-mono font-bold"
|
||||
(touchstart)="setOpen(true, friend.friendId)">{{ friend.username }}
|
||||
</ion-label>
|
||||
<ion-label class="text-xs font-mono text-gray-400">{{ friend.score }} <em>pts</em></ion-label>
|
||||
<ion-button fill="clear" (touchstart)="deleteFriend(friend.friendId)">
|
||||
<ion-icon slot="icon-only" name="close" class="text-red-600"></ion-icon>
|
||||
@@ -20,7 +22,9 @@
|
||||
<img alt="Silhouette of a person's head"
|
||||
src="https://ionicframework.com/docs/img/demos/avatar.svg"/>
|
||||
</ion-avatar>
|
||||
<ion-label class="text-xs font-mono font-bold">{{ friend.username }}</ion-label>
|
||||
<ion-label class="text-xs font-mono font-bold"
|
||||
(touchstart)="setOpen(true, friend.friendId)">{{ friend.username }}
|
||||
</ion-label>
|
||||
<ion-label class="text-xs font-mono text-gray-400">{{ friend.score }} <em>pts</em></ion-label>
|
||||
<ion-button fill="clear" (touchstart)="deleteFriend(friend.friendId)">
|
||||
<ion-icon slot="icon-only" name="close" class="text-red-600"></ion-icon>
|
||||
@@ -36,4 +40,76 @@
|
||||
C'est plus marrant à plusieurs, ajoute des amis !
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
<ion-modal [isOpen]="isModalOpen">
|
||||
<ng-template>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Profil</ion-title>
|
||||
<ion-buttons slot="start" style="--ion-color-primary: #0054E9;">
|
||||
<ion-back-button default-href="" (touchstart)="setOpen(false, null)"></ion-back-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content class="ion-padding" style="--background: #f7f6f2;">
|
||||
<div class="rounded-xl px-5 m-3 bg-white border border-gray-200 grid grid-cols-3 items-center">
|
||||
<div>
|
||||
<ion-avatar slot="start" class="w-20 h-20 p-2">
|
||||
<img alt="Silhouette of a person's head"
|
||||
src="https://ionicframework.com/docs/img/demos/avatar.svg"/>
|
||||
</ion-avatar>
|
||||
</div>
|
||||
<div class="col-span-2 py-3">
|
||||
<ion-label class="text-[15px] font-sans font-bold block">
|
||||
{{ selectedFriend()?.firstName }} {{ selectedFriend()?.name.charAt(0) }}.
|
||||
</ion-label>
|
||||
<ion-label class="text-xs font-mono block text-gray-400 mt-0.5">
|
||||
@{{ selectedFriend()?.username }}
|
||||
</ion-label>
|
||||
<ion-label
|
||||
class="text-[10px] font-sans font-semibold block mt-2 bg-gray-100 text-gray-500 rounded-full px-2 py-0.5 w-fit">
|
||||
@if (selectedFriend().designationName) {
|
||||
⚡ {{ selectedFriend().designationName }}
|
||||
} @else {
|
||||
⚡ En sommeil
|
||||
}
|
||||
</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-3 px-1">
|
||||
<div class="rounded-xl px-4 py-0.5 m-2 bg-white border border-gray-200">
|
||||
<p class="text-2xl font-black font-mono mb-0.5">{{ selectedFriend().getUserStatsDto.totalChallenge }}</p>
|
||||
<p class="text-[11px] font-semibold font-mono text-gray-400 mt-0">Défis réalisés</p>
|
||||
</div>
|
||||
<div class="rounded-xl px-4 py-0.5 m-2 bg-white border border-gray-200">
|
||||
<p class="text-2xl font-black font-mono mb-0.5">{{ selectedFriend().getUserStatsDto.totalWin }}</p>
|
||||
<p class="text-[11px] font-semibold font-mono text-gray-400 mt-0">Victoires</p>
|
||||
</div>
|
||||
<div class="rounded-xl px-4 py-0.5 m-2 bg-white border border-gray-200">
|
||||
<p class="text-2xl font-black font-mono mb-0.5">{{ selectedFriend().getUserStatsDto.totalPodium }}</p>
|
||||
<p class="text-[11px] font-semibold font-mono text-gray-400 mt-0">Podiums</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 px-1">
|
||||
<div class="rounded-xl px-4 py-0.5 m-2 bg-white border border-gray-200">
|
||||
<p class="text-2xl font-black font-mono mb-0.5">{{ selectedFriend().getUserStatsDto.totalBonusChallenge }}</p>
|
||||
<p class="text-[11px] font-semibold font-mono text-gray-400 mt-0">Défis bonus</p>
|
||||
</div>
|
||||
<div class="rounded-xl px-4 py-0.5 m-2 bg-white border border-gray-200">
|
||||
<p class="text-2xl font-black font-mono mb-0.5">{{ selectedFriend().getUserStatsDto.series }}×</p>
|
||||
<p class="text-[11px] font-semibold font-mono text-gray-400 mt-0">Séries max</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-1">
|
||||
<div class="rounded-xl px-4 py-0.5 m-2 bg-white border border-gray-200">
|
||||
<p class="text-2xl font-black font-mono mb-0.5">{{ selectedFriend().getUserStatsDto.score }}</p>
|
||||
<p class="text-[11px] font-semibold font-mono text-gray-400 mt-0">Score global</p>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ng-template>
|
||||
</ion-modal>
|
||||
@@ -1,8 +1,8 @@
|
||||
import {Component, inject, OnInit} from '@angular/core';
|
||||
import {Component, inject, OnInit, signal} from '@angular/core';
|
||||
import {IonicModule, ToastController} from "@ionic/angular";
|
||||
import {closeCircleOutline} from 'ionicons/icons';
|
||||
import {addIcons} from "ionicons";
|
||||
import {FriendsService} from "../../services/api";
|
||||
import {FriendsService, GetUserDto, UsersService} from "../../services/api";
|
||||
import {firstValueFrom} from "rxjs";
|
||||
import {FriendsStateService} from "../../services/friends-state";
|
||||
|
||||
@@ -20,9 +20,14 @@ addIcons({
|
||||
})
|
||||
export class FriendsListComponent implements OnInit {
|
||||
private friendsService = inject(FriendsService);
|
||||
private usersService = inject(UsersService);
|
||||
private toastCtrl = inject(ToastController);
|
||||
private friendsState = inject(FriendsStateService);
|
||||
|
||||
selectedFriend = signal<GetUserDto>(null);
|
||||
|
||||
isModalOpen = false;
|
||||
|
||||
friends = this.friendsState.friends;
|
||||
|
||||
async ngOnInit() {
|
||||
@@ -62,6 +67,21 @@ export class FriendsListComponent implements OnInit {
|
||||
}
|
||||
this.friendsState.removeFriend(friendId);
|
||||
}
|
||||
}
|
||||
|
||||
//TODO : QUAND ON CLIQUE SUR UN JOUEUR ON PEUT VOIR SA PAGE (VAUT AUSSI POUR CLASSEMENT
|
||||
async setOpen(isOpen: boolean, userId: number) {
|
||||
if (isOpen) {
|
||||
try {
|
||||
const userInfo = await firstValueFrom(this.usersService.getUserEndpoint(userId));
|
||||
this.selectedFriend.set(userInfo);
|
||||
} catch (e) {
|
||||
const toast = await this.toastCtrl.create({
|
||||
message: 'Impossible de charger les données du joueur',
|
||||
duration: 2000,
|
||||
color: 'primary'
|
||||
});
|
||||
await toast.present();
|
||||
}
|
||||
}
|
||||
this.isModalOpen = isOpen;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user