add refactor tables to component

projects/project-3/frontend/src/app/app.module.ts

@@ -29,6 +29,9 @@ 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";
+import { TableComponent } from './dashboard/table/table.component';
+import { RentDurationChartComponent } from './dashboard/rent-duration-chart/rent-duration-chart.component';
+import { RentTimeChartComponent } from './dashboard/rent-time-chart/rent-time-chart.component';
 
 @NgModule({
   declarations: [
@@ -36,7 +39,10 @@ import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
     MapComponent,
     DashboardComponent,
     PopUpComponent,
-    AutoRefreshComponent
+    AutoRefreshComponent,
+    TableComponent,
+    RentDurationChartComponent,
+    RentTimeChartComponent
   ],
   imports: [
     BrowserModule,

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

@@ -0,0 +1,76 @@
+<div class="dashboard-table-to" fxFlex>
+  <table [dataSource]="stationToSource" class="mat-elevation-z8" fxFill mat-table>
+    <ng-container matColumnDef="select">
+      <th *matHeaderCellDef mat-header-cell></th>
+      <td *matCellDef="let row" mat-cell>
+        <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">
+        </mat-checkbox>
+      </td>
+    </ng-container>
+    <ng-container matColumnDef="endStationName">
+      <th *matHeaderCellDef mat-header-cell> station of rental destination</th>
+      <td *matCellDef="let element" mat-cell><a
+        [routerLink]="['/dashboard/', element.stationId]">{{element.stationName}}</a></td>
+    </ng-container>
+
+    <ng-container matColumnDef="number">
+      <th *matHeaderCellDef mat-header-cell> number of drives</th>
+      <td *matCellDef="let element" mat-cell> {{element.number}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="avgDuration">
+      <th *matHeaderCellDef mat-header-cell> average rental duration</th>
+      <td *matCellDef="let element" mat-cell> {{humanizeAvgDuration(element.avgDuration)}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="marker">
+      <th *matHeaderCellDef mat-header-cell> icon on map</th>
+      <td *matCellDef="let element" mat-cell><img [src]="drawIconInTable(element)" alt="marker"></td>
+    </ng-container>
+
+    <tr *matHeaderRowDef="displayedColumnsTo" mat-header-row></tr>
+    <tr *matRowDef="let row; columns: displayedColumnsTo;" mat-row></tr>
+  </table>
+</div>
+<div class="dashboard-table-from" fxFlex>
+  <table [dataSource]="stationFromSource" class="mat-elevation-z9" fxFill mat-table>
+    <ng-container matColumnDef="select">
+      <th *matHeaderCellDef mat-header-cell></th>
+      <td *matCellDef="let row" mat-cell>
+        <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">
+        </mat-checkbox>
+      </td>
+    </ng-container>
+    <ng-container matColumnDef="startStationName">
+      <th *matHeaderCellDef mat-header-cell> station of rental origin</th>
+      <td *matCellDef="let element" mat-cell><a
+        [routerLink]="['/dashboard/', element.stationId]"> {{element.stationName}}</a></td>
+    </ng-container>
+
+    <ng-container matColumnDef="number">
+      <th *matHeaderCellDef mat-header-cell> number of drives</th>
+      <td *matCellDef="let element" mat-cell> {{element.number}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="avgDuration">
+      <th *matHeaderCellDef mat-header-cell> average rental duration</th>
+      <td *matCellDef="let element" mat-cell> {{humanizeAvgDuration(element.avgDuration)}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="marker">
+      <th *matHeaderCellDef mat-header-cell> icon on map</th>
+      <td *matCellDef="let element" mat-cell><img [src]="drawIconInTable(element)" alt="marker"></td>
+    </ng-container>
+
+    <tr *matHeaderRowDef="displayedColumnsFrom" mat-header-row></tr>
+    <tr *matRowDef="let row; columns: displayedColumnsFrom;" mat-row></tr>
+  </table>
+</div>

projects/project-3/frontend/src/app/dashboard/table/table.component.scss

@@ -0,0 +1,15 @@
+img {
+  width: 60px;
+}
+
+a {
+  color: black;
+}
+
+.dashboard-table-to {
+  margin-right: 1em;
+}
+
+.dashboard-table-from {
+  margin-left: 1em;
+}

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

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TableComponent } from './table.component';
+
+describe('TableComponent', () => {
+  let component: TableComponent;
+  let fixture: ComponentFixture<TableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TableComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,140 @@
+import {Component, Input, 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';
+import {MatCheckboxChange} from '@angular/material/checkbox';
+import stht from 'seconds-to-human-time';
+import {MapService} from '../../service/map.service';
+import {DashboardService} from '../../service/dashboard.service';
+import {ActivatedRoute} from '@angular/router';
+
+@Component({
+  selector: 'app-table',
+  templateUrl: './table.component.html',
+  styleUrls: ['./table.component.scss']
+})
+export class TableComponent implements OnInit {
+  displayedColumnsTo: string[] = ['select', 'endStationName', 'number', 'avgDuration', 'marker'];
+  displayedColumnsFrom: string[] = ['select', 'startStationName', 'number', 'avgDuration', 'marker'];
+  stationToSource = new MatTableDataSource<IDashboardCommonBikePoint>();
+
+  iterableToSource: any[];
+  stationFromSource = new MatTableDataSource<IDashboardCommonBikePoint>();
+  iterableFromSource: any[];
+  selectionModel = new SelectionModel<IDashboardCommonBikePoint>(true, []);
+  colors = ['black', 'gray', 'green', 'orange', 'purple', 'red'];
+  bikePoint: IDashboardCommonBikePoint;
+  maxStartDate: Date;
+  maxEndDate: Date;
+
+  constructor(
+    private route: ActivatedRoute,
+    private map: MapService,
+    private service: DashboardService
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.route.params.subscribe(params => {
+      this.selectionModel.clear();
+      this.colors = ['black', 'gray', 'green', 'orange', 'purple', 'red'];
+      this.service.fetchDashboardInit(params.id).then(data => {
+        this.bikePoint = data;
+        this.maxStartDate = new Date(data.maxStartDate);
+        this.maxEndDate = new Date(data.maxEndDate);
+        this.initTable();
+      });
+    });
+  }
+
+  async initTable(): Promise<void> {
+    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;
+    });
+    await this.service.fetchDashboardStationFrom(this.bikePoint.id, initDate, initDate).then(source => {
+      this.stationFromSource = this.setBikePointColorFromSource(source);
+      this.iterableFromSource = source;
+    });
+  }
+
+  async onSubmit(actualStartDate: string, actualEndDate: string): Promise<void> {
+    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;
+    });
+    await this.service.fetchDashboardStationFrom(this.bikePoint.id, actualStartDate, actualEndDate).then((source) => {
+      this.stationFromSource = this.setBikePointColorFromSource(source);
+      this.iterableFromSource = source;
+    });
+  }
+
+  public drawIconInTable(bikePoint: any): string {
+    return `../../assets/bike-point-${bikePoint.color}.png`;
+  }
+
+  humanizeAvgDuration(avgDuration: number): string {
+    return stht(avgDuration);
+  }
+
+  selectRow(selection: MatCheckboxChange, row): void {
+    const markerToDisplay = [];
+    this.iterableToSource.forEach(point => {
+      if (point.stationId === row.stationId) {
+        this.selectionModel.toggle(point);
+      }
+    });
+    this.iterableFromSource.forEach(point => {
+      if (point.stationId === row.stationId) {
+        this.selectionModel.toggle(point);
+      }
+    });
+    this.selectionModel.selected.forEach(point => {
+      markerToDisplay.push(point);
+    });
+    this.map.drawTableStationMarker(markerToDisplay);
+  }
+
+  setBikePointColorToSource(source): any {
+    for (const station of source) {
+      if (station.stationId === this.bikePoint.id) {
+        station.color = 'blue';
+        continue;
+      }
+      station.color = this.getRandomColor();
+    }
+    return source;
+  }
+
+  setBikePointColorFromSource(source): any {
+    for (const station of source) {
+      if (station.stationId === this.bikePoint.id) {
+        station.color = 'blue';
+        continue;
+      }
+      for (const to of this.iterableToSource) {
+        if (station.stationId === to.stationId) {
+          station.color = to.color;
+          break;
+        }
+      }
+      if (!station.color) {
+        station.color = this.getRandomColor();
+      }
+    }
+    return source;
+  }
+
+  getRandomColor(): string {
+    const color = this.colors[Math.floor(Math.random() * this.colors.length)];
+    this.colors = this.colors.filter(c => c !== color);
+    return color;
+  }
+
+  isCheckBoxDisable(row): boolean {
+    return row.stationId === this.bikePoint.id;
+  }
+
+}