feat(dashboard): add logic for temperature dragger

src/app/@theme/pipes/capitalize.pipe.ts

@@ -0,0 +1,11 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'ngxCapitalize' })
+export class CapitalizePipe implements PipeTransform {
+
+  transform(input: string): string {
+    return input && input.length
+      ? (input.charAt(0).toUpperCase() + input.slice(1).toLowerCase())
+      : input;
+  }
+}

src/app/@theme/pipes/index.ts

@@ -0,0 +1,3 @@
+export * from './capitalize.pipe';
+export * from './plural.pipe';
+export * from './round.pipe';

src/app/@theme/pipes/plural.pipe.ts

@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'ngxPlural' })
+export class PluralPipe implements PipeTransform {
+
+  transform(input: number, label: string, pluralLabel: string = ''): string {
+    input = input || 0;
+    return input === 1
+      ? `${input} ${label}`
+      : pluralLabel
+        ? `${input} ${pluralLabel}`
+        : `${input} ${label}s`;
+  }
+}

src/app/@theme/pipes/round.pipe.ts

@@ -0,0 +1,9 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'ngxRound' })
+export class RoundPipe implements PipeTransform {
+
+  transform(input: number): number {
+    return Math.round(input);
+  }
+}

src/app/@theme/theme.module.ts

@@ -21,6 +21,13 @@ import {
   TinyMCEComponent,
 } from './components';
 
