Merge pull request #106 from AlineRinquin/cecile

Cecile

src/app/components/footer/footer.component.html

@@ -1,12 +1,14 @@
 <div class="footer text-center" >
 <h3>Plan du site</h3>
 <div class="liens">
-<a routerLink="../tableau-de-bord" routerLinkActive="active-custom" class="nav-link">Tableau de bord</a>
-<a routerLink="../compte" routerLinkActive="active-custom" class="nav-link">Ma Team</a>
+
+<a routerLink="../compte" routerLinkActive="active-custom" class="nav-link">Ma Team</a>  
+<a routerLink="../tableau-de-bord" routerLinkActive="active-custom" class="nav-link">Dashboard</a>
 <a routerLink="../repertoire" routerLinkActive="active-custom" class="nav-link">Répertoire</a>
 <a routerLink="../to-do-list" routerLinkActive="active-custom" class="nav-link">To-Do-List</a>
-<a routerLink="../agenda" routerLinkActive="active-custom" class="nav-link">Agenda</a>
 <a routerLink="../menu" routerLinkActive="active-custom" class="nav-link">Menus</a>
+<a routerLink="../agenda" routerLinkActive="active-custom" class="nav-link">Agenda</a>
 <a routerLink="../page-support" routerLinkActive="active-custom" class="nav-link">Nous contacter</a>
 </div>
 </div>
+<!-- juste une suite de liens pour faire un plan du site et un accès direct -->

src/app/components/humeur/humeur.component.html

@@ -3,6 +3,7 @@
 
     <h2>Mon humeur :</h2>
 
+  <!-- envoie une alerte sur le header au clic du changement d'humeur-->
   <app-alert
   *ngIf="isShow"
   [alert]="alert"
@@ -10,12 +11,13 @@
 ></app-alert>
     
     
-    
+    <!--affichage de l'humeur sur laquelle on a cliqué-->
     <p><img src="{{monHumeurLien}}"  alt="{{monHumeurTitle}}" *ngIf="monHumeurLien" ></p> 
     
     <p>Je modifie mon avatar :</p>
     
-    
+    <!--Directive structurelle *ngFor pour afficher tous les éléments du tableau-->
+    <!-- puis récupération au click de l'indice de l'humeur choisie-->
     <div class="humeur" *ngFor="let humor of tabHumeur; let i=index">
         <img src="{{humor.lien}}" alt="{{humor.title}}"  (click)="onChoixHumeur(i)">
     </div> 

src/app/components/humeur/humeur.component.ts

@@ -13,7 +13,7 @@ monHumeurTitle! : string[] ;
 isShow: boolean;
 alert: any;
 
-
+// tableau des humeurs, lien vers les images et titre pour meilleure accesibilité
   tabHumeur= [
       { title : "Je vais bien", lien : "assets/images/emoticon-heureux.png"},
       { title : "Je pleure", lien : "assets/images/emoticon-pleurer.png"},
@@ -21,27 +21,32 @@ alert: any;
       { title : "Je suis en colère", lien : "assets/images/emoticon-insulter.png"},
       { title : "Je suis en joie", lien : "assets/images/emoticon-feter.png"}  ]
 
+
   constructor(private membreService: MembreService, private tokenService: TokenService) { 
     this.isShow= false;
     this.alert="";
-    
      }
 
+// récupère l'id du membre connecté (stocké dans token.service), 
   ngOnInit(): void { 
     const userId = this.tokenService.getCurrentMembreId();
     this.membreService.getMembreId(userId).subscribe({
       next: result => {
-    //this.monHumeurTitle= [this.tabHumeur[result.smiley].title];
     this.monHumeurLien= result.smiley;
-     //  console.log("resultat smiley ", result.smiley);
       }
     })
    }
 
