update state

src/app/app.module.ts

@@ -24,7 +24,11 @@ export function appInitializerFactory(appInitializerService: AppInitService): ()
     BrowserAnimationsModule,
     SharedModule,
     HttpClientModule,
-    ToastrModule.forRoot(), // ToastrModule added
+    ToastrModule.forRoot({
+      maxOpened: 1,
+      preventDuplicates: true,
+      autoDismiss: true
+    }), // ToastrModule added
   ],
   providers: [
 

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

@@ -14,28 +14,28 @@
 
       <div class="state t2" id="State2">
         <div>
-          <div class="sensor-off" [class.sensor-on]="(Sstate1 && Sstate5)">
-            <img [src]="Sstate5 ? 'assets/images/sensor-on.png' : 'assets/images/sensor-off.png'"  style="width: 30px; height: 30px">
+          <div class="sensor-off" [class.sensor-on]="(state1 && state5 && isReady)">
+            <img [src]="state5 ? '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="(Sstate1 && Sstate5)" class="alarm-text"
-             [ngClass]="{'alarm-text-on': (Sstate1 && Sstate5) }">ALARM: <br>VIBRATION ALERT</div>
+        <div *ngIf="(state1 && state5 && isReady)" class="alarm-text"
+             [ngClass]="{'alarm-text-on': (state1 && state5 && isReady) }">ALARM: <br>VIBRATION ALERT</div>
       </div>
 
       <div class="state t3" id="State3">
         <div>
-          <div  class="sensor-off" [class.sensor-on]="(Sstate2 && Sstate5)">
-            <img [src]="Sstate5 ? 'assets/images/sensor-on.png' : 'assets/images/sensor-off.png'"  style="width: 30px; height: 30px">
+          <div  class="sensor-off" [class.sensor-on]="(state2 && state5 && isReady)">
+            <img [src]="state5 ? '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="(Sstate2 && Sstate5)" class="alarm-text"
-             [ngClass]="{'alarm-text-on': (Sstate2 && Sstate5) }">ALARM: <br>DOOR OPENING</div>
+        <div *ngIf="(state2 && state5 && isReady)" class="alarm-text"
+             [ngClass]="{'alarm-text-on': (state2 && state5 && isReady) }">ALARM: <br>DOOR OPENING</div>
       </div>
       <div class="state t4" id="State4">
         <div>
@@ -47,8 +47,8 @@
       </div>
       <div class="state t5 tooltip" id="State5" >
         <div>
-          <div [ngClass]="{'sensor-on': Sstate5 && Sstate6,
-                          'sensor-off':  !(Sstate5 && Sstate6)}">
+          <div [ngClass]="{'sensor-on': state5 && state6,
+                          'sensor-off':  !(state5 && state6)}">
             <img [src]="getImageSource()"  style="width: 30px; height: 30px">
           </div>
           <a href="/overview/camera-stream" target="_blank">
@@ -56,28 +56,28 @@
           </a>
         </div>
 
-        <div *ngIf="Sstate5 && Sstate6" class="alarm-text"
-             [ngClass]="{'alarm-text-on': Sstate5 && Sstate6 }">ALARM: <br>VIBRATION ALERT</div>
+        <div *ngIf="state5 && state6" class="alarm-text"
+             [ngClass]="{'alarm-text-on': state5 && state6 }">ALARM: <br>VIBRATION ALERT</div>
 
       </div>
       <div class="state t6 tooltip" id="State6">
         <div>
-          <div [ngClass]="{'sensor-on': Sstate5 && Sstate6,
-                          'sensor-off': !(Sstate5 && Sstate6)}">
+          <div [ngClass]="{'sensor-on': state5 && state6,
+                          'sensor-off': !(state5 && state6)}">
             <img [src]="getImageSource()"  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="Sstate5 && Sstate6" class="alarm-text"
-             [ngClass]="{'alarm-text-on': Sstate5 && Sstate6 }">ALARM: <br>SMOKE ALERT</div>
+        <div *ngIf="state5 && state6" class="alarm-text"
+             [ngClass]="{'alarm-text-on': state5 && state6 }">ALARM: <br>SMOKE ALERT</div>
     </div>
     </div>
   </div>
   <div fxFlex="30" fxLayout="column" fxLayoutGap="50px">
