doneit-web/src/app/pages/chat/messages/messages.page.ts

import { AfterViewChecked, Component, ElementRef, 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';
import { ContactsPage } from 'src/app/pages/chat/messages/contacts/contacts.page';
import { AlertService } from 'src/app/services/alert.service';
import { AuthService } from 'src/app/services/auth.service';
import { ChatService } from 'src/app/services/chat.service';
import { ToastService } from 'src/app/services/toast.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';

@Component({
  selector: 'app-messages',
  templateUrl: './messages.page.html',
  styleUrls: ['./messages.page.scss'],
})
export class MessagesPage implements OnInit, AfterViewChecked {
  showLoader: boolean;

  @ViewChild('scrollMe') private myScrollContainer: ElementRef;

  loggedUser: any;

  message = '';
  messages:any;
  userPresence='';
  dmUsers:any;
  roomId:string;
  el:any;


  constructor(
    public popoverController: PopoverController,
    private modalController: ModalController,
    private navParams: NavParams,
    private chatService: ChatService,
    private authService: AuthService,
    private alertService: AlertService,
    private toastService: ToastService,
    private route: Router,
    private activatedRoute: ActivatedRoute,
  ) {
    /* this.activatedRoute.paramMap.subscribe(params => {
      if(params["params"].SerialNumber) {
        this.roomId = params["params"].roomId;
      }
    }); */
    this.loggedUser = authService.ValidatedUserChat['data'];
    this.roomId = this.navParams.get('roomId');
  }

  ngOnInit() {

    this.scrollToBottom();

    /* setInterval(()=>{ */
      this.load();
    /* }, 9000); */
    /* this.el = document.getElementById("scrollToBottom");
    this.el.scrollTop = this.el.scrollHeight - this.el.scrollTop; */

  }

  notImplemented(){
    this.alertService.presentAlert('Funcionalidade em desenvolvimento');
  }

  close(){
    this.modalController.dismiss();
  }

  load(){
    this.serverLongPull();
    this.getChatMembers();
  }

  doRefresh(ev:any){
    this.load();
    ev.target.complete();
  }

  ngAfterViewChecked() {
    //this.scrollToBottom();
  }

  scrollToBottom(): void {
    try {
      this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
    } catch(err) { }
  }

  sendMessage(){
    let body = {
      "message":
      {
        "rid": this.roomId, "msg": this.message
      }
    }
    this.chatService.sendMessage(body).subscribe(res=> {
      this.loadMessages();
    });
    this.message = "";
  }

  loadMessages(){
    this.showLoader = true;
    this.chatService.getRoomMessages(this.roomId).subscribe(res => {
      /* console.log(res); */
      this.messages = res['messages'].reverse();
      console.log(this.messages);
      this.showLoader = false;
    })
  }
  getChatMembers(){
    this.showLoader = true;
    this.chatService.getMembers(this.roomId).subscribe(res=> {
      this.dmUsers = res['members'].filter(data => data.username != this.loggedUser.me.username)
      console.log(res);
      console.log(this.dmUsers);
      this.showLoader = false;
    });
  }

  async openMessagesOptions(ev?: any) {
    const popover = await this.popoverController.create({
      component: MessagesOptionsPage,
      componentProps: {
        roomId: this.roomId,
      },
      cssClass: 'messages-options',
      event: ev,
      translucent: true,
    });
    return await popover.present();
  }

  async addContacts(){
    const modal = await this.modalController.create({
      component: ContactsPage,
      componentProps: {},
      cssClass: 'contacts',
      backdropDismiss: false
    });

    await modal.present();

    modal.onDidDismiss();
  }

async openChatOptions(ev?: any) {
    const popover = await this.popoverController.create({
      component: ChatOptionsPopoverPage,
      cssClass: 'chat-options-popover',
      event: ev,
      translucent: true
    });
    return await popover.present();
  }

  async serverLongPull(){
    this.chatService.getRoomMessages(this.roomId).subscribe(async res => {

    if (res == 502) {
      // Connection timeout
      // happens when the connection was pending for too long
      // let's reconnect
      await this.serverLongPull();
    } else if (res != 200) {
      // Show Error
      //showMessage(response.statusText);
      //this.loadMessages()
      this.messages = res['messages'].reverse();
      console.log(this.messages);
      // Reconnect in one second
      if(this.route.url != "/home/chat"){
        console.log("Timer message stop")
      } else {
        await new Promise(resolve => setTimeout(resolve, 1000));
        await this.serverLongPull();
        console.log('Timer message running')
      }

    } else {
      // Got message
      //let message = await response.text();
      //this.loadMessages()
      await this.serverLongPull();
    }
  });
  }

}