improvements

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

@@ -4,8 +4,8 @@
       <div class="header-top">
         <app-btn-modal-dismiss></app-btn-modal-dismiss>
         <div class="middle">
-          <ion-label class="title">Bruno Faria</ion-label>
-          <span><ion-icon class="user-status-online" name="ellipse"></ion-icon></span>
+          <ion-label class="title" *ngFor="let users of dmUsers">{{users.name}}</ion-label>
+          <span *ngIf="userPresence =='online'"><ion-icon class="user-status-online" name="ellipse"></ion-icon></span>
         </div>
         <div class="right">
           <ion-icon  (click)="openMessagesOptions()" src="assets/images/icons-menu.svg"></ion-icon>
@@ -24,8 +24,13 @@
 </ion-header>
 
 <ion-content>
-  <div class="messages">
-    <div class="incoming">
+  <div class="messages" #scrollMe>
+    <!-- <ion-infinite-scroll position="top" threshold="25%" (ionInfinite)="loadMoreMessages($event)">
+      <ion-infinite-scroll-content loadindSpiniter="crescent" loadingText="Carregando...">
+
+      </ion-infinite-scroll-content>
+    </ion-infinite-scroll> -->
+    <!-- <div class="incoming">
       <div class="title">
         <ion-label>Secretário Assuntos sociais</ion-label>
         <span class="time">14:23</span>
@@ -34,17 +39,17 @@
         <img src='assets/images/1.jpg' tappable>
         <ion-label hidden >Investidura Filipe Nyusi</ion-label>
       </div>
-    </div>
-    <div class="incoming">
+    </div> -->
+    <div *ngFor="let msg of messages" class='incoming-{{msg.u.username!=loggedUser.me.username}}'>
       <div class="title">
-        <ion-label>Secretário Assuntos sociais</ion-label>
-        <span class="time">14:23</span>
+        <ion-label>{{msg.u.name}}</ion-label>
+        <span class="time">{{msg._updatedAt | date: 'HH:mm' }}</span>
       </div>
       <div>
-        <ion-label>Caros colegas, partilho o momento de confraternização do presidente Filipe Nyusi e de dua excelência, o presidente da república</ion-label>
+        <ion-label>{{msg.msg}}</ion-label>
       </div>
     </div>
-    <div class="incoming">
+    <!-- <div class="incoming">
       <div class="title">
         <ion-label>Presidente da República</ion-label>
         <span class="time">14:23</span>
@@ -79,7 +84,7 @@
       <div>
         <ion-label>Caros colegas, partilho o momento de confraternização do presidente Filipe Nyusi e de dua excelência, o presidente da república</ion-label>
       </div>
-    </div>
+    </div> -->
   </div>
 
 </ion-content>
@@ -93,14 +98,14 @@
       </ion-col>
       <ion-col size="9">
         <ion-item class="ion-no-padding type-message" lines="none">
-          <ion-textarea placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
+          <ion-textarea clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
           <ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
         </ion-item>
       </ion-col>
       <ion-col size="2">
         <!-- [disabled]="message === ''" -->
         <ion-label>
-          <ion-icon class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
+          <ion-icon (click)="sendMessage()" class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
         </ion-label>
       </ion-col>
     </ion-row>

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

@@ -100,20 +100,33 @@
     font-family: Roboto;
     overflow: auto;
 
-    .incoming, .outgoing{
+    //set scroll do bottom
+    position: absolute;
+    top: 0;
+    left: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    width: 100%;
+    height: 100%;
+    word-wrap: break-word;
+    -webkit-overflow-scrolling: touch;
+    
+
+    .incoming-true, .incoming-false{
       width: 305px;
        padding: 15px 20px;
        border-radius: 10px;
+
     }
 
-     .incoming{
+     .incoming-true{
       margin: 10px 75px 10px 20px;
        background: #ebebeb;
        float: left;
        
        }
      }
-     .outgoing{
+     .incoming-false{
       margin: 10px 20px 10px 75px;
        background: #e4f4fe;
        float: right;

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

@@ -1,5 +1,8 @@
-import { Component, OnInit } from '@angular/core';
-import { ModalController, PopoverController } from '@ionic/angular';
+import { AfterViewChecked, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { ModalController, NavParams, PopoverController } from '@ionic/angular';
+import { Status } from 'src/app/models/chat/status.model';
+import { AuthService } from 'src/app/services/auth.service';
+import { ChatService } from 'src/app/services/chat.service';
 import { ChatOptionsPopoverPage } from 'src/app/shared/popover/chat-options-popover/chat-options-popover.page';
 import { MessagesOptionsPage } from 'src/app/shared/popover/messages-options/messages-options.page';
 import { ContactsPage } from '../new-group/contacts/contacts.page';
@@ -9,24 +12,108 @@ import { ContactsPage } from '../new-group/contacts/contacts.page';
   templateUrl: './messages.page.html',
   styleUrls: ['./messages.page.scss'],
 })
-export class MessagesPage implements OnInit {
+export class MessagesPage implements OnInit, AfterViewChecked {
+
+  @ViewChild('scrollMe') private myScrollContainer: ElementRef;
+
+  loggedUser: any;
 
   message = '';
+  messages:any;
+  dm:any;
+  userPresence='';
+  dmUsers:any;
+
   
   constructor(
     public popoverController: PopoverController,
     private modalController: ModalController,
-  ) { }
+    private navParams: NavParams,
+    private chatService: ChatService,
+    private authService: AuthService,
+  ) { 
+    this.dm = this.navParams.get('dm');
+  }
 
   ngOnInit() {
+
+    this.scrollToBottom();
+
+    this.authService.userData$.subscribe((res:any)=>{
+      this.loggedUser=res;
+      console.log(this.loggedUser);  
+    });
+
+    console.log(this.dm);
+    
+    setInterval(()=>{
+      this.checkUserPresence();
+      this.loadMessages();
+    }, 2000);
+
+    this.getChatMembers();
+    
+    
+  }
+  loadUser(){
+    console.log('working');
+    
+  }
+  ngAfterViewChecked() {        
+    this.scrollToBottom();
+  } 
+  scrollToBottom(): void {
+    try {
+        this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
+    } catch(err) { }                 
+  }
+  loadMoreMessages(ev:any){
+
+  }
+
+  checkUserPresence(){
+    this.chatService.getUserPresence(this.dm.lastMessage.u._id).subscribe(res=>{
+      this.userPresence = res['presence'];
+    });
+  }
+  sendMessage(){
+
+    let body = {
+      "message": 
+      { 
+        "rid": this.dm._id, "msg": this.message 
+      }
+    }
+    
+    this.chatService.sendMessage(body).subscribe(res=> {
+      /* console.log(res); */
+      this.loadMessages(); 
+    });
+  }
+  
+  loadMessages(){
+    this.chatService.getRoomMessages(this.dm._id).subscribe(res => {
+      console.log(res);
+      this.messages = res['messages'].reverse();
+    })
+  }
+  getChatMembers(){
+    this.chatService.getMembers(this.dm._id).subscribe(res=> {
+      this.dmUsers = res['members'].filter(data => data.username != this.loggedUser.me.username)
+      console.log(res);
+      console.log(this.dmUsers);
+    });
   }
 
   async openMessagesOptions(ev: any) {
     const popover = await this.popoverController.create({
       component: MessagesOptionsPage,
+      componentProps: {
+        roomId: this.dm._id,
+      },
       cssClass: 'messages-options',
       event: ev,
-      translucent: true
+      translucent: true,
     });
     return await popover.present();
   }