hft-informatik/geovisualisierung
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add station-link navigation in tables and add default start value in range-picker

Browse Source
This commit is contained in:
Tim Herbst 2020-12-28 11:45:53 +01:00
parent 3600f3a6e3
commit 1b82cd6b8f
3 changed files with 102 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -82,7 +82,7 @@
<ng-container matColumnDef="endStationName">
<th *matHeaderCellDef mat-header-cell> station of lend destination</th>
<td *matCellDef="let element" mat-cell><a
[routerLink]="['/dashboard/', element.id]">{{element.endStationName}}</a></td>
[routerLink]="['/dashboard/', element.stationId]">{{element.stationName}}</a></td>
</ng-container>
<ng-container matColumnDef="number">
@ -104,7 +104,7 @@
<ng-container matColumnDef="startStationName">
<th *matHeaderCellDef mat-header-cell> station of lend origin</th>
<td *matCellDef="let element" mat-cell><a
[routerLink]="['/dashboard/', element.id]"> {{element.startStationName}}</a></td>
[routerLink]="['/dashboard/', element.stationId]"> {{element.stationName}}</a></td>
</ng-container>
<ng-container matColumnDef="number">

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

@ -1,10 +1,11 @@
import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {ActivatedRoute, Router} from '@angular/router';
import {DashboardService} from '../service/dashboard.service';
import {IDashboardCommonBikePoint} from '../service/domain/dashboard-common-bike-point';
import {MatTableDataSource} from '@angular/material/table';
import {FormBuilder, FormControl, FormGroup} from '@angular/forms';
import {MapService} from '../service/map.service';
import 'humanize-duration/humanize-duration';
import {
ApexAxisChartSeries,
@ -68,6 +69,7 @@ export class DashboardComponent implements OnInit {
constructor(
private route: ActivatedRoute,
private router: Router,
private service: DashboardService,
private map: MapService,
private changeDetectorRefs: ChangeDetectorRef,
@ -109,98 +111,103 @@ export class DashboardComponent implements OnInit {
end: new FormControl()
})
});
this.changeDetectorRefs.detectChanges();
this.route.params.subscribe(params => {
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.fetchDashboardInit(this.route.snapshot.paramMap.get('id')).then(data => {
this.station = data;
this.maxStartDate = new Date(data.maxStartDate);
this.maxEndDate = new Date(data.maxEndDate);
this.initDashboard();
});
this.service.fetchBikePointForStatus(this.route.snapshot.paramMap.get('id')).then(data => {
this.bikePoint = data;
const NbBlockedDocks = data.status.NbDocks - data.status.NbBikes - data.status.NbEmptyDocks;
this.bikePointChartOptions = {
series: [
{
name: 'Bikes',
data: [data.status.NbBikes]
},
{
name: 'Empty docks',
data: [data.status.NbEmptyDocks]
},
{
name: 'Blocked docks',
data: [NbBlockedDocks]
}
],
colors: ['#51ca49', '#8f8e8e', '#f00'],
chart: {
type: 'bar',
height: 180,
stacked: true,
toolbar: {
show: false
}
},
plotOptions: {
bar: {
horizontal: true,
dataLabels: {
position: 'center'
this.service.fetchBikePointForStatus(params.id).then(data => {
this.bikePoint = data;
const NbBlockedDocks = data.status.NbDocks - data.status.NbBikes - data.status.NbEmptyDocks;
this.bikePointChartOptions = {
series: [
{
name: 'Bikes',
data: [data.status.NbBikes]
},
{
name: 'Empty docks',
data: [data.status.NbEmptyDocks]
},
{
name: 'Blocked docks',
data: [NbBlockedDocks]
}
],
colors: ['#51ca49', '#8f8e8e', '#f00'],
chart: {
type: 'bar',
height: 180,
stacked: true,
toolbar: {
show: false
}
},
plotOptions: {
bar: {
horizontal: true,
dataLabels: {
position: 'center'
}
}
},
dataLabels: {
enabled: true,
style: {
fontSize: '20px',
colors: ['#fff']
}
},
stroke: {
show: false
},
xaxis: {
labels: {
show: false
},
axisBorder: {
show: false
},
axisTicks: {
show: false
}
},
yaxis: {
show: false,
title: {
text: undefined
},
axisBorder: {
show: false
},
min: 0,
max: data.status.NbDocks
},
tooltip: {
enabled: false,
},
fill: {
opacity: 1
},
legend: {
position: 'bottom',
horizontalAlign: 'right',
fontSize: '14px'
}
},
dataLabels: {
enabled: true,
style: {
fontSize: '20px',
colors: ['#fff']
}
},
stroke: {
show: false
},
xaxis: {
labels: {
show: false
},
axisBorder: {
show: false
},
axisTicks: {
show: false
}
},
yaxis: {
show: false,
title: {
text: undefined
},
axisBorder: {
show: false
},
min: 0,
max: data.status.NbDocks
},
tooltip: {
enabled: false,
},
fill: {
opacity: 1
},
legend: {
position: 'bottom',
horizontalAlign: 'right',
fontSize: '14px'
}
};
};
});
});
}
initDashboard(): void {
const initDate = this.maxEndDate.toISOString().substring(0, 10);
this.form.get('daterange').get('start').setValue(initDate);
this.form.get('daterange').get('end').setValue(initDate);
this.service.fetchDashboardStationTo(this.station.id, initDate, initDate).then((source) => {
this.stationToSource = source;
this.changeDetectorRefs.detectChanges();
@ -465,4 +472,8 @@ export class DashboardComponent implements OnInit {
};
});
}
routeToStation(stationId: string): void {
this.router.navigate(['/dashboard', stationId]);
}
}

4
projects/project-3/frontend/src/app/service/map.service.ts
View File

@ -42,6 +42,10 @@ export class MapService {
}
public initDashboardMap(lat: number, lon: number, zoom: number): void {
if(this.miniMap) {
this.miniMap.off();
this.miniMap.remove();
}
this.miniMap = L.map('minimap').setView([lat, lon], zoom);
this.miniMap.addLayer(new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',