From 60bd13a9f382bd30c84f795cbd9453c86f63818c Mon Sep 17 00:00:00 2001
From: KostyaDanovsky <kostya.danovsky@gmail.com>
Date: Mon, 10 Jul 2017 16:35:55 +0300
Subject: [PATCH] feat(dashboard): add modes for the temperature component

---
 .../temperature/temperature.component.html    | 58 +++++++++++++++++++
 .../temperature/temperature.component.scss    | 10 +++-
 .../temperature/temperature.component.ts      | 33 +++--------
 3 files changed, 73 insertions(+), 28 deletions(-)
 create mode 100644 src/app/pages/dashboard/temperature/temperature.component.html

diff --git a/src/app/pages/dashboard/temperature/temperature.component.html b/src/app/pages/dashboard/temperature/temperature.component.html
new file mode 100644
index 00000000..f9eeda97
--- /dev/null
+++ b/src/app/pages/dashboard/temperature/temperature.component.html
@@ -0,0 +1,58 @@
+<nga-card size="xmedium">
+  <nga-tabset fullWidth>
+
+    <nga-tab tabTitle="Temperature">
+
+      <div class="temperature-container">
+        <ngx-temperature-dragger [(value)]="temperature" (power)="temperatureOff = !$event" [min]="12" [max]="30"
+           [arcThickness]="20" [knobRadius]="15" [bottomAngle]="90" [disableArcColor]="themeConfig.layoutBg"
+           [fillColors]="[themeConfig.colorInfo, themeConfig.colorSuccess, themeConfig.colorWarning]">
+
+          <div class="temperature"  [ngClass]="{ 'off': temperatureOff }">
+            <div class="value">
+              {{ temperatureOff ? '--' : (temperature | ngxRound) }}
+            </div>
+            <div class="desc">
+              Celsius
+            </div>
+          </div>
+        </ngx-temperature-dragger>
+      </div>
+
+      <div [(ngModel)]="mode" ngbRadioGroup class="btn-group btn-group-block btn-group-divided-hidden"
+           data-toggle="buttons">
+        <label class="btn btn-outline-primary btn-icon">
+          <input type="radio" value="cool"/><i class="ion-ios-snowy"></i>
+        </label>
+        <label class="btn btn-outline-primary btn-icon">
+          <input type="radio" value="heat"/><i class="ion-flame"></i>
+        </label>
+        <label class="btn btn-outline-primary btn-icon">
+          <input type="radio" value="cool2"/><i class="ion-ios-snowy"></i>
+        </label>
+        <label class="btn btn-outline-primary btn-icon">
+          <input type="radio" value="heat2"/><i class="ion-flame"></i>
+        </label>
+      </div>
+    </nga-tab>
+
+    <nga-tab tabTitle="Humidity">
+
+      <span>Humidity placeholder</span>
+
+      <!--<ngx-temperature-dragger [(value)]="humidity" (power)="humidityOff = !$event" [min]="0" [max]="100"-->
+           <!--[arcThickness]="20" [knobRadius]="15" [bottomAngle]="90" [disableArcColor]="themeConfig.layoutBg"-->
+           <!--[fillColors]="[themeConfig.colorInfo, themeConfig.colorSuccess, themeConfig.colorWarning]">-->
+
+        <!--<div class="temperature"  [ngClass]="{ 'off': humidityOff }">-->
+          <!--<div class="value">-->
+            <!--{{ humidityOff ? '&#45;&#45;' : (humidity | ngxRound) }}-->
+          <!--</div>-->
+          <!--<div class="desc">-->
+            <!--Celsius-->
+          <!--</div>-->
+        <!--</div>-->
+      <!--</ngx-temperature-dragger>-->
+    </nga-tab>
+  </nga-tabset>
+</nga-card>
diff --git a/src/app/pages/dashboard/temperature/temperature.component.scss b/src/app/pages/dashboard/temperature/temperature.component.scss
index c4549f2d..6538e0df 100644
--- a/src/app/pages/dashboard/temperature/temperature.component.scss
+++ b/src/app/pages/dashboard/temperature/temperature.component.scss
@@ -13,12 +13,18 @@
   }
 
   nga-tab.content-active {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    position: relative;
+    height: 100%;
+  }
+
+  .temperature-container {
     display: flex;
     flex: 1;
     justify-content: center;
     align-items: center;
-    position: relative;
-    height: 100%;
   }
 
   ngx-temperature-dragger {
diff --git a/src/app/pages/dashboard/temperature/temperature.component.ts b/src/app/pages/dashboard/temperature/temperature.component.ts
index 5aed1589..b056c1fa 100644
--- a/src/app/pages/dashboard/temperature/temperature.component.ts
+++ b/src/app/pages/dashboard/temperature/temperature.component.ts
@@ -4,36 +4,17 @@ import { NgaThemeService } from '@akveo/nga-theme';
 @Component({
   selector: 'ngx-temperature',
   styleUrls: ['./temperature.component.scss'],
-  template: `
-    <nga-card size="xmedium">
-      <nga-tabset fullWidth>
-        <nga-tab tabTitle="Temperature">
-          <ngx-temperature-dragger [(value)]="temperature" (power)="powerOff = !$event" [min]="12" [max]="30"
-             [arcThickness]="20" [knobRadius]="15" [bottomAngle]="90" [disableArcColor]="themeConfig.layoutBg"
-             [fillColors]="[themeConfig.colorInfo, themeConfig.colorSuccess, themeConfig.colorWarning]">
-
-            <div class="temperature"  [ngClass]="{ 'off': powerOff }">
-              <div class="value">
-                {{ powerOff ? '--' : (temperature | ngxRound) }}
-              </div>
-              <div class="desc">
-                Celsius
-              </div>
-            </div>
-
-          </ngx-temperature-dragger>
-        </nga-tab>
-        <nga-tab tabTitle="Humidity">
-          <span>Content #2</span>
-        </nga-tab>
-      </nga-tabset>
-    </nga-card>
-  `,
+  templateUrl: './temperature.component.html',
 })
 export class TemperatureComponent {
 
   temperature: number = 23;
-  powerOff: boolean = false;
+  temperatureOff: boolean = false;
+  temperatureMode = 'cool';
+
+  humidity: number = 23;
+  humidityOff: boolean = false;
+  humidityMode = 'auto';
 
   themeConfig: any = {};