feat(dashboard): add a security cameras widget (#13)

src/app/pages/dashboard/dashboard.component.html

@@ -48,9 +48,6 @@
   </div>
 
   <div class="col-lg-6">
-    <nga-card size="xlarge">
+    <ngx-security-cameras></ngx-security-cameras>
-      <nga-card-header>Security Cameras</nga-card-header>
-      <nga-card-body></nga-card-body>
-    </nga-card>
   </div>
 </div>

src/app/pages/dashboard/dashboard.module.ts

@@ -10,6 +10,7 @@ import { RoomSelectorComponent } from './rooms/room-selector/room-selector.compo
 import { TemperatureComponent } from './temperature/temperature.component';
 import { TemperatureDraggerComponent } from './temperature/temperature-dragger/temperature-dragger.component';
 import { TeamComponent } from './team/team.component';
+import { SecurityCamerasComponent } from './security-cameras/security-cameras.component';
 
 @NgModule({
   imports: [
@@ -26,6 +27,7 @@ import { TeamComponent } from './team/team.component';
     TemperatureComponent,
     RoomsComponent,
     TeamComponent,
+    SecurityCamerasComponent,
   ],
 })
 export class DashboardModule { }

src/app/pages/dashboard/security-cameras/security-cameras.component.html

@@ -0,0 +1,41 @@
+<nga-card>
+  <nga-card-header>
+    <div class="cameras-card-header">
+      <span class="cameras-card-title">Security Cameras</span>
+      <span class="cameras-filter">
+        <a [class.active]="isSingleView" (click)="isSingleView = true">
+          <i class="ion-android-checkbox-blank"></i>
+        </a>
+        <a [class.active]="!isSingleView" (click)="isSingleView = false">
+          <i class="ion-android-apps"></i>
+        </a>
+      </span>
+    </div>
+  </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>
+    </div>
+    <div class="cameras" *ngIf="!isSingleView">
+      <div class="camera" *ngFor="let c of cameras" [style.background-image]="'url(' + c.source + ')'">
+        <span>{{ c.title }}</span>
+      </div>
+    </div>
+  </nga-card-body>
+  <nga-card-footer>
+    <nga-actions size="medium">
+      <nga-action icon="ion-navicon"></nga-action>
+      <nga-action>
+        <nga-search type="rotate-layout"></nga-search>
+      </nga-action>
+      <nga-action icon="ion-ios-email-outline"></nga-action>
+      <nga-action disabled icon="ion-ios-bell-outline"></nga-action>
+      <nga-action>
+        <nga-user [menu]="userMenu" name="Han Solo"></nga-user>
+      </nga-action>
+      <nga-action icon="ion-ios-gear-outline"></nga-action>
+    </nga-actions>
+  </nga-card-footer>
+</nga-card>

src/app/pages/dashboard/security-cameras/security-cameras.component.scss

@@ -0,0 +1,95 @@
+@import '../../../@theme/styles/variables';
+
+@include nga-install-component() {
+  nga-card {
+    nga-card-header {
+      padding: 0;
+    }
+
+    nga-card-body {
+      padding: 0;
+    }
+  }
+
+  .cameras-card-header {
+    display: flex;
+
+    .cameras-card-title {
+      flex: 1;
+      padding: 1.25rem;
+      line-height: 1.25rem;
+    }
+  }
+
+  .cameras-filter {
+    display: flex;
+
+    a {
+      font-size: 2rem;
+      line-height: 2rem;
+      padding: 0.75rem 1.5rem;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      color: nga-theme(color-fg);
+      border-left: 1px solid #342e73;
+    }
+
+    a.active {
+      background-color: #342e73;
+      color: #00d990;
+      text-shadow: 0 4px 10px rgba(33, 7, 77, 0.4), 0 0 12px rgba(0, 217, 144, 0.4);
+    }
+  }
+
+  .cameras {
+    display: flex;
+    flex-wrap: wrap;
+
+    .camera {
+      position: relative;
+      background-position: center;
+      background-size: cover;
+      // TODO: Use calculated height
+      height: 210px;
+      width: 50%;
+
+      span {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        color: white;
+        background: rgba(88, 73, 184, 0.5);
+        font-size: 1rem;
+        line-height: 2.5rem;
+        padding-left: 1rem;
+      }
+    }
+
+    .camera::before {
+      background-color: black;
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 210px;
+      opacity: 0.5;
+    }
+
+    .camera:hover::before {
+      opacity: 0;
+    }
+  }
+
+  .cameras.single-view {
+    .camera {
+      // TODO: Use calculated height
+      height: 420px;
+      width: 100%;
+
+      &::before {
+        // TODO: Use calculated height
+        height: 420px;
+      }
+    }
+  }
+}

src/app/pages/dashboard/security-cameras/security-cameras.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ngx-security-cameras',
+  styleUrls: ['./security-cameras.component.scss'],
+  templateUrl: './security-cameras.component.html',
+})
+export class SecurityCamerasComponent {
+
+  cameras: any[] = [{
+    title: 'Camera #1',
+    source: '/assets/images/camera1.jpg',
+  }, {
+    title: 'Camera #2',
+    source: '/assets/images/camera2.jpg',
+  }, {
+    title: 'Camera #3',
+    source: '/assets/images/camera3.jpg',
+  }, {
+    title: 'Camera #4',
+    source: '/assets/images/camera4.jpg',
+  }];
+
+  userMenu = [{
+    title: 'Profile',
+  }, {
+    title: 'Log out',
+  }];
+
+  isSingleView: boolean = false;
+}

src/app/pages/dashboard/team/team.component.scss

@@ -7,6 +7,7 @@
     background-image: url('./~/assets/images/team.jpg');
     background-position: center;
     background-size: cover;
+    // TODO: Use calculated height
     height: 200px;
     position: relative;
     border-top-left-radius: nga-theme(card-border-radius);