Merge branch 'master' into features/camera

angular.json

@@ -33,7 +33,8 @@
             "styles": [
               "@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss",
-              "node_modules/leaflet/dist/leaflet.css"
+              "node_modules/leaflet/dist/leaflet.css",
+              "node_modules/ngx-toastr/toastr.css"
             ],
             "scripts": [],
             "allowedCommonJsDependencies": [

src/app/app.module.ts

@@ -6,6 +6,9 @@ import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {SharedModule} from "./shared/shared.module";
 import {HttpClientModule} from "@angular/common/http";
+import { ToastrModule } from 'ngx-toastr';
+
+
 
 
 @NgModule({
@@ -17,7 +20,12 @@ import {HttpClientModule} from "@angular/common/http";
     AppRoutingModule,
     BrowserAnimationsModule,
     SharedModule,
-    HttpClientModule
+    HttpClientModule,
+    ToastrModule.forRoot({
+      maxOpened: 1,
+      preventDuplicates: true,
+      autoDismiss: true
+    }), // ToastrModule added
   ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -14,30 +14,28 @@
 
       <div class="state t2" id="State2">
         <div>
-          <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 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="Sstate3" class="alarm-text"
-             [ngClass]="{'alarm-text-on': Sstate3 }">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 [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  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="Sstate4" class="alarm-text"
-             [ngClass]="{'alarm-text-on': Sstate4 }">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>
@@ -49,8 +47,8 @@
       </div>
       <div class="state t5 tooltip" id="State5" >
         <div>
-          <div [ngClass]="{'sensor-on': Sstate1 && Sstate2,
-                          'sensor-off':  !(Sstate1 && Sstate2)}">
+          <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">
@@ -58,28 +56,28 @@
           </a>
         </div>
 
-        <div *ngIf="Sstate1 && Sstate2" class="alarm-text"
-             [ngClass]="{'alarm-text-on': Sstate1 && Sstate2 }">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': Sstate1 && Sstate2,
-                          'sensor-off': !(Sstate1 && Sstate2)}">
+          <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="Sstate1 && Sstate2" class="alarm-text"
-             [ngClass]="{'alarm-text-on': Sstate1 && Sstate2 }">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="{{Sstate1 ? 'accent' : 'primary'}}" (click)="toggleState1()">{{ Sstate1 ? 'DISARM' : 'ARM'}}</button>
-    <button [disabled]="!isConnected" mat-flat-button color="{{Sstate2 ? 'accent' : 'primary'}}" (click)="toggleState2()">{{ Sstate2 ? '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>