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

disable checkbox for dashboard-station

Browse Source
This commit is contained in:
tim-herbst 2021-01-01 20:19:39 +01:00
parent 7a80335860
commit 9c53c382ff
4 changed files with 55 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
projects/project-3/frontend/src/app/app.module.ts
View File

@ -28,6 +28,7 @@ import {AutoRefreshComponent} from './map/auto-refresh/auto-refresh.component';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
@NgModule({
declarations: [
@ -37,32 +38,33 @@ import {MatTooltipModule} from '@angular/material/tooltip';
PopUpComponent,
AutoRefreshComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatToolbarModule,
MatIconModule,
MatButtonModule,
FlexLayoutModule,
HttpClientModule,
NgApexchartsModule,
MatGridListModule,
MatCardModule,
MatMenuModule,
LayoutModule,
MatSidenavModule,
MatDatepickerModule,
MatFormFieldModule,
MatNativeDateModule,
FormsModule,
ReactiveFormsModule,
MatInputModule,
MatTableModule,
MatSlideToggleModule,
MatCheckboxModule,
MatTooltipModule
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatToolbarModule,
MatIconModule,
MatButtonModule,
FlexLayoutModule,
HttpClientModule,
NgApexchartsModule,
MatGridListModule,
MatCardModule,
MatMenuModule,
LayoutModule,
MatSidenavModule,
MatDatepickerModule,
MatFormFieldModule,
MatNativeDateModule,
FormsModule,
ReactiveFormsModule,
MatInputModule,
MatTableModule,
MatSlideToggleModule,
MatCheckboxModule,
MatTooltipModule,
MatProgressSpinnerModule
],
providers: [],
bootstrap: [AppComponent]
})

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

@ -83,7 +83,8 @@
<ng-container matColumnDef="select">
<th *matHeaderCellDef mat-header-cell></th>
<td *matCellDef="let row" mat-cell>
<mat-checkbox (change)="$event ? selectRow($event, row) : null" (click)="$event.stopPropagation()"
<mat-checkbox [disabled]="isCheckBoxDisable(row)"
(change)="$event ? selectRow($event, row) : null" (click)="$event.stopPropagation()"
[checked]="selectionModel.isSelected(row)"
matTooltip="toggle to view marker on map"
matTooltipPosition="above">
@ -120,7 +121,8 @@
<ng-container matColumnDef="select">
<th *matHeaderCellDef mat-header-cell></th>
<td *matCellDef="let row" mat-cell>
<mat-checkbox (change)="$event ? selectRow($event, row) : null" (click)="$event.stopPropagation()"
<mat-checkbox [disabled]="isCheckBoxDisable(row)"
(change)="$event ? selectRow($event, row) : null" (click)="$event.stopPropagation()"
[checked]="selectionModel.isSelected(row)"
matTooltip="toggle to view marker on map"
matTooltipPosition="above">
@ -151,6 +153,12 @@
<tr *matHeaderRowDef="displayedColumnsFrom" mat-header-row></tr>
<tr *matRowDef="let row; columns: displayedColumnsFrom;" mat-row></tr>
</table>
<mat-card *ngIf="isLoading" style="display: flex; justify-content: center; align-items: center">
<mat-progress-spinner
color="primary"
mode="indeterminate">
</mat-progress-spinner>
</mat-card>
</div>
</div>

1
projects/project-3/frontend/src/app/dashboard/dashboard.component.scss
View File

@ -16,7 +16,6 @@ img {
.button-back:hover, .button-wiki:hover {
background: #086ed2;
}
.submit-date {

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

@ -92,6 +92,7 @@ export class DashboardComponent implements OnInit {
iterableFromSource: any[];
selectionModel = new SelectionModel<IDashboardCommonBikePoint>(true, []);
colors = ['black', 'gray', 'green', 'orange', 'purple', 'red'];
isLoading: boolean;
station: IDashboardCommonBikePoint;
maxStartDate: Date;
@ -137,6 +138,7 @@ export class DashboardComponent implements OnInit {
text: 'Loading...'
}
};
this.isLoading = true;
}
ngOnInit(): void {
@ -255,11 +257,13 @@ export class DashboardComponent implements OnInit {
await this.service.fetchDashboardStationTo(this.station.id, initDate, initDate).then((source) => {
this.stationToSource = this.setBikePointColorToSource(source);
this.iterableToSource = source;
this.isLoading = false;
this.changeDetectorRefs.detectChanges();
});
await this.service.fetchDashboardStationFrom(this.station.id, initDate, initDate).then((source) => {
this.stationFromSource = this.setBikePointColorFromSource(source);
this.iterableFromSource = source;
this.isLoading = false;
this.changeDetectorRefs.detectChanges();
});
this.service.fetchDashboardStationCharts(this.station.id, initDate, initDate, 'duration').then((source) => {
@ -347,6 +351,9 @@ export class DashboardComponent implements OnInit {
}
},
chart: {
toolbar: {
show: false
},
type: 'line',
height: chartHeight,
zoom: {
@ -397,6 +404,7 @@ export class DashboardComponent implements OnInit {
}
async onSubmit(): Promise<any> {
this.isLoading = false;
this.actualStartDate = this.form.get('daterange').value.start;
this.actualEndDate = this.form.get('daterange').value.end;
this.map.removeTableStationMarkerOnReload();
@ -409,6 +417,7 @@ export class DashboardComponent implements OnInit {
this.colors = ['black', 'gray', 'green', 'orange', 'purple', 'red'];
this.stationToSource = this.setBikePointColorToSource(source);
this.iterableToSource = source;
this.isLoading = false;
this.changeDetectorRefs.detectChanges();
});
await this.service.fetchDashboardStationFrom(
@ -418,6 +427,7 @@ export class DashboardComponent implements OnInit {
).then((source) => {
this.stationFromSource = this.setBikePointColorFromSource(source);
this.iterableFromSource = source;
this.isLoading = false;
this.changeDetectorRefs.detectChanges();
});
this.service.fetchDashboardStationCharts(
@ -508,6 +518,9 @@ export class DashboardComponent implements OnInit {
}
],
chart: {
toolbar: {
show: false
},
type: 'line',
height: chartHeight,
zoom: {
@ -615,4 +628,8 @@ export class DashboardComponent implements OnInit {
this.colors = this.colors.filter(c => c !== color);
return color;
}
isCheckBoxDisable(row): boolean {
return row.stationId === this.station.id;
}
}