fix scrolling

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

@@ -22,7 +22,7 @@ import { EditGroupPage } from 'src/app/shared/chat/edit-group/edit-group.page';
 import * as Rx from "rxjs/Rx";
 import { Message } from 'src/app/models/message.model';
 import { Observable, Subject } from "rxjs/Rx";
-import { Router } from '@angular/router';
+import { NavigationStart, NavigationEnd, Router } from '@angular/router';
 import { EventPerson } from 'src/app/models/eventperson.model';
 import { removeDuplicate } from 'src/plugin/removeDuplicate.js'
 import { environment } from 'src/environments/environment';
@@ -119,6 +119,7 @@ export class ChatPage implements OnInit {
     ){
       this.loggedUserChat = authService.ValidatedUserChat['data'];
       this.headers = new HttpHeaders();
+
     }
 
   ngOnInit() {
@@ -142,6 +143,23 @@ export class ChatPage implements OnInit {
   //Teste
   let t = this.showDateDuration(new Date());
   console.log(t);
+
+  this.setStatus('away');
+}
+
+ngOnDestroy(){
+  this.setStatus('offline');
+  console.log('On Destroy')
+}
+
+setStatus(status:string){
+  let body = {
+    message: '',
+    status: status,
+  }
+  this.chatService.setUserStatus(body).subscribe(res => {
+    console.log(res);
+  })
 }
 
 hideRefreshButton(){

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

@@ -39,7 +39,7 @@
       <ion-label>Esta conversa passou a grupo</ion-label><br />
       <ion-label>A conversa original mantêm-se como chat individual</ion-label>
     </div>
-    <div *ngFor="let msg of messages" >
+    <div *ngFor="let msg of messages; let last = last" >
       <div *ngIf="msg.t != 'r'" class='incoming-{{msg.u.username!=loggedUser.me.username}}'>
         <div class="title">
           <ion-label>{{msg.u.name}}</ion-label>
@@ -47,6 +47,7 @@
         </div>
         <div>
           <ion-label>{{msg.msg}}</ion-label>
+          {{last ? scrollToBottom() : ''}}
         </div>
       </div>
       <div *ngIf="msg.t == 'r'" class="info-text">

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

@@ -1,4 +1,4 @@
-import { Component, ElementRef, OnInit, ViewChild, AfterViewChecked } from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild, AfterViewChecked, AfterViewInit, OnDestroy } from '@angular/core';
 import { ActionSheetController, MenuController, ModalController, NavParams, PopoverController } from '@ionic/angular';
 import { AlertService } from 'src/app/services/alert.service';
 import { AuthService } from 'src/app/services/auth.service';
@@ -16,7 +16,7 @@ import { EditGroupPage } from '../edit-group/edit-group.page';
   templateUrl: './group-messages.page.html',
   styleUrls: ['./group-messages.page.scss'],
 })
