-
-
+
| - |
- |
- 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 map | -Icon | +
|---|
-
+
+
+
+
-
-
+
| - |
- |
- 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 map | -Icon | +
|---|
-
+
+
+
+
Select a range to analyze data
- 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;
+ }
+ }
}