From 05c15bb314c4c8d03d379f1611042d920f92d556 Mon Sep 17 00:00:00 2001
From: Alexander Zhukov <a.zhukov@akveo.com>
Date: Wed, 12 Jul 2017 16:20:30 +0300
Subject: [PATCH] feat(dashboard): add a camera selecting for security cameras
 widget

---
 .../security-cameras/security-cameras.component.html       | 6 +++---
 .../security-cameras/security-cameras.component.scss       | 1 +
 .../security-cameras/security-cameras.component.ts         | 7 +++++++
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/app/pages/dashboard/security-cameras/security-cameras.component.html b/src/app/pages/dashboard/security-cameras/security-cameras.component.html
index d41859a1..d384f265 100644
--- a/src/app/pages/dashboard/security-cameras/security-cameras.component.html
+++ b/src/app/pages/dashboard/security-cameras/security-cameras.component.html
@@ -14,12 +14,12 @@
   </nga-card-header>
   <nga-card-body>
     <div class="cameras single-view" *ngIf="isSingleView">
-      <div class="camera" [style.background-image]="'url(/assets/images/camera1.jpg)'">
-        <span>Camera #1</span>
+      <div class="camera" [style.background-image]="'url(' + selectedCamera.source + ')'">
+        <span>{{ selectedCamera.title }}</span>
       </div>
     </div>
     <div class="cameras" *ngIf="!isSingleView">
-      <div class="camera" *ngFor="let c of cameras" [style.background-image]="'url(' + c.source + ')'">
+      <div class="camera" *ngFor="let c of cameras" [style.background-image]="'url(' + c.source + ')'" (click)="selectCamera(c)">
         <span>{{ c.title }}</span>
       </div>
     </div>
diff --git a/src/app/pages/dashboard/security-cameras/security-cameras.component.scss b/src/app/pages/dashboard/security-cameras/security-cameras.component.scss
index b3243248..0d1e2ed9 100644
--- a/src/app/pages/dashboard/security-cameras/security-cameras.component.scss
+++ b/src/app/pages/dashboard/security-cameras/security-cameras.component.scss
@@ -73,6 +73,7 @@
       width: 100%;
       height: 210px;
       opacity: 0.5;
+      transition: 0.1s;
     }
 
     .camera:hover::before {
diff --git a/src/app/pages/dashboard/security-cameras/security-cameras.component.ts b/src/app/pages/dashboard/security-cameras/security-cameras.component.ts
index 26c136b4..db6a3b48 100644
--- a/src/app/pages/dashboard/security-cameras/security-cameras.component.ts
+++ b/src/app/pages/dashboard/security-cameras/security-cameras.component.ts
@@ -21,6 +21,8 @@ export class SecurityCamerasComponent {
     source: '/assets/images/camera4.jpg',
   }];
 
+  selectedCamera: any = this.cameras[0];
+
   userMenu = [{
     title: 'Profile',
   }, {
@@ -28,4 +30,9 @@ export class SecurityCamerasComponent {
   }];
 
   isSingleView: boolean = false;
+
+  selectCamera(camera: any) {
+    this.selectedCamera = camera;
+    this.isSingleView = true;
+  }
 }