dev en cours

src/app/composants/chat/chat.component.css

@@ -0,0 +1,5 @@
+.chatdiv { overflow-y: scroll; overflow-x: hidden; max-height: 87vh; }
+.chatdat { border-left: 1px solid lightgray; text-align: right; color: lightgray; }
+.chatusr { text-align: right; color: gray; }
+.chatusr::after { content: " :"; }
+.chatmsg { text-align: left; }

src/app/composants/chat/chat.component.html

@@ -1,6 +1,40 @@
 <app-menu></app-menu>
 <div id="main">
-
-Chat !
-
+  <div class="card shadow">
+    <div class="card-header"><span i18n>Boudoir conversationnel</span></div>
+  	<div class="card-header shadow-sm">
+  		<div class="row justify-content-between">
+        <div class="form-group col-sm-9 label-nobr">
+  				<div class="input-group input-group-sn">
+            <input type="text" (keydown.enter)="envoiNouvelleLigne()" class="form-control form-control-sm field-separate" id="input_message" [(ngModel)]="ajoute.ligne" autofocus>
+            <button type="button" (click)="envoiNouvelleLigne()" class="btn bg-gradient btn-primary btn-sm field-separate"><i class="fa-solid fa-comment"></i>&nbsp;<span i18n>Envoyer</span></button>
+  			  </div>
+  			</div>
+        <div class="form-group col-sm-3 label-nobr">
+  				<div class="input-group input-group-sn">
+            <button type="button" class="btn bg-gradient btn-secondary btn-sm field-separate" disabled><span i18n>Destinataire(s)</span></button>
+            <select class="form-select form-select-sm field-separate" id="select_destinataire" [(ngModel)]="ajoute.numeroDestinataire">
+              <option value="0">Tous</option>
+              @for (p of pseudonymes; track p.numeroParticipant) {
+              <option [value]="p.numeroParticipant">{{ p.pseudonyme }}</option>
+              }
+  				  </select>
+  			  </div>
+  			</div>
+  		</div>
+  	</div>
+    <div class="card-body chatdiv">
+      <table class="table table-sm">
+  			<tbody>
+          @for (l of lignes; track l.numeroMessage) {
+  				<tr>
+            <td class="chatusr col-sm-1 label-nobr">{{ l.pseudonyme }}</td>
+            <td class="chatmsg col-sm-10" [class.text-danger]="l.numeroDestinataire > 0" [class.text-primary]="l.ligne.includes(ajoute.pseudonyme)">@if (l.numeroDestinataire > 0) { <span i18n>en privé, pour</span> {{ l.pseudoDestinataire }}&nbsp;: } {{ l.ligne }}</td>
+            <td class="chatdat col-sm-1 label-nobr">{{ l.dateCreation }}</td>
+  				</tr>
+  				}
+  			</tbody>
+  		</table>
+  	</div>
+  </div>
 </div>

src/app/composants/chat/chat.component.ts

@@ -1,33 +1,57 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { FormsModule, NgForm } from '@angular/forms';
 import { timer } from 'rxjs';
 
 import { MenuComponent } from '../menu/menu.component';
 import { MessageShort } from '../../interfaces/chat';
+import { PseudonymeList } from '../../interfaces/participant';
 import { ChatService } from '../../services/chat.service';
+import { AccountService } from '../../services/account.service'
 
