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"> <ng-container matColumnDef="endStationName">
<th *matHeaderCellDef mat-header-cell> station of lend destination</th> <th *matHeaderCellDef mat-header-cell> station of lend destination</th>
<td *matCellDef="let element" mat-cell><a <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>
<ng-container matColumnDef="number"> <ng-container matColumnDef="number">
@ -104,7 +104,7 @@
<ng-container matColumnDef="startStationName"> <ng-container matColumnDef="startStationName">
<th *matHeaderCellDef mat-header-cell> station of lend origin</th> <th *matHeaderCellDef mat-header-cell> station of lend origin</th>
<td *matCellDef="let element" mat-cell><a <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>
<ng-container matColumnDef="number"> <ng-container matColumnDef="number">

19
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 {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 {DashboardService} from '../service/dashboard.service';
import {IDashboardCommonBikePoint} from '../service/domain/dashboard-common-bike-point'; import {IDashboardCommonBikePoint} from '../service/domain/dashboard-common-bike-point';
import {MatTableDataSource} from '@angular/material/table'; import {MatTableDataSource} from '@angular/material/table';
import {FormBuilder, FormControl, FormGroup} from '@angular/forms'; import {FormBuilder, FormControl, FormGroup} from '@angular/forms';
import {MapService} from '../service/map.service'; import {MapService} from '../service/map.service';
import 'humanize-duration/humanize-duration';
import { import {
ApexAxisChartSeries, ApexAxisChartSeries,
@ -68,6 +69,7 @@ export class DashboardComponent implements OnInit {
constructor( constructor(
private route: ActivatedRoute, private route: ActivatedRoute,
private router: Router,
private service: DashboardService, private service: DashboardService,
private map: MapService, private map: MapService,
private changeDetectorRefs: ChangeDetectorRef, private changeDetectorRefs: ChangeDetectorRef,
@ -109,15 +111,16 @@ export class DashboardComponent implements OnInit {
end: new FormControl() end: new FormControl()
}) })
}); });
this.changeDetectorRefs.detectChanges();
this.service.fetchDashboardInit(this.route.snapshot.paramMap.get('id')).then(data => { this.route.params.subscribe(params => {
this.service.fetchDashboardInit(params.id).then(data => {
this.station = data; this.station = data;
this.maxStartDate = new Date(data.maxStartDate); this.maxStartDate = new Date(data.maxStartDate);
this.maxEndDate = new Date(data.maxEndDate); this.maxEndDate = new Date(data.maxEndDate);
this.initDashboard(); this.initDashboard();
}); });
this.service.fetchBikePointForStatus(this.route.snapshot.paramMap.get('id')).then(data => { this.service.fetchBikePointForStatus(params.id).then(data => {
this.bikePoint = data; this.bikePoint = data;
const NbBlockedDocks = data.status.NbDocks - data.status.NbBikes - data.status.NbEmptyDocks; const NbBlockedDocks = data.status.NbDocks - data.status.NbBikes - data.status.NbEmptyDocks;
this.bikePointChartOptions = { this.bikePointChartOptions = {
@ -197,10 +200,14 @@ export class DashboardComponent implements OnInit {
} }
}; };
}); });
});
} }
initDashboard(): void { initDashboard(): void {
const initDate = this.maxEndDate.toISOString().substring(0, 10); 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.service.fetchDashboardStationTo(this.station.id, initDate, initDate).then((source) => {
this.stationToSource = source; this.stationToSource = source;
this.changeDetectorRefs.detectChanges(); 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 { 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 = L.map('minimap').setView([lat, lon], zoom);
this.miniMap.addLayer(new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 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', attribution: 'Map data <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',