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,45 @@
+@if (friendsRequest().length > 0) {
+    <div class="rounded-3xl px-5 m-3 bg-white overflow-auto font-mono border-1 border-gray-300">
+        <ion-list>
+            @for (request of friendsRequest(); track request.userId; let i = $index) {
+                @if (i == friendsRequest().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">{{ request.username }}</ion-label>
+                        <ion-button fill="clear" (touchstart)="acceptRequest(request)">
+                            <ion-icon slot="icon-only" name="check" class="text-green-600 m-0"></ion-icon>
+                        </ion-button>
+                        <app-pipe></app-pipe>
+                        <ion-button fill="clear" (touchstart)="rejectRequest(request.userId)">
+                            <ion-icon slot="icon-only" name="close" class="text-red-600 m-0"></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">{{ request.username }}</ion-label>
+                        <ion-button fill="clear" (touchstart)="acceptRequest(request)">
+                            <ion-icon slot="icon-only" name="check" class="text-green-600 m-0"></ion-icon>
+                        </ion-button>
+                        <app-pipe></app-pipe>
+                        <ion-button fill="clear" (touchstart)="rejectRequest(request.userId)">
+                            <ion-icon slot="icon-only" name="close" class="text-red-600 m-0"></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">
+            Vous n'avez aucune demande d'ami
+        </p>
+    </div>
+}
@@ -0,0 +1,89 @@
+import {Component, inject, OnInit, signal} from '@angular/core';
+import {IonicModule, ToastController} from "@ionic/angular";
+import {checkmarkCircleOutline, closeCircleOutline} from 'ionicons/icons';
+import {addIcons} from "ionicons";
+import {PipeComponent} from "../pipe/pipe.component";
+import {FriendsService, GetFriendDto, GetFriendRequestDto} from "../../services/api";
+import {firstValueFrom} from "rxjs";
+import {FriendsStateService} from "../../services/friends-state";
+
+addIcons({
+    'check': checkmarkCircleOutline,
+    'close': closeCircleOutline
+});
+
+@Component({
+    selector: 'app-friend-request',
+    templateUrl: './friend-request.component.html',
+    styleUrls: ['./friend-request.component.scss'],
+    imports: [
+        IonicModule,
+        PipeComponent
+    ]
+})
+export class FriendRequestComponent implements OnInit {
+    private friendsService = inject(FriendsService);
+    private toastCtrl = inject(ToastController);
+    private friendsState = inject(FriendsStateService);
+
+    friendsRequest = this.friendsState.requests;
+
+    async ngOnInit() {
+        await this.fetchFriendsRequest();
+    }
+
+    async fetchFriendsRequest() {
+        try {
+            const requests = await firstValueFrom(this.friendsService.getAllFriendRequestsEndpoint());
+            this.friendsState.setRequests(requests);
+        } catch (e) {
+            const toast = await this.toastCtrl.create({
+                message: 'Erreur lors du chargement des demandes d\'amis',
+                duration: 2000,
+                color: 'primary'
+            });
+            await toast.present();
+        }
+        console.log(this.friendsState.requests());
+    }
+
+    async acceptRequest(request: GetFriendRequestDto) {
+        try {
+            await firstValueFrom(this.friendsService.acceptFriendRequestEndpoint(request.userId));
+            this.friendsState.acceptRequest(request);
+            const toast = await this.toastCtrl.create({
+                message: 'Demande d\'ami acceptée',
+                duration: 1000,
+                color: 'success'
+            });
+            await toast.present();
+        } catch (e) {
+            const toast = await this.toastCtrl.create({
+                message: 'Echec de l\'acceptation',
+                duration: 1000,
+                color: 'danger'
+            });
+            await toast.present();
+        }
+    }
+
+    async rejectRequest(id: number) {
+        try {
+            await firstValueFrom(this.friendsService.rejectFriendRequestEndpoint(id));
+            this.friendsState.removeRequest(id);
+            const toast = await this.toastCtrl.create({
+                message: 'Demande d\'ami refusée',
+                duration: 1000,
+                color: 'success'
+            });
+            await toast.present();
+        } catch (e) {
+            const toast = await this.toastCtrl.create({
+                message: 'Echec du refus',
+                duration: 1000,
+                color: 'danger'
+            });
+            await toast.present();
+        }
+    }
+}
@@ -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
@@ -0,0 +1 @@
+<p class="text-gray-300 text-[12px]">|</p>
@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-pipe',
+  templateUrl: './pipe.component.html',
+  styleUrls: ['./pipe.component.scss'],
+})
+export class PipeComponent  implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}
@@ -0,0 +1,3 @@
+<p class="font-sans font-semibold ml-4 mt-0 mb-0 text-[14px] text-gray-500">
+    • <em> {{ textInfo() }} </em>
+</p>
@@ -0,0 +1,14 @@
+import {Component, input} from '@angular/core';
+import {IonicModule} from "@ionic/angular";
+
+@Component({
+    selector: 'app-title-part',
+    templateUrl: './title-part.component.html',
+    styleUrls: ['./title-part.component.scss'],
+    imports: [
+        IonicModule
+    ]
+})
+export class TitlePartComponent {
+    textInfo = input.required<string>();
+}