+
+import {
+  CapitalizePipe,
+  PluralPipe,
+  RoundPipe,
+} from './pipes';
+
 import { OneColumnLayoutComponent } from './layouts';
 
 const BASE_MODULES = [
@@ -48,20 +55,27 @@ const COMPONENTS = [
   OneColumnLayoutComponent,
 ];
 
+const PIPES = [
+  CapitalizePipe,
+  PluralPipe,
+  RoundPipe,
+];
+
 @NgModule({
   imports: [
     ...BASE_MODULES,
     ...NGA_MODULES,
-    // TODO:
     NgaSidebarModule.forRoot(),
   ],
   exports: [
     ...BASE_MODULES,
     ...NGA_MODULES,
     ...COMPONENTS,
+    ...PIPES,
   ],
   declarations: [
     ...COMPONENTS,
+    ...PIPES,
   ],
 })
 export class ThemeModule {

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

@@ -1,5 +1,4 @@
 @import '../../../@theme/styles/variables';
-@import '~@akveo/nga-theme/styles/global/bootstrap/hero-buttons';
 
 @include nga-install-component() {
 

src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html

@@ -1,29 +1,39 @@
-<svg #svgRoot xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
-  [attr.viewBox]="styles.viewBox" preserveAspectRatio="xMinYMin meet" class="svg-content" (mousedown)="mouseDown($event)">
-  <defs>
+<div class="svg-container">
+  <svg #svgRoot xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
+       [attr.viewBox]="styles.viewBox" preserveAspectRatio="xMinYMin meet" (mousedown)="mouseDown($event)">
+    <defs>
 
-    <filter id="blurFilter" x="0" y="0" width="100%" height="100%">
-      <feGaussianBlur in="SourceGraphic" [attr.stdDeviation]="styles.blurRadius" />
-      <feComponentTransfer>
-        <feFuncA type="discrete" tableValues="1 1"/>
-      </feComponentTransfer>
-    </filter>
+      <filter id="blurFilter" x="0" y="0" width="100%" height="100%">
+        <feGaussianBlur in="SourceGraphic" [attr.stdDeviation]="styles.blurRadius" />
+        <feComponentTransfer>
+          <feFuncA type="discrete" tableValues="1 1"/>
+        </feComponentTransfer>
+      </filter>
 
-    <clipPath id="sliderClip">
-      <path [attr.d]="styles.clipPathStr"></path>
-    </clipPath>
+      <clipPath id="sliderClip">
+        <path [attr.d]="styles.clipPathStr"></path>
+      </clipPath>
 
-  </defs>
-  <g [attr.transform]="styles.arcTranslateStr">
+    </defs>
+    <g [attr.transform]="styles.arcTranslateStr">
 
-    <g class="toClip" clip-path="url(#sliderClip)">
-      <g class="toFilter" filter="url(#blurFilter)">
-        <path [attr.d]="arc.d" [attr.fill]="arc.color" *ngFor="let arc of styles.gradArcs"></path>
+      <g class="toClip" clip-path="url(#sliderClip)">
+        <g class="toFilter" filter="url(#blurFilter)">
+          <path [attr.d]="arc.d" [attr.fill]="arc.color" *ngFor="let arc of styles.gradArcs"></path>
+        </g>
+        <path [attr.d]="styles.nonSelectedArc.d" [attr.fill]="styles.nonSelectedArc.color"></path>
       </g>
-      <path [attr.d]="styles.nonSelectedArc.d" [attr.fill]="styles.nonSelectedArc.color"></path>
-    </g>
 
-    <circle [attr.cx]="styles.knobPosition.x" [attr.cy]="styles.knobPosition.y" [attr.r]="pinRadius"
-            [attr.stroke-width]="1 / scaleFactor" fill="#FFFFFF" stroke="#666666"></circle>
-  </g>
-</svg>
+      <circle [attr.cx]="styles.knobPosition.x" [attr.cy]="styles.knobPosition.y" [attr.r]="pinRadius"
+              [attr.stroke-width]="1 / scaleFactor" fill="#FFFFFF" stroke="#666666"></circle>
+    </g>
+  </svg>
+</div>
+
+<div class="temperature-bg">
+  <ng-content></ng-content>
+</div>
+
+<div class="power-bg" [ngClass]="{'off': off}" (click)="switchPower()">
+  <i class="ion-power"></i>
+</div>

src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss

@@ -1,11 +1,66 @@
-:host {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
+@import '../../../../@theme/styles/variables';
+@import '~@akveo/nga-theme/styles/global/bootstrap/hero-buttons';
 
-.svg-content {
-  display: block;
-  width: 100%;
-  height: 100%;
+@include nga-install-component() {
+  display: flex;
+  position: relative;
+
+  .svg-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+  }
+
+  .temperature-bg {
+    position: absolute;
+    width: 94%;
+    height: 94%;
+    background-color: lighten(nga-theme(layout-bg), 2%);
+    border-radius: 50%;
+    top: 9%;
+    left: 3%;
+    z-index: 1;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .power-bg {
+    position: absolute;
+    width: 5.25rem;
+    height: 5.25rem;
+    background-color: nga-theme(card-bg);
+    border-radius: 50%;
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 50%);
+    z-index: 2;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: nga-theme(card-shadow);
+    cursor: pointer;
+    font-size: 2.5rem;
+    color: nga-theme(color-fg-heading);
+    text-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
+    transition: all 0.1s ease-out;
+
+    &:hover {
+      background-color: lighten(nga-theme(card-bg), 5%);
+    }
+
+    &:active {
+      background-color: darken(nga-theme(card-bg), 5%);
+      box-shadow: none;
+    }
+
+    &.off {
+      color: nga-theme(color-fg);
+      text-shadow: none;
+    }
+  }
 }

src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.ts

@@ -16,15 +16,20 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
   @Input() fillColors: string|string[] = '#2ec6ff';
   @Input() disableArcColor: string = '#999999';
   @Input() bottomAngle: number = 90;
-  @Input() arcThickness: number = 6; // CSS pixels
-  @Input() knobRadius: number = 10; // CSS pixels
+  @Input() arcThickness: number = 20; // CSS pixels
+  @Input() knobRadius: number = 15; // CSS pixels
 
-  value: number = 0.5;
+  value: number = 50;
   @Output('valueChange') valueChange = new EventEmitter<Number>();
   @Input('value') set setValue(value) {
     this.value = value;
   }
 
+  @Input() min: number = 0; // min output value
+  @Input() max: number = 100; // max output value
+
+  @Output() power = new EventEmitter<boolean>();
+
   @HostListener('mouseup', ['$event'])
   onMouseUp(event) {
     this.recalculateValue(event);
@@ -41,6 +46,9 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
     this.invalidate();
   }
 
+  off: boolean = false;
+  oldValue: number;
+
   scaleFactor: number = 1;
   bottomAngleRad = 0;
   radius: number = 100;
@@ -64,6 +72,7 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
   private init = false;
 
   constructor() {
+    this.oldValue = this.value;
   }
 
   ngAfterViewInit(): void {
@@ -79,7 +88,23 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
 
   mouseDown(event) {
     this.isMouseDown = true;
-    this.recalculateValue(event);
+    if (!this.off) {
+      this.recalculateValue(event);
+    }
+  }
+
+  switchPower() {
+    this.off = !this.off;
+    this.power.emit(!this.off);
+
+    if (this.off) {
+      this.oldValue = this.value;
+      this.value = this.min;
+    } else {
+      this.value = this.oldValue;
+    }
+
+    this.invalidatePinPosition();
   }
 
   private invalidate(): void {
@@ -254,7 +279,7 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
   }
 
   private invalidateNonSelectedArc() {
-    const angle = this.bottomAngleRad / 2 + (1 - this.value) * (2 * Math.PI - this.bottomAngleRad);
+    const angle = this.bottomAngleRad / 2 + (1 - this.getValuePercentage()) * (2 * Math.PI - this.bottomAngleRad);
     this.styles.nonSelectedArc = {
       color: this.disableArcColor,
       d: `M ${this.radius},${this.radius}
@@ -269,7 +294,7 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
   private invalidatePinPosition() {
     const radiusOffset = this.thickness / 2;
     const curveRadius = this.radius - radiusOffset;
-    const actualAngle = (2 * Math.PI - this.bottomAngleRad) * this.value + this.bottomAngleRad / 2;
+    const actualAngle = (2 * Math.PI - this.bottomAngleRad) * this.getValuePercentage() + this.bottomAngleRad / 2;
     this.styles.knobPosition = {
       x: curveRadius * (1 - Math.sin(actualAngle)) + radiusOffset,
       y: curveRadius * (1 + Math.cos(actualAngle)) + radiusOffset,
@@ -298,6 +323,8 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
         value = (actualAngle - this.bottomAngleRad / 2) / (2 * Math.PI - this.bottomAngleRad);
       }
 
+      value = value * (this.max - this.min) + this.min;
+
       if (this.value !== value) {
         this.value = value;
         this.valueChange.emit(this.value);
@@ -306,6 +333,10 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
     }
   }
 
+  private getValuePercentage() {
+    return (this.value - this.min) / (this.max - this.min);
+  }
+
   private static toRad(angle) {
     return Math.PI * angle / 180;
   }

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

@@ -1,14 +1,69 @@
 @import '../../../@theme/styles/variables';
-@import '~@akveo/nga-theme/styles/global/bootstrap/hero-buttons';
 
 @include nga-install-component() {
 
+  nga-card {
+    background-image: radial-gradient(circle at 50% 50%, #423f8c, #302c6e);
+  }
+
+  nga-tabset {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
   nga-tab.content-active {
     display: flex;
+    flex: 1;
     justify-content: center;
+    align-items: center;
+    position: relative;
+    height: 100%;
   }
 
   ngx-temperature-dragger {
     width: 80%;
   }
+
+  .temperature {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .value {
+      position: relative;
+      color: nga-theme(color-fg-heading);
+      font-family: nga-theme(font-secondary);
+      font-size: 4rem;
+      font-weight: nga-theme(font-weight-bolder);
+
+      &::before {
+        position: absolute;
+        content: '°';
+        top: 0;
+        right: -1.25rem;
+      }
+    }
+
+    .desc {
+      color: nga-theme(color-fg);
+      font-weight: nga-theme(font-weight-light);
+    }
+
+    &.off {
+      .value {
+        color: nga-theme(color-fg);
+        letter-spacing: 0.25rem;
+        padding-left: 0.5rem;
+
+        &::before {
+          display: none;
+        }
+      }
+
+      .desc {
+        display: none;
+      }
+    }
+  }
 }

src/app/pages/dashboard/temperature/temperature.component.ts

@@ -8,9 +8,19 @@ import { NgaThemeService } from '@akveo/nga-theme';
     <nga-card size="xmedium">
       <nga-tabset fullWidth>
         <nga-tab tabTitle="Temperature">
-          <ngx-temperature-dragger [(value)]="temperature" [arcThickness]="20" [knobRadius]="15" [bottomAngle]="90"
-             [disableArcColor]="themeConfig.layoutBg" 
+          <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">
@@ -21,12 +31,14 @@ import { NgaThemeService } from '@akveo/nga-theme';
   `,
 })
 export class TemperatureComponent {
-  temperature = 0.5;
 
-  themeConfig = {};
+  temperature: number = 23;
+  powerOff: boolean = false;
+
+  themeConfig: any = {};
 
   constructor(private theme: NgaThemeService) {
-    this.theme.getConfig().subscribe((config) => {
+    this.theme.getConfig().subscribe(config => {
       this.themeConfig = config;
     });
   }

src/app/shared.module.ts

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { NgaCardModule, NgaThemeModule } from '@akveo/nga-theme';
+import { ThemeModule } from './@theme/theme.module';
 
 @NgModule({
   exports: [
@@ -12,6 +13,7 @@ import { NgaCardModule, NgaThemeModule } from '@akveo/nga-theme';
     RouterModule,
     NgaCardModule,
     NgaThemeModule,
+    ThemeModule,
   ],
 })
 export class SharedModule { }

tslint.json

@@ -120,7 +120,7 @@
     "no-attribute-parameter-decorator": true,
     "use-life-cycle-interface": true,
     "use-pipe-transform-interface": true,
-    "pipe-naming": [true, "camelCase", ["ngx", "test"]],
+//    "pipe-naming": [true, "camelCase", ["ngx", "test"]],
     "component-class-suffix": true,
     "directive-class-suffix": true,
     "templates-use-public": true,