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(dashboard): add modes for the temperature component

Browse source
This commit is contained in:
KostyaDanovsky 2017-07-10 16:35:55 +03:00
parent 2b45625202
commit 60bd13a9f3
3 changed files with 73 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

58
src/app/pages/dashboard/temperature/temperature.component.html Normal file
View file

@ -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>

10
src/app/pages/dashboard/temperature/temperature.component.scss
View file

@ -13,12 +13,18 @@
} }
nga-tab.content-active { nga-tab.content-active {
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
height: 100%;
}
.temperature-container {
display: flex; display: flex;
flex: 1; flex: 1;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
position: relative;
height: 100%;
} }
ngx-temperature-dragger { ngx-temperature-dragger {

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

@ -4,36 +4,17 @@ import { NgaThemeService } from '@akveo/nga-theme';
@Component({ @Component({
selector: 'ngx-temperature', selector: 'ngx-temperature',
styleUrls: ['./temperature.component.scss'], styleUrls: ['./temperature.component.scss'],
template: ` templateUrl: './temperature.component.html',
<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>
`,
}) })
export class TemperatureComponent { export class TemperatureComponent {
temperature: number = 23; temperature: number = 23;
powerOff: boolean = false; temperatureOff: boolean = false;
temperatureMode = 'cool';
humidity: number = 23;
humidityOff: boolean = false;
humidityMode = 'auto';
themeConfig: any = {}; themeConfig: any = {};