Created social page

2026-03-28 15:45:09 +01:00
parent 8dc66363ce
commit fdb4cf119b
73 changed files with 1097 additions and 1748 deletions
@@ -0,0 +1,39 @@
+@if (friends().length > 0) {
+    <div class="rounded-3xl px-5 m-3 bg-white overflow-auto font-mono border-1 border-gray-300">
+        <ion-list>
+            @for (friend of friends(); track friend.friendId; let i = $index) {
+                @if (i == friends().length - 1) {
+                    <ion-item lines="none">
+                        <ion-avatar slot="start" class="w-5 h-5">
+                            <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 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>
+                        </ion-button>
+                    </ion-item>
+                } @else {
+                    <ion-item lines="full">
+                        <ion-avatar slot="start" class="w-5 h-5">
+                            <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 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>
+                        </ion-button>
+                    </ion-item>
+                }
+            }
+        </ion-list>
+    </div>
+} @else {
+    <div class="flex justify-center items-center p-4">
+        <p class="text-center text-sm italic text-gray-500 font-serif">
+            C'est plus marrant à plusieurs, ajoute des amis !
+        </p>
+    </div>
+}
@@ -0,0 +1,67 @@
+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, GetFriendDto} from "../../services/api";
+import {firstValueFrom} from "rxjs";
+import {FriendsStateService} from "../../services/friends-state";
+
+addIcons({
+    'close': closeCircleOutline,
+});
+
+@Component({
+    selector: 'app-friends-list',
+    templateUrl: './friends-list.component.html',
+    styleUrls: ['./friends-list.component.scss'],
+    imports: [
+        IonicModule
+    ]
+})
+export class FriendsListComponent implements OnInit {
+    private friendsService = inject(FriendsService);
+    private toastCtrl = inject(ToastController);
+    private friendsState = inject(FriendsStateService);
+
+    friends = this.friendsState.friends;
+
+    async ngOnInit() {
+        await this.fetchFriends();
+    }
+
+    async fetchFriends() {
+        try {
+            const friends = await firstValueFrom(this.friendsService.getAllFriendsEndpoint());
+            this.friendsState.setFriends(friends);
+        } catch (e) {
+            const toast = await this.toastCtrl.create({
+                message: 'Amis introuvables',
+                duration: 2000,
+                color: 'primary'
+            });
+            await toast.present();
+        }
+    }
+
+    async deleteFriend(friendId: number) {
+        try {
+            await firstValueFrom(this.friendsService.deleteFriendEndpoint(friendId));
+            const toast = await this.toastCtrl.create({
+                message: 'Vous avez supprimé cet ami',
+                duration: 2000,
+                color: 'success'
+            });
+            await toast.present();
+        } catch (e) {
+            const toast = await this.toastCtrl.create({
+                message: 'Vous ne pouvez pas supprimer cet ami',
+                duration: 2000,
+                color: 'danger'
+            });
+            await toast.present();
+        }
+        this.friendsState.removeFriend(friendId);
+    }
+}
+
+//TODO : QUAND ON CLIQUE SUR UN JOUEUR ON PEUT VOIR SA PAGE (VAUT AUSSI POUR CLASSEMENT