update logic alarm

src/app/modules/overview/overall-ground/overall-ground.component.html

 
       <div class="state t2" id="State2">
         <div>
-          <div class="sensor-off" [class.sensor-on]="(Sstate3 && Sstate1)">
-            <img [src]="Sstate3 ? 'assets/images/sensor-on.png' : 'assets/images/sensor-off.png'"  style="width: 30px; height: 30px">
+          <div class="sensor-off" [class.sensor-on]="(Sstate1 && Sstate5)">
+            <img [src]="Sstate5 ? 'assets/images/sensor-on.png' : 'assets/images/sensor-off.png'"  style="width: 30px; height: 30px">
           </div>
           <a href="/overview/camera-stream" target="_blank">
             <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
           </a>
         </div>
-        <div *ngIf="(Sstate3 && Sstate1)" class="alarm-text"
-             [ngClass]="{'alarm-text-on': (Sstate3 && Sstate1) }">ALARM: <br>VIBRATION ALERT</div>
+        <div *ngIf="(Sstate1 && Sstate5)" class="alarm-text"
+             [ngClass]="{'alarm-text-on': (Sstate1 && Sstate5) }">ALARM: <br>VIBRATION ALERT</div>
       </div>
 
       <div class="state t3" id="State3">
         <div>
-          <div  class="sensor-off" [class.sensor-on]="(Sstate4 && Sstate1)">
-            <img [src]="Sstate4 ? 'assets/images/sensor-on.png' : 'assets/images/sensor-off.png'"  style="width: 30px; height: 30px">
+          <div  class="sensor-off" [class.sensor-on]="(Sstate2 && Sstate5)">
+            <img [src]="Sstate5 ? 'assets/images/sensor-on.png' : 'assets/images/sensor-off.png'"  style="width: 30px; height: 30px">
           </div>
           <a href="/overview/camera-stream" target="_blank">
             <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
           </a>
         </div>
-        <div *ngIf="(Sstate4 && Sstate1)" class="alarm-text"
-             [ngClass]="{'alarm-text-on': (Sstate4 && Sstate1) }">ALARM: <br>DOOR OPENING</div>
+        <div *ngIf="(Sstate2 && Sstate5)" class="alarm-text"
+             [ngClass]="{'alarm-text-on': (Sstate2 && Sstate5) }">ALARM: <br>DOOR OPENING</div>
       </div>
       <div class="state t4" id="State4">
         <div>
       </div>
       <div class="state t5 tooltip" id="State5" >
         <div>
-          <div [ngClass]="{'sensor-on': Sstate1 && Sstate2,
-                          'sensor-off':  !(Sstate1 && Sstate2)}">
+          <div [ngClass]="{'sensor-on': Sstate5 && Sstate6,
+                          'sensor-off':  !(Sstate5 && Sstate6)}">
             <img [src]="getImageSource()"  style="width: 30px; height: 30px">
           </div>
           <a href="/overview/camera-stream" target="_blank">
           </a>
         </div>
 
-        <div *ngIf="Sstate1 && Sstate2" class="alarm-text"
-             [ngClass]="{'alarm-text-on': Sstate1 && Sstate2 }">ALARM: <br>VIBRATION ALERT</div>
+        <div *ngIf="Sstate5 && Sstate6" class="alarm-text"
+             [ngClass]="{'alarm-text-on': Sstate5 && Sstate6 }">ALARM: <br>VIBRATION ALERT</div>
 
       </div>
       <div class="state t6 tooltip" id="State6">
         <div>
-          <div [ngClass]="{'sensor-on': Sstate1 && Sstate2,
-                          'sensor-off': !(Sstate1 && Sstate2)}">
+          <div [ngClass]="{'sensor-on': Sstate5 && Sstate6,
+                          'sensor-off': !(Sstate5 && Sstate6)}">
             <img [src]="getImageSource()"  style="width: 30px; height: 30px">
           </div>
           <a href="/overview/camera-stream" target="_blank">
             <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
           </a>
         </div>
-        <div *ngIf="Sstate1 && Sstate2" class="alarm-text"
-             [ngClass]="{'alarm-text-on': Sstate1 && Sstate2 }">ALARM: <br>SMOKE ALERT</div>
+        <div *ngIf="Sstate5 && Sstate6" class="alarm-text"
+             [ngClass]="{'alarm-text-on': Sstate5 && Sstate6 }">ALARM: <br>SMOKE ALERT</div>
     </div>
     </div>
   </div>
   <div fxFlex="30" fxLayout="column" fxLayoutGap="50px">
