dateLabel added to chat web

src/app/shared/chat/messages/messages.page.html

@@ -39,7 +39,7 @@
 
       <div class="messages-list-item-wrapper container-width-100"
       *ngFor="let msg of  ChatSystemService.getDmRoom(roomId).messages; index as i; let last = last">
-      <div class='message-item incoming-{{msg.u.username!=sessionStore.user.UserName}} max-width-45' *ngIf="msg.msg !=''">
+      <div class='message-item incoming-{{msg.u.username!=sessionStore.user.UserName}} max-width-45' *ngIf="msg.msg !=''" [class.dateLabel] = "msg.dateLabel">
         <div class="message-item-options d-flex justify-content-end">
           <fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer">
           </fa-icon>

src/app/shared/chat/messages/messages.page.scss

@@ -1,4 +1,4 @@
-@import '~src/function.scss';
+@import "~src/function.scss";
 
 .header-toolbar {
   --background: transparent;
@@ -29,7 +29,6 @@
         margin: 2px 0 0 5px;
         display: flex;
         align-items: center;
-
       }
 
       .right {
@@ -45,13 +44,11 @@
       width: 95%;
       overflow: auto;
 
-
       .header-bottom-icon {
         width: rem(30);
         font-size: rem(25);
         float: left;
         padding: 2px;
-
       }
 
       .header-bottom-contacts {
@@ -164,7 +161,6 @@ ion-content {
       overflow: auto;
     }
 
-
     .incoming-true,
     .incoming-false {
       padding: 15px 20px;
@@ -267,7 +263,6 @@ ion-footer {
       align-self: center;
     }
   }
-
 }
 
 .text-color-blue {
@@ -319,6 +314,11 @@ ion-footer {
   padding-left: 10px;
 }
 
+.dateLabel {
+  background: #000 !important;
+  margin: 0 auto;
+}
+
 .float-status {
   position: relative !important;
   float: right;
@@ -357,7 +357,6 @@ ion-footer {
   align-items: center;
 }
 
-
 .typing ngx-letters-avatar {
   padding-right: 5px;
 }
@@ -390,23 +389,22 @@ ion-footer {
   right: 50%;
 }
 
-
 .try {
   color: red;
-    background: #f3414159;
-    padding: 6px;
-    border-radius: 10px;
-    cursor: pointer;
+  background: #f3414159;
+  padding: 6px;
+  border-radius: 10px;
+  cursor: pointer;
 }
 
 .red-top {
   border-top: 1px solid red !important;
 }
 .red {
-  color:  red !important;
+  color: red !important;
 }
 
-
-.lido, .enviado {
+.lido,
+.enviado {
   font-size: rem(11);
-}
+}

src/app/shared/chat/messages/messages.page.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
 import { AnimationController, GestureController, IonRange, ModalController, PopoverController } from '@ionic/angular';
 import { ChatService } from 'src/app/services/chat.service';
 import { ToastService } from 'src/app/services/toast.service';
@@ -100,6 +100,9 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   roomName: any;
   isAdmin = false;
   roomCountDownDate: string;
+  groupedMessages: { date: string; messages: any[] }[] = [];
+  msgArray: any = new Array();
+  
 
   constructor(
     public popoverController: PopoverController,
@@ -121,6 +124,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     private platform: Platform,
     private fileOpener: FileOpener,
     public p: PermissionService,
+    private cdr: ChangeDetectorRef
   ) {
     // update
     this.checkAudioPermission()
@@ -137,6 +141,11 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
 
     this.showAvatar = false
 
+    this.msgArray = this.ChatSystemService.getDmRoom(this.roomId).messages;
+
+
+
+
     setTimeout(() => {
       this.scrollToBottomClicked()
       this.showAvatar = true
@@ -144,7 +153,6 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
 
     this.deleteRecording()
 
-
     // this.ChatSystemService.getDmRoom(this.roomId).deleteAll()
 
   }
@@ -183,6 +191,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
 
     this.deleteRecording();
     this.loadFiles();
+
   }