disable checkbox for dashboard-station

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: [
+  imports: [
-        BrowserModule,
+    BrowserModule,
-        AppRoutingModule,
+    AppRoutingModule,
-        BrowserAnimationsModule,
+    BrowserAnimationsModule,
-        MatToolbarModule,
+    MatToolbarModule,
-        MatIconModule,
+    MatIconModule,
-        MatButtonModule,
+    MatButtonModule,
-        FlexLayoutModule,
+    FlexLayoutModule,
-        HttpClientModule,
+    HttpClientModule,
-        NgApexchartsModule,
+    NgApexchartsModule,
-        MatGridListModule,
+    MatGridListModule,
-        MatCardModule,
+    MatCardModule,
-        MatMenuModule,
+    MatMenuModule,
-        LayoutModule,
+    LayoutModule,
-        MatSidenavModule,
+    MatSidenavModule,
-        MatDatepickerModule,
+    MatDatepickerModule,
-        MatFormFieldModule,
+    MatFormFieldModule,
-        MatNativeDateModule,
+    MatNativeDateModule,
-        FormsModule,
+    FormsModule,
-        ReactiveFormsModule,
+    ReactiveFormsModule,
-        MatInputModule,
+    MatInputModule,
-        MatTableModule,
+    MatTableModule,
-        MatSlideToggleModule,
+    MatSlideToggleModule,
-        MatCheckboxModule,
+    MatCheckboxModule,
-        MatTooltipModule
+    MatTooltipModule,
-    ],
+    MatProgressSpinnerModule
+  ],
   providers: [],
   bootstrap: [AppComponent]
 })

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

@@ -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>

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 {

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

@@ -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;
+  }
 }