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

import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { 
  Component, 
  OnInit,
  ViewChild,
  ViewContainerRef,
  ComponentFactoryResolver,
  ComponentRef,
  ComponentFactory,
  Output
} from '@angular/core';
import { ModalController } from '@ionic/angular';
import { AuthService } from 'src/app/services/auth.service';
import { ChatService } from 'src/app/services/chat.service';
import { ConversationPage } from './conversation/conversation.page';
import { GroupMessagesPage } from './group-messages/group-messages.page';
import { ContactsPage } from './messages/contacts/contacts.page';
import { MessagesPage } from './messages/messages.page';
import { NewGroupPage } from './new-group/new-group.page';
import { NewchatPage } from './newchat/newchat.page';
import { Storage } from '@ionic/storage';
import { AlertService } from 'src/app/services/alert.service';
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";

@Component({
  selector: 'app-chat',
  templateUrl: './chat.page.html',
  styleUrls: ['./chat.page.scss'],
})
export class ChatPage implements OnInit {

  showLoader: boolean;

  headers: HttpHeaders;
  options:any;
  X_User_Id:any;
  X_Auth_Token:any;
  
  private loggedUser: any;
  /* Set segment variable */
  segment:string;
  allGroups: any[];
  privateGroups: any[];
  publicGroups: any[];
  userConnectedList: any[];
  userRooms: any[];
  userChannels: any[];
  userDirectMessages: any[];
  result:any;
  dmUsers:any;

  desktopComponent: any = {
    showMessages: false,
    showGroupMessages: false,
  }

  @ViewChild('messagecontainer', { read: ViewContainerRef }) entry: ViewContainerRef;
  //@ViewChild('groupMessages') child:GroupMessagesPage;
  componentRef: any;

  roomId:any;
  groupRoomId:any;
  showEmptyComponent=true;
  showMessages=false;
  showContacts=false;
  showNewGroup=false;
  showEditGroup=false;
  showGroupMessages=false;
  showGroupContacts=false;
  emptyTextDescription = 'Sem conversa selecionada';

  @Output() getRoomInfo;


  /*

  Websockets variables
  
  */

  subject: any;
  public messages: Subject<any>;

  message = {
    "msg": "connect",
    "version": "1",
    "support": ["1"]
  };


  /*  Fim websockets variables*/
  constructor(
    private http:HttpClient,
    private chatService: ChatService,
    private modalController: ModalController,
    private authService: AuthService,
    private storage:Storage,
    private resolver: ComponentFactoryResolver,
    ){ 
      this.headers = new HttpHeaders();
      this.loadMessage();
    }

  ngOnInit() {
    this.segment = "Contactos";

    this.authService.userData$.subscribe((res:any)=>{
      this.loggedUser=res;
      console.log(this.loggedUser);
      this.load();
    });
  
  /* websocket functions */
  //this.sendMsg();

  /* Fim websocket functions */
}
loadMessage(){
  this.chatService.messages.subscribe(msg => {
    console.log("Response from websocket: " + msg);
  });
}
sendMsg() {
  console.log("new message from client to websocket: ", this.message);
  this.chatService.messages.next(this.message);
  this.message.msg = "";
}


  /* Fim websockets functions */

  closeAllDesktopComponents() {
    this.showMessages=false;
    this.showContacts=false;
    this.showNewGroup=false;
    this.showEditGroup=false;
    this.showGroupMessages=false;
    this.showEmptyComponent=false;
    this.showGroupContacts=false;
    console.log('All components closed!');
  }
  showEmptyContainer(){
    this.showEmptyComponent=true;
  }
  openGroupContactsPage(data){
    console.log(data);
    this.groupRoomId = data;
    console.log(this.groupRoomId);
    this.closeAllDesktopComponents();
    if(window.innerWidth <= 1024){

    }
    else{
      this.showGroupContacts = true;
    }
  }
  openMessagesPage(rid) {
    if( window.innerWidth <= 1024){
      //this.openMessagesModal(rid);
    }
    else{
      this.closeAllDesktopComponents();
      this.showEmptyComponent = false;
      this.roomId = rid;
      this.showMessages=true;
    }
  }
  openContactsPage() {
    console.log('OK');
    this.closeAllDesktopComponents();
    
    if( window.innerWidth <= 1024){
      this.selectContact();
    }
    else{
      console.log('here');
      this.showContacts=true;
    }
  }
  openNewGroupPage() {
    if( window.innerWidth <= 1024){
      this.newGroup();
    }
    else{
      this.closeAllDesktopComponents();
      this.showNewGroup=true;
    }
  }

