diff --git a/projects/project-3/frontend/src/app/app.module.ts b/projects/project-3/frontend/src/app/app.module.ts index 5e2fd0f..cf93dc8 100644 --- a/projects/project-3/frontend/src/app/app.module.ts +++ b/projects/project-3/frontend/src/app/app.module.ts @@ -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] }) diff --git a/projects/project-3/frontend/src/app/dashboard/dashboard.component.html b/projects/project-3/frontend/src/app/dashboard/dashboard.component.html index 9b2c3f7..a232561 100644 --- a/projects/project-3/frontend/src/app/dashboard/dashboard.component.html +++ b/projects/project-3/frontend/src/app/dashboard/dashboard.component.html @@ -83,7 +83,8 @@ - @@ -120,7 +121,8 @@ - @@ -151,6 +153,12 @@ + + + + diff --git a/projects/project-3/frontend/src/app/dashboard/dashboard.component.scss b/projects/project-3/frontend/src/app/dashboard/dashboard.component.scss index f9eefe9..ffb5e9f 100644 --- a/projects/project-3/frontend/src/app/dashboard/dashboard.component.scss +++ b/projects/project-3/frontend/src/app/dashboard/dashboard.component.scss @@ -16,7 +16,6 @@ img { .button-back:hover, .button-wiki:hover { background: #086ed2; - } .submit-date { diff --git a/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts b/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts index 26fb220..fd838da 100644 --- a/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts +++ b/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts @@ -92,6 +92,7 @@ export class DashboardComponent implements OnInit { iterableFromSource: any[]; selectionModel = new SelectionModel(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 { + 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; + } }