-export class GroupMessagesPage implements OnInit, AfterViewChecked {
+export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
   showLoader: boolean;
   isGroupCreated:boolean;
   loggedUser: any;
@@ -33,6 +33,11 @@ export class GroupMessagesPage implements OnInit, AfterViewChecked {
   loggedUserChat:any;
   eventSelectedDate: Date = new Date();
 
+  scrollingOnce:boolean = true;
+  private scrollChangeCallback: () => void;
+  currentPosition: any;
+  startPosition: number;
+
   @ViewChild('scrollMe') private myScrollContainer: ElementRef;
 
   constructor(
@@ -57,15 +62,48 @@ export class GroupMessagesPage implements OnInit, AfterViewChecked {
     this.getRoomInfo();
     this.scrollToBottom();
     this.serverLongPull();
+    this.setStatus('online');
   }
 
-  ngAfterViewChecked() {
-    //this.scrollToBottom();
+  setStatus(status:string){
+    let body = {
+      message: '',
+      status: status,
+    }
+    this.chatService.setUserStatus(body).subscribe(res => {
+      console.log(res);
+    })
+  }
+
+  ngAfterViewInit() {
+    this.scrollChangeCallback = () => this.onContentScrolled(event);
+    window.addEventListener('scroll', this.scrollChangeCallback, true);
+  }
+
+   onContentScrolled(e) {
+    this.startPosition = e.srcElement.scrollTop;
+    let scroll = e.srcElement.scrollTop;
+    if (scroll > this.currentPosition) {
+      //this.showButton = false;
+      //alert('BOTTOM');
+    } else {
+      //this.showButton = true;
+      //alert('UP');
+      this.scrollingOnce = false;
+    }
+    this.currentPosition = scroll;
+  }
+
+  ngOnDestroy() {
+    window.removeEventListener('scroll', this.scrollChangeCallback, true);
   }
 
   scrollToBottom(): void {
     try {
-      this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
+      if(this.scrollingOnce){
+        this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
+        //this.scrollingOnce = false;
+      }
     } catch(err) { }
   }
 
@@ -181,6 +219,7 @@ export class GroupMessagesPage implements OnInit, AfterViewChecked {
 
     this.chatService.sendMessage(body).subscribe(res=> {
       this.getRoomInfo();
+      this.scrollingOnce = true;
 
     },(error) => {
 
@@ -302,7 +341,8 @@ export class GroupMessagesPage implements OnInit, AfterViewChecked {
       // Show Error
       //showMessage(response.statusText);
       //this.loadMessages()
-      this.messages = res['messages'].filter(data => data.t != 'au');
+      let msgOnly = res['messages'].filter(data => data.t != 'au');
+      this.messages = msgOnly.reverse();
       console.log(this.messages);
       // Reconnect in one second
       if(this.route.url != "/home/chat"){

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

@@ -36,13 +36,14 @@
     </ion-refresher-content>
   </ion-refresher>
   <div class="messages" #scrollMe>
-    <div *ngFor="let msg of messages" class='incoming-{{msg.u.username!=loggedUser.me.username}}'>
+    <div *ngFor="let msg of messages; let last = last" class='incoming-{{msg.u.username!=loggedUser.me.username}}'>
       <div class="title">
         <ion-label>{{msg.u.name}}</ion-label>
         <span class="time">{{showDateDuration(msg._updatedAt)}}</span>
       </div>
       <div>
         <ion-label>{{msg.msg}}</ion-label>
+        {{last ? scrollToBottom() : ''}}
       </div>
     </div>
   </div>

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

@@ -1,4 +1,4 @@
-import { AfterViewChecked, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { AfterViewChecked, AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router'
 import { ModalController, NavParams, PopoverController } from '@ionic/angular';
 import { Status } from 'src/app/models/chat/status.model';
@@ -16,7 +16,7 @@ import { MessagesOptionsPage } from 'src/app/shared/popover/messages-options/mes
   templateUrl: './messages.page.html',
   styleUrls: ['./messages.page.scss'],
 })
-export class MessagesPage implements OnInit, AfterViewChecked {
+export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
   showLoader: boolean;
 
   @ViewChild('scrollMe') private myScrollContainer: ElementRef;
@@ -30,8 +30,13 @@ export class MessagesPage implements OnInit, AfterViewChecked {
   roomId:string;
   el:any;
   members:any;
+  scrollingOnce:boolean = true;
 
-  connection  = connection
+  connection  = connection;
+
+  private scrollChangeCallback: () => void;
+  currentPosition: any;
+  startPosition: number;
 
   constructor(
     public popoverController: PopoverController,
@@ -55,14 +60,23 @@ export class MessagesPage implements OnInit, AfterViewChecked {
 
   ngOnInit() {
 
-    this.scrollToBottom();
-
     /* setInterval(()=>{ */
       this.load();
     /* }, 9000); */
     /* this.el = document.getElementById("scrollToBottom");
     this.el.scrollTop = this.el.scrollHeight - this.el.scrollTop; */
 
+    this.setStatus('online');
+  }
+
+  setStatus(status:string){
+    let body = {
+      message: '',
+      status: status,
+    }
+    this.chatService.setUserStatus(body).subscribe(res => {
+      console.log(res);
+    })
   }
 
   notImplemented(){
@@ -83,16 +97,40 @@ export class MessagesPage implements OnInit, AfterViewChecked {
     ev.target.complete();
   }
 
-  ngAfterViewChecked() {
-    //this.scrollToBottom();
-  }
-
   scrollToBottom(): void {
     try {
-      this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
+      if(this.scrollingOnce){
+        this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
+        //this.scrollingOnce = false;
+      }
     } catch(err) { }
   }
 
+  ngAfterViewInit() {
+    this.scrollChangeCallback = () => this.onContentScrolled(event);
+    window.addEventListener('scroll', this.scrollChangeCallback, true);
+  }
+
+   onContentScrolled(e) {
+    this.startPosition = e.srcElement.scrollTop;
+    let scroll = e.srcElement.scrollTop;
+    if (scroll > this.currentPosition) {
+      //this.showButton = false;
+      //alert('BOTTOM');
+    } else {
+      //this.showButton = true;
+      //alert('UP');
+      this.scrollingOnce = false;
+    }
+    this.currentPosition = scroll;
+  }
+
+  ngOnDestroy() {
+    window.removeEventListener('scroll', this.scrollChangeCallback, true);
+  }
+
+
+
   sendMessage() {
     let body = {
       "message":
@@ -101,7 +139,8 @@ export class MessagesPage implements OnInit, AfterViewChecked {
       }
     }
     this.chatService.sendMessage(body).subscribe(res=> {
-      this.loadMessages();
+      //this.loadMessages();
+      this.scrollingOnce = true;
     });
     this.message = "";
   }

src/app/services/chat.service.ts

@@ -140,12 +140,20 @@ export class ChatService {
       return this.http.get(environment.apiChatUrl+'users.info', opts);
     }
 
+    setUserStatus(body:any){
+      let opts = {
+        headers: this.headers,
+      }
+      return this.http.post(environment.apiChatUrl+'users.setStatus', body, this.options);
+    }
+
     removeChatRoom(body:any){
       let opts = {
         headers: this.headers,
       }
       return this.http.post(environment.apiChatUrl+'im.close', body, this.options);
     }
+
     createRoom(body:any){
       return this.http.post(environment.apiChatUrl+'im.create', body, this.options);
     }
@@ -164,6 +172,7 @@ export class ChatService {
     addGroup(body:any){
       return this.http.post(environment.apiChatUrl+'groups.create', body, this.options);
     }
+
     getGroupMembers(roomId:string){
       let params = new HttpParams();
       let url=environment.apiChatUrl+'groups.members';

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

@@ -38,7 +38,7 @@
       <ion-label> Esta conversa passou a grupo</ion-label><br />
       <ion-label>A conversa original mantêm-se como chat individual</ion-label>
     </div>
-    <div class="container-width-100" *ngFor="let msg of messages" #scrollMe>
+    <div class="container-width-100" *ngFor="let msg of messages; let last = last" #scrollMe>
       <div *ngIf="msg.t != 'r'" class='incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45'>
         <div class="title">
           <ion-label>{{msg.u.name}}</ion-label>
@@ -46,6 +46,7 @@
         </div>
         <div>
           <ion-label>{{msg.msg}}</ion-label>
+          {{last ? scrollToBottom() : ''}}
         </div>
       </div>
       <div *ngIf="msg.t == 'r'" class="info-text">

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

@@ -1,4 +1,4 @@
-import { Component, OnChanges, OnInit, Input, SimpleChanges, Output, EventEmitter, ViewChild, ElementRef, AfterViewChecked} from '@angular/core';
+import { Component, OnChanges, OnInit, Input, SimpleChanges, Output, EventEmitter, ViewChild, ElementRef, AfterViewChecked, AfterViewInit, OnDestroy} from '@angular/core';
 import { ActionSheetController, AnimationController, MenuController, ModalController, PopoverController } from '@ionic/angular';
 import { AlertService } from 'src/app/services/alert.service';
 import { AuthService } from 'src/app/services/auth.service';
@@ -16,7 +16,7 @@ import { ChatOptionsFeaturesPage } from 'src/app/modals/chat-options-features/ch
   templateUrl: './group-messages.page.html',
   styleUrls: ['./group-messages.page.scss'],
 })
-export class GroupMessagesPage implements OnInit, OnChanges, AfterViewChecked {
+export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy {
   showLoader: boolean;
   isGroupCreated:boolean;
   loggedUser: any;
@@ -30,6 +30,11 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewChecked {
   members:any;
 
   loggedUserChat:any;
+  scrollingOnce:boolean = true;
+  private scrollChangeCallback: () => void;
+  currentPosition: any;
+  startPosition: number;
+
   @Input() roomId:string;
   @Output() closeAllDesktopComponents:EventEmitter<any> = new EventEmitter<any>();
   @Output() showEmptyContainer:EventEmitter<any> = new EventEmitter<any>();
@@ -54,8 +59,8 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewChecked {
     this.isGroupCreated = true;
   }
   ngOnChanges(changes: SimpleChanges): void {
-    this.getRoomInfo();
-    this.scrollToBottom();
+    //this.getRoomInfo();
+    //this.scrollToBottom();
   }
 
   ngOnInit() {
@@ -63,18 +68,49 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewChecked {
     this.getRoomInfo();
     this.serverLongPull();
     console.log(this.roomId);
+    this.setStatus('online');
   }
 
-  ngAfterViewChecked() {
-    //this.scrollToBottom();
+  setStatus(status:string){
+    let body = {
+      message: '',
+      status: status,
+    }
+    this.chatService.setUserStatus(body).subscribe(res => {
+      console.log(res);
+    })
   }
 
   scrollToBottom(): void {
     try {
-      this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
+      if(this.scrollingOnce){
+        this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
+      }
     } catch(err) { }
-    finally {
+  }
+
+  ngAfterViewInit() {
+    this.scrollChangeCallback = () => this.onContentScrolled(event);
+    window.addEventListener('scroll', this.scrollChangeCallback, true);
+  }
+
+   onContentScrolled(e) {
+    this.startPosition = e.srcElement.scrollTop;
+    let scroll = e.srcElement.scrollTop;
+    if (scroll > this.currentPosition) {
+      //this.showButton = false;
+      //alert('BOTTOM');
+    } else {
+      //this.showButton = true;
+      //alert('UP');
+      this.scrollingOnce = false;
     }
+    this.currentPosition = scroll;
+  }
+
+  ngOnDestroy() {
+    this.setStatus('away');
+    window.removeEventListener('scroll', this.scrollChangeCallback, true);
   }
 
   openGroupContactsPage(){
@@ -101,9 +137,9 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewChecked {
   get watch(){
     this.getRoomInfo();
     console.log('here watching');
-
     return this.roomId;
   }
+
   getRoomInfo(){
     this.showLoader = true;
     this.chatService.getRoomInfo(this.roomId).subscribe(room=>{
@@ -112,7 +148,7 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewChecked {
         this.roomName = this.room.name.split('-').join(' ');
       }
       this.getGroupContacts(this.room);
-      this.loadGroupMessages(this.room);
+      //this.loadGroupMessages(this.room);
       this.showLoader = false;
     });
   }
@@ -136,13 +172,14 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewChecked {
       });
     }
   }
-  loadGroupMessages(room:any){
-    console.log('here'+room.t);
+
+  loadGroupMessages(roomId){
+    //console.log('here'+room.t);
 
     this.showLoader = true;
     //If group is private call getGroupMembers
-    if(room.t === 'p'){
-      console.log('private');
+    /* if(room.t === 'p'){
+      console.log('private'); */
 
       this.chatService.getPrivateGroupMessages(this.roomId).subscribe(res=>{
         console.log(res);
@@ -152,15 +189,16 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewChecked {
 
         this.showLoader = false;
       });
-    }
+  /*   } */
     //Otherwise call getChannelMembers for públic groups
-    else{
+    /* else{
       this.chatService.getPublicGroupMessages(this.roomId).subscribe(res=>{
         console.log(res);
         this.messages = res['messages'].reverse();
       });
-    }
+    } */
   }
+
   sendMessage(){
 
     let body = {
@@ -172,7 +210,8 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewChecked {
 
     this.chatService.sendMessage(body).subscribe(res=> {
      /*  this.loadGroupMessages(); */
-     this.getRoomInfo();
+     //this.getRoomInfo();
+     this.scrollingOnce = true;
     });
     this.message = "";
   }
@@ -244,7 +283,8 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewChecked {
         this.roomName = res.data.name.split('-').join(' ');
         console.log(this.roomName);
 
-        this.getRoomInfo();
+        //this.getRoomInfo();
+        this.loadGroupMessages(this.roomId);
         //this.modalController.dismiss();
       };
 
@@ -277,7 +317,8 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewChecked {
     popover.onDidDismiss().then(res=>{
       console.log(res);
       if(res.data){
-        this.getRoomInfo();
+        this.loadGroupMessages(this.roomId);
+        //this.getRoomInfo();
         //this.modalController.dismiss();
       };
 
@@ -314,7 +355,8 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewChecked {
     await modal.present();
 
     modal.onDidDismiss().then(()=>{
-      this.getRoomInfo();
+      //this.getRoomInfo();
+      this.loadGroupMessages(this.roomId)
     });
   }
 
@@ -407,7 +449,8 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewChecked {
       // Show Error
       //showMessage(response.statusText);
       //this.loadMessages()
-      this.messages = res['messages'].filter(data => data.t != 'au');
+      let msgOnly = res['messages'].filter(data => data.t != 'au');
+      this.messages = msgOnly.reverse();
       console.log(this.messages);
       // Reconnect in one second
       if(this.route.url != "/home/chat"){

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

@@ -31,7 +31,7 @@
     </ion-refresher-content>
   </ion-refresher>
   <div class="messages" #scrollMe>
-    <div class="container-width-100" *ngFor="let msg of messages">
+    <div class="container-width-100" *ngFor="let msg of messages; let last = last">
       <div class='incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45'>
         <div class="title">
           <ion-label>{{msg.u.name}}</ion-label>
@@ -39,6 +39,7 @@
         </div>
         <div>
           <ion-label>{{msg.msg}}</ion-label>
+          {{last ? scrollToBottom() : ''}}
         </div>
       </div>
     </div>

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

@@ -1,4 +1,4 @@
-import { AfterViewChecked, Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { AfterViewChecked, AfterViewInit, Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
 import { AnimationController, ModalController, PopoverController } from '@ionic/angular';
 import { AlertService } from 'src/app/services/alert.service';
 import { AuthService } from 'src/app/services/auth.service';
@@ -16,7 +16,7 @@ import { ChatOptionsFeaturesPage } from 'src/app/modals/chat-options-features/ch
   templateUrl: './messages.page.html',
   styleUrls: ['./messages.page.scss'],
 })
-export class MessagesPage implements OnInit, AfterViewChecked, OnChanges {
+export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy {
   showLoader: boolean;
 
   @ViewChild('scrollMe') private myScrollContainer: ElementRef;
@@ -37,7 +37,11 @@ export class MessagesPage implements OnInit, AfterViewChecked, OnChanges {
   @Output() openNewEventPage:EventEmitter<any> = new EventEmitter<any>();
 
 
-  connection  = connection
+  connection  = connection;
+  scrollingOnce:boolean = true;
+  private scrollChangeCallback: () => void;
+  currentPosition: any;
+  startPosition: number;
 
   constructor(
     public popoverController: PopoverController,
@@ -70,11 +74,17 @@ export class MessagesPage implements OnInit, AfterViewChecked, OnChanges {
     console.log(this.roomId);
     console.log("Chat route", this.route.url)
 
+    this.setStatus('online');
   }
 
-  ngOnDestroy(){
-    this.checktimeOut = false;
-    console.log('On Destroy')
+  setStatus(status:string){
+    let body = {
+      message: '',
+      status: status,
+    }
+    this.chatService.setUserStatus(body).subscribe(res => {
+      console.log(res);
+    })
   }
 
   notImplemented(){
@@ -93,16 +103,38 @@ export class MessagesPage implements OnInit, AfterViewChecked, OnChanges {
     ev.target.complete();
   }
 
-  ngAfterViewChecked() {
-    //this.scrollToBottom();
-  }
-
   scrollToBottom(): void {
     try {
-      this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
+      if(this.scrollingOnce){
+        this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
+        //this.scrollingOnce = false;
+      }
     } catch(err) { }
-    finally {
+  }
+
+  ngAfterViewInit() {
+    this.scrollChangeCallback = () => this.onContentScrolled(event);
+    window.addEventListener('scroll', this.scrollChangeCallback, true);
+  }
+
+   onContentScrolled(e) {
+    this.startPosition = e.srcElement.scrollTop;
+    let scroll = e.srcElement.scrollTop;
+    if (scroll > this.currentPosition) {
+      //this.showButton = false;
+      //alert('BOTTOM');
+    } else {
+      //this.showButton = true;
+      //alert('UP');
+      this.scrollingOnce = false;
     }
+    this.currentPosition = scroll;
+  }
+
+  ngOnDestroy() {
+    this.checktimeOut = false;
+    this.setStatus('away');
+    window.removeEventListener('scroll', this.scrollChangeCallback, true);
   }
 
   openBookMeetingComponent(){
@@ -125,6 +157,7 @@ export class MessagesPage implements OnInit, AfterViewChecked, OnChanges {
     }
 
     this.chatService.sendMessage(body).subscribe(res=> {
+      this.scrollingOnce = true;
     });
     this.message = "";
   }