page 404 et début choix humeur

src/app/app-routing.module.ts

@@ -12,6 +12,7 @@ import { PageForgotPasswordComponent } from './pages/page-forgot-password/page-f
 import { PageMenuSemaineComponent } from './pages/page-menu-semaine/page-menu-semaine.component';
 import { PageModifierContactComponent } from './pages/page-modifier-contact/page-modifier-contact.component';
 import { PageNotFoundComponent } from './pages/page-not-found/page-not-found.component';
+import { PageHumeurComponent} from './pages/page-humeur/page-humeur.component';
 import { PageRepertoireComponent } from './pages/page-repertoire/page-repertoire.component';
 import { PageResetPasswordComponent } from './pages/page-reset-password/page-reset-password.component';
 import { PageSignupComponent } from './pages/page-signup/page-signup.component';
@@ -36,6 +37,7 @@ const routes: Routes = [
   { path: 'modifier-membre', component: PageUpdateMemberComponent },
   { path: 'ajouter-contact', component: PageAjoutContactComponent },
   { path: 'creation-team', component: PageCreationTeamComponent },
+  { path: 'humeur', component: PageHumeurComponent },
   { path: '**', component: PageNotFoundComponent },
 ];
 

src/app/app.module.ts

@@ -21,7 +21,6 @@ import { PageUpdateMemberComponent } from './pages/page-update-member/page-updat
 import { SigninComponent } from './components/signin/signin.component';
 import { PageDashboardComponent } from './pages/page-dashboard/page-dashboard.component';
 import { MeteoComponent } from './components/meteo/meteo.component';
-import { HumeurComponent } from './components/humeur/humeur.component';
 import { CalendrierComponent } from './components/calendrier/calendrier.component';
 import { AvatarComponent } from './components/avatar/avatar.component';
 import { CardMemberComponent } from './components/card-member/card-member.component';
@@ -37,7 +36,7 @@ import { PageAjoutContactComponent } from './pages/page-ajout-contact/page-ajout
 import { PageModifierContactComponent } from './pages/page-modifier-contact/page-modifier-contact.component';
 import { PageCreationTeamComponent } from './pages/page-creation-team/page-creation-team.component';
 import { AutofocusFixModule  } from 'ngx-autofocus-fix';
-import { EmoticonComponent } from './emoticon/emoticon.component';
+import { PageHumeurComponent } from './pages/page-humeur/page-humeur.component';
 
 
 
@@ -62,7 +61,7 @@ import { EmoticonComponent } from './emoticon/emoticon.component';
     SigninComponent,
     PageDashboardComponent,
     MeteoComponent,
-    HumeurComponent,
+    PageHumeurComponent,
     CalendrierComponent,
     AvatarComponent,
     CardMemberComponent,
@@ -75,7 +74,7 @@ import { EmoticonComponent } from './emoticon/emoticon.component';
     PageAjoutContactComponent,
     PageModifierContactComponent,
     PageCreationTeamComponent,
-    EmoticonComponent,
+    PageHumeurComponent,
   ],
   imports: [
     BrowserModule,
@@ -83,7 +82,7 @@ import { EmoticonComponent } from './emoticon/emoticon.component';
     ReactiveFormsModule,
     HttpClientModule,
     FormsModule,
-    AutofocusFixModule.forRoot(),
+    // AutofocusFixModule.forRoot(),
   ],
   providers: [],
   bootstrap: [AppComponent],

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

@@ -1,6 +0,0 @@
-<p>Mon humeur est :</p>
-
-<p>Affichage des items du tableau des humeurs</p>
-
-<app-emoticon> *ngFor ="let tabHumeur of tabHumeur" 
-    [tabHumeur]="tabHumeur"></app-emoticon>

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

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { HumeurComponent } from './humeur.component';
-
-describe('HumeurComponent', () => {
-  let component: HumeurComponent;
-  let fixture: ComponentFixture<HumeurComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ HumeurComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(HumeurComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,29 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-humeur',
-  templateUrl: './humeur.component.html',
-  styleUrls: ['./humeur.component.scss']
-})
-export class HumeurComponent implements OnInit {
-
-
-
-
-
-
-  constructor() {
-    
-   
-    
-
-   }
-
-  ngOnInit(): void {
-
-
-
-
-  }
-
-}

src/app/emoticon/emoticon.component.html

@@ -1,6 +0,0 @@
-<p>emoticon des humeurs</p>
-<div *ngFor="let humor of tabHumeur">{{humor.title}}</div>
-<div *ngFor="let humor of tabHumeur"> <img src="{{humor.lien}}" alt="{{humor.title}}"></div>
-
-
-

src/app/emoticon/emoticon.component.ts

@@ -1,26 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-emoticon',
-  templateUrl: './emoticon.component.html',
-  styleUrls: ['./emoticon.component.scss']
-})
-export class EmoticonComponent implements OnInit {
-
-     //declaration du tableau
-     tabHumeur= [
-      { title : "Je pleure", lien : "../../../assets/images/emoticon-pleurer.png"},
-      { title : "Je suis en colère", lien : "../../../assets/images/emoticon-insulter.png"},
-      { title : "Je suis malade", lien : "../../../assets/images/emoticon-vomir.png"}
-    ]
-
-
-  constructor() { }
-
-  ngOnInit(): void {
-
-
-console.log("tab humeurs ==>", this.tabHumeur)
-  }
-
-}

