update refactor

src/app/modules/homepage/centralized-security-management/centralized-security-management.component.ts

 } from '@angular/core';
 import * as L from 'leaflet';
 import 'leaflet.markercluster';
-import { Subscription, take } from 'rxjs';
+import {Subject, Subscription, take} from 'rxjs';
 import { SocketService } from '../../../shared/services/socket.service';
 import { MatDialog } from '@angular/material/dialog';
 import { AlarmSoundService } from '../../../shared/services/alarm-sound.service';
 import { CameraDialogComponent } from '../../../shared/component/camera-dialog/camera-dialog.component';
 import { alarmData, alarmDemo } from '../data/fake-data';
+import {takeUntil} from "rxjs/operators";
 
 @Component({
   selector: 'app-centralized-security-management',
 {
   private map!: L.Map;
   private markers!: L.MarkerClusterGroup;
-  private statusSubscription?: Subscription;
-  private messageSubscription?: Subscription;
   data = alarmData;
   alarmDemo = alarmDemo;
   state1 = false;
   state5 = false;
   state6 = false;
   isReady = true;
-
+  private unsubscribeAll = new Subject();
   constructor(
     private socketService$: SocketService,
     private dialog: MatDialog,
   ) {}
 
   ngOnInit() {
-    this.statusSubscription = this.socketService$.status$.subscribe(
+    this.socketService$.status$.pipe(takeUntil(this.unsubscribeAll)).subscribe(
       (isConnected) => {
         if (isConnected) {
           this.socketService$.sendMessage({ id: '0', type: 'get' });
-          this.messageSubscription = this.socketService$.messages$.subscribe(
+          this.socketService$.messages$.pipe(takeUntil(this.unsubscribeAll)).subscribe(
             (message) => {
               this.onMessage(message);
             },
   }
 
   ngOnDestroy(): void {
-    this.statusSubscription?.unsubscribe();
-    this.messageSubscription?.unsubscribe();
-    this.socketService$.close();
     this.alarmSoundService$.stopAlarm();
+    this.unsubscribeAll.next('');
+    this.unsubscribeAll.complete();
   }
 
   initMap(): void {
   }
 
   onMessage(message: any) {
-    if (message.id == '0' && message.type === 'get') {
-      this.state1 = message.state1 === '0'; // 1 OFF // alarm 12h
-      this.status1 = message.status1 === '1'; //  0 not, 1 ready, 2 error, 3 bypass
-      this.state2 = message.state2 === '0'; // 1 OFF // alarm 1h
-      this.status2 = message.status2 === '1'; //  0 not, 1 ready, 2 error, 3 bypass
-      this.state5 = message.state5 === '1'; // 1 ON, 0 OFF
-      this.isReady = message.ready === '1';
+    if (message.id == '0' && message.type == 'get') {
+      this.state1 = message.state1 == '0'; // 1 OFF // alarm 12h
+      this.status1 = message.status1 == '1'; //  0 not, 1 ready, 2 error, 3 bypass
+      this.state2 = message.state2 == '0'; // 1 OFF // alarm 1h
+      this.status2 = message.status2 == '1'; //  0 not, 1 ready, 2 error, 3 bypass
+      this.state5 = message.state5 == '1'; // 1 ON, 0 OFF
+      this.isReady = message.ready == '1';
       this.alarmSoundService$.startAlarm(this.state5, this.state1,this.status1, this.state2, this.status2);
       this.updateIcons();
     }
   }
 
   addMarker(item: any, isDemo: boolean = false): void {
-    console.log(this.state5, this.state1, this.status1)
     const icon = isDemo
       ? this.getIcon(this.state5, this.state1, this.status1, this.state2, this.status2)
       : this.createIcon(item.warning);
         <div><strong>Địa điểm:</strong> ${item.detail.position}</div>
         <div><strong>Tọa độ:</strong> ${item.detail.coordinates.lat}, ${item.detail.coordinates.lng}</div>
         <div><strong>Thời gian:</strong> ${item.detail.time}</div>
-        <a href="/overview/security-system-details" target="_blank">Xem chi tiết</a>
+        <a href="/homepage/security-system-details" target="_blank">Xem chi tiết</a>
       </div>`;
   }
 

src/app/modules/homepage/homepage/home-page.component.ts

       (isConnected: boolean) => {
         this.isConnected = isConnected;
         this.mqtt$.getLog();
-        this.mqtt$.sendPublish({ id: '0', type: 'get', whistletime: ''});
-        this.mqtt$.sendPublish({ id: '0', type: 'get', arlamtime: ''});
+        setTimeout(() => {
+          this.mqtt$.sendPublish({ id: '0', type: 'get', whistletime: ''});
+        }, 500);
+        setTimeout(() => {
+          this.mqtt$.sendPublish({ id: '0', type: 'get', arlamtime: ''});
+        }, 1000);
         this.mqtt$.messages$.pipe(takeUntil(this.unsubscribeAll)).subscribe((message: any) => {
           console.log(message);
           if (message.id == '0' && message.whistletime) {
 
   emitSetting(type: string, event: any){
     if (this.isConnected) {
-      console.log(event);
       if (type === 'whistle') {
         this.whistle.time = event;
         this.mqtt$.sendPublish({ id: '0', type: 'set', whistletime: event.toString()});

src/app/modules/homepage/security-system-details/security-system-details.component.ts

 import {Component, OnDestroy, OnInit} from '@angular/core';
-import {Subscription} from "rxjs";
+import {debounceTime, Subject, Subscription} from "rxjs";
 import {SocketService} from "../../../shared/services/socket.service";
 import {CameraDialogComponent} from "../../../shared/component/camera-dialog/camera-dialog.component";
 import {MatDialog} from "@angular/material/dialog";
 import { ConfirmDialogService } from '../../../shared/services/confirm-dialog.service';
 import { AlarmSoundService } from "../../../shared/services/alarm-sound.service";
 import { MqttClientService } from "../../../shared/services/mqtt-client.service";
+import {takeUntil} from "rxjs/operators";
 
 @Component({
   selector: 'app-security-system-details',
   switchArm = false;
   switchWarning = false;
   isReady = true;
-  private statusSubscription?: Subscription;
-  private messageSubscription?: Subscription;
   private intervalId: any;
-
+  private unsubscribeAll = new Subject();
 
   constructor(
     private socketService$: SocketService,
   ) {}
 
   ngOnInit() {
-  this.statusSubscription = this.mqtt$.status$.subscribe((isConnected) => {
+  this.mqtt$.status$.pipe(takeUntil(this.unsubscribeAll)).subscribe((isConnected) => {
       this.isConnected = isConnected;
       if (isConnected){
         this.mqtt$.getLog();
-        this.messageSubscription = this.mqtt$.messages$.subscribe(message => {
+        this.mqtt$.sendPublish({ id: '0', type: 'get'});
+        this.mqtt$.messages$.pipe(takeUntil(this.unsubscribeAll)).subscribe(message => {
           console.log('MQTT sup msg: ',message);
           this.onMessage(message);
         });
   }
 
   ngOnDestroy(): void {
-    if (this.statusSubscription) {
-      this.statusSubscription.unsubscribe();
-    }
-    if (this.messageSubscription) {
-      this.messageSubscription.unsubscribe();
-    }
+    this.unsubscribeAll.next('');
+    this.unsubscribeAll.complete();
     if (this.intervalId) {
       clearInterval(this.intervalId);
     }
-    this.socketService$.close();
     this.alarmSoundService$.stopAlarm();
   }
 

src/app/shared/component/slider-range/slider-range.component.ts

   @Input() icon: string = '';
   @Input() disable: boolean = false;
   @Output() valueChange = new EventEmitter<number>();
-  @Input() disable: boolean = false;
   onChange = (value: number) => {};
   onTouched = () => {};
   private valueChangeSubject = new Subject<number>();

src/app/shared/services/mqtt-client.service.ts

   // 发送消息
   sendPublish(data: any) {
     this.client?.unsafePublish("isoft/node 4/in4", JSON.stringify(data), {qos: 0} as IPublishOptions);
+    // this.client?.publish("isoft/node 4/in4", JSON.stringify(data), {qos: 0} as IPublishOptions).subscribe();
   }
   // 断开连接
   destroyConnection() {