import {ChangeDetectorRef, Component, OnChanges, OnDestroy, OnInit, SimpleChanges} from '@angular/core'; import {SocketService} from "../../../shared/services/socket.service"; import {Subscription} from "rxjs"; @Component({ selector: 'app-overall-ground', templateUrl: './overall-ground.component.html', styleUrls: ['./overall-ground.component.scss'] }) export class OverallGroundComponent implements OnInit, OnDestroy{ isClicked = false; isConnected = false; state1 = ''; state2 = ''; state3 = ''; state4 = ''; state5 = ''; state6 = ''; Sstate1 = false; Sstate2 = false; private statusSubscription?: Subscription; private messageSubscription?: Subscription; private intervalId: any; constructor(private socketService$: SocketService) { } ngOnInit() { this.socketService$.connect(); this.statusSubscription = this.socketService$.status$.subscribe(isConnected => { this.isConnected = isConnected; if (this.isConnected) { this.intervalId = setInterval(() => this.getReadings(), 2000); this.messageSubscription = this.socketService$.messages$.subscribe(message => { this.onMessage(message); }); } }); } toggleColor(): void { this.isClicked = !this.isClicked; } ngOnDestroy(): void { if (this.statusSubscription) { this.statusSubscription.unsubscribe(); } if (this.messageSubscription) { this.messageSubscription.unsubscribe(); } if (this.intervalId) { clearInterval(this.intervalId); } this.socketService$.close(); } getReadings(){ let str = { id: '0', type: 'get' }; this.socketService$.sendMessage(str); } toggleState1() { this.Sstate1 = !this.Sstate1; let str = { id: '0', type: 'cmd', state1: this.Sstate1.toString() }; this.socketService$.sendMessage(str); } toggleState2() { this.Sstate2 = !this.Sstate2; let str = { id: '0', type: 'cmd', state2: this.Sstate2.toString() }; this.socketService$.sendMessage(str); } onMessage(message: any) { if (message.id == '0' && message.type === 'get') { this.state1 = message.state1 === '1' ? 'ON' : 'OFF'; this.state2 = message.state2 === '1' ? 'ON' : 'OFF'; this.state3 = message.state3 === '1' ? 'ON' : 'OFF'; this.state4 = message.state4 === '1' ? 'ON' : 'OFF'; this.state5 = message.state5 === '1' ? 'ON' : 'OFF'; this.state6 = message.state6 === '1' ? 'ON' : 'OFF'; } } }