src/app/models/membre.ts

@@ -6,5 +6,6 @@ export interface Membre {
   dateNaissance: Date;
   couleur: string;
   passwordConfirm: string;
+ // smiley: string;
   roleList: string[];
 }

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

@@ -0,0 +1,25 @@
+<p>page-humeur works!   </p>
+<!--<img  [src]="monHumeurLien";>
+<img [src]="tabHumeur[0].lien">
+-->
+
+
+******************************************
+<!-- <p>Présentement, {{onChoixHumeur()}}</p> -->
+choix de mon humeur
+<!-- {{monHumeurTitle}} -->
+<!--  <br> -->
+ <img src="{{monHumeurLien}}" *ngIf="monHumeurLien" >
+
+<p>Je choisis mon humeur :</p>
+
+
+<div *ngFor="let humor of tabHumeur; let i=index">
+    {{i}} 
+    <img src="{{humor.lien}}" alt="{{humor.title}}"  (click)="onChoixHumeur(i)">{{humor.title}}
+</div> 
+
+<div >
+    
+
+</div>

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

@@ -0,0 +1,12 @@
+
+
+img {
+	width: 50px;
+	height: 50px;
+}
+
+p>img {
+	width: 70px;
+	height: 70px;
+
+}

src/app/pages/page-humeur/page-humeur.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { EmoticonComponent } from './emoticon.component';
+import { PageHumeurComponent } from './page-humeur.component';
 
-describe('EmoticonComponent', () => {
-  let component: EmoticonComponent;
-  let fixture: ComponentFixture<EmoticonComponent>;
+describe('PageHumeurComponent', () => {
+  let component: PageHumeurComponent;
+  let fixture: ComponentFixture<PageHumeurComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ EmoticonComponent ]
+      declarations: [ PageHumeurComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(EmoticonComponent);
+    fixture = TestBed.createComponent(PageHumeurComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-page-humeur',
+  templateUrl: './page-humeur.component.html',
+  styleUrls: ['./page-humeur.component.scss']
+})
+
+export class PageHumeurComponent implements OnInit {
+  
+ monHumeurLien! : string[];
+ monHumeurTitle! : string[] ;
+
+
+  tabHumeur= [
+      { title : "Je vais bien", lien : "assets/images/emoticon-heureux.png"},
+      { title : "Je pleure", lien : "assets/images/emoticon-pleurer.png"},
+      { title : "Je suis en colère", lien : "assets/images/emoticon-insulter.png"},
+      { title : "Je suis malade", lien : "assets/images/emoticon-vomir.png"}  ]
+
+  constructor() {    }
+
+  ngOnInit(): void { }
+
+onChoixHumeur(numero: number){
+ this.monHumeurTitle= [this.tabHumeur[numero].title];
+ this.monHumeurLien= [this.tabHumeur[numero].lien];
+
+console.log("humeur titre est : ", this.monHumeurTitle);
+console.log("humeur lien est : ", this.monHumeurLien);
+console.log("index humeur est : ", numero );
+
+}
+
+
+
+}
+

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

@@ -4,12 +4,16 @@
 
   <div class="ctn-link min-vh-100">
  <div class="text-center">
- <p> Page introuvable</p>
+ 
 
 
       <a routerLink="" routerLinkActive="!active">Je retourne à l'accueil</a>
-    </div>
+      <p></p>
+      
+
     
+     <img src="/assets/images/404.gif" alt="Page introuvable">
+    </div>
   </div>
 
 </div>

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

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