-@Component({ selector: 'app-chat', imports: [MenuComponent], templateUrl: './chat.component.html', styleUrl: './chat.component.css' })
+@Component({ selector: 'app-chat', imports: [FormsModule, MenuComponent], templateUrl: './chat.component.html', styleUrl: './chat.component.css' })
 
 export class ChatComponent implements OnInit
 {
 
+  logged: boolean = false;
+  disabled: boolean = false;
+
   dernierNumero: number = 0;
 
   lignes: MessageShort[] = [];
 
   ajoute: MessageShort = new MessageShort();
 
-  constructor(private chatService: ChatService) { }
+  pseudonymes: PseudonymeList[] = [];
+
+  constructor(private chatService: ChatService, private accountService: AccountService, private router: Router) { }
 
   ngOnInit()
   {
-    this.recupererToutesLignes();
+    this.logged = this.accountService.isLogged();
+
+    if (this.logged)
+    {
+      this.ajoute.pseudonyme = this.accountService.getUsername();
 
-    timer(0, 7000).subscribe(() => { this.recupererDernieresLignes(); });
+      this.retreivePseudonymes();
+
+      timer(0, 7000).subscribe(() => { this.recupererDernieresLignes(); });
+    }
   }
 
-  recupererToutesLignes() { this.chatService.getList().subscribe(data => { this.lignes = data; }); this.setDernierNumero(); }
+  recupererDernieresLignes()
+  {
+    if ((this.router.url !== '/chat')) { return; }
+
+    this.logged = this.accountService.isLogged();
 
-  recupererDernieresLignes() { this.chatService.getNew(this.dernierNumero).subscribe(data => { this.lignes = [...this.lignes, ...data]; }); this.setDernierNumero(); }
+    if ((this.logged) && (this.disabled == false))
+    {
+      this.chatService.getNew(this.dernierNumero).subscribe(data => { if (data) { this.lignes = [...data, ...this.lignes]; } this.setDernierNumero(); });
+    }
+  }
 
   private setDernierNumero()
   {
@@ -44,7 +68,19 @@ export class ChatComponent implements OnInit
 
   envoiNouvelleLigne()
   {
-    this.chatService.addNew(this.dernierNumero, this.ajoute).subscribe(data => { this.lignes = [...this.lignes, ...data]; }); this.setDernierNumero();
+    if (this.logged)
+    {
+      this.disabled = true;
+      this.chatService.addNew(this.dernierNumero, this.ajoute).subscribe(data => {
+        this.lignes = [...data, ...this.lignes];
+        this.ajoute = new MessageShort();
+        this.ajoute.pseudonyme = this.accountService.getUsername();
+        this.setDernierNumero();
+        this.disabled = false;
+        });
+    }
   }
 
+  private retreivePseudonymes() { this.chatService.getOptionListPseudonyme().subscribe(data => { this.pseudonymes = data; }); }
+
 }

src/app/interfaces/chat.ts

@@ -1,8 +1,9 @@
 export class MessageShort
 {
-  dateCreation?: string;
+  dateCreation: string = "";
   numeroMessage: number = 0;
   pseudonyme: string = "";
   ligne: string = "";
   numeroDestinataire: number = 0;
+  pseudoDestinataire: string = "";
 }

src/app/interfaces/participant.ts

@@ -67,6 +67,12 @@ export class ParticipantShort
   prenom: string = "";
 }
 
+export class PseudonymeList
+{
+  numeroParticipant: number = 0;
+  pseudonyme: string = "";
+}
+
 export class ParticipantList
 {
   numeroParticipant: number = 0;

src/app/services/chat.service.ts

@@ -3,6 +3,7 @@ import { HttpClient } from '@angular/common/http'
 import { Observable } from 'rxjs';
 import { Environnement } from '../env';
 import { MessageShort } from '../interfaces/chat';
+import { PseudonymeList } from '../interfaces/participant';
 
 @Injectable({ providedIn: 'root' })
 
@@ -13,7 +14,7 @@ export class ChatService
 
   constructor(private httpClient: HttpClient) { }
 
-  getList(): Observable<MessageShort[]> { return this.httpClient.get<MessageShort[]>(`${this.baseURL}/list`); }
+  getOptionListPseudonyme(): Observable<PseudonymeList[]>{ return this.httpClient.get<PseudonymeList[]>(`${this.baseURL}/nickname-list`); }
 
   getNew(last: number): Observable<MessageShort[]> { return this.httpClient.get<MessageShort[]>(`${this.baseURL}/new/${last}`); }