update SystemConfigService to load config and set folders and devices

update getFolders and getDevices to send respective array as soon as it has data
This commit is contained in:
Jesse Lucas 2020-03-13 22:09:48 -04:00
parent cf3de8cf35
commit af3d380b6a
5 changed files with 106 additions and 23 deletions

View File

@ -5,6 +5,7 @@ import { MatSort } from '@angular/material/sort';
import { map } from 'rxjs/operators'; import { map } from 'rxjs/operators';
import { Observable, of as observableOf, merge } from 'rxjs'; import { Observable, of as observableOf, merge } from 'rxjs';
import { Device } from '../device'; import { Device } from '../device';
import { SystemConfigService } from '../system-config.service';
/** /**
* Data source for the DeviceList view. This class should * Data source for the DeviceList view. This class should
@ -16,7 +17,7 @@ export class DeviceListDataSource extends DataSource<Device> {
paginator: MatPaginator; paginator: MatPaginator;
sort: MatSort; sort: MatSort;
constructor() { constructor(private systemConfigService: SystemConfigService) {
super(); super();
} }
@ -29,7 +30,7 @@ export class DeviceListDataSource extends DataSource<Device> {
// Combine everything that affects the rendered data into one update // Combine everything that affects the rendered data into one update
// st // st
const dataMutations = [ const dataMutations = [
observableOf(this.data), this.systemConfigService.getDevices(),
this.paginator.page, this.paginator.page,
this.sort.sortChange this.sort.sortChange
]; ];

View File

@ -6,6 +6,7 @@ import { MatTable } from '@angular/material/table';
import { DeviceListDataSource } from './device-list-datasource'; import { DeviceListDataSource } from './device-list-datasource';
import { Device } from '../device'; import { Device } from '../device';
import { SystemConfigService } from '../system-config.service'; import { SystemConfigService } from '../system-config.service';
import { flatMap } from 'rxjs/operators';
@Component({ @Component({
@ -25,17 +26,19 @@ export class DeviceListComponent implements AfterViewInit, OnInit {
constructor(private systemConfigService: SystemConfigService) { }; constructor(private systemConfigService: SystemConfigService) { };
ngOnInit() { ngOnInit() {
this.dataSource = new DeviceListDataSource(); this.dataSource = new DeviceListDataSource(this.systemConfigService);
this.systemConfigService.getDevices().subscribe( this.dataSource.data = [];
data => {
this.dataSource.data = data;
}
);
} }
ngAfterViewInit() { ngAfterViewInit() {
this.dataSource.sort = this.sort; this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator; this.dataSource.paginator = this.paginator;
this.table.dataSource = this.dataSource; this.table.dataSource = this.dataSource;
this.systemConfigService.getDevices().subscribe(
data => {
this.dataSource.data = data;
}
);
} }
} }

View File

@ -5,6 +5,7 @@ import { MatSort } from '@angular/material/sort';
import { map } from 'rxjs/operators'; import { map } from 'rxjs/operators';
import { Observable, of as observableOf, merge } from 'rxjs'; import { Observable, of as observableOf, merge } from 'rxjs';
import { Folder } from '../folder'; import { Folder } from '../folder';
import { SystemConfigService } from '../system-config.service';
/** /**
* Data source for the FolderList view. This class should * Data source for the FolderList view. This class should
@ -16,7 +17,7 @@ export class FolderListDataSource extends DataSource<Folder> {
paginator: MatPaginator; paginator: MatPaginator;
sort: MatSort; sort: MatSort;
constructor() { constructor(private systemConfigService: SystemConfigService) {
super(); super();
} }
@ -29,7 +30,8 @@ export class FolderListDataSource extends DataSource<Folder> {
// Combine everything that affects the rendered data into one update // Combine everything that affects the rendered data into one update
// st // st
const dataMutations = [ const dataMutations = [
observableOf(this.data), // observableOf(this.data),
this.systemConfigService.getFolders(),
this.paginator.page, this.paginator.page,
this.sort.sortChange this.sort.sortChange
]; ];

View File

@ -25,17 +25,22 @@ export class FolderListComponent implements AfterViewInit, OnInit {
constructor(private systemConfigService: SystemConfigService) { }; constructor(private systemConfigService: SystemConfigService) { };
ngOnInit() { ngOnInit() {
this.dataSource = new FolderListDataSource(); this.dataSource = new FolderListDataSource(this.systemConfigService);
this.systemConfigService.getFolders().subscribe( this.dataSource.data = [];
data => { }
this.dataSource.data = data;
} ngAfterContentInit() {
);
} }
ngAfterViewInit() { ngAfterViewInit() {
this.dataSource.sort = this.sort; this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator; this.dataSource.paginator = this.paginator;
this.table.dataSource = this.dataSource; this.table.dataSource = this.dataSource;
this.systemConfigService.getFolders().subscribe(
data => {
this.dataSource.data = data;
}
);
} }
} }

View File

@ -1,6 +1,8 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs'; import { Observable, Subject, of } from 'rxjs';
import { map } from 'rxjs/operators';
import { Folder } from './folder'; import { Folder } from './folder';
import { Device } from './device'; import { Device } from './device';
@ -10,15 +12,85 @@ import { FOLDERS, DEVICES } from './mock-config-data';
providedIn: 'root' providedIn: 'root'
}) })
export class SystemConfigService { export class SystemConfigService {
private systemConfig: any;
private folders: Folder[];
private devices: Device[];
private foldersSubject: Subject<Folder[]> = new Subject();
private devicesSubject: Subject<Device[]> = new Subject();
constructor() { } private systemConfigUrl = 'http://127.0.0.1:8384/rest/system/config'; // URL to web api
httpOptions = {
// TODO find best way to get api key
// headers: new HttpHeaders({ 'X-API-Key': 'x' })
};
constructor(private http: HttpClient) { }
ngOnInit(): void { }
getSystemConfig(): Observable<any> {
return this.http
.get(this.systemConfigUrl, this.httpOptions)
.pipe(map(res => {
this.systemConfig = res;
this.folders = res['folders'];
this.devices = res['devices'];
this.foldersSubject.next(this.folders);
this.devicesSubject.next(this.devices);
return res;
})
);
}
getFolders(): Observable<Folder[]> { getFolders(): Observable<Folder[]> {
return of(FOLDERS); const folderObservable: Observable<Folder[]> = new Observable((observer) => {
if (this.folders) {
observer.next(this.folders);
} else {
// create timer to keep checking for folders
let checkFolders = (): Boolean => {
if (this.folders) {
observer.next(this.folders);
return true;
}
return false;
}
let t = setInterval(() => {
if (checkFolders())
clearInterval(t);
}, 100);
}
});
return folderObservable;
} }
getDevices(): Observable<Device[]> { getDevices(): Observable<Device[]> {
return of(DEVICES); const deviceObserverable: Observable<Device[]> = new Observable((observer) => {
if (this.folders) {
observer.next(this.devices);
} else {
// create timer to keep checking for devices
let checkFolders = (): Boolean => {
if (this.devices) {
observer.next(this.devices);
return true;
}
return false;
}
let t = setInterval(() => {
if (checkFolders())
clearInterval(t);
}, 100);
}
});
return deviceObserverable;
// return from(this.devices);
if (this.devices) {
this.devicesSubject.next(this.devices);
}
return this.devicesSubject;
} }
} }