# All files / src/lib/components/layout layout.component.ts

91.66% Statements 44/48
44.11% Branches 15/34
84.61% Functions 11/13
92.85% Lines 39/42

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    811x
    1x
    1x
    1x
    1x

    1x

    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x

    1x
    1x
    1x
    1x

    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x

    1x

    1x
    1x

    1x
    1x

    1x
    1x

    1x

    1x

    1x

     import { Component, HostListener, OnDestroy, OnInit, ViewChild } from '@angular/core';
    import { MatSidenav } from '@angular/material/sidenav';
    impoIrt { skip, Subscription } from 'rxjs';
    import { SidenavMode } from '../../models/layout.model';
    import { UserModel } from '../../models/user.model';
    import { ChatService } from '../../services/chat/chat.service';
    import { LayoutService } from '../../services/layout/layout.service';
    import { LocalUserService } from '../../services/local-user/local-user.service';
    import { RemoteUserService } from '../../services/remote-user/remote-user.service';

    @Component({
    	selector: 'ov-layout',
    	templateUrl: './layout.component.html',
    	styleUrls: ['./layout.component.css']
    })
    export class LayoutComponent implements OnInit, OnDestroy {
    	@ViewChild('sidenav') chatSidenav: MatSidenav;
    	localUsers: UserModel[] = [];
    	remoteUsers: UserModel[] = [];
    	sidenavMode: SidenavMode = SidenavMode.SIDE;

    	private readonly SIDENAV_WIDTH_LIMIT_MODE = 790;
    	private chatSubscription: Subscription;
    	private layoutWidthSubscription: Subscription;
    	private localUsersSubscription: Subscription;
    	private remoteUsersSubscription: Subscription;

    	@HostListener('window:resize')
    	sizeChange() {
    		this.layoutService.update();
    	}

    	constructor(
    		private remoteUserService: RemoteUserService,
    		private localUserService: LocalUserService,
    		private layoutService: LayoutService,
    		private chatService: ChatService
    	) {}

    	ngOnInit(): void {
    		this.layoutService.initialize();
    		this.subscribeToUsers();
    		this.subscribeToChatComponent();
    		this.subscribeToLayoutWidth();

    	}

    	ngOnDestroy() {
    		this.layoutService.clear();
    		this.localUsers = [];
    		this.remoteUsers = [];
    		if (this.chatSubscription) this.chatSubscription.unsubscribe();
    		if (this.layoutWidthSubscription) this.layoutWidthSubscription.unsubscribe();
    		if (this.localUsersSubscription) this.localUsersSubscription.unsubscribe();
    		if (this.remoteUsersSubscription) this.remoteUsersSubscription.unsubscribe();
    	}

    	private subscribeToChatComponent() {
    		this.chatSubscription = this.chatService.toggleChatObs.pipe(skip(1)).subscribe((opened) => {
    			opened ? this.chatSidenav.open() : this.chatSidenav.close();
    			this.layoutService.update(300);
    		});
    	}

    	private subscribeToLayoutWidth() {
    		this.layoutWidthSubscription = this.layoutService.layoutWidthObs.subscribe((width) => {
    			this.sidenavMode = width <= this.SIDENAV_WIDTH_LIMIT_MODE ? SidenavMode.OVER : SidenavMode.SIDE;
    		});
    	}

    	private subscribeToUsers() {
    		this.localUsersSubscription = this.localUserService.OVUsers.subscribe((users) => {
    			this.localUsers = users;
    		});

    		this.remoteUsersSubscription = this.remoteUserService.remoteUsers.subscribe((users) => {
    			this.remoteUsers = users;
    		});
    	}
    }