Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 15:40:11 +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 {
Component, HostListener, ViewChild, ElementRef, Input, Output, EventEmitter, AfterViewInit,
Component, HostListener, ViewChild, ElementRef, Input, Output, EventEmitter, AfterViewInit, OnChanges,
} from '@angular/core';
const VIEW_BOX_SIZE = 300;
@ -9,12 +9,12 @@ const VIEW_BOX_SIZE = 300;
templateUrl: './temperature-dragger.component.html',
styleUrls: ['./temperature-dragger.component.scss'],
})
export class TemperatureDraggerComponent implements AfterViewInit {
export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
@ViewChild('svgRoot') svgRoot: ElementRef;
@Input() fillColors: String|String[] = '#2ec6ff';
@Input() disableArcColor: String = '#999999';
@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
@ -61,12 +61,20 @@ export class TemperatureDraggerComponent implements AfterViewInit {
};
private isMouseDown = false;
private init = false;
constructor() {
}
ngAfterViewInit(): void {
this.invalidate();
this.init = true;
}
ngOnChanges(): void {
if (this.init) {
this.invalidate();
}
}
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
// Outer arc
path += ` A ${s.outer.radius},${s.outer.radius}` + // Draw an arc of radius 'radius'
` 0 ${s.big} 1` + // Arc details...
` ${s.outer.end.x},${s.outer.end.y}`; // Arc goes to top end angle coordinate
// Draw an arc of radius 'radius'
// Arc details...
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
path += ` A ${s.thickness / 2},${s.thickness / 2}` +
` 0 1 1` +
` ${s.inner.end.x},${s.inner.end.y}`;
path += ` A ${s.thickness / 2},${s.thickness / 2}
0 1 1
${s.inner.end.x},${s.inner.end.y}`;
// Inner arc
path += ` A ${s.inner.radius},${s.inner.radius}` +
` 1 ${s.big} 0` +
` ${s.inner.start.x},${s.inner.start.y}`;
path += ` A ${s.inner.radius},${s.inner.radius}
1 ${s.big} 0
${s.inner.start.x},${s.inner.start.y}`;
// Outer to inner connector
path += ` A ${s.thickness / 2},${s.thickness / 2}` +
` 0 1 1` +
` ${s.outer.start.x},${s.outer.start.y}`;
path += ` A ${s.thickness / 2},${s.thickness / 2}
0 1 1
${s.outer.start.x},${s.outer.start.y}`;
// Close path
path += ' Z';
@ -219,12 +229,12 @@ export class TemperatureDraggerComponent implements AfterViewInit {
const radius = this.radius;
function getArc(des) {
return `M ${radius},${radius}` +
` L ${des.start.x},${des.start.y}` +
` A ${2 * radius},${2 * radius}` +
` 0 ${des.big} 1` +
` ${des.end.x},${des.end.y}` +
` Z`;
return `M ${radius},${radius}
L ${des.start.x},${des.start.y}
A ${2 * radius},${2 * radius}
0 ${des.big} 1
${des.end.x},${des.end.y}
Z`;
}
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);
this.styles.nonSelectedArc = {
color: this.disableArcColor,
d: `M ${this.radius},${this.radius}` +
` L ${this.radius},${3 * this.radius}` +
` A ${2 * this.radius},${2 * this.radius}` +
` 1 ${angle > Math.PI ? '1' : '0'} 0` +
` ${this.radius + this.radius * 2 * Math.sin(angle)},${this.radius + this.radius * 2 * Math.cos(angle)}` +
` Z`,
d: `M ${this.radius},${this.radius}
L ${this.radius},${3 * this.radius}
A ${2 * this.radius},${2 * this.radius}
1 ${angle > Math.PI ? '1' : '0'} 0
${this.radius + this.radius * 2 * Math.sin(angle)},${this.radius + this.radius * 2 * Math.cos(angle)}
Z`,
};
}

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

@ -1,4 +1,5 @@
import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme';
@Component({
selector: 'ngx-temperature',
@ -8,7 +9,8 @@ import { Component } from '@angular/core';
<nga-tabset fullWidth>
<nga-tab tabTitle="Temperature">
<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>
</nga-tab>
<nga-tab tabTitle="Humidity">
@ -20,4 +22,12 @@ import { Component } from '@angular/core';
})
export class TemperatureComponent {
temperature = 0.5;
themeConfig = {};
constructor(private theme: NgaThemeService) {
this.theme.getConfig().subscribe((config) => {
this.themeConfig = config;
});
}
}