diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss
index 84c7e85b0..d3181c868 100644
--- a/src/app/dashboard/dashboard.component.scss
+++ b/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;
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
index 2ead0006b..d44dd3c8d 100644
--- a/src/app/dashboard/dashboard.component.ts
+++ b/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);
+
+ }
+}
\ No newline at end of file
diff --git a/src/app/services/device.service.ts b/src/app/services/device.service.ts
index 6894fa6a7..657a35f16 100644
--- a/src/app/services/device.service.ts
+++ b/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
, 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);
});
diff --git a/src/app/services/folder.service.ts b/src/app/services/folder.service.ts
index 0c433f757..c208b432e 100644
--- a/src/app/services/folder.service.ts
+++ b/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, 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);
}
diff --git a/src/app/services/progress.service.spec.ts b/src/app/services/progress.service.spec.ts
index fb55baca2..9b0f96bcc 100644
--- a/src/app/services/progress.service.spec.ts
+++ b/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 = 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();
diff --git a/src/app/services/progress.service.ts b/src/app/services/progress.service.ts
index c24a1330a..953b56810 100644
--- a/src/app/services/progress.service.ts
+++ b/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;
+ }
}
\ No newline at end of file
diff --git a/src/app/services/system-config.service.ts b/src/app/services/system-config.service.ts
index 16d845c93..45ab9fb1f 100644
--- a/src/app/services/system-config.service.ts
+++ b/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 {
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);