-    <button [disabled]="!isConnected" mat-flat-button color="{{Sstate1 ? 'accent' : 'primary'}}" (click)="toggleState1()">{{ Sstate1 ? 'DISARM' : 'ARM'}}</button>
-    <button [disabled]="!isConnected" mat-flat-button color="{{Sstate2 ? 'accent' : 'primary'}}" (click)="toggleState2()">{{ Sstate2 ? 'TURN OFF WARNING' : 'TURN ON WARNING'}}</button>
+    <button [disabled]="!isConnected" mat-flat-button color="{{Sstate5 ? 'accent' : 'primary'}}" (click)="toggleState1()">{{ Sstate5 ? 'DISARM' : 'ARM'}}</button>
+    <button [disabled]="!isConnected" mat-flat-button color="{{Sstate6 ? 'accent' : 'primary'}}" (click)="toggleState2()">{{ Sstate6 ? 'TURN OFF WARNING' : 'TURN ON WARNING'}}</button>
     <a style = "padding: 30px 50px;" mat-stroked-button color="primary" href="/overview/camera-stream" target="_blank"> LIVE CAMERA </a>
 
   </div>

src/app/modules/overview/overall-ground/overall-ground.component.ts

-import {ChangeDetectorRef, Component, OnChanges, OnDestroy, OnInit, SimpleChanges} from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import {SocketService} from "../../../shared/services/socket.service";
 import {Subscription} from "rxjs";
-import * as L from "leaflet";
 
 @Component({
   selector: 'app-overall-ground',
   styleUrls: ['./overall-ground.component.scss']
 })
 export class OverallGroundComponent implements OnInit, OnDestroy {
-  isClicked = false;
   isConnected = false;
-  states = Array(6).fill(0);
   state1 = '';
   state2 = '';
   state3 = '';
   state4 = '';
   state5 = '';
   state6 = '';
+  Sstate5 = false;
+  Sstate6 = false;
   Sstate1 = false;
   Sstate2 = false;
-  Sstate3 = false;
-  Sstate4 = false;
-  imageIcon = 'assets/images/sensor-off.png';
-  title = 'ALARM: SMOKE ALERT'
   private statusSubscription?: Subscription;
   private messageSubscription?: Subscription;
   private intervalId: any;
   }
 
   toggleState1() {
-    this.Sstate1 = !this.Sstate1;
-    let str = {id: '0', type: 'cmd', state1: this.Sstate1.toString()};
+    this.Sstate5 = !this.Sstate5;
+    let str = {id: '0', type: 'cmd', state1: this.Sstate5.toString()};
     this.socketService$.sendMessage(str);
   }
 
   toggleState2() {
-    this.Sstate2 = !this.Sstate2;
-    let str = {id: '0', type: 'cmd', state2: this.Sstate2.toString()};
+    this.Sstate6 = !this.Sstate6;
+    let str = {id: '0', type: 'cmd', state2: this.Sstate6.toString()};
     this.socketService$.sendMessage(str);
   }
 
   getImageSource(): string {
-    return (this.Sstate1 && this.Sstate2) || this.Sstate1 ? 'assets/images/sensor-on.png' : 'assets/images/sensor-off.png';
+    return (this.Sstate5 && this.Sstate6) || this.Sstate5 ? 'assets/images/sensor-on.png' : 'assets/images/sensor-off.png';
   }
 
   onMessage(message: any) {
       this.state4 = message.state4 === '1' ? 'ON' : 'OFF';
       this.state5 = message.state5 === '1' ? 'ON' : 'OFF';
       this.state6 = message.state6 === '1' ? 'ON' : 'OFF';
-      this.Sstate1 = this.state5 === 'ON';// alarm 9h && 6h
-      this.Sstate2 = this.state6 === 'ON';// alarm 9h && 6h
+      this.Sstate5 = this.state5 === 'ON';// alarm 9h && 6h
+      this.Sstate6 = this.state6 === 'ON';// alarm 9h && 6h
 
-      this.Sstate3 = this.state1 === 'ON';// alarm 12h
-      this.Sstate4 = this.state2 === 'ON';// alarm 1h
+      this.Sstate1 = this.state1 === 'ON';// alarm 12h
+      this.Sstate2 = this.state2 === 'ON';// alarm 1h
     }
-    if(this.Sstate1 && this.Sstate2)
-      this.title = 'ALARM: VIBRATION ALERT'
-
   }
 
 }