Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 23:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(temperature): temp widget themes support

Browse source
This commit is contained in:
nixa 2017-07-06 22:33:06 +03:00
parent 422880dddf
commit 33a21d559b
2 changed files with 49 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

66
src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.ts
View file

@ -1,5 +1,5 @@
import { import {
Component, HostListener, ViewChild, ElementRef, Input, Output, EventEmitter, AfterViewInit, Component, HostListener, ViewChild, ElementRef, Input, Output, EventEmitter, AfterViewInit, OnChanges,
} from '@angular/core'; } from '@angular/core';
const VIEW_BOX_SIZE = 300; const VIEW_BOX_SIZE = 300;
@ -9,12 +9,12 @@ const VIEW_BOX_SIZE = 300;
templateUrl: './temperature-dragger.component.html', templateUrl: './temperature-dragger.component.html',
styleUrls: ['./temperature-dragger.component.scss'], styleUrls: ['./temperature-dragger.component.scss'],
}) })
export class TemperatureDraggerComponent implements AfterViewInit { export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
@ViewChild('svgRoot') svgRoot: ElementRef; @ViewChild('svgRoot') svgRoot: ElementRef;
@Input() fillColors: String|String[] = '#2ec6ff'; @Input() fillColors: string|string[] = '#2ec6ff';
@Input() disableArcColor: String = '#999999'; @Input() disableArcColor: string = '#999999';
@Input() bottomAngle: number = 90; @Input() bottomAngle: number = 90;
@Input() arcThickness: number = 6; // CSS pixels @Input() arcThickness: number = 6; // CSS pixels
@Input() knobRadius: number = 10; // CSS pixels @Input() knobRadius: number = 10; // CSS pixels
@ -61,12 +61,20 @@ export class TemperatureDraggerComponent implements AfterViewInit {
}; };
private isMouseDown = false; private isMouseDown = false;
private init = false;
constructor() { constructor() {
} }
ngAfterViewInit(): void { ngAfterViewInit(): void {
this.invalidate(); this.invalidate();
this.init = true;
}
ngOnChanges(): void {
if (this.init) {
this.invalidate();
}
} }
mouseDown(event) { mouseDown(event) {
@ -168,24 +176,26 @@ export class TemperatureDraggerComponent implements AfterViewInit {
let path = `M ${s.outer.start.x},${s.outer.start.y}`; // Start at startangle top let path = `M ${s.outer.start.x},${s.outer.start.y}`; // Start at startangle top
// Outer arc // Outer arc
path += ` A ${s.outer.radius},${s.outer.radius}` + // Draw an arc of radius 'radius' // Draw an arc of radius 'radius'
` 0 ${s.big} 1` + // Arc details... // Arc details...
` ${s.outer.end.x},${s.outer.end.y}`; // Arc goes to top end angle coordinate path += ` A ${s.outer.radius},${s.outer.radius}
0 ${s.big} 1
${s.outer.end.x},${s.outer.end.y}`; // Arc goes to top end angle coordinate
// Outer to inner connector // Outer to inner connector
path += ` A ${s.thickness / 2},${s.thickness / 2}` + path += ` A ${s.thickness / 2},${s.thickness / 2}
` 0 1 1` + 0 1 1
` ${s.inner.end.x},${s.inner.end.y}`; ${s.inner.end.x},${s.inner.end.y}`;
// Inner arc // Inner arc
path += ` A ${s.inner.radius},${s.inner.radius}` + path += ` A ${s.inner.radius},${s.inner.radius}
` 1 ${s.big} 0` + 1 ${s.big} 0
` ${s.inner.start.x},${s.inner.start.y}`; ${s.inner.start.x},${s.inner.start.y}`;
// Outer to inner connector // Outer to inner connector
path += ` A ${s.thickness / 2},${s.thickness / 2}` + path += ` A ${s.thickness / 2},${s.thickness / 2}
` 0 1 1` + 0 1 1
` ${s.outer.start.x},${s.outer.start.y}`; ${s.outer.start.x},${s.outer.start.y}`;
// Close path // Close path
path += ' Z'; path += ' Z';
@ -219,12 +229,12 @@ export class TemperatureDraggerComponent implements AfterViewInit {
const radius = this.radius; const radius = this.radius;
function getArc(des) { function getArc(des) {
return `M ${radius},${radius}` + return `M ${radius},${radius}
` L ${des.start.x},${des.start.y}` + L ${des.start.x},${des.start.y}
` A ${2 * radius},${2 * radius}` + A ${2 * radius},${2 * radius}
` 0 ${des.big} 1` + 0 ${des.big} 1
` ${des.end.x},${des.end.y}` + ${des.end.x},${des.end.y}
` Z`; Z`;
} }
const angleStep = (2 * Math.PI - this.bottomAngleRad) / this.colors.length; const angleStep = (2 * Math.PI - this.bottomAngleRad) / this.colors.length;
@ -247,12 +257,12 @@ export class TemperatureDraggerComponent implements AfterViewInit {
const angle = this.bottomAngleRad / 2 + (1 - this.value) * (2 * Math.PI - this.bottomAngleRad); const angle = this.bottomAngleRad / 2 + (1 - this.value) * (2 * Math.PI - this.bottomAngleRad);
this.styles.nonSelectedArc = { this.styles.nonSelectedArc = {
color: this.disableArcColor, color: this.disableArcColor,
d: `M ${this.radius},${this.radius}` + d: `M ${this.radius},${this.radius}
` L ${this.radius},${3 * this.radius}` + L ${this.radius},${3 * this.radius}
` A ${2 * this.radius},${2 * this.radius}` + A ${2 * this.radius},${2 * this.radius}
` 1 ${angle > Math.PI ? '1' : '0'} 0` + 1 ${angle > Math.PI ? '1' : '0'} 0
` ${this.radius + this.radius * 2 * Math.sin(angle)},${this.radius + this.radius * 2 * Math.cos(angle)}` + ${this.radius + this.radius * 2 * Math.sin(angle)},${this.radius + this.radius * 2 * Math.cos(angle)}
` Z`, Z`,
}; };
} }

12
src/app/pages/dashboard/temperature/temperature.component.ts
View file

@ -1,4 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme';
@Component({ @Component({
selector: 'ngx-temperature', selector: 'ngx-temperature',
@ -8,7 +9,8 @@ import { Component } from '@angular/core';
<nga-tabset fullWidth> <nga-tabset fullWidth>
<nga-tab tabTitle="Temperature"> <nga-tab tabTitle="Temperature">
<ngx-temperature-dragger [(value)]="temperature" [arcThickness]="20" [knobRadius]="15" [bottomAngle]="90" <ngx-temperature-dragger [(value)]="temperature" [arcThickness]="20" [knobRadius]="15" [bottomAngle]="90"
disableArcColor="#2c2961" [fillColors]="['#2ec6ff', '#31ffad', '#7bff24', '#EAE75F']"> [disableArcColor]="themeConfig.layoutBg"
[fillColors]="[themeConfig.colorInfo, themeConfig.colorSuccess, themeConfig.colorWarning]">
</ngx-temperature-dragger> </ngx-temperature-dragger>
</nga-tab> </nga-tab>
<nga-tab tabTitle="Humidity"> <nga-tab tabTitle="Humidity">
@ -20,4 +22,12 @@ import { Component } from '@angular/core';
}) })
export class TemperatureComponent { export class TemperatureComponent {
temperature = 0.5; temperature = 0.5;
themeConfig = {};
constructor(private theme: NgaThemeService) {
this.theme.getConfig().subscribe((config) => {
this.themeConfig = config;
});
}
} }