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

Cleaned code with new components

Browse Source
This commit is contained in:
sanchezvem
2026-04-14 17:54:44 +01:00
parent 90243bc671
commit b551659a69
58 changed files with 1764 additions and 853 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/friends/friends-list.component.html
+1 -57
View File
@@ -53,63 +53,7 @@
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding" style="--background: #f7f6f2;">
<div class="rounded-lg 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-lg 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-lg 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-lg 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-lg 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-lg 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-lg 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>
<app-generic-user-info [userInfo]="selectedFriend()"></app-generic-user-info>
</ion-content>
</ng-template>
</ion-modal>
src/app/components/friends/friends-list.component.ts
+3 -1
View File
@@ -5,6 +5,7 @@ import {addIcons} from "ionicons";
import {FriendsService, GetUserDto, UsersService} from "../../services/api";
import {firstValueFrom} from "rxjs";
import {FriendsStateService} from "../../services/friends-state";
import {GenericUserInfoComponent} from "../generic-user-info/generic-user-info.component";
addIcons({
'close': closeCircleOutline,
@@ -15,7 +16,8 @@ addIcons({
templateUrl: './friends-list.component.html',
styleUrls: ['./friends-list.component.scss'],
imports: [
IonicModule
IonicModule,
GenericUserInfoComponent
]
})
export class FriendsListComponent {
src/app/components/generic-user-info/generic-user-info.component.html
+57
View File
@@ -0,0 +1,57 @@
<div class="rounded-lg 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=""
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">
{{ userInfo()?.firstName }} {{ userInfo()?.name.charAt(0) }}.
</ion-label>
<ion-label class="text-xs font-mono block text-gray-400 mt-0.5">
{{ userInfo()?.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 (userInfo().designationName) {
⚡ {{ userInfo().designationName }}
} @else {
⚡ En sommeil
}
</ion-label>
</div>
</div>
<div class="grid grid-cols-3 px-1">
<div class="rounded-lg px-4 py-0.5 m-2 bg-white border border-gray-200">
<p class="text-2xl font-black font-mono mb-0.5">{{ userInfo().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-lg px-4 py-0.5 m-2 bg-white border border-gray-200">
<p class="text-2xl font-black font-mono mb-0.5">{{ userInfo().getUserStatsDto.totalWin }}</p>
<p class="text-[11px] font-semibold font-mono text-gray-400 mt-0">Victoires</p>
</div>
<div class="rounded-lg px-4 py-0.5 m-2 bg-white border border-gray-200">
<p class="text-2xl font-black font-mono mb-0.5">{{ userInfo().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-lg px-4 py-0.5 m-2 bg-white border border-gray-200">
<p class="text-2xl font-black font-mono mb-0.5">{{ userInfo().getUserStatsDto.totalBonusChallenge }}</p>
<p class="text-[11px] font-semibold font-mono text-gray-400 mt-0">Défis bonus</p>
</div>
<div class="rounded-lg px-4 py-0.5 m-2 bg-white border border-gray-200">
<p class="text-2xl font-black font-mono mb-0.5">{{ userInfo().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-lg px-4 py-0.5 m-2 bg-white border border-gray-200">
<p class="text-2xl font-black font-mono mb-0.5">{{ userInfo().getUserStatsDto.score }}</p>
<p class="text-[11px] font-semibold font-mono text-gray-400 mt-0">Score global</p>
</div>
</div>
src/app/components/generic-user-info/generic-user-info.component.scss
View File
src/app/components/generic-user-info/generic-user-info.component.ts
+15
View File
@@ -0,0 +1,15 @@
import {Component, input} from '@angular/core';
import {IonicModule} from "@ionic/angular";
import {GetUserDetailsDto, GetUserDto} from "../../services/api";
@Component({
selector: 'app-generic-user-info',
templateUrl: './generic-user-info.component.html',
styleUrls: ['./generic-user-info.component.scss'],
imports: [
IonicModule
]
})
export class GenericUserInfoComponent {
userInfo = input.required<GetUserDetailsDto | GetUserDto>()
}
src/app/components/settings-options/settings-options.component.html
+33
View File
@@ -0,0 +1,33 @@
<div class="rounded-lg px-5 m-3 bg-white border border-gray-200 items-center">
<ion-list>
@for (n of options; track n) {
@if (n == options.length) {
<ion-item lines="none">
<p class="text-sm text-red-800">Se déconnecter</p>
<ion-icon slot="end" class="text-xl text-red-800" name="logout"></ion-icon>
</ion-item>
} @else {
<ion-item lines="full">
@switch (n) {
@case (1) {
<p class="text-sm text-gray-600">Modifier le pseudo</p>
<ion-icon slot="end" class="text-xl text-gray-400" name="chevron"></ion-icon>
}
@case (2) {
<p class="text-sm text-gray-600">Modifier l'email</p>
<ion-icon slot="end" class="text-xl text-gray-400" name="chevron"></ion-icon>
}
@case (3) {
<p class="text-sm text-gray-600">Modifier le mot de passe</p>
<ion-icon slot="end" class="text-xl text-gray-400" name="chevron"></ion-icon>
}
@case (4) {
<p class="text-sm text-gray-600">Changer de désignation</p>
<ion-icon slot="end" class="text-xl text-gray-400" name="chevron"></ion-icon>
}
}
</ion-item>
}
}
</ion-list>
</div>
src/app/components/settings-options/settings-options.component.scss
View File
src/app/components/settings-options/settings-options.component.ts
+22
View File
@@ -0,0 +1,22 @@
import {Component} from '@angular/core';
import {IonicModule} from "@ionic/angular";
import {logOutOutline, chevronForwardOutline} from "ionicons/icons";
import {addIcons} from "ionicons";
addIcons({
'logout': logOutOutline,
'chevron': chevronForwardOutline
});
@Component({
selector: 'app-settings-options',
templateUrl: './settings-options.component.html',
styleUrls: ['./settings-options.component.scss'],
imports: [
IonicModule
]
})
export class SettingsOptionsComponent {
options = [1, 2, 3, 4, 5];
}