diff --git a/angular/angular.json b/angular/angular.json index a87b644..893c76f 100644 --- a/angular/angular.json +++ b/angular/angular.json @@ -40,7 +40,9 @@ "src/styles.css", "node_modules/bootstrap/dist/css/bootstrap.min.css" ], - "scripts": [] + "scripts": [ + "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" + ] }, "configurations": { "production": { diff --git a/angular/src/app/about/about.component.html b/angular/src/app/about/about.component.html index 86a08c7..b191ce3 100644 --- a/angular/src/app/about/about.component.html +++ b/angular/src/app/about/about.component.html @@ -2,32 +2,63 @@
-
- Message - - -
+
+
+ Message + + +
+

Liste des commentaires

-
    -
  1. +
    +
    -
    {{ comment.message }}
    +
    {{ msg.user }}
    +
    {{ msg.message }}
    - - {{ comment.date | date:'dd/MM/yyyy' }} -
    2. -
+ + {{ msg.date | date:'dd/MM/yyyy' }} + +
+ + +
+
+
+
+
{{ msg.user }}
+
{{ msg.message }}
+
+ + {{ msg.date | date:'dd/MM/yyyy' }} + +
+
diff --git a/angular/src/app/about/about.component.ts b/angular/src/app/about/about.component.ts index d9193b1..b770537 100644 --- a/angular/src/app/about/about.component.ts +++ b/angular/src/app/about/about.component.ts @@ -1,42 +1,72 @@ import { Component, OnInit } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { InfoService } from '../services/info.service'; +import { MessageService } from '../services/message.service'; @Component({ selector: 'app-about', standalone: false, templateUrl: './about.component.html', - styleUrl: './about.component.css' + styleUrls: ['./about.component.css'] }) export class AboutComponent implements OnInit { + messageForm: FormGroup; + infos: Info[] = []; info: Info = new Info(); - comments: Array = []; + commentsAll: Comment[] = []; + + + comments: Comment[] = []; comment: Comment = new Comment(); newComment: boolean = false; - constructor() {} + constructor(private fb: FormBuilder, private infoService: InfoService, private messageService: MessageService) { + this.messageForm = this.fb.group({ + message: ['', [Validators.required, Validators.minLength(3)]], + }); + } - ngOnInit(): void {} + ngOnInit() { + this.infos = this.infoService.getInfos(); + this.info = this.infos.length > 0 ? this.infos[this.infos.length - 1] : new Info(); + + this.commentsAll = this.messageService.getMessage().slice().reverse(); + this.comment = this.commentsAll.length > 0 ? this.commentsAll[0] : new Comment(); + } addComment() { - if (this.comment.message) { - this.comment.date = new Date(); - this.comments.push({ - message: this.comment.message, - date: this.comment.date - }); - this.comment.message = ''; + if (this.messageForm.valid) { + const formData = this.messageForm.value; + + const user = this.info.gender + this.info.nameLast + ' ' + this.info.nameFirst; + + const newComment = { + ...formData, + user: user, + date: new Date() + }; + + this.comments.push(newComment); + this.messageService.addMessage(newComment); + + this.messageForm.reset(); } } } export class Info { - name: string = "Test"; - email: string = "test@mail.com"; - phone: string= "000000000"; + gender: string = 'Mister.'; + nameLast: string = 'Inconnu'; + nameFirst: string = 'PASLA'; + email: string = 'inconnu.pasla@edu.igensia.com'; + address: string = '0 rue d\'inconnu'; + codePostal: number = 1234; } export class Comment { + user: string = ''; message: string = ''; date: Date | null = null; } diff --git a/angular/src/app/account/account.component.html b/angular/src/app/account/account.component.html index 1a8e57f..f61c57d 100644 --- a/angular/src/app/account/account.component.html +++ b/angular/src/app/account/account.component.html @@ -77,12 +77,17 @@ - - - diff --git a/angular/src/app/account/account.component.ts b/angular/src/app/account/account.component.ts index f75e8ac..5125f94 100644 --- a/angular/src/app/account/account.component.ts +++ b/angular/src/app/account/account.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { InfoService } from '../services/info.service'; @Component({ selector: 'app-account', @@ -12,22 +13,21 @@ export class AccountComponent { infoForm: FormGroup; infos: any[] = []; - constructor(private fb: FormBuilder) { + constructor(private fb: FormBuilder, private infoService: InfoService) { this.infoForm = this.fb.group({ gender: ['', Validators.required], nameLast: ['', [Validators.required, Validators.minLength(3)]], nameFirst: ['', [Validators.required, Validators.minLength(3)]], email: ['', [Validators.required, Validators.pattern(/^[a-zA-Z0-9._%+-]+$/)]], address: ['', [Validators.required, Validators.minLength(10)]], - codePostal: ['', [Validators.required, Validators.minLength(4), Validators.pattern(/^\d{4,}$/)]], + codePostal: ['', [Validators.required, Validators.minLength(4), Validators.pattern(/^\d+$/)]], }); } addInfo() { if (this.infoForm.valid) { const formData = this.infoForm.value; - - // Ajouter @edu.igensia.com automatiquement + const email = formData.email.toLowerCase(); const fullEmail = `${email}@edu.igensia.com`; const nameLast = formData.nameLast.toUpperCase(); @@ -35,14 +35,15 @@ export class AccountComponent { const newInfo = { ...formData, - nameLast: nameLast, // Mettre l'email complet - nameFirst: nameFirst, // Mettre l'email complet - email: fullEmail, // Mettre l'email complet - date: new Date() // Ajoute la date actuelle + nameLast: nameLast, + nameFirst: nameFirst, + email: fullEmail, + date: new Date() }; this.infos.push(newInfo); - this.infoForm.reset(); // Réinitialise le formulaire après l'ajout + this.infoService.addInfo(newInfo); + this.infoForm.reset(); } } } diff --git a/angular/src/app/app-routing.module.ts b/angular/src/app/app-routing.module.ts index 09f67a5..fda40d9 100644 --- a/angular/src/app/app-routing.module.ts +++ b/angular/src/app/app-routing.module.ts @@ -2,12 +2,14 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { AboutComponent } from './about/about.component'; +import { InfoComponent } from './info/info.component'; import { ContactsComponent } from './contacts/contacts.component'; const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent }, + { path: 'info', component: InfoComponent }, { path: 'contacts', component: ContactsComponent }, ]; diff --git a/angular/src/app/app.module.ts b/angular/src/app/app.module.ts index a68d7b5..0c639e7 100644 --- a/angular/src/app/app.module.ts +++ b/angular/src/app/app.module.ts @@ -9,6 +9,7 @@ import { ContactsComponent } from './contacts/contacts.component'; import { HomeComponent } from './home/home.component'; import { NavBarComponent } from './nav-bar/nav-bar.component'; import { AccountComponent } from './account/account.component'; +import { InfoComponent } from './info/info.component'; @NgModule({ declarations: [ @@ -17,7 +18,8 @@ import { AccountComponent } from './account/account.component'; ContactsComponent, HomeComponent, NavBarComponent, - AccountComponent + AccountComponent, + InfoComponent ], imports: [ BrowserModule, diff --git a/angular/src/app/info/info.component.css b/angular/src/app/info/info.component.css new file mode 100644 index 0000000..e69de29 diff --git a/angular/src/app/info/info.component.html b/angular/src/app/info/info.component.html new file mode 100644 index 0000000..404172c --- /dev/null +++ b/angular/src/app/info/info.component.html @@ -0,0 +1,14 @@ +
+ + +
\ No newline at end of file diff --git a/angular/src/app/info/info.component.spec.ts b/angular/src/app/info/info.component.spec.ts new file mode 100644 index 0000000..759896e --- /dev/null +++ b/angular/src/app/info/info.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { InfoComponent } from './info.component'; + +describe('InfoComponent', () => { + let component: InfoComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [InfoComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(InfoComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/angular/src/app/info/info.component.ts b/angular/src/app/info/info.component.ts new file mode 100644 index 0000000..a7f7af3 --- /dev/null +++ b/angular/src/app/info/info.component.ts @@ -0,0 +1,18 @@ +import { Component } from '@angular/core'; +import { InfoService } from '../services/info.service'; + +@Component({ + selector: 'app-info', + standalone: false, + templateUrl: './info.component.html', + styleUrl: './info.component.css' +}) +export class InfoComponent { + infos: any[] = []; + + constructor(private infoService: InfoService) {} + + ngOnInit() { + this.infos = this.infoService.getInfos().slice().reverse(); + } +} diff --git a/angular/src/app/nav-bar/nav-bar.component.html b/angular/src/app/nav-bar/nav-bar.component.html index c127a2e..80dab51 100644 --- a/angular/src/app/nav-bar/nav-bar.component.html +++ b/angular/src/app/nav-bar/nav-bar.component.html @@ -20,6 +20,9 @@
  • About
    • +
  • + Infos +
  • Contacts
    • diff --git a/angular/src/app/services/info.service.spec.ts b/angular/src/app/services/info.service.spec.ts new file mode 100644 index 0000000..0b18632 --- /dev/null +++ b/angular/src/app/services/info.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { InfoService } from './info.service'; + +describe('InfoService', () => { + let service: InfoService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(InfoService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/angular/src/app/services/info.service.ts b/angular/src/app/services/info.service.ts new file mode 100644 index 0000000..316bbcd --- /dev/null +++ b/angular/src/app/services/info.service.ts @@ -0,0 +1,20 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class InfoService { + private infos: any[] = []; + + constructor() { } + + // Ajouter une info + addInfo(info: any) { + this.infos.push(info); + } + + // Récupérer toutes les infos + getInfos() { + return this.infos; + } +} diff --git a/angular/src/app/services/message.service.spec.ts b/angular/src/app/services/message.service.spec.ts new file mode 100644 index 0000000..1db761b --- /dev/null +++ b/angular/src/app/services/message.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { MessageService } from './message.service'; + +describe('MessageService', () => { + let service: MessageService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(MessageService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/angular/src/app/services/message.service.ts b/angular/src/app/services/message.service.ts new file mode 100644 index 0000000..df2ffe6 --- /dev/null +++ b/angular/src/app/services/message.service.ts @@ -0,0 +1,20 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class MessageService { + private messages: any[] = []; + + constructor() { } + + // Ajouter une info + addMessage(message: any) { + this.messages.push(message); + } + + // Récupérer toutes les infos + getMessage() { + return this.messages; + } +}