add dialog camera

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

@@ -40,7 +40,6 @@ export class CentralizedSecurityManagementComponent
     private dialog: MatDialog,
     private renderer: Renderer2,
     private alarmSoundService$: AlarmSoundService,
-    private confirmDialogService$: ConfirmDialogService,
   ) {}
 
   ngOnInit() {

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

@@ -3,49 +3,38 @@
     <div class="card-state">
       <img src="assets/images/ground.png">
       <div class="state t2" id="State2">
-        <div>
+        <div fxLayout="row">
           <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>
+          <ng-container [ngTemplateOutlet]="camera"></ng-container>
         </div>
         <div *ngIf="(state1 && state5 && isReady)" class="alarm-text"
              [ngClass]="{'alarm-text-on': (state1 && state5 && isReady) }">FIRE ALARM</div>
       </div>
 
       <div class="state t3" id="State3">
-        <div>
+        <div fxLayout="row">
           <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>
+          <ng-container [ngTemplateOutlet]="camera"></ng-container>
         </div>
         <div *ngIf="(state2 && state5 && isReady)" class="alarm-text"
              [ngClass]="{'alarm-text-on': (state2 && state5 && isReady) }">FENCE ALARM</div>
       </div>
-      <div class="state t4" id="State4">
-        <div>
+      <div class="state t4" id="State4" fxLayout="row" >
           <img [src]="getImageSource()" style="width: 30px; height: 30px">
-          <a href="/overview/camera-stream" target="_blank">
-            <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
-          </a>
-        </div>
+          <ng-container [ngTemplateOutlet]="camera"></ng-container>
       </div>
-      <div class="state t5 tooltip" id="State5" >
+      <div class="state t5 tooltip" id="State5" fxLayout="row">
         <img [src]="getImageSource()"  style="width: 30px; height: 30px">
-        <a href="/overview/camera-stream" target="_blank">
-          <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
-        </a>
+        <ng-container [ngTemplateOutlet]="camera"></ng-container>
       </div>
-      <div class="state t6 tooltip" id="State6">
+      <div class="state t6 tooltip" id="State6" fxLayout="row">
         <img [src]="getImageSource()"  style="width: 30px; height: 30px">
-        <a href="/overview/camera-stream" target="_blank">
-          <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
-        </a>
+        <ng-container [ngTemplateOutlet]="camera"></ng-container>
+
       </div>
     </div>
   </div>
@@ -53,3 +42,8 @@
     <button [disabled]="!isConnected" mat-flat-button color="{{switchArm ? 'accent' : 'primary'}}" (click)="toggleState1()">{{ switchArm ? 'DISARM' : 'ARM'}}</button>
   </div>
 </div>
+<ng-template #camera>
+  <div (click)="openDialog()">
+    <img style="width: 30px; height: 30px; cursor: pointer" src="assets/images/camera.png">
+  </div>
+</ng-template>

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

@@ -2,6 +2,8 @@ import {Component, OnDestroy, OnInit} from '@angular/core';
 import {Subscription} from "rxjs";
 import {SocketService} from "../../../shared/services/socket.service";
 import {ToastrService} from "ngx-toastr";
+import {CameraDialogComponent} from "../../../shared/component/camera-dialog/camera-dialog.component";
+import {MatDialog} from "@angular/material/dialog";
 
 @Component({
   selector: 'app-security-system-details',
@@ -26,7 +28,8 @@ export class SecuritySystemDetailsComponent implements OnInit, OnDestroy {
 
   constructor(
     private socketService$: SocketService,
-    private toastr: ToastrService
+    private toastr: ToastrService,
+    private dialog: MatDialog,
   ) {}
 
   ngOnInit() {
@@ -89,4 +92,10 @@ export class SecuritySystemDetailsComponent implements OnInit, OnDestroy {
       }
     }
   }
+  openDialog(): void {
+    this.dialog.open(CameraDialogComponent, {
+      width: '80vw',
+      data: '',
+    });
+  }
 }