add code branch master

src/app/modules/overview/map/map.component.ts

   private map!: L.Map;
   private statusSubscription?: Subscription;
   private messageSubscription?: Subscription;
-  sensorOff = ICON.sensorOff;
-  sensorOn = ICON.sensorOn;
   sensorSmoke = ICON.sensorActiveSmoke;
   sensorVib =  ICON.sensorActiveVib;
 

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

 
       <div class="state t2" id="State2">
         <div>
-          <img [src]="getImageSource()" style="width: 30px; height: 30px">
+          <div [ngClass]="{'sensor-on': Sstate3,
+                          'sensor-off':  !(Sstate3)}">
+            <img [src]="Sstate3 ? '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" class="alarm-text"
+             [ngClass]="{'alarm-text-on': Sstate3 }">ALARM: <br>VIBRATION ALERT</div>
       </div>
 
       <div class="state t3" id="State3">
         <div>
-          <img [src]="getImageSource()" style="width: 30px; height: 30px">
+          <div [ngClass]="{'sensor-on': Sstate4,
+                          'sensor-off':  !(Sstate4)}">
+            <img [src]="Sstate4 ? '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" class="alarm-text"
+             [ngClass]="{'alarm-text-on': Sstate4 }">ALARM: <br>DOOR OPENING</div>
       </div>
       <div class="state t4" id="State4">
         <div>
 
         <div *ngIf="Sstate1 && Sstate2" class="alarm-text"
              [ngClass]="{'alarm-text-on': Sstate1 && Sstate2 }">ALARM: <br>VIBRATION ALERT</div>
-<!--        <div class="tooltiptext">-->
-<!--          <div style="display: flex;-->
-<!--                      flex-direction: row;-->
-<!--                      justify-content: space-between;-->
-<!--                      margin-bottom: 5px">-->
-<!--            <div style="color: #F33152;-->
-<!--                        padding: 5px 13px;-->
-<!--                        background-color: rgba(243, 49, 82, 0.1);-->
-<!--                        border-radius: 20px;-->
-<!--                        text-align: center;-->
-<!--                        width: 120px;">Hệ thống báo động 2</div>-->
-<!--            <a href="/overview/camera-stream" target="_blank">-->
-<!--              <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none">-->
-<!--                <g stroke="currentColor" stroke-width="2">-->
-<!--                  <path d="M16 16V8a1 1 0 00-1-1H5a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1z"/>-->
-<!--                  <path stroke-linejoin="round" d="M20 7l-4 3v4l4 3V7z"/>-->
-<!--                </g>-->
-<!--              </svg>-->
-<!--            </a>-->
-<!--          </div>-->
-<!--          <div><strong>Địa điểm:</strong> 120 Xa Lộ Hà Nội, Thành Phố, Thủ Đức, Thành phố Hồ Chí Minh</div>-->
-<!--          <div><strong>Tọa độ:</strong> 10.8661° N, 106.8029° E</div>-->
-<!--          <div><strong>Thời gian:</strong> 01:54, 01/06/2024</div>-->
-<!--        </div>-->
 
       </div>
       <div class="state t6 tooltip" id="State6">
         </div>
         <div *ngIf="Sstate1 && Sstate2" class="alarm-text"
              [ngClass]="{'alarm-text-on': Sstate1 && Sstate2 }">ALARM: <br>SMOKE ALERT</div>
-<!--        <div class="tooltiptext">-->
-<!--          <div style="display: flex;-->
-<!--                      flex-direction: row;-->
-<!--                      justify-content: space-between;-->
-<!--                      margin-bottom: 5px">-->
-<!--            <div style="color: #F33152;-->
-<!--                        padding: 5px 13px;-->
-<!--                        background-color: rgba(243, 49, 82, 0.1);-->
-<!--                        border-radius: 20px;-->
-<!--                        text-align: center;-->
-<!--                        width: 120px;">Hệ thống báo động 1</div>-->
-<!--            <a href="/overview/camera-stream" target="_blank">-->
-<!--              <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none">-->
-<!--                <g stroke="currentColor" stroke-width="2">-->
-<!--                  <path d="M16 16V8a1 1 0 00-1-1H5a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1z"/>-->
-<!--                  <path stroke-linejoin="round" d="M20 7l-4 3v4l4 3V7z"/>-->
-<!--                </g>-->
-<!--              </svg>-->
-<!--            </a>-->
-<!--          </div>-->
-<!--          <div><strong>Địa điểm:</strong> 120 Xa Lộ Hà Nội, Thành Phố, Thủ Đức, Thành phố Hồ Chí Minh</div>-->
-<!--          <div><strong>Tọa độ:</strong> 10.8661° N, 106.8029° E</div>-->
-<!--          <div><strong>Thời gian:</strong> 01:54, 01/06/2024</div>-->
-<!--        </div>-->
     </div>
-
-<!--      <div *ngFor="let state of states; let i = index"-->
-<!--           [ngClass]="{'sensor-on': Sstate1 && Sstate2}"-->
-<!--           class="state t{{i + 1}}"-->
-<!--           id="State{{i + 1}}">-->
-<!--        <img [src]="getImageSource()" style="width: 30px; height: 30px">-->
-<!--      </div>-->
     </div>
   </div>
   <div fxFlex="30" fxLayout="column" fxLayoutGap="50px">

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

   state6 = '';
   Sstate1 = false;
   Sstate2 = false;
+  Sstate3 = false;
+  Sstate4 = false;
   imageIcon = 'assets/images/sensor-off.png';
   title = 'ALARM: SMOKE ALERT'
   private statusSubscription?: Subscription;
     });
   }
 
-  toggleColor(): void {
-    this.isClicked = !this.isClicked;
-  }
-
   ngOnDestroy(): void {
     if (this.statusSubscription) {
       this.statusSubscription.unsubscribe();
 
   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.state1 = message.state1 === '0' ? 'ON' : 'OFF'; //  1 OFF
+      this.state2 = message.state2 === '0' ? 'ON' : 'OFF'; // 1 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';
       this.Sstate1 = this.state5 === 'ON';
       this.Sstate2 = this.state6 === 'ON';
+
+      this.Sstate3 = this.state1 === 'ON';
+      this.Sstate4 = this.state2 === 'ON';
     }
     if(this.Sstate1 && this.Sstate2)
       this.title = 'ALARM: VIBRATION ALERT'