diff --git a/src/app/components/challenges-accomplished/challenges-accomplished.component.html b/src/app/components/challenges-accomplished/challenges-accomplished.component.html new file mode 100644 index 0000000..87ab372 --- /dev/null +++ b/src/app/components/challenges-accomplished/challenges-accomplished.component.html @@ -0,0 +1,18 @@ +
+ + @for (challenge of userChallenges(); track challenge.challengeTitle) { + +
+
+

{{ challenge.challengeTitle }}

+

{{ challenge.challengeDescription }}

+
+
+

{{ converterHours(challenge.challengeDuration) }}

+

{{ challenge.challengeStartDate }}

+
+
+ + } + +
\ No newline at end of file diff --git a/src/app/components/challenges-accomplished/challenges-accomplished.component.scss b/src/app/components/challenges-accomplished/challenges-accomplished.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/challenges-accomplished/challenges-accomplished.component.ts b/src/app/components/challenges-accomplished/challenges-accomplished.component.ts new file mode 100644 index 0000000..6ae65d9 --- /dev/null +++ b/src/app/components/challenges-accomplished/challenges-accomplished.component.ts @@ -0,0 +1,39 @@ +import {Component, input} from '@angular/core'; +import {IonicModule} from "@ionic/angular"; +import {GetUserChallengeDto} from "../../services/api"; + +@Component({ + selector: 'app-challenges-accomplished', + templateUrl: './challenges-accomplished.component.html', + styleUrls: ['./challenges-accomplished.component.scss'], + imports: [ + IonicModule + ] +}) +export class ChallengesAccomplishedComponent { + userChallenges = input.required(); + + converterHours(hours: number) { + const day = Math.floor(hours / 24); + const week = Math.floor(day / 7); + const month = Math.floor(week / 4); + const year = Math.floor(month / 12); + + switch (true) { + case year > 0: + return `${year} an${year > 1 ? 's' : ''}`; + + case month > 0: + return `${month} mois`; + + case week > 0: + return `${week} semaine${week > 1 ? 's' : ''}`; + + case day > 0: + return `${day} jour${day > 1 ? 's' : ''}`; + + default: + return `${hours} heure${hours > 1 ? 's' : ''}`; + } + } +} diff --git a/src/app/components/user-achievements/user-achievements.component.html b/src/app/components/user-achievements/user-achievements.component.html new file mode 100644 index 0000000..f358128 --- /dev/null +++ b/src/app/components/user-achievements/user-achievements.component.html @@ -0,0 +1,31 @@ +
+ @if (achievements().length > 0) { + @for (achievement of achievements(); track achievement.id) { + +
+
+ +
+
+

{{ achievement.label }}

+

{{ achievement.description }}

+
+
+ + } + } @else { + +
+
+ +
+
+

Pas encore de succès

+

Vos premiers succès apparaîtront ici

+
+
+ + } +
\ No newline at end of file diff --git a/src/app/components/user-achievements/user-achievements.component.scss b/src/app/components/user-achievements/user-achievements.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/user-achievements/user-achievements.component.ts b/src/app/components/user-achievements/user-achievements.component.ts new file mode 100644 index 0000000..8c39b8e --- /dev/null +++ b/src/app/components/user-achievements/user-achievements.component.ts @@ -0,0 +1,22 @@ +import {Component, input} from '@angular/core'; +import {IonicModule} from "@ionic/angular"; +import {checkmarkCircleOutline, trophyOutline} from "ionicons/icons"; +import {addIcons} from "ionicons"; +import {GetAchievementDto} from "../../services/api"; + +addIcons({ + 'check': checkmarkCircleOutline, + 'trophy': trophyOutline +}); + +@Component({ + selector: 'app-user-achievements', + templateUrl: './user-achievements.component.html', + styleUrls: ['./user-achievements.component.scss'], + imports: [ + IonicModule + ] +}) +export class UserAchievementsComponent { + achievements = input.required(); +} diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index 709a4f2..a970db3 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -50,13 +50,12 @@ +
-
-

Vous n'avez pas encore débloqué de succès

-

Test

-
+
+
diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts index 60bfde4..66f346e 100644 --- a/src/app/pages/home/home.component.ts +++ b/src/app/pages/home/home.component.ts @@ -5,6 +5,8 @@ import {personOutline, addOutline, settingsOutline} from "ionicons/icons"; import {TitlePartComponent} from "../../components/title-part/title-part.component"; import {ChallengeCardComponent} from "../../components/challenge-card/challenge-card.component"; import { + AchievementsService, + GetAchievementDto, GetRandomChallengeDto, GetUserChallengeDto, GetUserDetailsDto, @@ -17,6 +19,7 @@ import {GenericUserInfoComponent} from "../../components/generic-user-info/gener import { ChallengesAccomplishedComponent } from "../../components/challenges-accomplished/challenges-accomplished.component"; +import {UserAchievementsComponent} from "../../components/user-achievements/user-achievements.component"; addIcons({ 'profile': personOutline, @@ -34,7 +37,8 @@ addIcons({ ChallengeCardComponent, SettingsOptionsComponent, GenericUserInfoComponent, - ChallengesAccomplishedComponent + ChallengesAccomplishedComponent, + UserAchievementsComponent ] }) export class HomeComponent implements OnInit { @@ -42,10 +46,12 @@ export class HomeComponent implements OnInit { private toastCtrl = inject(ToastController); private usersService = inject(UsersService); private loadCtrl = inject(LoadingController); + private achievementsService = inject(AchievementsService); randomChallenge = signal({}); user = signal({}) userChallenge = signal([]); + userAchievement = signal([]) isModalOpen = false; @@ -73,8 +79,11 @@ export class HomeComponent implements OnInit { try { const userInfo = await firstValueFrom(this.usersService.getUserDetailsEndpoint()); const userChallenge = await firstValueFrom(this.usersService.getAllUserChallengesEndpoint()); + const userAchievement = await firstValueFrom((this.achievementsService.getUserAchievementsEndpoint())); + this.user.set(userInfo); this.userChallenge.set(userChallenge); + this.userAchievement.set(userAchievement); } catch { const toast = await this.toastCtrl.create({ message: 'Impossible de charger les données du joueur',