+// méthode pour récupérer l'indice de l'humeur sur laquelle on a cliqué
 onChoixHumeur(numero: any){
  this.monHumeurTitle= [this.tabHumeur[numero].title];
  this.monHumeurLien= [this.tabHumeur[numero].lien];
 
+
+
+ // Permet de faire la mise à jour des caractéristiques du membre
+ // Subscribe exécute l'observable, dont le rôle est de suivre le changement d'humeur
+ // et en deuxième ligne de chaque paramètre, affecte l'alerte du header
  this.membreService.updateHumeur(this.tabHumeur[numero].lien)?.subscribe(
   {
     next: result => {
@@ -56,11 +61,13 @@ onChoixHumeur(numero: any){
   }
 );
 
+
 console.log("humeur titre est : ", this.monHumeurTitle);
 console.log("humeur lien est : ", this.monHumeurLien);
 console.log("index humeur est : ", numero);
 }
 
+// méthode pur afficher
 onClickCloseAlert(){
 this.isShow=!this.isShow;
 }

src/app/pages/page-not-found/page-not-found.component.html

@@ -6,7 +6,11 @@
  <div class="text-center">
  
 
+<!--App-rooting.ts indique que si aucun url ne correspond, on arrive sur cette page-->
+<!-- { path: '**', component: PageNotFoundComponent },-->
 
+
+<!--Lien pour nous renvoyer à la racine du localhost-->
       <a routerLink="" routerLinkActive="!active">Je retourne à l'accueil</a>
       <p></p>
       

src/app/pages/page-not-found/page-not-found.component.scss

@@ -11,8 +11,6 @@ p{
 
 .min-vh-100  {
     font-weight: bold;
-    //background-image: linear-gradient(to left top, #051937, #004d7a, #008793, #e2ebe7, #f8faf5);
-    //max-width: max-content;
 }
 
 img {justify-content: center;

src/app/pages/page-signup/page-signup.component.html

@@ -83,7 +83,7 @@
               !signupForm.controls['dateNaissanceFc'].valid
           }"
         />
-        <label for="floatingInputdateNaissance">Votr date de naissance</label>
+        <label for="floatingInputdateNaissance">Votre date de naissance</label>
       </div>
       <div class="form-floating">
         <input

src/app/pages/page-support/page-support.component.html

@@ -1,32 +1,38 @@
-<!--  <div>
-<app-header></app-header>
-<app-side-bar></app-side-bar>
-</div>   -->
+<div>
+    <app-header></app-header>
+    <app-side-bar></app-side-bar>
+</div>
+<app-side-bar [backgroundColor]="'rgb(184, 202, 235)'"></app-side-bar>
 
 
 <div>
-    <h2>Demande support</h2>
-    <form action="/demande_support" method="post">
+
+    <app-alert *ngIf="isShow" [alert]="alert" (eventClose)="onClickCloseAlert()"></app-alert>
+    <h2>Nous contacter</h2>
+    <form (ngSubmit)="onSubmit()" [formGroup]="contactForm">
+
 
         <label for="name">Nom :</label>
         <div>
-            <input type="text" id="name" value="Votre nom" name="user_name">
+            <input type="text" id="floatingInputlastName" [(ngModel)]="expName" placeholder="{{expName}}"   name="lastName" formControlName="lastNameFc" />
         </div>
 
         <label for="mail">E-mail :</label>
         <div>
-            <input type="email" id="mail" name="user_mail" value="Votre adresse mail">
+            <input type="email" id="floatingInputemail" placeholder="{{expMail}}" [(ngModel)]="expMail" name="email" formControlName="emailFc" />
         </div>
-        <label for="msg">Message :</label>
-        <div>
 
-            <textarea id="msg" name="user_message">Formulez votre demande ici</textarea>
-        </div>
+        <label for="msg">Message :</label>
+        <textarea formControlName="messageFc" id="msg" name="message" placeholder="Formulez votre demande ici"
+            required></textarea>
+
         <div class="button">
-            
-            <button class="btn btn-primary">Envoyez votre message</button>
-            <button type="button" class="btn btn-danger">Effacer</button>
+            <button type="submit" [disabled]="contactForm.invalid" class="btn btn-primary">Envoyez votre
+                message</button>
+            <button type="button" class="btn btn-danger" (click)="onDeleteMail()">Effacer</button>
         </div>
+
     </form>
 </div>
+
 <app-footer></app-footer>

src/app/pages/page-support/page-support.component.scss

@@ -1,9 +1,12 @@
+
+
+
 form {
   background-color: rgb(184, 202, 235);
   width: 600px;
-  border: 3px solid blue;
+  border: 1px solid blue;
   margin: 0 auto;
-  border-radius: 1em;
+  border-radius: 2em;
   padding:3em;
   }
 

src/app/pages/page-support/page-support.component.ts

@@ -1,19 +1,83 @@
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { MembreService } from 'src/app/services/membre.service';
+import { TokenService } from 'src/app/services/token.service';
+import { MailService } from 'src/app/services/mail.service';
 import { Component, OnInit } from '@angular/core';
+import { Mail } from 'src/app/models/mail';
 
-//DRIVEN FORM
 @Component({
   selector: 'app-page-support',
   templateUrl: './page-support.component.html',
   styleUrls: ['./page-support.component.scss']
 })
 export class PageSupportComponent implements OnInit {
+  public contactForm: FormGroup;
+  memberName: any;
+  alert: any;
+  isShow: boolean;
+expName: any;
+expMail: any;
 
-  constructor() { }
+
+  constructor(private membreService: MembreService,
+    private tokenService: TokenService,
+    private fb: FormBuilder,
+    private mailService: MailService,
+  ) {
+    this.contactForm = new FormGroup({});
+    this.alert = "";
+    this.isShow = false;
+  }
 
   ngOnInit(): void {
+    this.contactForm = this.fb.group(
+      {
+        lastNameFc: new FormControl('', [Validators.required]),
+        emailFc: new FormControl('', [Validators.required]),
+        messageFc: new FormControl('', [Validators.required]),
+      }
+    );
+    this.membreService.getMembreId(this.tokenService.getCurrentMembreId()).subscribe((result) => {
+      this.memberName = result;
+      this.expName = this.memberName.nom;
+      this.expMail = this.memberName.email;
+    })
+  }
+
+  public onSubmit(): void {
+    const nomValue = this.contactForm.value['lastNameFc'];
+    const emailValue = this.contactForm.value['emailFc'];
+    const messageValue = this.contactForm.value['messageFc'];
+    console.log(this.contactForm);
+
+
+    const mail: Mail = {
+      recipient: "organizee.contact@gmail.com",
+      subject: "Demande de support",
+      message: `
+      Bonjour!\n
+      Nouveau message d'un utilisateur du site\n
+      Nom : ${nomValue} \n
+      Email : ${emailValue} \n
+      Message : ${messageValue} \n `
+    };
+    this.mailService.envoiMailText(mail)?.subscribe((respMail) => {
+      console.log("Mail envoyé");
+      this.alert = { "type": "success", "content": "Votre message a été envoyé" };
+      this.isShow = true;
+    })
+  }
+
+  onDeleteMail() {
+    console.log("Formulaire effacé");
+    location.reload();
+    this.alert = { "type": "danger", "content": "Réinitialisation en cours" };
+    this.isShow = true;
+  }
+
+  onClickCloseAlert() {
+    this.isShow = !this.isShow;
   }
 
 
-}
-
-
+}

src/app/services/membre.service.ts

@@ -58,6 +58,8 @@ export class MembreService {
     }
 }
 
+//récupère l'identifiant du membre, ainsi que le lien de son humeur
+//"numero" est l'indice de l'humeur dans le tableau des humeurs
 updateHumeur(numero : any) : Observable<any> | void {
   const userId = this.tokenService.getCurrentMembreId();
   if (userId){
@@ -67,6 +69,10 @@ updateHumeur(numero : any) : Observable<any> | void {
   }
 }
 
+
+
+
+
 }