add .

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

@@ -1,9 +1,17 @@
-<div class="p-3"
-  fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="20px">
-  <img class="map-image" src="assets/images/ground.png" fxFlex="70">
-  <div fxLayout="column" fxLayoutGap="50px">
-    <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 class="p-3" fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="20px">
+  <div fxFlex="70" class="map-image">
+    <div class="card-state">
+      <img src="assets/images/ground.png">
+      <p class="state t1" id="State1">{{ state1 ==  '' ? '%STATE%' : state1}}</p>
+      <p class="state t2" id="State2">{{ state2 ==  '' ? '%STATE%' : state2}}</p>
+      <p class="state t3" id="State3">{{ state3 ==  '' ? '%STATE%' : state3}}</p>
+      <p class="state t4" id="State4">{{ state4 ==  '' ? '%STATE%' : state4}}</p>
+      <p class="state t5" id="State5">{{ state5 ==  '' ? '%STATE%' : state5}}</p>
+      <p class="state t6" id="State6">{{ state6 ==  '' ? '%STATE%' : state6}}</p>
+    </div>
+  </div>
+  <div fxFlex="30" fxLayout="column" fxLayoutGap="50px">
+    <div>Công tắc 1 <button [disabled]="!isConnected" mat-flat-button color="{{Sstate1 ? 'accent' : 'primary'}}" (click)="toggleState1()">{{ Sstate1 ? 'ON' : 'OFF'}}</button></div>
+    <div>Công tắc 2 <button [disabled]="!isConnected" mat-flat-button color="{{Sstate2 ? 'accent' : 'primary'}}" (click)="toggleState2()">{{ Sstate2 ? 'ON' : 'OFF'}}</button></div>
   </div>
 </div>

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

@@ -93,14 +93,41 @@ p {
   margin: 0 auto;
 }
 
-.card {
-  background-color: #F8F7F9;;
-  box-shadow: 2px 2px 12px 1px rgba(140, 140, 140, .5);
-  padding-top: 10px;
-  padding-bottom: 20px;
-}
 .map-image{
-  object-fit: scale-down;
-  height: 100%;
-  width: 100%;
+  img{
+    height: 100%;
+    width: 100%;
+  }
+  .card-state{
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+  .state{
+    position: absolute;
+    &.t1{
+      top: 8%;
+      left: 10%;
+    }
+    &.t2{
+      top: 8%;
+      left: 47%;
+    }
+    &.t3{
+      top: 8%;
+      left: 18%;
+    }
+    &.t4{
+      top: 8%;
+      left: 18%;
+    }
+    &.t5{
+      top: 8%;
+      left: 18%;
+    }
+    &.t6{
+      top: 8%;
+      left: 18%;
+    }
+  }
 }

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

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import {ChangeDetectorRef, Component, OnChanges, OnDestroy, OnInit, SimpleChanges} from '@angular/core';
 import {SocketService} from "../../../shared/services/socket.service";
 import {Subscription} from "rxjs";
 
@@ -8,9 +8,16 @@ import {Subscription} from "rxjs";
     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;
@@ -20,7 +27,7 @@ export class OverallGroundComponent implements OnInit, OnDestroy{
     }
 
     ngOnInit() {
-      this.socketService$.connect();
+        this.socketService$.connect();
       this.statusSubscription = this.socketService$.status$.subscribe(isConnected => {
           this.isConnected = isConnected;
           if (this.isConnected) {
@@ -32,6 +39,10 @@ export class OverallGroundComponent implements OnInit, OnDestroy{
         });
     }
 
+    toggleColor(): void {
+        this.isClicked = !this.isClicked;
+    }
+
     ngOnDestroy(): void {
       if (this.statusSubscription) {
         this.statusSubscription.unsubscribe();
@@ -50,21 +61,27 @@ export class OverallGroundComponent implements OnInit, OnDestroy{
         this.socketService$.sendMessage(str);
     }
     toggleState1() {
-      const state = (this.state5 !== 'ON'); // toggle on when state 5 off.
-      let str = { id: '0', type: 'cmd', state1: state.toString() };
+      this.Sstate1 = !this.Sstate1;
+      let str = { id: '0', type: 'cmd', state1: this.Sstate1.toString() };
       this.socketService$.sendMessage(str);
     }
 
     toggleState2() {
-      const state = (this.state6 !== 'ON'); // toggle on when state 6 off.
-      let str = { id: '0', type: 'cmd', state2: state.toString() };
+      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';
+
         }
+
     }
 }