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

rearrange dashboard-components

Browse Source
This commit is contained in:
Tim Herbst 2020-12-26 16:26:27 +01:00
parent 02ff4267bf
commit f64fe65ed6
4 changed files with 124 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,27 +1,31 @@
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<mat-toolbar class="mat-toolbar" color="primary">
<button (click)="sidenav.toggle()" aria-label="Example icon-button with menu icon" class="example-icon"
mat-icon-button>
<mat-icon>menu</mat-icon>
</button>
<span>Bike Stations in London</span>
<span class="toolbar-spacer"></span>
<a class="button-wiki" color="primary"
href="https://gitlab.com/marcel.schwarz/geovisualisierung/-/wikis/Projektarbeit%203" mat-flat-button
target="_blank">
<mat-icon>library_books</mat-icon>
Wiki</a>
Wiki
</a>
<a class="button-back" color="primary"
mat-flat-button routerLink="/">
<mat-icon>map</mat-icon>
back to map</a>
back to map
</a>
</mat-toolbar>
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #sidenav class="sidenav" mode="side" opened role="region">
<mat-sidenav-container>
<mat-sidenav-content class="mat-sidenav-content" fxFlex fxLayout="column" fxLayoutAlign="center">
<div class="container-map" fxFlex="100%" fxLayout="row" fxLayoutAlign="center">
<div class="user-input" fxFlex="20%" fxLayout="column">
<mat-card class="mat-card-info" fxFlex>
<mat-card-content>
<form [formGroup]="form">
<mat-form-field appearance="fill" class="datepicker" fxLayout="column" fxLayoutAlign="center center">
<mat-label>Enter a range</mat-label>
<mat-date-range-input [max]="maxEndDate" [min]="maxStartDate" [rangePicker]="picker" formGroupName="daterange">
<mat-date-range-input [max]="maxEndDate" [min]="maxStartDate" [rangePicker]="picker"
formGroupName="daterange">
<input formControlName="start" matStartDate placeholder="Start date">
<input formControlName="end" matEndDate placeholder="End date">
</mat-date-range-input>
@ -35,26 +39,33 @@
<span id="submit-date-span"> reload dashboard</span>
</button>
</div>
</mat-sidenav>
<mat-sidenav-content fxFlex fxLayout="column" fxLayoutAlign="center">
</mat-card-content>
</mat-card>
<div class="container-info">
<mat-card fxFlex>
<mat-card-header>
<div class="example-header-image" mat-card-avatar></div>
<mat-card-title>{{station?.commonName}}</mat-card-title>
</mat-card-header>
<mat-card-content></mat-card-content>
</mat-card>
</div>
</div>
<div class="container-map" fxFlex="100%" fxLayout="column">
<mat-card class="mat-card-map" fxFlex fxLayout="column">
<div class="mini-map" fxFlex fxLayout="column">
<mat-card class="mat-card-map" fxFlex fxLayout="row">
<div class="mini-map" fxFlex>
<div class="map-frame" fxFill>
<div fxFill id="minimap"></div>
</div>
</div>
</mat-card>
</div>
<div class="container container-table"
fxFlex fxLayout="row" fxLayoutAlign="center"
>
<div class="dashboard-table-to"
fxFlex="40%"
>
<div class="container-table" fxFlex fxLayout="row" fxLayoutAlign="center">
<div class="dashboard-table-to" fxFlex>
<table [dataSource]="stationToSource" class="mat-elevation-z8" fxFill mat-table>
<ng-container matColumnDef="endStationName">
<th *matHeaderCellDef mat-header-cell> station of lend destination</th>
@ -75,9 +86,7 @@
<tr *matRowDef="let row; columns: displayedColumnsTo;" mat-row></tr>
</table>
</div>
<div class="dashboard-table-from"
fxFlex="40%"
>
<div class="dashboard-table-from" fxFlex>
<table [dataSource]="stationFromSource" class="mat-elevation-z9" fxFill mat-table>
<ng-container matColumnDef="startStationName">
<th *matHeaderCellDef mat-header-cell> station of lend origin</th>
@ -102,13 +111,12 @@
</div>
<div class="container-borrow-duration" fxLayout="row" fxLayoutAlign="center">
<mat-card fxFlex="85%" fxLayout="column"
>
<mat-card-header>
<mat-card fxFlex fxLayout="column">
<mat-card-header class="chart-header">
<mat-card-title>Borrow Duration</mat-card-title>
</mat-card-header>
<mat-card-content fxFlex fxLayout="row" fxLayoutAlign="center">
<div fxFlex="90%" id="Station-Dashboard-Borrow-Duration">
<div class="station-dashboard-borrow-duration" fxFlex="97%">
<apx-chart
[chart]="durationChartOptions.chart"
[dataLabels]="durationChartOptions.dataLabels"
@ -118,12 +126,31 @@
[series]="durationChartOptions.series"
[stroke]="durationChartOptions.stroke"
[xaxis]="durationChartOptions.xaxis"
[yaxis]="durationChartOptions.yaxis"
></apx-chart>
[yaxis]="durationChartOptions.yaxis"></apx-chart>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="container-borrow-time" fxLayout="row" fxLayoutAlign="center">
<mat-card fxFlex fxLayout="column">
<mat-card-header class="chart-header">
<mat-card-title>Borrow Time</mat-card-title>
</mat-card-header>
<mat-card-content fxFlex fxLayout="row" fxLayoutAlign="center">
<div class="station-dashboard-borrow-time" fxFlex>
<apx-chart
[chart]="timeChartOptions.chart"
[dataLabels]="timeChartOptions.dataLabels"
[fill]="timeChartOptions.fill"
[series]="timeChartOptions.series"
[stroke]="timeChartOptions.stroke"
[xaxis]="timeChartOptions.xaxis"
[yaxis]="timeChartOptions.yaxis"></apx-chart>
</div>
</mat-card-content>
</mat-card>
</div>
</mat-sidenav-content>
</mat-sidenav-container>

