Update UI for new laundry monitor

Display/src/app/app.module.ts

@@ -22,7 +22,6 @@ import { MatListModule } from '@angular/material/list';
 import { MatMomentDateModule } from '@angular/material-moment-adapter';
 import { MomentModule } from 'ngx-moment';
 
-import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
 import { GridsterModule } from 'angular-gridster2';
 
 import { LaundryComponent } from './components/laundry/laundry.component';
@@ -35,8 +34,6 @@ import { PowerChartsComponent } from './components/power/charts/power-charts.com
 import { WeatherSummaryComponent } from './components/weather/summary/weather-summary.component';
 import { TimeRangeComponent } from './components/time-range/time-range.component';
 
-const config: SocketIoConfig = { url: '/', options: {} };
-
 @NgModule({
     declarations: [
         AppComponent,
@@ -55,7 +52,6 @@ const config: SocketIoConfig = { url: '/', options: {} };
         BrowserModule,
         AppRoutingModule,
         BrowserAnimationsModule,
-        SocketIoModule.forRoot(config),
         ChartModule,
         HttpClientModule,
         MatIconModule,

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

@@ -1,31 +1,65 @@
 import { Injectable } from '@angular/core';
 import { Observable, BehaviorSubject } from 'rxjs';
-import { Socket } from 'ngx-socket-io';
+import { HubConnectionBuilder, HubConnection } from '@aspnet/signalr';
 import { LaundryStatus } from '../../models/laundry/laundry-status';
+import { HttpClient } from '@angular/common/http';
+
+class DeviceMessage {
+    name: string;
+    status: boolean;
+}
 
 @Injectable({
     providedIn: 'root'
 })
 export class LaundryService {
+    private connection: HubConnection;
     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);
+    constructor(private httpClient: HttpClient) {
+        this.loadLatestStatus().then();
 
-            if (newStatus.washer !== undefined) {
-                this.latestStatus.value.washer = newStatus.washer;
+        this.connection = new HubConnectionBuilder()
+            .withUrl('/api/hub/device-status')
+            .build();
+
+        this.connection.on('LatestStatus', (message: string) => {
+            const deviceMessage = JSON.parse(message) as DeviceMessage;
+
+            const newStatus = new LaundryStatus();
+
+            newStatus.dryer = this.latestStatus.getValue().dryer;
+            newStatus.washer = this.latestStatus.getValue().washer;
+
+            if (deviceMessage.name === 'washer') {
+                newStatus.washer = deviceMessage.status;
+            } else if (deviceMessage.name === 'dryer') {
+                newStatus.dryer = deviceMessage.status;
             }
 
-            if (newStatus.dryer !== undefined) {
-                this.latestStatus.value.dryer = newStatus.dryer;
-            }
+            this.latestStatus.next(newStatus);
         });
 
-        this.socket.emit('getStatus');
+        this.connection.start();
     }
 
     getLatestStatus(): Observable<LaundryStatus> {
         return this.latestStatus.asObservable();
     }
+
+    private async loadLatestStatus() {
+        const data = await this.httpClient.get<DeviceMessage[]>(`/api/device-status/status/recent`).toPromise();
+
+        const newStatus = new LaundryStatus();
+
+        data.forEach(deviceMessage => {
+            if (deviceMessage.name === 'washer') {
+                newStatus.washer = deviceMessage.status;
+            } else if (deviceMessage.name === 'dryer') {
+                newStatus.dryer = deviceMessage.status;
+            }
+        });
+
+        this.latestStatus.next(newStatus);
+    }
 }