From 1545ce1a78f1cc73347ba8d7f87ae99fe8ab50c7 Mon Sep 17 00:00:00 2001 From: Marcel Schwarz Date: Mon, 11 Jan 2021 22:21:56 +0100 Subject: [PATCH] Some final touches Issue #4 * Wrap tables in mat cards * Add accidents legend * Adjust table column names * Some CSS adjustments --- .../rent-time-chart.component.html | 9 +- .../rent-time-chart.component.ts | 3 +- .../app/dashboard/table/table.component.html | 170 ++++++++++-------- .../app/dashboard/table/table.component.scss | 5 + .../user-input/user-input.component.html | 4 +- .../user-input/user-input.component.ts | 2 +- .../frontend/src/app/service/map.service.ts | 28 ++- .../map-interaction.component.scss | 1 + projects/project-3/frontend/src/styles.scss | 60 ++++--- 9 files changed, 178 insertions(+), 104 deletions(-) diff --git a/projects/project-3/frontend/src/app/dashboard/rent-time-chart/rent-time-chart.component.html b/projects/project-3/frontend/src/app/dashboard/rent-time-chart/rent-time-chart.component.html index c579ad8..15da3bc 100644 --- a/projects/project-3/frontend/src/app/dashboard/rent-time-chart/rent-time-chart.component.html +++ b/projects/project-3/frontend/src/app/dashboard/rent-time-chart/rent-time-chart.component.html @@ -9,6 +9,9 @@ +
+ +
-
-
- + [yaxis]="chartOptions.yaxis"> +
diff --git a/projects/project-3/frontend/src/app/dashboard/rent-time-chart/rent-time-chart.component.ts b/projects/project-3/frontend/src/app/dashboard/rent-time-chart/rent-time-chart.component.ts index eafea56..7ee44b6 100644 --- a/projects/project-3/frontend/src/app/dashboard/rent-time-chart/rent-time-chart.component.ts +++ b/projects/project-3/frontend/src/app/dashboard/rent-time-chart/rent-time-chart.component.ts @@ -151,12 +151,11 @@ export class RentTimeChartComponent implements OnInit { } }; }); - } async onSubmit(actualStartDate: string, actualEndDate: string): Promise { this.isLoading = true; - await this.service.fetchDashboardStationCharts( + this.service.fetchDashboardStationCharts( this.bikePoint.id, actualStartDate, actualEndDate, diff --git a/projects/project-3/frontend/src/app/dashboard/table/table.component.html b/projects/project-3/frontend/src/app/dashboard/table/table.component.html index da13573..2460ceb 100644 --- a/projects/project-3/frontend/src/app/dashboard/table/table.component.html +++ b/projects/project-3/frontend/src/app/dashboard/table/table.component.html @@ -1,88 +1,110 @@
- - - - - - - - - + + + Top-3 rental destination + + This table shows the top-3 destinations of rentals from this station by number of drives. + The Station can be sent to the map with the checkbox. + + + +
- - - station of rental destination - {{element.stationName}} -
+ + + + + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - -
+ + + Destination + {{element.stationName}} + number of drives {{element.number}} Count {{element.number}} average rental duration {{humanizeAvgDuration(element.avgDuration)}} Average duration {{humanizeAvgDuration(element.avgDuration)}} icon on mapmarkerIconmarker
-
- -
+ + + +
+ +
+ +
- - - - - - - - - + + + Top-3 rental origin + + This table shows the top-3 origins of rentals to this station by number of drives. + The Station can be sent to the map with the checkbox. + + + +
- - - station of rental origin - {{element.stationName}} -
+ + + + + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - -
+ + + Origin + {{element.stationName}} + number of drives {{element.number}} Count {{element.number}} average rental duration {{humanizeAvgDuration(element.avgDuration)}} Average duration {{humanizeAvgDuration(element.avgDuration)}} icon on mapmarkerIconmarker
-
- -
+ + + +
+ +
+ +
diff --git a/projects/project-3/frontend/src/app/dashboard/table/table.component.scss b/projects/project-3/frontend/src/app/dashboard/table/table.component.scss index 10615d6..ad1f756 100644 --- a/projects/project-3/frontend/src/app/dashboard/table/table.component.scss +++ b/projects/project-3/frontend/src/app/dashboard/table/table.component.scss @@ -10,3 +10,8 @@ a { .mat-checkbox-layout label { margin: 0 !important; } + +.mat-cell, .mat-header-cell { + padding-left: 8px; + padding-right: 8px; +} diff --git a/projects/project-3/frontend/src/app/dashboard/user-input/user-input.component.html b/projects/project-3/frontend/src/app/dashboard/user-input/user-input.component.html index a5b0219..bb8d965 100644 --- a/projects/project-3/frontend/src/app/dashboard/user-input/user-input.component.html +++ b/projects/project-3/frontend/src/app/dashboard/user-input/user-input.component.html @@ -8,7 +8,7 @@

Select a range to analyze data

-
+ Enter a range
diff --git a/projects/project-3/frontend/src/app/dashboard/user-input/user-input.component.ts b/projects/project-3/frontend/src/app/dashboard/user-input/user-input.component.ts index 1f7f7f7..d0fc25b 100644 --- a/projects/project-3/frontend/src/app/dashboard/user-input/user-input.component.ts +++ b/projects/project-3/frontend/src/app/dashboard/user-input/user-input.component.ts @@ -52,7 +52,7 @@ export const PICK_FORMATS = { class PickDateAdapter extends NativeDateAdapter { format(date: Date, displayFormat: Object): string { if (displayFormat === 'input') { - return formatDate(date, 'dd-MM-yyyy', this.locale); + return formatDate(date, 'dd.MM.yyyy', this.locale); } else { return date.toDateString(); } diff --git a/projects/project-3/frontend/src/app/service/map.service.ts b/projects/project-3/frontend/src/app/service/map.service.ts index c4ef9da..8e9eb17 100644 --- a/projects/project-3/frontend/src/app/service/map.service.ts +++ b/projects/project-3/frontend/src/app/service/map.service.ts @@ -7,7 +7,6 @@ import {environment} from '../../environments/environment'; import {PopUpService} from './pop-up.service'; import {IMapBikePoint} from './domain/map-bike-point'; import {IDashboardCommonBikePoint} from './domain/dashboard-common-bike-point'; -import {writeErrorToLogFile} from "@angular/cli/utilities/log-file"; const createIcon = color => L.icon({ @@ -34,6 +33,7 @@ export class MapService { dashBoardBikePoint: IDashboardCommonBikePoint; layerControl = L.control(null); legend = L.control({position: 'bottomleft'}); + accidentLegend = L.control({position: 'bottomleft'}); constructor( private client: HttpClient, @@ -66,6 +66,32 @@ export class MapService { maxZoom: 19, preferCanvas: true })); + + this.accidentLegend.onAdd = () => { + const getCircle = (color) => { + return ` + + + `; + }; + + const div = L.DomUtil.create('div', 'legend legend-accidents'); + div.innerHTML = ` +

Accident severities

+
+ ${getCircle('yellow')}Slight accident +
+
+ ${getCircle('orange')}Severe accident +
+
+ ${getCircle('red')}Fatal accident +
+ `; + return div; + }; + this.map.on('overlayadd', e => e.name === 'Accidents' ? this.accidentLegend.addTo(this.map) : null); + this.map.on('overlayremove', e => e.name === 'Accidents' ? this.accidentLegend.remove() : null); } public initDashboardMap(lat: number, lon: number, zoom: number): void { diff --git a/projects/project-3/frontend/src/app/toolbar/map-interaction/map-interaction.component.scss b/projects/project-3/frontend/src/app/toolbar/map-interaction/map-interaction.component.scss index 0456e7e..29418e0 100644 --- a/projects/project-3/frontend/src/app/toolbar/map-interaction/map-interaction.component.scss +++ b/projects/project-3/frontend/src/app/toolbar/map-interaction/map-interaction.component.scss @@ -1,3 +1,4 @@ .button-wiki:hover { background: #086ed2; + text-decoration: none; } diff --git a/projects/project-3/frontend/src/styles.scss b/projects/project-3/frontend/src/styles.scss index 09cae2f..abe276e 100644 --- a/projects/project-3/frontend/src/styles.scss +++ b/projects/project-3/frontend/src/styles.scss @@ -29,28 +29,48 @@ label.mat-checkbox-layout { background: rgba(255, 255, 255, 0.8); line-height: 24px; color: #555; -} -.legend h4 { - text-align: center; - font-size: 16px; - margin: 2px 12px 8px; - color: #777; + + h4 { + text-align: center; + font-size: 16px; + margin: 2px 12px 8px; + color: #777; + } + + span { + position: relative; + bottom: 3px; + } + + i { + width: 18px; + height: 3px; + float: left; + margin: 7px 8px 0 0; + opacity: 0.7; + + .icon { + background-size: 18px; + background-color: rgba(255, 255, 255, 1); + } + } } -.legend span { - position: relative; - bottom: 3px; -} +.legend-accidents { + background: rgb(57, 57, 57); + color: white; -.legend i { - width: 18px; - height: 3px; - float: left; - margin: 7px 8px 0 0; - opacity: 0.7; -} + h4 { + color: white; + } -.legend i.icon { - background-size: 18px; - background-color: rgba(255, 255, 255, 1); + div { + display: flex; + justify-content: left; + align-items: baseline; + + svg { + margin-right: 8px; + } + } }