Rework device and folder service to have public obseravble

to accomaccommodatemodate many subscribers without re-requesting data
from the API

src/app/charts/chart/chart.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild, Input } from '@angular/core';
+import { Component, OnInit, ViewChild, Input, Type } from '@angular/core';
 import Folder from '../../folder'
 import { FolderService } from 'src/app/services/folder.service';
 import { DonutChartComponent } from '../donut-chart/donut-chart.component';
@@ -6,6 +6,7 @@ import { DeviceService } from 'src/app/services/device.service';
 import Device from 'src/app/device';
 import { StType } from '../../type';
 import { FilterService } from 'src/app/services/filter.service';
+import { Observable } from 'rxjs';
 
 
 export interface ChartItemState {
@@ -27,12 +28,12 @@ export class ChartComponent implements OnInit {
   chartID: string;
   states: ChartItemState[] = [];
 
-  private service: any;
+  private observer: Observable<any>;
   private activeChartState: ChartItemState;
 
   constructor(
     private folderService: FolderService,
-    private deviceServce: DeviceService,
+    private deviceService: DeviceService,
     private filterService: FilterService,
   ) { }
 
@@ -60,19 +61,19 @@ export class ChartComponent implements OnInit {
       case StType.Folder:
         this.title = "Folders";
         this.chartID = 'foldersChart';
-        this.service = this.folderService;
+        this.observer = this.folderService.folderAdded$;
         break;
       case StType.Device:
         this.title = "Devices";
         this.chartID = 'devicesChart';
-        this.service = this.deviceServce;
+        this.observer = this.deviceService.deviceAdded$;
         break;
     }
   }
 
   ngAfterViewInit() {
     let totalCount: number = 0;
-    this.service.getEach().subscribe(
+    this.observer.subscribe(
       t => {
         // Count the number of folders and set chart
         totalCount++;

src/app/dashboard/dashboard.component.ts

@@ -14,6 +14,8 @@ import { MatProgressBar } from '@angular/material/progress-bar';
 import { MessageService } from '../services/message.service';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { DialogComponent } from '../dialog/dialog.component';
+import { FolderService } from '../services/folder.service';
+import { DeviceService } from '../services/device.service';
 
 @Component({
   selector: 'app-dashboard',
@@ -64,16 +66,21 @@ export class DashboardComponent implements OnInit, AfterViewInit {
 
   constructor(
     private systemConfigService: SystemConfigService,
+    private folderService: FolderService,
+    private deviceService: DeviceService,
     private progressService: ProgressService,
     private messageService: MessageService,
     public dialog: MatDialog
   ) { }
 
   ngOnInit() {
+    // Request data from Rest API
     this.systemConfigService.getSystemConfig().subscribe(
-      x => console.log('Observer got a next value: ' + x),
-      err => console.error('Observer got an error: ' + err),
-      () => console.log('Observer got a complete notification')
+      _ => {
+        // Request devices and folders for charts and lists
+        this.folderService.requestFolders();
+        this.deviceService.requestDevices();
+      }
     );
 
   }

src/app/lists/device-list/device-list.component.ts

@@ -8,6 +8,7 @@ import { SystemConfigService } from '../../services/system-config.service';
 import { FilterService } from 'src/app/services/filter.service';
 import { StType } from 'src/app/type';
 import { MatInput } from '@angular/material/input';
+import { DeviceService } from 'src/app/services/device.service';
 
 @Component({
   selector: 'app-device-list',
@@ -22,10 +23,10 @@ export class DeviceListComponent implements AfterViewInit, OnInit, OnDestroy {
   dataSource: MatTableDataSource<Device>;
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
-  displayedColumns = ['id', 'name', 'state'];
+  displayedColumns = ['id', 'name', 'state', 'folders'];
 
   constructor(
-    private systemConfigService: SystemConfigService,
+    private deviceService: DeviceService,
     private filterService: FilterService,
     private cdr: ChangeDetectorRef,
   ) { };
@@ -41,9 +42,19 @@ export class DeviceListComponent implements AfterViewInit, OnInit, OnDestroy {
     this.dataSource = new MatTableDataSource();
     this.dataSource.data = [];
 
-    this.systemConfigService.getDevices().subscribe(
-      data => {
-        this.dataSource.data = data;
+    // Replace all data when requests are finished
+    this.deviceService.devicesUpdated$.subscribe(
+      devices => {
+        this.dataSource.data = devices;
+      }
+    );
+
+    // Add device as they come in 
+    let devices: Device[] = [];
+    this.deviceService.deviceAdded$.subscribe(
+      device => {
+        devices.push(device);
+        this.dataSource.data = devices;
       }
     );
   }

src/app/lists/folder-list/folder-list.component.ts

@@ -25,7 +25,7 @@ export class FolderListComponent implements AfterViewInit, OnInit, OnDestroy {
   displayedColumns = ['id', 'label', 'path', 'state'];
 
   constructor(
-    private systemConfigService: SystemConfigService,
+    private folderService: FolderService,
     private filterService: FilterService,
     private cdr: ChangeDetectorRef,
   ) {
@@ -41,11 +41,21 @@ export class FolderListComponent implements AfterViewInit, OnInit, OnDestroy {
     this.dataSource = new MatTableDataSource();
     this.dataSource.data = [];
 
-    this.systemConfigService.getFolders().subscribe(
-      data => {
-        this.dataSource.data = data;
+    // Replace all data when requests are finished
+    this.folderService.foldersUpdated$.subscribe(
+      folders => {
+        this.dataSource.data = folders;
       }
     );
+
+    // Add device as they come in 
+    let folders: Folder[] = [];
+    this.folderService.folderAdded$.subscribe(
+      folder => {
+        folders.push(folder);
+        this.dataSource.data = folders;
+      }
+    );;
   }
 
   ngAfterViewInit() {

src/app/services/device.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import Device from '../device';
-import { Observable, Subscriber } from 'rxjs';
+import { Observable, Subscriber, ReplaySubject, Subject } from 'rxjs';
 import { SystemConfigService } from './system-config.service';
 import { SystemConnectionsService } from './system-connections.service';
 import { DbCompletionService } from './db-completion.service';
@@ -15,7 +15,12 @@ import { StType } from '../type';
 export class DeviceService {
   private devices: Device[];
   private sysConns: SystemConnections;
-  thisDevice: Device;
+  private devicesSubject: ReplaySubject<Device[]> = new ReplaySubject(1);
+  devicesUpdated$ = this.devicesSubject.asObservable();
+  private thisDevice: Device;
+
+  private deviceAddedSource = new Subject<Device>();
+  deviceAdded$ = this.deviceAddedSource.asObservable();
 
   constructor(
     private systemConfigService: SystemConfigService,
@@ -25,10 +30,12 @@ export class DeviceService {
     private progressService: ProgressService,
   ) { }
 
-  getDeviceStatusInOrder(observer: Subscriber<Device>, startIndex: number) {
+  getDeviceStatusInOrder(startIndex: number) {
     // Return if there aren't any device at the index
     if (startIndex >= (this.devices.length)) {
-      observer.complete();
+      this.devicesSubject.next(this.devices);
+      // this.devicesSubject.complete();
+      // this.deviceAddedSource.complete();
       return;
     }
     const device: Device = this.devices[startIndex];
@@ -53,22 +60,19 @@ export class DeviceService {
         Device.recalcCompletion(device);
         device.stateType = Device.getStateType(device);
         device.state = Device.stateTypeToString(device.stateType);
-        observer.next(device);
 
+        this.deviceAddedSource.next(device);
         this.progressService.addToProgress(1);
 
         // recursively get the status of the next device 
-        this.getDeviceStatusInOrder(observer, startIndex);
+        this.getDeviceStatusInOrder(startIndex);
       });
   }
 
   /**
    * getEach() returns each device 
    */
-  getEach(): Observable<Device> {
-    const deviceObservable: Observable<Device> = new Observable((observer) => {
-      // TODO return devices if cached
-
+  requestDevices() {
     this.systemConfigService.getDevices().subscribe(
       devices => {
         this.devices = devices;
@@ -91,6 +95,7 @@ export class DeviceService {
                   // Alloc array if needed
                   if (!device.folders) {
                     device.folders = [];
+                    device.folderNames = [];
                   }
 
                   folders.forEach(folder => {
@@ -101,6 +106,9 @@ export class DeviceService {
 
                         // Add a reference to the folder to the device
                         device.folders.push(folder);
+
+                        // Add string folder name
+                        device.folderNames.push(folder.label);
                       }
                     });
                   });
@@ -112,17 +120,13 @@ export class DeviceService {
                     this.sysConns = c;
 
                     // Synchronously get the status of each device 
-                      this.getDeviceStatusInOrder(observer, 0);
+                    this.getDeviceStatusInOrder(0);
                   }
                 );
               });
           }
         )
-        },
-        err => { console.log("getEach error!", err) },
-        () => { console.log("getEach complete!") }
+      }
     );
-    });
-    return deviceObservable
   }
 }

src/app/services/folder.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { SystemConfigService } from './system-config.service';
-import { Observable, Subscriber } from 'rxjs';
+import { Observable, Subscriber, Subject, ReplaySubject } from 'rxjs';
 import Folder from '../folder';
 import { DbStatusService } from './db-status.service';
 import { ProgressService } from './progress.service';
@@ -12,6 +12,10 @@ import { StType } from '../type';
 })
 export class FolderService {
   private folders: Folder[];
+  private foldersSubject: ReplaySubject<Folder[]> = new ReplaySubject(1);
+  foldersUpdated$ = this.foldersSubject.asObservable();
+  private folderAddedSource = new Subject<Folder>();
+  folderAdded$ = this.folderAddedSource.asObservable();
 
   constructor(
     private systemConfigService: SystemConfigService,
@@ -20,10 +24,11 @@ export class FolderService {
     private progressService: ProgressService,
   ) { }
 
-  getFolderStatusInOrder(observer: Subscriber<Folder>, startIndex: number) {
+  getFolderStatusInOrder(startIndex: number) {
     // Return if there aren't any folders at the index
     if (startIndex >= (this.folders.length)) {
-      observer.complete();
+      this.foldersSubject.next(this.folders);
+      // this.folderAddedSource.complete();
       return;
     }
     const folder: Folder = this.folders[startIndex];
@@ -37,37 +42,31 @@ export class FolderService {
             folder.completion = c;
             folder.stateType = Folder.getStateType(folder);
             folder.state = Folder.stateTypeToString(folder.stateType);
-            observer.next(folder);
 
+            this.folderAddedSource.next(folder);
             this.progressService.addToProgress(1);
 
             // recursively get the status of the next folder
-            this.getFolderStatusInOrder(observer, startIndex);
+            this.getFolderStatusInOrder(startIndex);
           });
       }
     );
   }
 
   /**
-   * getEach() returns each folder and uses db status service to 
+   * requestFolders() requests each folder and uses db status service to 
    * set all their statuses and db completion service to find
-   * completion
+   * completion in order. Updating folderAdded$ and foldersUpdate$
+   * observers
    */
-  getEach(): Observable<Folder> {
-    // TODO return this.folders if cached
-
-    const folderObservable: Observable<Folder> = new Observable((observer) => {
+  requestFolders() {
     this.systemConfigService.getFolders().subscribe(
       folders => {
         this.folders = folders;
 
         // Synchronously get the status of each folder
-          this.getFolderStatusInOrder(observer, 0);
-        },
-        err => { console.log("getEach error!", err) },
-        () => { console.log("getEach complete!") }
+        this.getFolderStatusInOrder(0);
+      }
     );
-    });
-    return folderObservable;
   }
 }