import { Component , OnInit , HostListener } from '@angular/core' ; import { HttpClient } from '@angular/common/http' ; import { ActivatedRoute , Router } from '@angular/router' ; import { $WebSocket } from 'angular2-websocket/angular2-websocket' ; import { MessageService } from '../services/message.service' ; import { EventListComponent } from '../event-list/event-list.component' ; import { Follower } from '../shared/models/follower.model' ; import { Donation } from '../shared/models/donation.model' ; import { Subscription } from '../shared/models/subscription.model' ; import { Cheer } from '../shared/models/cheer.model' ; import { Settings } from '../shared/models/settings/settings.model' ; import { Filter } from '../shared/models/filters/filter.model' ; import { EventList } from '../shared/models/settings/eventList.model' ; import { environment } from '../../environments/environment' ; import { SessionStorageService } from '../services/session-storage.service' ; @ Component ( { selector : 'app-dashboard' , templateUrl : './dashboard.component.html' , styleUrls : [ './dashboard.component.css' ] } ) export class DashboardComponent implements OnInit { ws : $WebSocket ; socketPort : String ; streamlabsTokenRoute = environment . baseServerPath + 'api/v1/streamlabs/token' ; updateSettingsRoute = environment . baseServerPath + 'api/v1/settings/' ; twitchDisplayName : String ; username : String ; settings : Settings ; eventLists : Array < EventList > = [ ] ; sessionData : any ; @ HostListener ( 'window:beforeunload' , [ '$event' ] ) beforeUnloadHander ( event ) { this . ws . close ( true ) ; } constructor ( private http , private route , private router , private messageService , private sessionStorageService ) { } ngOnInit ( ) { this . sessionData = this . sessionStorageService . getSessionData ( ) ; if ( this . sessionData ) { console . log ( 'Session data is here. Setting props...' ) ; this . username = this . sessionData . username ; this . twitchDisplayName = this . sessionData . displayName ; this . settings = new Settings ( this . username , this . sessionData . settings ) ; this . eventLists = this . settings . eventLists ; this . socketPort = this . sessionData . socketPort ; this . connectWebsocket ( ) ; } else { console . log ( 'Session data not here. Starting auth...' ) ; this . route . queryParams . subscribe ( params => { this . getStreamlabsData ( params [ 'code' ] ) ; } ) ; } } addEventList ( element ) { if ( element !== null ) { const id = Math . random ( ) . toString ( 36 ) . substring ( 7 ) ; const eventList = new EventList ( id , element . value , new Filter ( ) , { follows : false , subscriptions : false , cheers : false , donations : false } ) ; this . settings . eventLists . push ( eventList ) ; this . eventLists = this . settings . eventLists ; element . value = '' ; this . updateSettings ( ) ; } } updateEventList ( id , title , filter , activeEvents ) { const listIndex = this . settings . eventLists . findIndex ( list => { return list . id === id ; } ) ; this . settings . eventLists [ listIndex ] . title = title ; this . settings . eventLists [ listIndex ] . filter = filter ; this . settings . eventLists [ listIndex ] . activeEvents = activeEvents ; this . updateSettings ( ) ; } removeEventList ( id ) { const listIndex = this . settings . eventLists . findIndex ( list => { return list . id === id ; } ) ; this . eventLists . splice ( listIndex , 1 ) ; this . updateSettings ( ) ; } getStreamlabsData ( code ) { this . http . post ( this . streamlabsTokenRoute , { code : code } ) . subscribe ( data => { const user = data [ 'user' ] ; this . socketPort = data [ 'port' ] ; this . twitchDisplayName = user . twitchDisplayName ; this . username = user . username ; this . settings = new Settings ( this . username , user . settings ) ; this . eventLists = this . settings . eventLists ; this . connectWebsocket ( ) ; this . sessionStorageService . setSessionData ( { username : this . username , displayName : this . twitchDisplayName , settings : user . settings , socketPort : this . socketPort } ) ; } ) ; } generateEventType ( json ) { switch ( json . type ) { case 'new_follower' : return new Follower ( json . data ) ; case 'new_donation' : return new Donation ( json . data ) ; case 'new_subscription' : return new Subscription ( json . data ) ; case 'new_resubscription' : return new Subscription ( json . data ) ; case 'new_cheer' : return new Cheer ( json . data ) ; } } updateSettings ( ) { const settingsJson = this . settings . toJson ( ) ; this . sessionStorageService . setSessionData ( { username : this . username , displayName : this . twitchDisplayName , settings : JSON . stringify ( settingsJson . eventList ) } ) ; this . http . post ( this . updateSettingsRoute + this . username , settingsJson ) . subscribe ( response => { console . log ( response [ 'status' ] ) ; } ) ; } connectWebsocket ( ) { this . ws = new $WebSocket ( `${ environment . baseSimpleSocketPath }/?user=${ this . username }` ) ; this . ws . onMessage ( ( msg ) => { let eventObj ; try { eventObj = JSON . parse ( msg . data ) ; if ( eventObj . type === 'connection_open' ) { console . log ( eventObj . data ) ; } else { const eventType = this . generateEventType ( eventObj ) ; this . messageService . sendEvent ( eventType ) ; } } catch ( error ) { console . log ( 'Error parsing JSON in SimpleAlertsSocket: ' + error ) ; } } , { autoApply : false } ) ; } }