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

add spinner to table

Browse Source
This commit is contained in:
tim-herbst 2021-01-02 23:21:56 +01:00
parent 9c38fe4c76
commit f2dd47684b
2 changed files with 65 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
projects/project-3/frontend/src/app/dashboard/table/table.component.html
View File

@ -35,6 +35,13 @@
<tr *matHeaderRowDef="displayedColumnsTo" mat-header-row></tr>
<tr *matRowDef="let row; columns: displayedColumnsTo;" mat-row></tr>
</table>
<div *ngIf="isLoadingToSource"
style="display: flex; justify-content: center; align-items: center; background: white; padding: 10px">
<mat-progress-spinner
color="primary"
mode="indeterminate">
</mat-progress-spinner>
</div>
</div>
<div class="dashboard-table-from" fxFlex>
<table [dataSource]="stationFromSource" class="mat-elevation-z9" fxFill mat-table>
@ -73,4 +80,12 @@
<tr *matHeaderRowDef="displayedColumnsFrom" mat-header-row></tr>
<tr *matRowDef="let row; columns: displayedColumnsFrom;" mat-row></tr>
</table>
<div *ngIf="isLoadingFromSource"
style="display: flex; justify-content: center; align-items: center; background: white; padding: 10px">
<mat-progress-spinner
color="primary"
mode="indeterminate">
</mat-progress-spinner>
</div>
</div>

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

@ -1,4 +1,4 @@
import {Component, Input, OnInit} from '@angular/core';
import {Component, OnInit} from '@angular/core';
import {MatTableDataSource} from '@angular/material/table';
import {IDashboardCommonBikePoint} from '../../service/domain/dashboard-common-bike-point';
import {SelectionModel} from '@angular/cdk/collections';
@ -26,6 +26,8 @@ export class TableComponent implements OnInit {
bikePoint: IDashboardCommonBikePoint;
maxStartDate: Date;
maxEndDate: Date;
isLoadingToSource: boolean;
isLoadingFromSource: boolean;
constructor(
private route: ActivatedRoute,
@ -35,6 +37,8 @@ export class TableComponent implements OnInit {
}
ngOnInit(): void {
this.isLoadingToSource = true;
this.isLoadingFromSource = true;
this.route.params.subscribe(params => {
this.colors = ['black', 'gray', 'green', 'orange', 'purple', 'red'];
this.service.fetchDashboardInit(params.id).then(data => {
@ -48,32 +52,52 @@ export class TableComponent implements OnInit {
async initTable(): Promise<void> {
this.selectionModel.clear();
this.map.removeTableStationMarkerOnReload();
this.map.removeOverlayOnMiniMap();
const initDate = this.maxEndDate.toISOString().substring(0, 10);
await this.service.fetchDashboardStationTo(this.bikePoint.id, initDate, initDate).then(source => {
this.stationToSource = this.setBikePointColorToSource(source);
this.iterableToSource = source;
this.iterableToSource.forEach(bikePoint => {
bikePoint.polyLineColor = 'green';
});
this.isLoadingToSource = false;
});
await this.service.fetchDashboardStationFrom(this.bikePoint.id, initDate, initDate).then(source => {
this.service.fetchDashboardStationFrom(this.bikePoint.id, initDate, initDate).then(source => {
this.stationFromSource = this.setBikePointColorFromSource(source);
this.iterableFromSource = source;
this.iterableFromSource.forEach(bikePoint => {
bikePoint.polyLineColor = 'red';
});
this.isLoadingFromSource = false;
});
}
async onSubmit(actualStartDate: string, actualEndDate: string): Promise<void> {
this.resetTableSourcesToDisplaySpinner();
this.selectionModel.clear();
this.map.removeTableStationMarkerOnReload();
this.map.removeOverlayOnMiniMap();
await this.service.fetchDashboardStationTo(this.bikePoint.id, actualStartDate, actualEndDate).then((source) => {
this.colors = ['black', 'gray', 'green', 'orange', 'purple', 'red'];
this.stationToSource = this.setBikePointColorToSource(source);
this.iterableToSource = source;
this.stationToSource = source;
this.iterableToSource = this.setBikePointColorToSource(source);
this.isLoadingToSource = false;
});
await this.service.fetchDashboardStationFrom(this.bikePoint.id, actualStartDate, actualEndDate).then((source) => {
this.stationFromSource = this.setBikePointColorFromSource(source);
this.iterableFromSource = source;
this.service.fetchDashboardStationFrom(this.bikePoint.id, actualStartDate, actualEndDate).then((source) => {
this.stationFromSource = source;
this.iterableFromSource = this.setBikePointColorFromSource(source);
this.isLoadingFromSource = false;
});
}
resetTableSourcesToDisplaySpinner(): void {
this.isLoadingToSource = true;
this.isLoadingFromSource = true;
this.stationToSource = null;
this.stationFromSource = null;
this.iterableToSource = [];
this.iterableFromSource = [];
}
public drawIconInTable(bikePoint: any): string {
return `../../assets/bike-point-${bikePoint.color}.png`;
}
@ -83,7 +107,7 @@ export class TableComponent implements OnInit {
}
selectRow(selection: MatCheckboxChange, row): void {
const markerToDisplay = [];
let markerToDisplay = [];
this.iterableToSource.forEach(point => {
if (point.stationId === row.stationId) {
this.selectionModel.toggle(point);
@ -97,9 +121,25 @@ export class TableComponent implements OnInit {
this.selectionModel.selected.forEach(point => {
markerToDisplay.push(point);
});
markerToDisplay = this.changePolyLineColorForDuplicateBikePoints(markerToDisplay);
this.map.drawTableStationMarker(markerToDisplay);
}
changePolyLineColorForDuplicateBikePoints(array: any[]): any[] {
const id = array.map(item => item.stationId);
const duplicates = id.filter((value, index) => {
return id.indexOf(value) !== index;
});
duplicates.forEach(stationId => {
array.forEach(bikePoint => {
if (bikePoint.stationId === stationId) {
bikePoint.polyLineColor = 'blue';
}
});
});
return array;
}
setBikePointColorToSource(source): any {
for (const station of source) {
if (station.stationId === this.bikePoint.id) {