update progress service with device/folders loaded and add animation

src/app/services/device.service.ts

@@ -6,6 +6,7 @@ import { SystemConnectionsService } from './system-connections.service';
 import { DbCompletionService } from './db-completion.service';
 import { SystemConnections } from '../connections';
 import { SystemStatusService } from './system-status.service';
+import { ProgressService } from './progress.service';
 
 @Injectable({
   providedIn: 'root'
@@ -19,7 +20,8 @@ export class DeviceService {
     private systemConfigService: SystemConfigService,
     private systemConnectionsService: SystemConnectionsService,
     private dbCompletionService: DbCompletionService,
-    private systemStatusService: SystemStatusService
+    private systemStatusService: SystemStatusService,
+    private progressService: ProgressService,
   ) { }
 
   getDeviceStatusInOrder(observer: Subscriber<Device>, startIndex: number) {
@@ -53,6 +55,8 @@ export class DeviceService {
         device.state = Device.stateTypeToString(device.stateType);
         observer.next(device);
 
+        this.progressService.addToProgress(1);
+
         // recursively get the status of the next folder
         this.getDeviceStatusInOrder(observer, startIndex);
       });

src/app/services/folder.service.ts

@@ -3,6 +3,7 @@ import { SystemConfigService } from './system-config.service';
 import { Observable, Subscriber } from 'rxjs';
 import Folder from '../folder';
 import { DbStatusService } from './db-status.service';
+import { ProgressService } from './progress.service';
 
 @Injectable({
   providedIn: 'root'
@@ -12,7 +13,8 @@ export class FolderService {
 
   constructor(
     private systemConfigService: SystemConfigService,
-    private dbStatusService: DbStatusService
+    private dbStatusService: DbStatusService,
+    private progressService: ProgressService,
   ) { }
 
   getFolderStatusInOrder(observer: Subscriber<Folder>, startIndex: number) {
@@ -30,6 +32,9 @@ export class FolderService {
         folder.state = Folder.stateTypeToString(folder.stateType);
         observer.next(folder);
 
+        // Add one to the progress service
+        this.progressService.addToProgress(1);
+
         // recursively get the status of the next folder
         this.getFolderStatusInOrder(observer, startIndex);
       }

src/app/services/progress.service.spec.ts

@@ -19,15 +19,15 @@ describe('ProgressService', () => {
     interface iTest {
       total: number,
       progress: number,
-      expected: string
+      expected: number,
     }
     const tests: Map<string, iTest> = new Map([
-      ["default", { total: 0, progress: 0, expected: '0' }],
-      ["NaN return 0", { total: 0, progress: 100, expected: '0' }],
-      ["greater than 100 return 100", { total: 10, progress: 100, expected: '100' }],
-      ["valid", { total: 100, progress: 100, expected: '100' }],
-      ["valid", { total: 100, progress: 50, expected: '50' }],
-      ["test floor", { total: 133, progress: 41, expected: '30' }],
+      ["default", { total: 0, progress: 0, expected: 0 }],
+      ["NaN return 0", { total: 0, progress: 100, expected: 0 }],
+      ["greater than 100 return 100", { total: 10, progress: 100, expected: 100 }],
+      ["valid", { total: 100, progress: 100, expected: 100 }],
+      ["valid", { total: 100, progress: 50, expected: 50 }],
+      ["test floor", { total: 133, progress: 41, expected: 30 }],
     ]);
 
     service = new ProgressService();

src/app/services/progress.service.ts

@@ -10,21 +10,28 @@ export class ProgressService {
     this._total = t;
   }
 
-  get percentValue(): string {
+  get percentValue(): number {
     let p: number = Math.floor((this.progress / this._total) * 100);
-    console.log("P?!", NaN)
     if (p < 0 || isNaN(p) || p === Infinity) {
       p = 0;
     } else if (p > 100) {
       p = 100;
     }
-    return p.toString();
+    return p;
   }
 
   constructor() { }
 
+  addToProgress(n: number) {
+    if (n < 0 || isNaN(n) || n === Infinity) {
+      n = 0;
+    }
+
+    this.progress += n;
+  }
+
   updateProgress(n: number) {
-    if (n < 0) {
+    if (n < 0 || isNaN(n) || n === Infinity) {
       n = 0
     } else if (n > 100) {
       n = 100
@@ -32,4 +39,12 @@ export class ProgressService {
 
     this.progress = n;
   }
+
+  isComplete(): boolean {
+    if (this.progress >= this._total && this.progress > 0 && this._total > 0) {
+      return true;
+    }
+
+    return false;
+  }
 }

src/app/services/system-config.service.ts

@@ -8,6 +8,7 @@ import Folder from '../folder';
 import Device from '../device';
 import { environment } from '../../environments/environment'
 import { apiURL, apiRetry } from '../api-utils'
+import { ProgressService } from './progress.service';
 
 @Injectable({
   providedIn: 'root'
@@ -22,7 +23,10 @@ export class SystemConfigService {
 
   private checkInterval: number = 100;
 
-  constructor(private http: HttpClient) { }
+  constructor(
+    private http: HttpClient,
+    private progressService: ProgressService,
+  ) { }
 
   getSystemConfig(): Observable<any> {
     return this.http
@@ -32,6 +36,10 @@ export class SystemConfigService {
         map(res => {
           this.folders = res['folders'];
           this.devices = res['devices'];
+
+          // Set the total for the progress service
+          this.progressService.total = this.folders.length + this.devices.length;
+
           this.foldersSubject.next(this.folders);
           this.devicesSubject.next(this.devices);