Fix

Potits-chats · Jul 18, 2024 · 99409fe · 99409fe
1 parent 046f8b3
commit 99409fe
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 22 deletions.
diff --git a/src/app/components/animaux/animaux-details/animaux-details.component.html b/src/app/components/animaux/animaux-details/animaux-details.component.html
@@ -134,13 +134,13 @@ <h1 class="max-w-lg mb-6 font-sans text-2xl font-bold leading-none tracking-tigh
                     Race :
                 </label>
                 <p class="text-sm text-gray-900">
-                    {{chat.race}}
+                   Je suis un {{chat.race}}
                 </p>
             </div>
 
             <div class="pb-4 mb-4 border-b">
                 <label class="mb-2 block text-sm font-medium leading-5 text-gray-900">
-                    Ententes :
+                    Je m'entends :
                 </label>
                 <div *ngIf="!isEditMode">
                     <p class="text-sm text-gray-900" *ngIf="chat.ententeChat !== undefined">
@@ -203,7 +203,7 @@ <h1 class="max-w-lg mb-6 font-sans text-2xl font-bold leading-none tracking-tigh
                     Association :
                 </label>
                 <p class="text-sm text-gray-900">
-                    Je suis pour le moment gardé par l'association
+                    Je suis actuellement chouchouté par l'association
                     <a class="text-orange-600 hover:text-orange-800" [routerLink]="'/associations/'+chat.association.id">{{ chat.association.nom }}</a>
                 </p>
             </div>
@@ -212,7 +212,7 @@ <h1 class="max-w-lg mb-6 font-sans text-2xl font-bold leading-none tracking-tigh
 
     <!-- New description block -->
     <div class="max-w-screen-lg mt-8 md:mx-auto lg:max-w-screen-lg md:mt-12">
-        <label class="mb-2 block text-sm font-medium leading-5 text-gray-900">Description :</label>
+        <label class="mb-2 block text-lg font-medium leading-5 text-gray-900">Description :</label>
         <p *ngIf="!isEditMode" class="text-base text-gray-700" [innerHTML]="sanitizeHtml(chat.description)">
         </p>
 
@@ -252,9 +252,11 @@ <h3 class="mb-4 text-xl font-semibold leading-6">Santé :</h3>
         Sauvegarder
     </button>
 
-    <button *ngIf="!isEditMode"
+    <button *ngIf="!isEditMode" [routerLink]="['/tchat', chat.association.id]"
         class="flex mx-auto mt-16 text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg">
         Contacter {{chat.nom }}
     </button>
 
