diff --git a/src/app/pages/chat/chat.page.ts b/src/app/pages/chat/chat.page.ts index 6efe623ee..8cea9c12e 100644 --- a/src/app/pages/chat/chat.page.ts +++ b/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(){ diff --git a/src/app/pages/chat/group-messages/group-messages.page.html b/src/app/pages/chat/group-messages/group-messages.page.html index d102fd9b4..3e336a143 100644 --- a/src/app/pages/chat/group-messages/group-messages.page.html +++ b/src/app/pages/chat/group-messages/group-messages.page.html @@ -39,7 +39,7 @@ Esta conversa passou a grupo
A conversa original mantêm-se como chat individual -
+
{{msg.u.name}} @@ -47,6 +47,7 @@
{{msg.msg}} + {{last ? scrollToBottom() : ''}}
diff --git a/src/app/pages/chat/group-messages/group-messages.page.ts b/src/app/pages/chat/group-messages/group-messages.page.ts index 512c3397f..7b388bd9e 100644 --- a/src/app/pages/chat/group-messages/group-messages.page.ts +++ b/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"){ diff --git a/src/app/pages/chat/messages/messages.page.html b/src/app/pages/chat/messages/messages.page.html index c458eae00..8ededb7ad 100644 --- a/src/app/pages/chat/messages/messages.page.html +++ b/src/app/pages/chat/messages/messages.page.html @@ -36,13 +36,14 @@
-
+
{{msg.u.name}} {{showDateDuration(msg._updatedAt)}}
{{msg.msg}} + {{last ? scrollToBottom() : ''}}
diff --git a/src/app/pages/chat/messages/messages.page.ts b/src/app/pages/chat/messages/messages.page.ts index 0820cbb7b..2be316a74 100644 --- a/src/app/pages/chat/messages/messages.page.ts +++ b/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 = ""; } diff --git a/src/app/services/chat.service.ts b/src/app/services/chat.service.ts index 0107c2930..8d21e8119 100644 --- a/src/app/services/chat.service.ts +++ b/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'; diff --git a/src/app/shared/chat/group-messages/group-messages.page.html b/src/app/shared/chat/group-messages/group-messages.page.html index 7aa32ec80..3db44986d 100644 --- a/src/app/shared/chat/group-messages/group-messages.page.html +++ b/src/app/shared/chat/group-messages/group-messages.page.html @@ -38,7 +38,7 @@ Esta conversa passou a grupo
A conversa original mantêm-se como chat individual
-
+
{{msg.u.name}} @@ -46,6 +46,7 @@
{{msg.msg}} + {{last ? scrollToBottom() : ''}}
diff --git a/src/app/shared/chat/group-messages/group-messages.page.ts b/src/app/shared/chat/group-messages/group-messages.page.ts index 65b79f34e..362468177 100644 --- a/src/app/shared/chat/group-messages/group-messages.page.ts +++ b/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 = new EventEmitter(); @Output() showEmptyContainer:EventEmitter = new EventEmitter(); @@ -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"){ diff --git a/src/app/shared/chat/messages/messages.page.html b/src/app/shared/chat/messages/messages.page.html index 49ccb9cdd..4eaf095fc 100644 --- a/src/app/shared/chat/messages/messages.page.html +++ b/src/app/shared/chat/messages/messages.page.html @@ -31,7 +31,7 @@
-
+
{{msg.u.name}} @@ -39,6 +39,7 @@
{{msg.msg}} + {{last ? scrollToBottom() : ''}}
diff --git a/src/app/shared/chat/messages/messages.page.ts b/src/app/shared/chat/messages/messages.page.ts index 2d5347fb3..ed7d4f333 100644 --- a/src/app/shared/chat/messages/messages.page.ts +++ b/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 = new EventEmitter(); - 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 = ""; }