  openEditGroupPage(rid) {
    if( window.innerWidth <= 1024){
      this.editGroup(rid);
    }
    else{
      this.closeAllDesktopComponents();
      this.showEditGroup=true;
    }
  }

  openGroupMessagesPage(data) {
    console.log('HERE');
    
    if( window.innerWidth <= 1024){
      this.openGroupMessagesModal(data);
    }
    else{
      this.closeAllDesktopComponents();
      this.showEmptyComponent = false;
      this.roomId = data;
      this.showGroupMessages=true;
    }
  }

  onSegmentChange(){
    this.load();
  }
  doRefresh(){
    this.load();
  }
  load(){
    switch (this.segment)
    {
      case "Contactos":
        this.getDirectMessages();
        break;

      case "Grupos":
        this.getGroups();
        break;
    }
  }
  customRoom(){
    let params = new HttpParams();
    params = params.set("types", "c");
    this.chatService.customsRooms(params).subscribe(res=>{
      console.log(res);
    });
  }
  
  getDirectMessages(){
    this.showLoader = true;
    
    this.chatService.getAllDirectMessages().subscribe((res:any)=>{
      console.log(res.ims);
      
      this.userDirectMessages = res.ims.sort((a,b)=>{
        var dateA = new Date(a._updatedAt).getTime();
        var dateB = new Date(b._updatedAt).getTime();
        return dateB - dateA;
      });
      console.log(this.userDirectMessages);
      this.showLoader = false;
    });
  }
  getChatMembers(){
    this.chatService.getMembers(this.userDirectMessages[0]._id).subscribe(res=> {
      this.dmUsers = res['members'].filter(data => data.username != this.loggedUser.me.username)
    });
  }
  getGroups(){
    this.showLoader = true;
    this.result = this.chatService.getAllPrivateGroups().subscribe((res:any)=>{
      this.privateGroups = res.groups;
      this.result = this.chatService.getAllUserChannels().subscribe((res:any)=>{
      this.publicGroups = res.channels;
      let all = this.privateGroups.concat(this.publicGroups); 
      this.allGroups = all.sort((a,b)=>{
        var dateA = new Date(a._updatedAt).getTime();
        var dateB = new Date(b._updatedAt).getTime();
        return dateB - dateA;
      });
      console.log(this.allGroups);
      this.showLoader = false;
    });
    }); 
  }
  
  async startConversation(selectedUser) {
    const modal = await this.modalController.create({
      component: ConversationPage,
      cssClass: 'conversation',
      backdropDismiss: false,
      componentProps: {
        user: selectedUser,
      }
    });
    await modal.present();
    modal.onDidDismiss();
  }

  async selectContact(){
    const modal = await this.modalController.create({
      component: ContactsPage,
      cssClass: 'contacts',
    });
    await modal.present();
    modal.onDidDismiss();
  }

  async newGroup(){
    const modal = await this.modalController.create({
      component: NewGroupPage,
      cssClass: 'new-group',
    });
    await modal.present();
    modal.onDidDismiss();
  }

  async editGroup(roomId){
    const modal = await this.modalController.create({
      component: EditGroupPage,
      cssClass: 'edit-group',
      componentProps: {
        roomId: roomId,
      },
    });
    await modal.present();
    modal.onDidDismiss().then((res)=>{
      console.log(res.data);
      this.modalController.dismiss(res.data);
    });
  }

  async openMessagesModal(roomId:any){
    this.closeAllDesktopComponents();

    let classs;
    if( window.innerWidth <= 1024){
      classs = 'modal'
    } else  {
      classs = 'chat-mobile-modal-to-Desktop'
    }
    console.log(roomId);
    
    const modal = await this.modalController.create({
      component: MessagesPage,
      cssClass: classs,
      componentProps: {
        roomId: roomId,
      },
    });
    await modal.present();
    modal.onDidDismiss();
  }

  async openGroupMessagesModal(roomId:any){
    let classs;
    if( window.innerWidth <= 1024){
      classs = 'modal'
    } else  {
      classs = 'chat-mobile-modal-to-Desktop'
    }
    console.log(roomId);
    
    const modal = await this.modalController.create({
      component: GroupMessagesPage,
      cssClass: classs,
      componentProps: {
        roomId: roomId,
      },
    });
    await modal.present();
    modal.onDidDismiss();
  }

}