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 dd8c780..c6e9190 100644
--- a/projects/project-3/frontend/src/app/dashboard/dashboard.component.html
+++ b/projects/project-3/frontend/src/app/dashboard/dashboard.component.html
@@ -82,15 +82,14 @@
|
+ (change)="$event ? selectRow($event, row) : null"
+ [checked]="selectionModel.isSelected(row)">
|
station of lend destination |
- {{element.stationName}} |
@@ -104,6 +103,11 @@
{{humanizeAvgDuration(element.avgDuration)}} |
+
+ icon on map |
+ |
+
+
@@ -114,15 +118,14 @@
|
+ (change)="$event ? selectRow($event, row) : null"
+ [checked]="selectionModel.isSelected(row)">
|
station of lend origin |
- {{element.stationName}} |
@@ -136,6 +139,11 @@
{{humanizeAvgDuration(element.avgDuration)}} |
+
+ icon on map |
+ |
+
+
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 e5b76b6..3f2326b 100644
--- a/projects/project-3/frontend/src/app/dashboard/dashboard.component.scss
+++ b/projects/project-3/frontend/src/app/dashboard/dashboard.component.scss
@@ -6,6 +6,14 @@ mat-sidenav-content {
flex: 1 1 auto;
}
+a {
+ color: #017bfe;
+}
+
+img {
+ width: 60px;
+}
+
.button-back:hover, .button-wiki:hover {
background: #086ed2;
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 fa0ba73..5bc0b22 100644
--- a/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts
+++ b/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts
@@ -26,7 +26,7 @@ import {
import {IMapBikePoint} from '../service/domain/map-bike-point';
import {SelectionModel} from '@angular/cdk/collections';
import {MatCheckboxChange} from '@angular/material/checkbox';
-import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, NativeDateAdapter} from '@angular/material/core';
+import {DateAdapter, MAT_DATE_FORMATS, NativeDateAdapter} from '@angular/material/core';
import {formatDate} from '@angular/common';
export type ChartOptions = {
@@ -83,12 +83,14 @@ export class DashboardComponent implements OnInit {
public durationChartOptions: Partial;
public timeChartOptions: Partial;
public bikePointChartOptions: Partial;
- displayedColumnsTo: string[] = ['select', 'endStationName', 'number', 'avgDuration'];
- displayedColumnsFrom: string[] = ['select', 'startStationName', 'number', 'avgDuration'];
+ displayedColumnsTo: string[] = ['select', 'endStationName', 'number', 'avgDuration', 'marker'];
+ displayedColumnsFrom: string[] = ['select', 'startStationName', 'number', 'avgDuration', 'marker'];
stationToSource = new MatTableDataSource();
- selectionTo = new SelectionModel(true, []);
- stationFromSource = new MatTableDataSource();
- selectionFrom = new SelectionModel(true, []);
+ iterableToSource: any[];
+ stationFromSource = new MatTableDataSource();
+ iterableFromSource: any[];
+ selectionModel = new SelectionModel(true, []);
+ colors = ['black', 'gray', 'green', 'orange', 'purple', 'red'];
station: IDashboardCommonBikePoint;
maxStartDate: Date;
@@ -145,14 +147,15 @@ export class DashboardComponent implements OnInit {
});
this.changeDetectorRefs.detectChanges();
this.map.removeTableStationMarkerOnReload();
+ this.selectionModel.clear();
this.route.params.subscribe(params => {
+ this.colors = ['black', 'gray', 'green', 'orange', 'purple', 'red'];
this.service.fetchDashboardInit(params.id).then(data => {
this.station = data;
this.maxStartDate = new Date(data.maxStartDate);
this.maxEndDate = new Date(data.maxEndDate);
this.initDashboard();
});
-
this.service.fetchBikePointForStatus(params.id).then(data => {
this.bikePoint = data;
const NbBlockedDocks = data.status.NbDocks - data.status.NbBikes - data.status.NbEmptyDocks;
@@ -241,11 +244,13 @@ export class DashboardComponent implements OnInit {
this.form.get('daterange').get('start').setValue(initDate);
this.form.get('daterange').get('end').setValue(initDate);
await this.service.fetchDashboardStationTo(this.station.id, initDate, initDate).then((source) => {
- this.stationToSource = source;
+ this.stationToSource = this.setBikePointColorToSource(source);
+ this.iterableToSource = source;
this.changeDetectorRefs.detectChanges();
});
await this.service.fetchDashboardStationFrom(this.station.id, initDate, initDate).then((source) => {
- this.stationFromSource = source;
+ this.stationFromSource = this.setBikePointColorFromSource(source);
+ this.iterableFromSource = source;
this.changeDetectorRefs.detectChanges();
});
this.service.fetchDashboardStationCharts(this.station.id, initDate, initDate, 'duration').then((source) => {
@@ -376,26 +381,28 @@ export class DashboardComponent implements OnInit {
this.map.drawDashboardStationMarker(this.station.lat, this.station.lon);
}
- onSubmit(): void {
+ async onSubmit(): Promise {
this.actualStartDate = this.form.get('daterange').value.start;
this.actualEndDate = this.form.get('daterange').value.end;
this.map.removeTableStationMarkerOnReload();
- this.service.fetchDashboardStationTo(
+ this.selectionModel.clear();
+ await this.service.fetchDashboardStationTo(
this.station.id,
this.actualStartDate.toISOString().substring(0, 10),
this.actualEndDate.toISOString().substring(0, 10)
).then((source) => {
- this.stationToSource = source;
- this.selectionTo.clear();
+ this.colors = ['black', 'gray', 'green', 'orange', 'purple', 'red'];
+ this.stationToSource = this.setBikePointColorToSource(source);
+ this.iterableToSource = source;
this.changeDetectorRefs.detectChanges();
});
- this.service.fetchDashboardStationFrom(
+ await this.service.fetchDashboardStationFrom(
this.station.id,
this.actualStartDate.toISOString().substring(0, 10),
this.actualEndDate.toISOString().substring(0, 10)
).then((source) => {
- this.stationFromSource = source;
- this.selectionFrom.clear();
+ this.stationFromSource = this.setBikePointColorFromSource(source);
+ this.iterableFromSource = source;
this.changeDetectorRefs.detectChanges();
});
this.service.fetchDashboardStationCharts(
@@ -530,101 +537,62 @@ export class DashboardComponent implements OnInit {
return stht(avgDuration);
}
- isToAllSelected(): boolean {
- const numSelected = this.selectionTo.selected.length;
- const numRows = this.stationToSource.data.length;
- return numSelected === numRows;
- }
-
- isFromAllSelected(): boolean {
- const numSelected = this.selectionFrom.selected.length;
- const numRows = this.stationFromSource.data.length;
- return numSelected === numRows;
- }
-
- checkboxLabelTo(row?: any): string {
- if (!row) {
- return `${this.isToAllSelected() ? 'select' : 'deselect'} all`;
- }
- return `${this.selectionTo.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
- }
-
- checkboxLabelFrom(row?: any): string {
- if (!row) {
- return `${this.isFromAllSelected() ? 'select' : 'deselect'} all`;
- }
- return `${this.selectionFrom.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
- }
-
- selectRowTo(selection: MatCheckboxChange, row): void {
- this.selectionTo.toggle(row);
- this.selectionTo.selected.forEach(point => {
+ selectRow(selection: MatCheckboxChange, row): void {
+ const markerToDisplay = [];
+ this.iterableToSource.forEach(point => {
if (point.stationId === row.stationId) {
- point.color = this.getColorTo(row);
+ this.selectionModel.toggle(point);
}
});
- const markerToDisplay = [];
- markerToDisplay.push(...this.selectionTo.selected);
- markerToDisplay.push(...this.selectionFrom.selected);
+ 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);
}
- selectRowFrom(selection: MatCheckboxChange, row): void {
- this.selectionFrom.toggle(row);
- this.selectionFrom.selected.forEach(point => {
- if (point.stationId === row.stationId) {
- point.color = this.getColorFrom(row);
+ public drawIconInTable(bikePoint: any): string {
+ return `../../assets/bike-point-${bikePoint.color}.png`;
+ }
+
+ setBikePointColorToSource(source): any {
+ for (const station of source) {
+ if (station.stationId === this.station.id) {
+ station.color = 'blue';
+ continue;
}
- });
- const markerToDisplay = [];
- markerToDisplay.push(...this.selectionFrom.selected);
- markerToDisplay.push(...this.selectionTo.selected);
- this.map.drawTableStationMarker(markerToDisplay);
+ station.color = this.getRandomColor();
+ }
+ return source;
}
- getColorTo(value): string {
- switch (value.stationName) {
- case this.stationToSource[0].stationName:
- if (this.stationToSource[0].stationName === this.station.commonName) {
- return 'blue';
- } else {
- return 'black';
- }
- case this.stationToSource[1].stationName:
- if (this.stationToSource[1].stationName === this.station.commonName) {
- return 'blue';
- } else {
- return 'red';
- }
- case this.stationToSource[2].stationName:
- if (this.stationToSource[2].stationName === this.station.commonName) {
- return 'blue';
- } else {
- return 'green';
+ setBikePointColorFromSource(source): any {
+ for (const station of source) {
+ if (station.stationId === this.station.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;
}
- getColorFrom(value): string {
- switch (value.stationName) {
- case this.stationFromSource[0].stationName:
- if (this.stationFromSource[0].stationName === this.station.commonName) {
- return 'blue';
- } else {
- return 'orange';
- }
- case this.stationFromSource[1].stationName:
- if (this.stationFromSource[1].stationName === this.station.commonName) {
- return 'blue';
- } else {
- return 'purple';
- }
- case this.stationFromSource[2].stationName:
- if (this.stationFromSource[2].stationName === this.station.commonName) {
- return 'blue';
- } else {
- return 'gray';
- }
- }
+
+ getRandomColor(): string {
+ const color = this.colors[Math.floor(Math.random() * this.colors.length)];
+ this.colors = this.colors.filter(c => c !== color);
+ return color;
}
}