check state

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

 <div class="p-3"
   fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="20px">
-  <img src="assets/images/ground.png" fxFlex="70">
+  <img class="map-image" src="assets/images/ground.png" fxFlex="70">
   <div fxLayout="column" fxLayoutGap="50px">
-    <button mat-flat-button
-            [ngClass]="{ 'red-bg': !isClicked, 'green-bg': isClicked }"
-            (click)="toggleColor()">{{!isClicked ? 'ARM SYSTEM' : 'DISARM SYSTEM'}}</button>
-    <button mat-flat-button color="primary">LIGHT ON</button>
-    <button mat-flat-button color="primary">BELL ON</button>
-  </div>
-</div>
-
-<div class="topnav">
-  <h1>Test Socket</h1>
-</div>
-<div class="content">
-  <div class="card-grid">
-    <div class="card">
-      <p>Connect</p>
-      <p class="state"><span id="Connect">{{ isConnected ? 'Online' : 'Offline' }}</span></p>
-    </div>
-    <div class="card">
-      <p class="state" id="State1">{{ state1 ==  '' ? '%STATE%' : state1}}</p>
-      <p class="state" id="State2">{{ state2 ==  '' ? '%STATE%' : state2}}</p>
-      <p class="state" id="State3">{{ state3 ==  '' ? '%STATE%' : state3}}</p>
-      <p class="state" id="State4">{{ state4 ==  '' ? '%STATE%' : state4}}</p>
-      <p class="state" id="State5">{{ state5 ==  '' ? '%STATE%' : state5}}</p>
-      <p class="state" id="State6">{{ state6 ==  '' ? '%STATE%' : state6}}</p>
-      <p><button (click)="toggleState1()" id="SetState1" class="button">Set State 1 On</button></p>
-      <p><button (click)="toggleState2()" id="SetState2" class="button">Set State 2 On</button></p>
-    </div>
+    <button [disabled]="!isConnected" mat-flat-button class="red-bg" type="button">ARM SYSTEM</button>
+    <button [disabled]="!isConnected" mat-flat-button color="{{state5 ==='ON' ? 'primary' : 'warn' }}" (click)="toggleState1()">LIGHT {{ state5 ==  '' ? 'OFF' : state5}}</button>
+    <button [disabled]="!isConnected" mat-flat-button color="{{state6 ==='ON' ? 'primary' : 'warn' }}"  (click)="toggleState2()" [class.on]="state6 === 'ON'">BELL {{ state6 ==  '' ? 'OFF' : state6}}</button>
   </div>
 </div>

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

   padding-top: 10px;
   padding-bottom: 20px;
 }
+.map-image{
+  object-fit: scale-down;
+  height: 100%;
+  width: 100%;
+}

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

         this.socketService$.sendMessage(str);
     }
     toggleState1() {
-      this.Sstate1 = !this.Sstate1;
+      this.Sstate1 = (this.state5 !== 'ON'); // toggle on when state 5 off.
       let str = { id: '0', type: 'cmd', state1: this.Sstate1.toString() };
       this.socketService$.sendMessage(str);
     }
 
     toggleState2() {
-      this.Sstate2 = !this.Sstate2;
+      this.Sstate2 = (this.state6 !== 'ON'); // toggle on when state 6 off.
       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';
-
         }
-
     }
 }

yarn.lock

   dependencies:
     tslib "^2.3.0"
 
+"@angular/flex-layout@^15.0.0-beta.42":
+  version "15.0.0-beta.42"
+  resolved "https://registry.yarnpkg.com/@angular/flex-layout/-/flex-layout-15.0.0-beta.42.tgz#ad5e1dda32ee6280ba73765be10fd916c222e38e"
+  integrity sha512-cTAPVMMxnyIFwpZwdq0PL5mdP9Qh+R8MB7ZBezVaN3Rz2fRrkagzKpLvPX3TFzepXrvHBdpKsU4b8u+NxEC/6g==
+  dependencies:
+    tslib "^2.3.0"
+
 "@angular/forms@^16.2.0":
   version "16.2.12"
   resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-16.2.12.tgz#a533ad61a65080281e709ca68840a1da9f189afc"
   dependencies:
     queue-microtask "^1.2.2"
 
+rxjs-websockets@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/rxjs-websockets/-/rxjs-websockets-9.0.0.tgz#7720ec81939211a54c3412ad849ccd000d9f488f"
+  integrity sha512-COglkihJWOYqVeQOn00xShYGb8KZ9va0eoTKmxV76D3j6LuM0S8RKBUcZSq+ebiSu1ZiS6tr2OEJnQL78ZB9MA==
+
 [email protected], rxjs@^7.5.5, rxjs@~7.8.0:
   version "7.8.1"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543"