2020-04-05 17:47:25 +02:00
|
|
|
import { Component, OnInit, AfterViewInit, ViewChild, AfterViewChecked } from '@angular/core';
|
2020-04-03 22:08:07 +02:00
|
|
|
import {
|
|
|
|
trigger,
|
|
|
|
state,
|
|
|
|
style,
|
|
|
|
animate,
|
|
|
|
transition,
|
|
|
|
} from '@angular/animations';
|
2020-03-25 14:41:22 +01:00
|
|
|
import { SystemConfigService } from '../services/system-config.service';
|
2020-04-02 02:43:54 +02:00
|
|
|
import { StType } from '../type';
|
|
|
|
import { FilterService } from '../services/filter.service';
|
2020-04-05 17:47:25 +02:00
|
|
|
import { ProgressService } from '../services/progress.service';
|
|
|
|
import { MatProgressBar } from '@angular/material/progress-bar';
|
2020-03-15 22:01:19 +01:00
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'app-dashboard',
|
|
|
|
templateUrl: './dashboard.component.html',
|
2020-04-02 02:43:54 +02:00
|
|
|
styleUrls: ['./dashboard.component.scss'],
|
2020-04-03 22:08:07 +02:00
|
|
|
providers: [FilterService],
|
|
|
|
animations: [
|
|
|
|
trigger('loading', [
|
|
|
|
state('start', style({
|
2020-04-05 17:47:25 +02:00
|
|
|
marginTop: '20px',
|
2020-04-03 22:08:07 +02:00
|
|
|
})),
|
|
|
|
state('done', style({
|
|
|
|
marginTop: '0px',
|
|
|
|
})),
|
2020-04-05 17:47:25 +02:00
|
|
|
transition('start => done', [
|
|
|
|
animate('0.2s 0.2s')
|
2020-04-03 22:08:07 +02:00
|
|
|
]),
|
2020-04-05 17:47:25 +02:00
|
|
|
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')
|
2020-04-03 22:08:07 +02:00
|
|
|
]),
|
|
|
|
]),
|
|
|
|
]
|
2020-03-15 22:01:19 +01:00
|
|
|
})
|
2020-04-05 17:47:25 +02:00
|
|
|
export class DashboardComponent implements OnInit, AfterViewInit {
|
|
|
|
@ViewChild(MatProgressBar) progressBar: MatProgressBar;
|
2020-04-02 02:43:54 +02:00
|
|
|
folderChart: StType = StType.Folder;
|
|
|
|
deviceChart: StType = StType.Device;
|
2020-04-05 17:47:25 +02:00
|
|
|
progressValue: number = 0;
|
|
|
|
isLoading = true;
|
|
|
|
|
2020-03-16 03:07:11 +01:00
|
|
|
|
2020-04-05 17:47:25 +02:00
|
|
|
constructor(
|
|
|
|
private systemConfigService: SystemConfigService,
|
|
|
|
private progressService: ProgressService,
|
|
|
|
) { }
|
2020-03-15 22:01:19 +01:00
|
|
|
|
|
|
|
ngOnInit() {
|
|
|
|
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')
|
|
|
|
);
|
2020-04-03 22:08:07 +02:00
|
|
|
|
2020-03-15 22:01:19 +01:00
|
|
|
}
|
2020-04-05 17:47:25 +02:00
|
|
|
|
|
|
|
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);
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|