Add laundry display

Display/src/app/app.component.scss

@@ -1,3 +1,7 @@
 .menu-spacer {
   margin-right: 14px;
 }
+
+mat-sidenav {
+    width: 150px;
+}

Display/src/app/app.module.ts

@@ -5,11 +5,15 @@ import { MatToolbarModule, MatIconModule, MatSidenavModule, MatListModule, MatBu
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
+
 import { WeatherComponent } from './weather/weather.component';
 import { LaundryComponent } from './laundry/laundry.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { WeatherChartsComponent } from './weather-charts/weather-charts.component';
 
+const config: SocketIoConfig = { url: 'http://home.kaczorzoo.net:9091', options: {} };
+
 @NgModule({
     declarations: [
         AppComponent,
@@ -26,7 +30,8 @@ import { WeatherChartsComponent } from './weather-charts/weather-charts.componen
         MatSidenavModule,
         MatListModule,
         MatButtonModule,
-        MatIconModule
+        MatIconModule,
+        SocketIoModule.forRoot(config)
     ],
     providers: [],
     bootstrap: [AppComponent]

Display/src/app/laundry-status.spec.ts

@@ -0,0 +1,7 @@
+import { LaundryStatus } from './laundry-status';
+
+describe('LaundryStatus', () => {
+  it('should create an instance', () => {
+    expect(new LaundryStatus()).toBeTruthy();
+  });
+});

Display/src/app/laundry-status.ts

@@ -0,0 +1,4 @@
+export class LaundryStatus {
+    washer = false;
+    dryer = false;
+}

Display/src/app/laundry.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LaundryService } from './laundry.service';
+
+describe('LaundryService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: LaundryService = TestBed.get(LaundryService);
+    expect(service).toBeTruthy();
+  });
+});

Display/src/app/laundry.service.ts

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { Observable, BehaviorSubject } from 'rxjs';
+import { Socket } from 'ngx-socket-io';
+import { LaundryStatus } from './laundry-status';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class LaundryService {
+    private latestStatus: BehaviorSubject<LaundryStatus> = new BehaviorSubject<LaundryStatus>(new LaundryStatus());
+
+    constructor(private socket: Socket) {
+        this.socket.on('status', (statusString: string) => {
+            const newStatus: LaundryStatus = JSON.parse(statusString);
+
+            if (newStatus.washer !== undefined) {
+               this.latestStatus.value.washer = newStatus.washer;
+            }
+
+            if (newStatus.dryer !== undefined) {
+               this.latestStatus.value.dryer = newStatus.dryer;
+            }
+        });
+
+        this.socket.emit('getStatus');
+    }
+
+    getLatestStatus(): Observable<LaundryStatus> {
+        return this.latestStatus.asObservable();
+    }
+}

Display/src/app/laundry/laundry.component.html

@@ -1 +1,24 @@
-<p>laundry works!</p>
+<div class="laundry-current">
+    <div *ngIf="latestStatus === null">
+        Loading...
+    </div>
+    <div *ngIf="latestStatus !== null">
+        <table>
+            <tr>
+                <td class="laundry-current-header">
+                    Washer
+                </td>
+                <td [ngClass]="latestStatus.washer.toString()">
+                    {{ latestStatus.washer ? 'On' : 'Off' }}
+                </td>
+            </tr>
+            <tr>
+                <td class="laundry-current-header">
+                    Dryer
+                </td>
+                <td [ngClass]="latestStatus.dryer.toString()">
+                    {{ latestStatus.dryer ? 'On' : 'Off' }}
+                </td>
+            </tr>
+        </table>
+    </div>

Display/src/app/laundry/laundry.component.scss

@@ -0,0 +1,18 @@
+.laundry-current {
+    margin: 10px;
+    font-size: 14px;
+}
+
+.laundry-current-header {
+    font-weight: 500;
+    text-align: right;
+    padding-right: 10px;
+}
+
+.true {
+	color: darkgoldenrod;
+}
+
+.false {
+	color: darkgreen;
+}

Display/src/app/laundry/laundry.component.ts

@@ -1,15 +1,17 @@
 import { Component, OnInit } from '@angular/core';
+import { LaundryService } from '../laundry.service';
+import { LaundryStatus } from '../laundry-status';
 
 @Component({
-  selector: 'app-laundry',
-  templateUrl: './laundry.component.html',
-  styleUrls: ['./laundry.component.scss']
+    selector: 'app-laundry',
+    templateUrl: './laundry.component.html',
+    styleUrls: ['./laundry.component.scss']
 })
 export class LaundryComponent implements OnInit {
+    public latestStatus: LaundryStatus;
+    constructor(private laundryService: LaundryService) { }
 
-  constructor() { }
-
-  ngOnInit() {
-  }
-
+    ngOnInit() {
+        this.laundryService.getLatestStatus().subscribe(s => this.latestStatus = s);
+    }
 }

Display/src/app/weather.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable, of, BehaviorSubject } from 'rxjs';
+import { Observable, BehaviorSubject } from 'rxjs';
 import { HubConnectionBuilder, HubConnection } from '@aspnet/signalr';
 import { WeatherReading } from './weather-reading';