avancement tuto

src/app/components/add-pin-popup/add-pin-popup.component.html

@@ -67,7 +67,7 @@
       <!-- Modal body -->
       <div class="p-4 md:p-5">
         <form class="grid gap-6 mb-1 md:grid-cols-2" [formGroup]="form">
-          <div>
+          <div id="add-pin-modal-title">
             <label
               for="title"
               class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
@@ -83,7 +83,7 @@
             />
           </div>
 
-          <div>
+          <div id="add-pin-modal-localisation">
             <label
               for="localisation"
               class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
@@ -112,7 +112,7 @@
             </ul>
           </div>
 
-          <div>
+          <div id="add-pin-modal-image">
             <label
               for="files"
               class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
@@ -123,7 +123,7 @@
             ></app-drag-drop>
           </div>
 
-          <div>
+          <div id="add-pin-modal-description">
             <label
               for="description"
               class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
@@ -158,7 +158,7 @@
             </div>
           </div> -->
 
-          <div>
+          <div id="add-pin-modal-date">
             <label
               for="date"
               class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
@@ -182,6 +182,7 @@
             Annuler
           </button>
           <button
+            id="add-pin-modal-validate"
             type="submit"
             (click)="submitForm()"
             class="w-1/2 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"

src/app/components/friend-page/friend-page.component.html

@@ -47,7 +47,7 @@
     </div>
 
     <!-- Barre de recherche -->
-    <div class="p-4">
+    <div class="p-4" id="friend-search-bar">
       <input 
         type="text"
         id="search-friends"
@@ -97,7 +97,7 @@
       </div>
     </div>
 
-    <div class="p-4 space-y-3">
+    <div class="p-4 space-y-3" id="friend-list">
       <p class="dark:text-white">Amis</p>
       <div
         *ngIf="hasNoAcceptedFriends()"

src/app/components/friend-page/friend-page.component.ts

@@ -1,17 +1,18 @@
 import { CommonModule } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { debounceTime, distinctUntilChanged, Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged, Subject, Subscription } from 'rxjs';
 import { FriendsService } from '../../services/friends/friends.service';
 import { LocalStorageService } from '../../services/local-storage/local-storage.service';
 import { UserService } from '../../services/user/user.service';
+import { ModalService } from '../../services/modal/modal.service';
 
 @Component({
   selector: 'app-friend-page',
   imports: [CommonModule, FormsModule],
   templateUrl: './friend-page.component.html',
 })
