fix bug

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

 
 <mat-card class="sound-group">
   <mat-card-header>
-    <mat-card-title>WHISTLE TIME</mat-card-title>
+    <mat-card-title>WHISTLE TIME: {{whistle.time}}s</mat-card-title>
   </mat-card-header>
   <mat-card-content>
     <div class="volume-group">
         (valueChange)="whistle.time = $event"
       ></app-slider-range>
     </div>
-    <div class="volume-group">
-      <app-slider-range
-        [value]="alarm.sound"
-        [(ngModel)]="alarm.sound"
-        (valueChange)="alarm.sound = $event"
-        [icon]="alarm.sound == 0 ? 'volume_off' : 'volume_up'"
-      ></app-slider-range>
-    </div>
   </mat-card-content>
 </mat-card>
 
 
 <mat-card class="sound-group">
   <mat-card-header>
-    <mat-card-title>24-HOUR ZONE ALARM TIME</mat-card-title>
+    <mat-card-title>24-HOUR ZONE ALARM TIME: {{alarm.time}}s</mat-card-title>
   </mat-card-header>
   <mat-card-content>
     <div class="volume-group">
       <app-slider-range
-        [value]="whistle.time"
+        [value]="alarm.time"
         [icon]="'access_alarm'"
+        (valueChange)="alarm.time = $event"
       ></app-slider-range>
     </div>
-    <div class="volume-group">
-      <app-slider-range
-        [value]="whistle.sound"
-        [(ngModel)]="whistle.sound"
-        [icon]="whistle.sound == 0 ? 'volume_off' : 'volume_up'"
-      ></app-slider-range>
-    </div>
+
   </mat-card-content>
 </mat-card>

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

   </div>
   <div fxFlex="30" fxLayout="column" fxLayoutGap="50px">
     <button [disabled]="!isConnected" mat-flat-button color="{{switchArm ? 'accent' : 'primary'}}" (click)="toggleState1()">{{ switchArm ? 'DISARM' : 'ARM'}}</button>
-
   </div>
 </div>

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

   bottom: 100%;
   left: -50%;
 }
-
 .tooltip:hover .tooltiptext {
   visibility: visible;
   cursor: pointer;

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

   constructor(
     private socketService$: SocketService,
     private toastr: ToastrService
-  ) {
-  }
+  ) {}
 
   ngOnInit() {
     // this.socketService$.connect();