Add power display widget

Display/src/app/app.module.ts

@@ -22,6 +22,7 @@ import { DashboardComponent } from './components/dashboard/dashboard.component';
 import { WeatherChartsComponent } from './components/weather/charts/weather-charts.component';
 import { WeatherCurrentComponent } from './components/weather/current/weather-current.component';
 import { AlmanacComponent } from './components/weather/almanac/almanac.component';
+import { PowerComponent } from './components/power/power.component';
 
 const config: SocketIoConfig = { url: '/', options: {} };
 
@@ -33,7 +34,8 @@ const config: SocketIoConfig = { url: '/', options: {} };
         DashboardComponent,
         WeatherChartsComponent,
         WeatherCurrentComponent,
-        AlmanacComponent
+        AlmanacComponent,
+        PowerComponent
     ],
     imports: [
         BrowserModule,

Display/src/app/components/dashboard/dashboard.component.html

@@ -40,5 +40,15 @@
                 </div>
             </div>
         </gridster-item>
+        <gridster-item [item]="dashboardLayout.layout[3]">
+            <div class="dashboard-item">
+                <div class="dashboard-item-header">
+                    Power
+                </div>
+                <div class="dashboard-item-content">
+                    <app-power></app-power>
+                </div>
+            </div>
+        </gridster-item>
     </gridster>
 </div>

Display/src/app/components/dashboard/dashboard.component.ts

@@ -13,11 +13,12 @@ export class DashboardComponent implements OnInit {
     public locked = true;
 
     private defaultLayout: DashboardLayout = {
-        version: 3,
+        version: 1,
         layout: [
-            { cols: 3, rows: 2, y: 0, x: 0 },
-            { cols: 2, rows: 2, y: 0, x: 3 },
-            { cols: 3, rows: 2, y: 0, x: 5 }
+            { cols: 5, rows: 4, y: 0, x: 0 },
+            { cols: 3, rows: 2, y: 0, x: 5 },
+            { cols: 5, rows: 4, y: 0, x: 8 },
+            { cols: 3, rows: 2, y: 2, x: 5 }
         ]
     };
 
@@ -34,9 +35,11 @@ export class DashboardComponent implements OnInit {
                 enabled: !this.locked
             },
             gridType: 'fixed',
-            fixedColWidth: 105,
-            fixedRowHeight: 105,
-            displayGrid: 'none'
+            fixedColWidth: 55,
+            fixedRowHeight: 55,
+            displayGrid: 'none',
+            minCols: 50,
+            minRows: 50
         };
 
         this.loadOptions();

Display/src/app/components/power/power.component.html

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

Display/src/app/components/power/power.component.scss

@@ -0,0 +1,10 @@
+.power-current {
+  font-size: 14px;
+  padding: 10px;
+}
+
+.power-current-header {
+  font-weight: 500;
+  text-align: right;
+  padding-right: 10px;
+}

Display/src/app/components/power/power.component.spec.ts

@@ -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();
+    });
+});

Display/src/app/components/power/power.component.ts

@@ -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);
+    }
+}

Display/src/app/models/power/power-status.ts

@@ -0,0 +1,4 @@
+export class PowerStatus {
+    generation = 0;
+    consumption = 0;
+}

Display/src/app/services/power/power.service.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { Observable, BehaviorSubject } from 'rxjs';
+import { HubConnectionBuilder, HubConnection } from '@aspnet/signalr';
+import { PowerStatus } from 'src/app/models/power/power-status';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class PowerService {
+    private connection: HubConnection;
+    private latestStatus: BehaviorSubject<PowerStatus> = new BehaviorSubject<PowerStatus>(null);
+
+    constructor() {
+        this.connection = new HubConnectionBuilder()
+            .withUrl('/api/hub/power')
+            .build();
+
+        this.connection.on('LatestSample', (message: string) => {
+            this.latestStatus.next(JSON.parse(message));
+        });
+
+        this.connection.start();
+    }
+
+    getLatestStatus(): Observable<PowerStatus> {
+        return this.latestStatus.asObservable();
+    }
+}