-    <button [disabled]="!isConnected" mat-flat-button color="{{Sstate5 ? 'accent' : 'primary'}}" (click)="toggleState1()">{{ Sstate5 ? 'DISARM' : 'ARM'}}</button>
-    <button [disabled]="!isConnected" mat-flat-button color="{{Sstate6 ? 'accent' : 'primary'}}" (click)="toggleState2()">{{ Sstate6 ? 'TURN OFF WARNING' : 'TURN ON WARNING'}}</button>
+    <button [disabled]="!isConnected" mat-flat-button color="{{switchArm ? 'accent' : 'primary'}}" (click)="toggleState1()">{{ switchArm ? 'DISARM' : 'ARM'}}</button>
+    <button [disabled]="!isConnected" mat-flat-button color="{{switchWarning ? 'accent' : 'primary'}}" (click)="toggleState2()">{{ switchWarning ? 'TURN OFF WARNING' : 'TURN ON WARNING'}}</button>
     <a style = "padding: 30px 50px;" mat-stroked-button color="primary" href="/overview/camera-stream" target="_blank"> LIVE CAMERA </a>
 
   </div>

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

@@ -10,16 +10,15 @@ import {ToastrService} from "ngx-toastr";
 })
 export class OverallGroundComponent implements OnInit, OnDestroy {
   isConnected = false;
-  state1 = '';
-  state2 = '';
+  state1 = false;
+  state2 = false;
   state3 = '';
   state4 = '';
-  state5 = '';
-  state6 = '';
-  Sstate5 = false;
-  Sstate6 = false;
-  Sstate1 = false;
-  Sstate2 = false;
+  state5 = false;
+  state6 = false;
+  switchArm = false;
+  switchWarning = false;
+  isReady = true;
   private statusSubscription?: Subscription;
   private messageSubscription?: Subscription;
   private intervalId: any;
@@ -64,35 +63,35 @@ export class OverallGroundComponent implements OnInit, OnDestroy {
   }
 
   toggleState1() {
-    this.Sstate5 = !this.Sstate5;
-    let str = {id: '0', type: 'cmd', state1: this.Sstate5.toString()};
+    this.switchArm = !this.switchArm;
+    let str = {id: '0', type: 'cmd', state1: this.switchArm.toString()};
     this.socketService$.sendMessage(str);
   }
 
   toggleState2() {
-    this.Sstate6 = !this.Sstate6;
-    let str = {id: '0', type: 'cmd', state2: this.Sstate6.toString()};
+    this.switchWarning = !this.switchWarning;
+    let str = {id: '0', type: 'cmd', state2: this.switchWarning.toString()};
     this.socketService$.sendMessage(str);
   }
 
   getImageSource(): string {
-    return (this.Sstate5 && this.Sstate6) || this.Sstate5 ? 'assets/images/sensor-on.png' : 'assets/images/sensor-off.png';
+    return (this.state5 && this.state6) || this.state5 ? 'assets/images/sensor-on.png' : 'assets/images/sensor-off.png';
   }
 
   onMessage(message: any) {
     if (message.id == '0' && message.type === 'get') {
-      this.state1 = message.state1 === '0' ? 'ON' : 'OFF'; //  1 OFF
-      this.state2 = message.state2 === '0' ? 'ON' : 'OFF'; // 1 OFF
+      this.state1 = message.state1 === '0'; //  1 OFF // alarm 12h
+      this.state2 = message.state2 === '0'; // 1 OFF // alarm 1h
       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.Sstate5 = this.state5 === 'ON';// alarm 9h && 6h
-      this.Sstate6 = this.state6 === 'ON';// alarm 9h && 6h
+      this.state5 = message.state5 === '1'; // alarm 9h && 6h // 1 ON, 0 OFF
+      this.state6 = message.state6 === '1'; // ? 'ON' : 'OFF';
 
-      this.Sstate1 = this.state1 === 'ON';// alarm 12h
-      this.Sstate2 = this.state2 === 'ON';// alarm 1h
-      if (message.ready === '0'){
+      this.switchArm = message.state5 === '1';// alarm 9h && 6h // 1 ON, 0 OFF
+      this.switchWarning = message.state6 === '1';// alarm 9h && 6h // 1 ON, 0 OFF
+
+      this.isReady = message.ready === '1';
+      if (message.ready === '0' && this.state5){ // not ready and ON arm
         this.toastr.warning('System not ready', 'Warning', {timeOut: 5000});
       }
     }

src/app/modules/overview/overview.module.ts

@@ -6,9 +6,7 @@ import {RouterModule} from "@angular/router";
 import {overviewRoutes} from "./overview.routing";
 import {MapComponent} from "./map/map.component";
 import {SharedMaterialModule} from "../../shared/shared-material.module";
-import {MatIconModule} from "@angular/material/icon";
 import { CameraStreamComponent } from './camera-stream/camera-stream.component';
-import {FormsModule} from "@angular/forms";
 
 @NgModule({
   declarations: [