update progress service with device/folders loaded and add animation

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

@@ -54,14 +54,7 @@ export class ChartComponent implements OnInit {
     } else {
       this.activeChartState = null;
       this.filterService.changeFilter({ type: this.type, text: "" })
-      console.log("change filter", this.type)
     }
-
-    /*
-    const index = this.states.indexOf(s);
-    if (index >= 0) {
-    }
-    */
   }
 
   ngOnInit(): void {

src/app/dashboard/dashboard.component.html

@@ -7,7 +7,10 @@
     <span>Tech UI</span>
   </div>
 </div>
-<mat-progress-bar mode="determinate" value="95.67"></mat-progress-bar>
+<div class="progress">
+  <mat-progress-bar mode="determinate" value="{{progressValue}}" [@progressBar]="isLoading ? 'start' : 'done'">
+  </mat-progress-bar>
+</div>
 <div fxLayout="column" fxLayoutGap="16px" class="grid-container" [@loading]="isLoading ? 'start' : 'done'">
   <div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="space-between stretch">
     <app-chart [type]=folderChart fxFlex="50"></app-chart>

src/app/dashboard/dashboard.component.scss

@@ -1,6 +1,11 @@
 .header {
   margin: 20px 3vw 20px 3vw;
 }
+
+.progress {
+  margin: 0 3vw 0 3vw;
+}
+
 .grid-container {
   margin: 10px calc(10px + 3.3vw);
   min-width: 600px;

src/app/dashboard/dashboard.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, AfterViewInit, ViewChild, AfterViewChecked } from '@angular/core';
 import {
   trigger,
   state,
@@ -9,6 +9,8 @@ import {
 import { SystemConfigService } from '../services/system-config.service';
 import { StType } from '../type';
 import { FilterService } from '../services/filter.service';
+import { ProgressService } from '../services/progress.service';
+import { MatProgressBar } from '@angular/material/progress-bar';
 
 @Component({
   selector: 'app-dashboard',
@@ -18,26 +20,48 @@ import { FilterService } from '../services/filter.service';
   animations: [
     trigger('loading', [
       state('start', style({
-        marginTop: '100px',
+        marginTop: '20px',
       })),
       state('done', style({
         marginTop: '0px',
       })),
-      transition('open => closed', [
-        animate('1s')
+      transition('start => done', [
+        animate('0.2s 0.2s')
       ]),
-      transition('closed => open', [
-        animate('0.5s')
+      transition('done => start', [
+        animate('0.2s 0.2s')
+      ]),
+    ]),
+    trigger('progressBar', [
+      state('start', style({
+        opacity: 100,
+        visibility: 'visible'
+      })),
+      state('done', style({
+        opacity: 0,
+        visibility: 'hidden'
+      })),
+      transition('start => done', [
+        animate('0.35s')
+      ]),
+      transition('done => start', [
+        animate('0.35s')
       ]),
     ]),
   ]
 })
-export class DashboardComponent implements OnInit {
+export class DashboardComponent implements OnInit, AfterViewInit {
+  @ViewChild(MatProgressBar) progressBar: MatProgressBar;
   folderChart: StType = StType.Folder;
   deviceChart: StType = StType.Device;
-  isLoading: boolean = true;
+  progressValue: number = 0;
+  isLoading = true;
 
-  constructor(private systemConfigService: SystemConfigService) { }
+
+  constructor(
+    private systemConfigService: SystemConfigService,
+    private progressService: ProgressService,
+  ) { }
 
   ngOnInit() {
     this.systemConfigService.getSystemConfig().subscribe(
@@ -46,6 +70,20 @@ export class DashboardComponent implements OnInit {
       () => console.log('Observer got a complete notification')
     );
 
-    this.isLoading = false;
   }
-}
+
+  ngAfterViewInit() {
+    this.isLoading = true;
+
+    // Listen for progress service changes
+    let t = setInterval(() => {
+      if (this.progressService.isComplete()) {
+        clearInterval(t);
+        this.progressValue = 100;
+        this.isLoading = false;
+      }
+      this.progressValue = this.progressService.percentValue;
+    }, 100);
+
+  }
+}

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);