hft-informatik/geovisualisierung
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Extract common code for table loading

Browse Source 
Preselect dashboard station in table selection model
This commit is contained in:
Marcel Schwarz 2021-01-08 14:56:18 +01:00
parent b6b02f2c01
commit 860d351323
1 changed files with 19 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
projects/project-3/frontend/src/app/dashboard/table/table.component.ts
View File

@ -16,8 +16,8 @@ import {ActivatedRoute} from '@angular/router';
export class TableComponent implements OnInit { export class TableComponent implements OnInit {
displayedColumnsTo: string[] = ['select', 'endStationName', 'number', 'avgDuration', 'marker']; displayedColumnsTo: string[] = ['select', 'endStationName', 'number', 'avgDuration', 'marker'];
displayedColumnsFrom: string[] = ['select', 'startStationName', 'number', 'avgDuration', 'marker']; displayedColumnsFrom: string[] = ['select', 'startStationName', 'number', 'avgDuration', 'marker'];
stationToSource = new MatTableDataSource<IDashboardCommonBikePoint>();
stationToSource = new MatTableDataSource<IDashboardCommonBikePoint>();
iterableToSource: any[]; iterableToSource: any[];
stationFromSource = new MatTableDataSource<IDashboardCommonBikePoint>(); stationFromSource = new MatTableDataSource<IDashboardCommonBikePoint>();
iterableFromSource: any[]; iterableFromSource: any[];
@ -37,8 +37,6 @@ export class TableComponent implements OnInit {
} }
ngOnInit(): void { ngOnInit(): void {
this.isLoadingToSource = true;
this.isLoadingFromSource = true;
this.route.params.subscribe(params => { this.route.params.subscribe(params => {
this.colors = ['black', 'gray', 'green', 'orange', 'purple', 'red']; this.colors = ['black', 'gray', 'green', 'orange', 'purple', 'red'];
this.service.fetchDashboardInit(params.id).then(data => { this.service.fetchDashboardInit(params.id).then(data => {
@ -50,33 +48,30 @@ export class TableComponent implements OnInit {
}); });
} }
async initTable(): Promise<void> { initTable(): void {
this.selectionModel.clear(); this.selectionModel.clear();
this.map.removeOverlayOnMiniMap(); this.map.removeOverlayOnMiniMap();
const initDate = this.maxEndDate.toISOString().substring(0, 10); const initDate = this.maxEndDate.toISOString().substring(0, 10);
this.loadData(initDate, initDate);
const [stationTo, stationFrom] = await Promise.all([
this.service.fetchDashboardStationTo(this.bikePoint.id, initDate, initDate),
this.service.fetchDashboardStationFrom(this.bikePoint.id, initDate, initDate)
]);
this.isLoadingToSource = false;
this.isLoadingFromSource = false;
this.stationToSource = this.setBikePointColorToSource(stationTo);
this.iterableToSource = stationTo;
this.iterableToSource.forEach(bikePoint => bikePoint.polyLineColor = 'red');
this.stationFromSource = this.setBikePointColorFromSource(stationFrom);
this.iterableFromSource = stationFrom;
this.iterableFromSource.forEach(bikePoint => bikePoint.polyLineColor = 'green');
} }
async onSubmit(actualStartDate: string, actualEndDate: string): Promise<void> { onSubmit(actualStartDate: string, actualEndDate: string): void {
this.resetTableSourcesToDisplaySpinner(); this.resetTableSourcesToDisplaySpinner();
this.selectionModel.clear(); this.selectionModel.clear();
this.map.removeOverlayOnMiniMap(); this.map.removeOverlayOnMiniMap();
this.loadData(actualStartDate, actualEndDate);
}
resetTableSourcesToDisplaySpinner(): void {
this.isLoadingToSource = true;
this.isLoadingFromSource = true;
this.stationToSource = null;
this.stationFromSource = null;
this.iterableToSource = [];
this.iterableFromSource = [];
}
async loadData(actualStartDate: string, actualEndDate: string): Promise<void> {
this.isLoadingToSource = true; this.isLoadingToSource = true;
this.isLoadingFromSource = true; this.isLoadingFromSource = true;
@ -97,15 +92,8 @@ export class TableComponent implements OnInit {
this.iterableFromSource = stationFrom; this.iterableFromSource = stationFrom;
this.iterableFromSource.forEach(bikePoint => bikePoint.polyLineColor = 'red'); this.iterableFromSource.forEach(bikePoint => bikePoint.polyLineColor = 'red');
} this.selectionModel.select(...this.iterableFromSource.filter(bikePoint => bikePoint.stationId === this.bikePoint.id));
this.selectionModel.select(...this.iterableToSource.filter(bikePoint => bikePoint.stationId === this.bikePoint.id));
resetTableSourcesToDisplaySpinner(): void {
this.isLoadingToSource = true;
this.isLoadingFromSource = true;
this.stationToSource = null;
this.stationFromSource = null;
this.iterableToSource = [];
this.iterableFromSource = [];
} }
public drawIconInTable(bikePoint: any): string { public drawIconInTable(bikePoint: any): string {
@ -137,9 +125,7 @@ export class TableComponent implements OnInit {
changePolyLineColorForDuplicateBikePoints(array: any[]): any[] { changePolyLineColorForDuplicateBikePoints(array: any[]): any[] {
const id = array.map(item => item.stationId); const id = array.map(item => item.stationId);
const duplicates = id.filter((value, index) => { const duplicates = id.filter((value, index) => id.indexOf(value) !== index);
return id.indexOf(value) !== index;
});
duplicates.forEach(stationId => { duplicates.forEach(stationId => {
array.forEach(bikePoint => { array.forEach(bikePoint => {
if (bikePoint.stationId === stationId) { if (bikePoint.stationId === stationId) {