import { Component , OnInit , ViewChildren , ViewChild , AfterViewInit , QueryList , ElementRef } from '@angular/core' ; import { MatDialog , MatDialogRef } from '@angular/material/dialog' ; import { MatList , MatListItem } from '@angular/material/list' ; import { Action } from './shared/model/action' ; import { Event } from './shared/model/event' ; import { Message } from './shared/model/message' ; import { User } from './shared/model/user' ; import { SocketService } from './shared/services/socket.service' ; import { DialogUserComponent } from './dialog-user/dialog-user.component' ; import { DialogUserType } from './dialog-user/dialog-user-type' ; import { TranslateService } from '@ngx-translate/core' ; import { StoreUserService } from './shared/services/store-user.service' ; const AVATAR_URL = 'https://api.adorable.io/avatars/285' ; @ Component ( { selector : 'app-chat' , templateUrl : './chat.component.html' , styleUrls : [ './chat.component.css' ] } ) export class ChatComponent implements OnInit , AfterViewInit { action = Action ; user : User ; messages : Message [ ] = [ ] ; messageContent : string ; ioConnection : any ; storedUserName : string ; dialogRef : MatDialogRef < DialogUserComponent > | null ; defaultDialogUserParams : any = { disableClose : true , data : { title : 'Welcome' , title_pt : 'Bem-vindo' , dialogType : DialogUserType . NEW } } ; @ ViewChild ( MatList , { read : ElementRef , static : true } ) matList : ElementRef ; @ ViewChildren ( MatListItem , { read : ElementRef } ) matListItems : QueryList < MatListItem > ; constructor ( private socketService , private storedUser , public dialog , private translate ) { translate . setDefaultLang ( 'en' ) ; } ngOnInit ( ) { this . initModel ( ) ; setTimeout ( ( ) => { this . openUserPopup ( this . defaultDialogUserParams ) ; } , 0 ) ; } ngAfterViewInit ( ) { this . matListItems . changes . subscribe ( elements => { this . scrollToBottom ( ) ; } ) ; } private scrollToBottom ( ) { try { this . matList . nativeElement . scrollTop = this . matList . nativeElement . scrollHeight ; } catch ( err ) { } } private initModel ( ) { const randomId = this . getRandomId ( ) ; this . user = { id : randomId , avatar : `${ AVATAR_URL }/${ randomId }.png` } ; } private initIoConnection ( ) { this . socketService . initSocket ( ) ; this . ioConnection = this . socketService . onMessage ( ) . subscribe ( ( message ) => { this . messages . push ( message ) ; } ) ; this . socketService . onEvent ( Event . CONNECT ) . subscribe ( ( ) => { console . log ( 'connected' ) ; } ) ; this . socketService . onEvent ( Event . DISCONNECT ) . subscribe ( ( ) => { console . log ( 'disconnected' ) ; } ) ; } private getRandomId ( ) { return Math . floor ( Math . random ( ) * ( 1000000 ) ) + 1 ; } public onClickUserInfo ( ) { this . openUserPopup ( { data : { username : this . user . name , title : 'Edit Details' , title_pt : 'Alterar' , dialogType : DialogUserType . EDIT } } ) ; } private openUserPopup ( params ) { this . dialogRef = this . dialog . open ( DialogUserComponent , params ) ; this . dialogRef . afterClosed ( ) . subscribe ( paramsDialog => { if ( ! paramsDialog ) { return ; } this . storedUserName = this . storedUser . getStoredUser ( ) ; this . user . name = paramsDialog . username ; if ( paramsDialog . dialogType === DialogUserType . NEW ) { this . storedUser . storeUser ( this . user . name ) ; this . initIoConnection ( ) ; this . sendNotification ( paramsDialog , Action . JOINED ) ; } else if ( paramsDialog . dialogType === DialogUserType . EDIT ) { this . storedUser . storeUser ( this . user . name ) ; this . sendNotification ( paramsDialog , Action . RENAME ) ; } } ) ; } public sendMessage ( message ) { if ( ! message ) { return ; } this . socketService . send ( { from : this . user , content : message } ) ; this . messageContent = null ; } public sendNotification ( params , action ) { let message ; if ( action === Action . JOINED ) { message = { from : this . user , action } ; } else if ( action === Action . RENAME ) { message = { action , content : { username : this . user . name , previousUsername : params . previousUsername } } ; } this . socketService . send ( message ) ; } switchLanguage ( language ) { this . translate . use ( language ) ; } }