A little redesign

src/app/app.module.ts

@@ -25,6 +25,7 @@ import * as firebase from 'firebase/app';
 import {ServiceWorkerModule} from '@angular/service-worker';
 import {LineChartModule, NgxChartsModule} from '@swimlane/ngx-charts';
 import {RoundPipe} from './round.pipe';
+import { WidgetComponent } from './battery/widget/widget.component';
 
 export const firebaseApp = firebase.initializeApp(environment.firebase);
 
@@ -36,7 +37,8 @@ export const firebaseApp = firebase.initializeApp(environment.firebase);
         WeatherComponent,
         SecurityComponent,
         LoginComponent,
-        RoundPipe
+        RoundPipe,
+        WidgetComponent
     ],
     imports: [
         AppRoutingModule,

src/app/battery/battery.component.html

@@ -1,4 +1,4 @@
-<div class="p-3">
+<div class="desktop-height p-3" style="background-color: #b52e3c !important;">
     <div class="d-flex mb-3">
         <div class="d-flex flex-grow-1 align-items-center">
             <h3 class="mb-0 text-white">Powerwall: {{batteryService.charge | round}} V</h3>
@@ -17,7 +17,7 @@
                 <h5 class="mb-0">{{battery.name}}</h5>
             </div>
             <div class="d-flex flex-grow-1 align-items-center justify-content-center">
-                <button mat-button (click)="selected = i" [ngClass]="{'text-success': battery.charging, 'text-danger': !battery.charging}">{{battery.charge | round: 1}} V</button>
+                <button mat-button (click)="selected = i" [ngClass]="{'text-success': batteryService.charging, 'text-danger': !batteryService.charging}">{{battery.charge | round: 1}} V</button>
             </div>
             <div class="d-flex flex-grow-1 align-items-center justify-content-end text-muted">
                 <button mat-button (click)="selected = batteryService.batteries.length + i">{{battery.temp | round}} °C</button>

src/app/dashboard/dashboard.component.html

@@ -1 +1,7 @@
-<h3 class="mt-3 text-center">Coming Soon</h3>
+<div class="p-3">
+    <mat-card class="w-100 hover" routerLink="/battery">
+        <mat-card-content>
+            <battery-widget></battery-widget>
+        </mat-card-content>
+    </mat-card>
+</div>

src/app/dashboard/dashboard.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import {AppComponent} from '../app.component';
 
 @Component({
   selector: 'app-dashboard',
@@ -6,7 +7,7 @@ import { Component, OnInit } from '@angular/core';
 })
 export class DashboardComponent implements OnInit {
 
-  constructor() { }
+  constructor(private app: AppComponent) { }
 
   ngOnInit() {
   }