74
projects/project-3/frontend/src/app/dashboard/dashboard.component.scss
View File

@ -6,17 +6,7 @@ mat-sidenav-content {
flex: 1 1 auto;
}
.sidenav {
height: 100vh;
width: 15vw;
min-width: 20em;
}
mat-sidenav-container, mat-sidenav-content, mat-sidenav {
height: 100vh;
}
.button-back:hover {
.button-back:hover, .button-wiki:hover {
background: #5a34a0;
}
@ -24,18 +14,31 @@ mat-sidenav-container, mat-sidenav-content, mat-sidenav {
padding: 10px;
}
.button-wiki:hover {
background: #5a34a0;
.user-input {
height: 10em;
}
.datepicker {
margin-top: 100px;
margin-top: 2em;
}
.submit-date {
padding-bottom: 2em;
}
.mat-card {
padding: 1px 1px 1px;
margin: 2em;
margin: 10px;
}
.example-header-image {
margin-top: 1em;
margin-left: 1em;
margin-bottom: 1em;
background-image: url('../../assets/bike-point.png');
background-size: cover;
}
.mat-card-map {
padding: 1px;
}
@ -44,36 +47,43 @@ mat-sidenav-container, mat-sidenav-content, mat-sidenav {
margin-top: 1em;
}
.mat-card-header {
display: flex;
.chart-header {
display: inline-flex;
justify-content: center;
}
.container-map {
height: 40vh;
height: 40em;
margin: 1em 2em;
}
.container-table {
height: 20vh;
}
.container-borrow-duration {
height: 40vh
}
.container-bottom {
height: 30vh
height: 20em;
margin: 1em 3em;
}
.dashboard-table-to {
margin: 5px;
margin-right: 1em;
}
.dashboard-table-from {
margin: 5px;
margin-left: 1em;
}
.dashboard-chart-borrow-time {
margin: 5px;
background: chartreuse;
.container-borrow-duration {
height: 40em;
margin: 1em 2em;
}
.container-borrow-time {
height: 40em;
margin: 1em 2em;
}
.station-dashboard-borrow-time {
margin: 1em;
}
.station-dashboard-borrow-duration {
margin: 1em;
}

2
projects/project-3/frontend/src/app/map/pop-up/pop-up.component.ts
View File

@ -40,6 +40,4 @@ export class PopUpComponent implements OnInit {
public route(): void {
this.router.navigate(['/dashboard', this.station.id]);
}
}

14
projects/project-3/frontend/src/app/service/dashboard.service.ts
View File

@ -15,14 +15,20 @@ export class DashboardService {
}
public async fetch_dashboard_station_to(id: string, startDate: string, endDate: string): Promise<any> {
return await this.client.get(environment.apiUrl + `latest/dashboard/${id}/to?start_date=${startDate}&end_date=${endDate}`).toPromise();
return await this.client.get(
environment.apiUrl + `latest/dashboard/${id}/to?start_date=${startDate}&end_date=${endDate}`
).toPromise();
}
public async fetch_dashboard_station_from(id: string, startDate: string, endDate: string): Promise<any> {
return await this.client.get(environment.apiUrl + `latest/dashboard/${id}/from?start_date=${startDate}&end_date=${endDate}`).toPromise();
return await this.client.get(
environment.apiUrl + `latest/dashboard/${id}/from?start_date=${startDate}&end_date=${endDate}`
).toPromise();
}
public async fetch_dashboard_station_duration(id: string, startDate: string, endDate: string): Promise<any> {
return await this.client.get(environment.apiUrl + `latest/dashboard/${id}/duration?start_date=${startDate}&end_date=${endDate}`).toPromise();
public async fetch_dashboard_station_charts(id: string, startDate: string, endDate: string, type: string): Promise<any> {
return await this.client.get(
environment.apiUrl + `latest/dashboard/${id}/${type}?start_date=${startDate}&end_date=${endDate}`
).toPromise();
}
}