import { ChangeDetectorRef , Component , DoCheck , HostBinding , HostListener , Inject , Input , OnDestroy , OnInit , PLATFORM_ID , ViewChild , EventEmitter , Output , } from '@angular/core' ; import { interval } from 'rxjs' ; import { map , startWith , throttle } from 'rxjs/operators' ; import { UpdateMarkersService } from '../../../common/services/update-markers.service' ; import { Client } from '../../../services/api' ; import { Session } from '../../../services/session' ; import { isPlatformBrowser } from '@angular/common' ; import { GroupsService } from '../groups.service' ; import { FeaturesService } from '../../../services/features.service' ; import { ConfigsService } from '../../../common/services/configs.service' ; @ Component ( { selector : 'm-group--sidebar-markers' , templateUrl : 'sidebar-markers.component.html' , } ) export class GroupsSidebarMarkersComponent implements OnInit , DoCheck , OnDestroy { @ Input ( ) showLabels : boolean = false ; @ Output ( 'onGroupSelected' ) onGroupSelected : EventEmitter < boolean > = new EventEmitter < boolean > ( ) ; layoutMode : 'phone' | 'tablet' | 'desktop' = 'desktop' ; inProgress : boolean = false ; $updateMarker ; markers = [ ] ; groups = [ ] ; offset = 0 ; moreData : boolean = true ; readonly hasNewNavigation : boolean ; readonly cdnUrl : string ; @ ViewChild ( 'list' , { static : true } ) list ; @ HostBinding ( 'class.m-groupSidebarMarkers__leftSidebar' ) leftSidebar : boolean = false ; constructor ( private client , public session , private updateMarkers , @ Inject ( PLATFORM_ID ) private platformId , private groupsService , private cd , private featuresService , private configs ) { this . hasNewNavigation = true ; this . cdnUrl = configs . get ( 'cdn_url' ) ; } async ngOnInit ( ) { this . onResize ( ) ; if ( isPlatformBrowser ( this . platformId ) ) { this . initialize ( ) ; this . session . getLoggedInUser ( user => { this . initialize ( ) ; } ) ; } else { this . inProgress = true ; } } async initialize ( ) { await this . load ( true ) ; this . listenForMarkers ( ) ; this . listenForMembershipUpdates ( ) ; } /**
     * Listens and responds to membership updates emited from groupsService.
     */ listenForMembershipUpdates ( ) { this . groupsService . membershipUpdate$ . subscribe ( update => { if ( ! update . guid ) { return ; } if ( update . show ) { if ( this . groups . findIndex ( g => g . guid == update . guid ) !== - 1 ) { return ; } this . groupsService . load ( update . guid ) . then ( group => { this . groups . unshift ( group ) ; } ) ; return ; } this . groups = this . groups . filter ( group => group . guid !== update . guid ) ; } ) ; } listenForMarkers ( ) { if ( this . $updateMarker ) this . $updateMarker . unsubscribe ( ) ; this . $updateMarker = this . updateMarkers . markers . subscribe ( markers => { if ( ! markers ) return ; for ( let i in this . groups ) { let entity_guid = this . groups [ i ] . guid ; this . groups [ i ] . hasGathering$ = interval ( 1000 ) . pipe ( throttle ( ( ) => interval ( 2000 ) ) , startWith ( 0 ) , map ( ( ) => markers . filter ( marker => marker . entity_guid == entity_guid && marker . marker == 'gathering-heartbeat' && marker . updated_timestamp > Date . now ( ) / 1000 - 60 ) . length > 0 ) ) ; this . groups [ i ] . hasMarker = markers . filter ( marker => marker . entity_guid == this . groups [ i ] . guid && marker . read_timestamp < marker . updated_timestamp && marker . marker != 'gathering-heartbeat' ) . length > 0 ; } } ) ; } ngOnDestroy ( ) { if ( this . $updateMarker ) { this . $updateMarker . unsubscribe ( ) ; } } async load ( refresh = false ) { if ( this . inProgress || ! this . session . getLoggedInUser ( ) ) { return false ; } this . inProgress = true ; try { const response = await this . client . get ( 'api/v1/groups/member' , { offset : this . offset , } ) ; if ( ! response . entities && this . offset ) { this . moreData = false ; throw 'No entities found' ; } if ( refresh ) { this . groups = response . entities ; } else { this . groups = this . groups . concat ( response . entities ) ; } this . listenForMarkers ( ) ; this . offset = response [ 'load-next' ] ; this . moreData = response . entities && response . entities . length ; } catch ( e ) { } finally { this . inProgress = false ; } } ngDoCheck ( ) { this . cd . detectChanges ( ) ; } @ HostListener ( 'window:resize' ) onResize ( ) { if ( window . innerWidth > 1000 ) { this . layoutMode = 'desktop' ; } else if ( window . innerWidth > 480 && window . innerWidth <= 1000 ) { this . layoutMode = 'tablet' ; } else { this . layoutMode = 'phone' ; } } /**
     * Emits on group click.
     */ onGroupClick ( ) { this . onGroupSelected . emit ( true ) ; } get tooltipsEnabled ( ) { return this . layoutMode === 'tablet' ; } }