From fe96d074ef341a54a350c54331f8a462633a8ac6 Mon Sep 17 00:00:00 2001
From: KostyaDanovsky <kostya.danovsky@gmail.com>
Date: Thu, 13 Jul 2017 16:25:12 +0300
Subject: [PATCH] fix(dashboard): refactor status cards: move grid to dashboard

---
 .../pages/dashboard/dashboard.component.html  | 27 +++++++++++++++--
 src/app/pages/dashboard/dashboard.module.ts   |  4 +--
 .../status-card.component.scss}               |  1 -
 .../status-card/status-card.component.ts      | 24 +++++++++++++++
 .../status-cards/status-cards.component.ts    | 30 -------------------
 5 files changed, 51 insertions(+), 35 deletions(-)
 rename src/app/pages/dashboard/{status-cards/status-cards.component.scss => status-card/status-card.component.scss} (99%)
 create mode 100644 src/app/pages/dashboard/status-card/status-card.component.ts
 delete mode 100644 src/app/pages/dashboard/status-cards/status-cards.component.ts

diff --git a/src/app/pages/dashboard/dashboard.component.html b/src/app/pages/dashboard/dashboard.component.html
index bf34cc60..8bbedce7 100644
--- a/src/app/pages/dashboard/dashboard.component.html
+++ b/src/app/pages/dashboard/dashboard.component.html
@@ -1,5 +1,28 @@
-<ngx-status-cards>
-</ngx-status-cards>
+<div class="row">
+  <div class="col-lg-3">
+    <ngx-status-card title="Light" type="primary">
+      <i class="ion-ios-lightbulb-outline"></i>
+    </ngx-status-card>
+  </div>
+
+  <div class="col-lg-3">
+    <ngx-status-card title="Roller Shades" type="success">
+      <i class="ion-ios-photos-outline"></i>
+    </ngx-status-card>
+  </div>
+
+  <div class="col-lg-3">
+    <ngx-status-card title="Wireless Audio" type="info">
+      <i class="ion-ios-game-controller-b-outline"></i>
+    </ngx-status-card>
+  </div>
+
+  <div class="col-lg-3">
+    <ngx-status-card title="Coffee Maker" type="warning">
+      <i class="ion-ios-lightbulb-outline"></i>
+    </ngx-status-card>
+  </div>
+</div>
 
 <div class="row">
   <div class="col-lg-3">
diff --git a/src/app/pages/dashboard/dashboard.module.ts b/src/app/pages/dashboard/dashboard.module.ts
index c531f5f9..047c11b7 100644
--- a/src/app/pages/dashboard/dashboard.module.ts
+++ b/src/app/pages/dashboard/dashboard.module.ts
@@ -3,7 +3,7 @@ import { NgaTabsetModule, NgaUserModule } from '@akveo/nga-theme';
 
 import { SharedModule } from '../../shared.module';
 import { DashboardComponent } from './dashboard.component';
-import { StatusCardsComponent } from './status-cards/status-cards.component';
+import { StatusCardComponent } from './status-card/status-card.component';
 import { ContactsComponent } from './contacts/contacts.component';
 import { RoomsComponent } from './rooms/rooms.component';
 import { RoomSelectorComponent } from './rooms/room-selector/room-selector.component';
@@ -22,7 +22,7 @@ import { WeatherComponent } from './weather/weather.component';
   ],
   declarations: [
     DashboardComponent,
-    StatusCardsComponent,
+    StatusCardComponent,
     TemperatureDraggerComponent,
     ContactsComponent,
     RoomSelectorComponent,
diff --git a/src/app/pages/dashboard/status-cards/status-cards.component.scss b/src/app/pages/dashboard/status-card/status-card.component.scss
similarity index 99%
rename from src/app/pages/dashboard/status-cards/status-cards.component.scss
rename to src/app/pages/dashboard/status-card/status-card.component.scss
index 88851ebb..63c0b5ab 100644
--- a/src/app/pages/dashboard/status-cards/status-cards.component.scss
+++ b/src/app/pages/dashboard/status-card/status-card.component.scss
@@ -7,7 +7,6 @@
     align-items: center;
     height: 6rem;
     overflow: visible;
-    cursor: pointer;
     color: nga-theme(card-fg-heading);
 
     $bevel: btn-hero-bevel(nga-theme(card-bg));
diff --git a/src/app/pages/dashboard/status-card/status-card.component.ts b/src/app/pages/dashboard/status-card/status-card.component.ts
new file mode 100644
index 00000000..d2ae62d1
--- /dev/null
+++ b/src/app/pages/dashboard/status-card/status-card.component.ts
@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'ngx-status-card',
+  styleUrls: ['./status-card.component.scss'],
+  template: `
+    <nga-card (click)="on = !on" [ngClass]="{'off': !on}">
+      <div class="icon-container {{ type }}">
+        <ng-content></ng-content>
+      </div>
+
+      <div class="details">
+        <div class="title">{{ title }}</div>
+        <div class="status">{{ on ? 'ON' : 'OFF' }}</div>
+      </div>
+    </nga-card>
+  `,
+})
+export class StatusCardComponent {
+
+  @Input() title: string;
+  @Input() type: string;
+  @Input() on: boolean = true;
+}
diff --git a/src/app/pages/dashboard/status-cards/status-cards.component.ts b/src/app/pages/dashboard/status-cards/status-cards.component.ts
deleted file mode 100644
index 04acda51..00000000
--- a/src/app/pages/dashboard/status-cards/status-cards.component.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'ngx-status-cards',
-  styleUrls: ['./status-cards.component.scss'],
-  template: `
-    <div class="row">
-      <div class="col-lg-3" *ngFor="let card of statusCards" size="xsmall">
-        <nga-card (click)="card.on = !card.on" [ngClass]="{'off': !card.on}">
-          <div class="icon-container {{card.type}}">
-            <i class="{{card.icon}}"></i>
-          </div>
-
-          <div class="details">
-            <div class="title">{{card.title}}</div>
-            <div class="status">{{card.on ? 'ON' : 'OFF'}}</div>
-          </div>
-        </nga-card>
-      </div>
-    </div>
-  `,
-})
-export class StatusCardsComponent {
-  statusCards = [
-    { title: 'Light', on: true, type: 'primary', icon: 'ion-ios-lightbulb-outline' },
-    { title: 'Roller Shades', on: true, type: 'success', icon: 'ion-ios-photos-outline' },
-    { title: 'Wireless Audio', on: true, type: 'info', icon: 'ion-ios-game-controller-b-outline' },
-    { title: 'Coffee Maker', on: true, type: 'warning', icon: 'ion-ios-game-controller-b-outline' },
-  ];
-}