mirror of
https://github.com/ckaczor/HomeMonitor.git
synced 2026-01-21 01:25:38 -05:00
Add power display widget
This commit is contained in:
25
Display/src/app/components/power/power.component.html
Normal file
25
Display/src/app/components/power/power.component.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<div class="power-current">
|
||||
<div *ngIf="latestStatus === null">
|
||||
Loading...
|
||||
</div>
|
||||
<div *ngIf="latestStatus !== null">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="power-current-header">
|
||||
Generation
|
||||
</td>
|
||||
<td>
|
||||
{{ latestStatus.Generation < 0 ? 0 : latestStatus.Generation }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="power-current-header">
|
||||
Consumption
|
||||
</td>
|
||||
<td>
|
||||
{{ latestStatus.Consumption < 0 ? 0 : latestStatus.Consumption }}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
10
Display/src/app/components/power/power.component.scss
Normal file
10
Display/src/app/components/power/power.component.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
.power-current {
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.power-current-header {
|
||||
font-weight: 500;
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
25
Display/src/app/components/power/power.component.spec.ts
Normal file
25
Display/src/app/components/power/power.component.spec.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PowerComponent } from './power.component';
|
||||
|
||||
describe('PowerComponent', () => {
|
||||
let component: PowerComponent;
|
||||
let fixture: ComponentFixture<PowerComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [PowerComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PowerComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
17
Display/src/app/components/power/power.component.ts
Normal file
17
Display/src/app/components/power/power.component.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { PowerService } from '../../services/power/power.service';
|
||||
import { PowerStatus } from '../../models/power/power-status';
|
||||
|
||||
@Component({
|
||||
selector: 'app-power',
|
||||
templateUrl: './power.component.html',
|
||||
styleUrls: ['./power.component.scss']
|
||||
})
|
||||
export class PowerComponent implements OnInit {
|
||||
public latestStatus: PowerStatus;
|
||||
constructor(private powerService: PowerService) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.powerService.getLatestStatus().subscribe(s => this.latestStatus = s);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user