-</div>
+</div>
+
+<app-loader *ngIf="!isLoaded"></app-loader>
diff --git a/src/app/components/animaux/animaux-details/animaux-details.component.ts b/src/app/components/animaux/animaux-details/animaux-details.component.ts
@@ -18,6 +18,7 @@ import { Subscription, firstValueFrom } from 'rxjs';
 })
 export class AnimauxDetailsComponent {
   chat: Chat | undefined;
+  isLoaded: boolean = false;
   sexe = Sexe;
   faMars = faMars;
   faVenus = faVenus;
@@ -61,6 +62,7 @@ export class AnimauxDetailsComponent {
     this.route.params.subscribe((params) => {
       if (params['id']) {
         this.appService.getByIdCat(params['id']).subscribe((chat) => {
+          this.isLoaded = true;
           this.chat = chat;
         });
       }

diff --git a/src/app/components/animaux/animaux-list/animaux-list.component.html b/src/app/components/animaux/animaux-list/animaux-list.component.html
@@ -19,7 +19,7 @@ <h1 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-4xl">Les chat
         <select formControlName="race"
             class="form-select block w-full sm:w-auto px-3 py-2 border border-gray-300 rounded-md text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
             <option value="">Race des chats</option>
-            <option value="siamois">Siamois</option>
+            <option value="bengal">Bengal</option>
             <option value="persan">Persan</option>
             <option value="maine-coon">Maine Coon</option>
         </select>

diff --git a/src/app/components/associations/associations-details/associations-details.component.html b/src/app/components/associations/associations-details/associations-details.component.html
@@ -147,4 +147,7 @@ <h1 class="max-w-lg mb-6 font-sans text-2xl font-bold leading-none tracking-tigh
     Contacter {{asso.nom }}
     </button>
 
-</div>
+</div>
+
+
+<app-loader *ngIf="!isLoaded"></app-loader>
diff --git a/src/app/components/associations/associations-details/associations-details.component.ts b/src/app/components/associations/associations-details/associations-details.component.ts
@@ -17,6 +17,7 @@ import { Subscription, firstValueFrom } from 'rxjs';
 })
 export class AssociationsDetailsComponent {
   asso: Association | undefined;
+  isLoaded: boolean = false;
   faTrash = faTrash;
   faUpload = faUpload;
   dataModel: any;
@@ -56,6 +57,7 @@ export class AssociationsDetailsComponent {
     this.route.params.subscribe((params) => {
       if (params['id']) {
         this.appService.getByIdAsso(params['id']).subscribe((asso) => {
+          this.isLoaded = true;
           this.asso = asso;
           if (this.asso.urlGoogleMapsEmbled){
             this.safeUrlGoogleMapsEmbled = this.sanitizer.bypassSecurityTrustResourceUrl(this.asso.urlGoogleMapsEmbled);

diff --git a/src/app/components/tchat/tchat-icon/tchat-icon.component.html b/src/app/components/tchat/tchat-icon/tchat-icon.component.html
@@ -1,5 +1,5 @@
 <!-- component -->
-<div class="relative" noHeaderFooter [restrictedRoutes]="['/connexion', '/inscription', '/erreur']">
+<div class="relative" noHeaderFooter [restrictedRoutes]="['/connexion', '/inscription', '/erreur', '/tchat']">
     <button routerLink="/tchat" routerLinkActive="active" ariaCurrentWhenActive="page" class="z-20 text-white flex flex-col shrink-0 grow-0 justify-around 
                     fixed bottom-0 left-0 left-5 rounded-lg
                     mr-1 mb-5 lg:mr-5 lg:mb-5 xl:mr-10 xl:mb-10">

diff --git a/src/app/components/tchat/tchat.component.html b/src/app/components/tchat/tchat.component.html
@@ -5,11 +5,8 @@
     <header class="p-4 flex justify-between items-center bg-orange-600 text-white">
       <h1 class="text-2xl font-semibold">Messages</h1>
       <div class="relative">
-        <button id="menuButton" (click)="toggleMenu()" class="focus:outline-none">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-100 pointer-events-none" viewBox="0 0 20 20" fill="currentColor">
-            <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
-            <path d="M2 10a2 2 0 012-2h12a2 2 0 012 2 2 2 0 01-2 2H4a2 2 0 01-2-2z" />
-          </svg>
+        <button *ngIf="menuVisible" id="menuButton" (click)="toggleMenu()" >
+          <fa-icon [icon]="faCaretSquareLeft" size="2x"></fa-icon>
         </button>
       </div>
     </header>
@@ -31,7 +28,7 @@ <h1 class="text-2xl font-semibold">Messages</h1>
 
           <div class="flex-1">
             <h3 class="text-lg font-semibold">{{ conversation.nom }}</h3>
-            <p class="text-gray-600 dark:text-white">{{ conversation.messages[0].contenu || 'No message yet' }}</p>
+            <p class="text-gray-600 dark:text-white">{{ timeAgo(conversation.messages[0].createdAt) || "" }} - {{ truncateMessage(conversation.messages[0].contenu) || 'No message yet' }}</p>
           </div>
         </div>
       </div>
@@ -44,11 +41,8 @@ <h3 class="text-lg font-semibold">{{ conversation.nom }}</h3>
   <!-- Main Content -->
   <div class="flex-1 relative">
     <app-tchat-message *ngIf="utilisateur" [selectedConversation]="selectedConversation" [utilisateur]="utilisateur"></app-tchat-message>
-    <button id="menuButton" (click)="toggleMenu()" class="absolute top-4 left-4 focus:outline-none bg-orange-600 text-white p-2 rounded-md">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 pointer-events-none" viewBox="0 0 20 20" fill="currentColor">
-        <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
-        <path d="M2 10a2 2 0 012-2h12a2 2 0 012 2 2 2 0 01-2 2H4a2 2 0 01-2-2z" />
-      </svg>
+    <button *ngIf="!menuVisible" id="menuButton" (click)="toggleMenu()" class="absolute top-4 left-4 focus:outline-none bg-orange-600 text-white p-2 rounded-md">
+      <fa-icon [icon]="faCaretSquareRight" size="2x"></fa-icon>
     </button>
   </div>
 </div>
diff --git a/src/app/components/tchat/tchat.component.ts b/src/app/components/tchat/tchat.component.ts
@@ -4,6 +4,7 @@ import { AppService } from '../../services/app.service';
 
 import { Conversation, Utilisateur } from '../../interfaces/interfaces';
 import { ActivatedRoute } from '@angular/router';
+import { faCaretSquareRight,  faCaretSquareLeft } from '@fortawesome/free-regular-svg-icons';
 
 @Component({
   selector: 'app-tchat',
@@ -13,6 +14,8 @@ import { ActivatedRoute } from '@angular/router';
 export class TchatComponent implements OnInit {
   conversations: Conversation[] = [];
   menuVisible = true;
+  faCaretSquareRight = faCaretSquareRight;
+  faCaretSquareLeft = faCaretSquareLeft;
   selectedConversation: Conversation | null = null;
   utilisateur: Utilisateur | null = null;
   idFromUrl: number | null = null;
@@ -54,4 +57,35 @@ export class TchatComponent implements OnInit {
       this.menuVisible = false;
     }
   }
+
+    // Fonction pour calculer le temps écoulé depuis la date donnée
+  // Fonction pour calculer le temps écoulé depuis la date donnée avec des règles spécifiques
+  timeAgo(date: Date): string {
+    const now = new Date();
+    const seconds = Math.floor((now.getTime() - new Date(date).getTime()) / 1000);
+
+    let interval = Math.floor(seconds / 60);
+    if (interval < 60) {
+      return `il y a ${interval} minutes`;
+    }
+    interval = Math.floor(seconds / 3600);
+    if (interval < 24) {
+      return `il y a ${interval} heures`;
+    }
+    interval = Math.floor(seconds / 86400);
+    if (interval < 30) {
+      return `il y a ${interval} jours`;
+    }
+    interval = Math.floor(seconds / 2592000); // 30 jours approximatifs
+    if (interval < 12) {
+      return `il y a ${interval} mois`;
+    }
+    interval = Math.floor(seconds / 31536000); // 365 jours approximatifs
+    return `il y a ${interval} ans`;
+  }
+
+  // Fonction pour tronquer le message à 20 caractères
+  truncateMessage(message: string): string {
+    return message.length > 25 ? `${message.substring(0, 25)}...` : message;
+  }
 }
diff --git a/src/app/no-header-footer.directive.ts b/src/app/no-header-footer.directive.ts
@@ -1,4 +1,3 @@
-// no-header-footer.directive.ts
 import {
   Directive,
   Input,
@@ -39,7 +38,7 @@ export class NoHeaderFooterDirective implements OnInit, OnDestroy {
 
   private checkVisibility() {
     const currentRoute = this.router.url;
-    const shouldHide = this.restrictedRoutes.includes(currentRoute);
+    const shouldHide = this.restrictedRoutes.some(route => currentRoute.startsWith(route));
     if (shouldHide) {
       this.renderer.setStyle(this.el.nativeElement, 'display', 'none');
     } else {