iot-web-ui/src/app/modules/overview/overall-ground/overall-ground.component.ts

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';

        }

    }
}