-export class FriendPageComponent implements OnInit {
+export class FriendPageComponent implements OnInit, OnDestroy {
   protected listFriend: {
     username: string;
     status: string;
@@ -27,19 +28,25 @@ export class FriendPageComponent implements OnInit {
   userId: string = '';
   status: string = '';
   isFriendModalOpen: boolean = false;
-  hasAcceptedFriends: boolean = false;
-  hasPendingFriends: boolean = false;
   searchTerm: string = '';
   searchTermChanged = new Subject<string>();
+  modalId: string = 'friend-modal';
+
+  private modalSub!: Subscription;
 
   constructor(
     private friendService: FriendsService,
     private userService: UserService,
-    private localStorage: LocalStorageService
+    private localStorage: LocalStorageService,
+    private modalService: ModalService
   ) {}
 
   ngOnInit(): void {
     this.getFriendData();
+    this.modalSub = this.modalService.getModalState(this.modalId).subscribe(open => {
+      this.isFriendModalOpen = open;
+    });
+
     this.searchTermChanged
       .pipe(debounceTime(200), distinctUntilChanged())
       .subscribe((username: string) => {
@@ -47,6 +54,10 @@ export class FriendPageComponent implements OnInit {
       });
   }
 
+  ngOnDestroy(): void {
+    this.modalSub.unsubscribe();
+  }
+
   protected searchUser(username: string) {
     this.searchTerm = username;
     if (this.searchTerm) {
@@ -118,7 +129,6 @@ export class FriendPageComponent implements OnInit {
 
   onAcceptOrDeny(id: string, choice: string) {
     if (choice == 'accept') {
-      // If return code is 200, then the friend has been accepted so we can change the status of the friend to accepted
       this.friendService.acceptFriendById(id).subscribe((data: any) => {
         if (data.message == 'Friend request accepted') {
           this.listFriend.forEach((friend) => {
@@ -129,7 +139,6 @@ export class FriendPageComponent implements OnInit {
         }
       });
     } else {
-      // If return code is 200, then the friend has been denied so we can delete the friend from the list
       this.friendService.denyFriendById(id).subscribe((data: any) => {
         if (data.message == 'Friend request denied') {
           this.listFriend.forEach((friend, index) => {
@@ -143,11 +152,11 @@ export class FriendPageComponent implements OnInit {
   }
 
   openFriendModal() {
-    this.isFriendModalOpen = true;
+    this.modalService.openModal(this.modalId);
   }
 
   closeFriendModal() {
-    this.isFriendModalOpen = false;
+    this.modalService.closeModal(this.modalId);
   }
 
   deleteFriend(id: string) {

src/app/components/navbar/navbar.component.ts

@@ -82,12 +82,11 @@ export class NavbarComponent implements OnInit {
       }
     });
 
-    // Initialise la barre de recherche avec debounce et distinctUntilChanged
     this.searchForm
       .get('searchControl')
       ?.valueChanges.pipe(
-        debounceTime(300), // Attendre 300ms après la dernière frappe
-        distinctUntilChanged(), // Ignorer si la nouvelle valeur est la même que la précédente
+        debounceTime(300),
+        distinctUntilChanged(),
         switchMap((searchTerm) => {
           const trimmedQuery = searchTerm?.trim();
           if (trimmedQuery && trimmedQuery.length > 1) {
@@ -131,11 +130,11 @@ export class NavbarComponent implements OnInit {
   clickSuggestion(pin: Pin): void {
     this.searchForm.reset();
 
-    const queryParams = { pin: pin.id }; // Remplacer "id" par la bonne propriété si nécessaire
+    const queryParams = { pin: pin.id };
     this.router.navigate([], {
       relativeTo: this.route,
       queryParams: queryParams,
-      queryParamsHandling: 'merge', // Conserve les autres paramètres de requête
+      queryParamsHandling: 'merge',
     });
   }
 
@@ -146,7 +145,7 @@ export class NavbarComponent implements OnInit {
   onBlur(): void {
     setTimeout(() => {
       this.inputFocus = false;
-    }, 200); // Petit délai pour laisser l'utilisateur cliquer
+    }, 200);
   }
 
   public logout() {

src/app/services/intro/intro.service.ts

@@ -1,41 +1,110 @@
 import { Injectable } from '@angular/core';
 import introJs from 'intro.js';
+import { ModalService } from '../modal/modal.service';
 
 @Injectable({
   providedIn: 'root'
 })
 export class IntroService {
-  private intro = introJs();
+  constructor(private modalService: ModalService) {}
 
-  constructor() {}
+  private sleep(ms: number): Promise<void> {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+  async startIntro() {
+    await new Promise<void>((resolve) => {
+      const intro = introJs();
+      intro.setOptions({
+        tooltipClass: 'custom-tooltip-with-avatar',
+        steps: [
+          { intro: 'Welcome to the web let me show you around!' },
+          { element: '#timeline', intro: 'This is the logo of Memory Map.' },
+          { element: '#quete', intro: 'Click here to open the search bar on mobile.' },
+        ],
+        exitOnOverlayClick: false,
+        disableInteraction: false,
+      });
+
+      intro.oncomplete(() => {
+        resolve();
+      });
+
+      intro.start();
+    });
+    await this.sleep(300);
+
+    await new Promise<void>((resolve) => {
+      const intro = introJs();
+
+      intro.setOptions({
+        tooltipClass: 'custom-tooltip-with-avatar',
+        steps: [
+          { element: '#add', intro: 'salut voici le bouton' },
+          { element: '#add-pin-modal-title', intro: 'salut voici le bouton' },
+          { element: '#add-pin-modal-localisation', intro: 'Here is the modal to add a new pin!' },
+          { element: '#add-pin-modal-image', intro: 'Here is the modal to add a new pin!' },
+          { element: '#add-pin-modal-description', intro: 'Here is the modal to add a new pin!' },
+          { element: '#add-pin-modal-date', intro: 'Here is the modal to add a new pin!' },
+          { element: '#add-pin-modal-validate', intro: 'Here is the modal to add a new pin!' },
+        ],
+        exitOnOverlayClick: false,
+        disableInteraction: false,
+      });
 
-  startIntro() {
-    this.intro.setOptions({
+      intro.onchange(async (element) => {
+        if (element?.id === 'add-pin-modal-title') {
+          this.modalService.openModal('add-pin-modal');
+          await this.sleep(300);
+        }
+      });
+
+      intro.onexit(() => {
+        this.modalService.closeModal('add-pin-modal');
+        resolve();
+      });
+
+      intro.oncomplete(() => {
+        this.modalService.closeModal('add-pin-modal');
+        resolve();
+      });
+
+      intro.start();
+    });
+
+    await this.sleep(300);
+
+    await new Promise<void>((resolve) => {
+      const intro = introJs();
+      intro.setOptions({
+        tooltipClass: 'custom-tooltip-with-avatar',
         steps: [
-        {
-          intro: 'Welcome to the web let me show you around!'
-        },
-        {
-          element: '#timeline',
-          intro: 'This is the logo of Memory Map.'
-        },
-        {
-          element: '#quete',
-          intro: 'Click here to open the search bar on mobile.'
-        },
-        {
-          element: '#add',
-          intro: 'This button toggles the mobile navigation menu.'
-        },
-        {
-          element: '#friend',
-          intro: 'Here is the main navigation menu.'
-        },
+          { element: '#friend', intro: 'Here is the main navigation menu.' },
+          { element: '#friend-search-bar', intro: 'Here is the main navigation menu.' },
+          { element: '#friend-list', intro: 'Here is the main navigation menu.' }
         ],
         exitOnOverlayClick: false,
         disableInteraction: false,
       });
 
-    this.intro.start();
+      intro.onchange(async (element) => {
+        if (element?.id === 'friend-search-bar') {
+          this.modalService.openModal('friend-modal');
+          await this.sleep(300);
+        }
+      });
+
+      intro.onexit(() => {
+        this.modalService.closeModal('friend-modal');
+        resolve();
+      });
+
+      intro.oncomplete(() => {
+        this.modalService.closeModal('friend-modal');
+        resolve();
+      });
+
+      intro.start();
+    });
   }
 }

src/styles.css

@@ -35,8 +35,22 @@
   }
 }
 
-.custom-center-tooltip {
-  z-index: 9999;
+.custom-tooltip-with-avatar {
+  position: relative;
+  padding-left: 60px !important;
+}
+
+.custom-tooltip-with-avatar::before {
+  content: "";
+  position: absolute;
+  left: 10px;
+  top: 10px;
+  width: 80px;
+  height: 80px;
+  background-image: url('assets/perso.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  border-radius: 50%;
 }