God damn, it's responsive now!
This commit is contained in:
parent
52e68a4f28
commit
c73d99bc51
16249
projects/project-3/frontend/package-lock.json
generated
16249
projects/project-3/frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -23,13 +23,12 @@
|
||||
"@angular/platform-browser-dynamic": "~10.2.0",
|
||||
"@angular/router": "~10.2.0",
|
||||
"apexcharts": "^3.23.0",
|
||||
"bootstrap": "^3.4.1",
|
||||
"bootstrap": "^4.5.3",
|
||||
"jquery": "^3.5.1",
|
||||
"leaflet": "~1.3.1",
|
||||
"leaflet.heat": "^0.2.0",
|
||||
"leaflet.markercluster": "^1.4.1",
|
||||
"ng-apexcharts": "^1.5.6",
|
||||
"popper.js": "^1.14.3",
|
||||
"rxjs": "~6.6.0",
|
||||
"seconds-to-human-time": "^1.0.0",
|
||||
"tslib": "^2.0.0",
|
||||
|
||||
@ -1,42 +1,36 @@
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<mat-toolbar class="mat-toolbar" color="primary">
|
||||
<mat-toolbar class="toolbar" color="primary">
|
||||
<span routerLink="/">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
|
||||
<span class="spacer"></span>
|
||||
<a 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>
|
||||
<a class="button-back" color="primary"
|
||||
mat-flat-button routerLink="/">
|
||||
<a color="primary" mat-flat-button routerLink="/">
|
||||
<mat-icon>map</mat-icon>
|
||||
back to map
|
||||
</a>
|
||||
</mat-toolbar>
|
||||
<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="input-container" fxFlex="35%" fxLayout="column">
|
||||
<app-user-input
|
||||
fxFlex
|
||||
(startEndDate)="onSubmit($event)"
|
||||
></app-user-input>
|
||||
</div>
|
||||
<app-mini-map fxFlex></app-mini-map>
|
||||
<div class="px-5 py-3" style="background: #2f2f2f">
|
||||
<div>
|
||||
<div class="row mb-3">
|
||||
<app-user-input (startEndDate)="onSubmit($event)" class="col-xl-5 col-lg-6 col-md-12 mb-md-3"></app-user-input>
|
||||
<app-mini-map class="col-xl-7 col-lg-6 col-md-12"></app-mini-map>
|
||||
</div>
|
||||
|
||||
<div class="container-table" fxFlex fxLayout="row" fxLayoutAlign="space-evenly center">
|
||||
<app-table fxFlex></app-table>
|
||||
<div class="mb-3">
|
||||
<app-table></app-table>
|
||||
</div>
|
||||
|
||||
<div class="container-borrow-duration" fxLayout="row" fxLayoutAlign="center">
|
||||
<app-rent-duration-chart fxFlex></app-rent-duration-chart>
|
||||
<div class="row mb-3">
|
||||
<app-rent-duration-chart class="col"></app-rent-duration-chart>
|
||||
</div>
|
||||
|
||||
<div class="container-borrow-time" fxLayout="row" fxLayoutAlign="center">
|
||||
<app-rent-time-chart fxFlex></app-rent-time-chart>
|
||||
<div class="row mb-3">
|
||||
<app-rent-time-chart class="col"></app-rent-time-chart>
|
||||
</div>
|
||||
</mat-sidenav-content>
|
||||
</mat-sidenav-container>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,74 +1,16 @@
|
||||
mat-sidenav-content {
|
||||
background: #2f2f2f;
|
||||
}
|
||||
.toolbar {
|
||||
height: 5vh;
|
||||
|
||||
.toolbar-spacer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.toolbar-spacer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.button-back:hover, .button-wiki:hover {
|
||||
background: #086ed2;
|
||||
}
|
||||
a:hover {
|
||||
background: #086ed2;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.submit-date {
|
||||
margin-top: 1em;
|
||||
margin-left: 4em;
|
||||
}
|
||||
|
||||
#chart {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.mat-card {
|
||||
padding: 1px 1px 1px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.example-header-image {
|
||||
margin-top: 1em;
|
||||
margin-left: 1em;
|
||||
margin-bottom: 1em;
|
||||
background-image: url('../../assets/bike-point-blue.png');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.mat-card-map {
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.mat-card-title {
|
||||
margin-top: 1em;
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
.mat-card-subtitle {
|
||||
margin-left: 39px;
|
||||
}
|
||||
|
||||
.container-map {
|
||||
height: 40em;
|
||||
margin: 1em 2em;
|
||||
}
|
||||
|
||||
.container-table {
|
||||
height: 20em;
|
||||
margin: 1em 3em;
|
||||
}
|
||||
|
||||
.container-borrow-duration {
|
||||
height: 41em;
|
||||
margin: 1em 2em;
|
||||
}
|
||||
|
||||
.container-borrow-time {
|
||||
height: 44em;
|
||||
margin: 1em 2em;
|
||||
}
|
||||
|
||||
.station-dashboard-borrow-time {
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.station-dashboard-borrow-duration {
|
||||
margin: 1em;
|
||||
.spacer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,3 @@
|
||||
<mat-card class="mat-card-map" fxFlex>
|
||||
<div class="mini-map" fxFlex>
|
||||
<div class="map-frame" fxFill>
|
||||
<div fxFill id="minimap"></div>
|
||||
</div>
|
||||
</div>
|
||||
<mat-card class="p-0">
|
||||
<div id="minimap" style="height: 30rem"></div>
|
||||
</mat-card>
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
.mat-card {
|
||||
padding: 1px 1px 1px;
|
||||
margin: 10px;
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
.station-dashboard-borrow-duration {
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.mat-card {
|
||||
padding: 1px 1px 1px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.mat-card-title {
|
||||
margin-top: 1em;
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
.mat-card-subtitle {
|
||||
margin-left: 39px;
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
.station-dashboard-borrow-duration {
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.mat-card {
|
||||
padding: 1px 1px 1px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.mat-card-title {
|
||||
margin-top: 1em;
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
.mat-card-subtitle {
|
||||
margin-left: 39px;
|
||||
}
|
||||
@ -1,91 +1,88 @@
|
||||
<div class="dashboard-table-to" fxFlex>
|
||||
<table [dataSource]="stationToSource" class="mat-elevation-z8" fxFill mat-table>
|
||||
<ng-container matColumnDef="select">
|
||||
<th *matHeaderCellDef mat-header-cell></th>
|
||||
<td *matCellDef="let row" mat-cell>
|
||||
<mat-checkbox [disabled]="isCheckBoxDisable(row)"
|
||||
(change)="$event ? selectRow($event, row) : null" (click)="$event.stopPropagation()"
|
||||
[checked]="selectionModel.isSelected(row)"
|
||||
matTooltip="toggle to view marker on map"
|
||||
matTooltipPosition="above">
|
||||
</mat-checkbox>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="endStationName">
|
||||
<th *matHeaderCellDef mat-header-cell> station of rental destination</th>
|
||||
<td *matCellDef="let element" mat-cell><a
|
||||
[routerLink]="['/dashboard/', element.stationId]">{{element.stationName}}</a></td>
|
||||
</ng-container>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-12 mb-md-3">
|
||||
<table [dataSource]="stationToSource" class="mat-elevation-z0 w-100" mat-table>
|
||||
<ng-container matColumnDef="select">
|
||||
<th *matHeaderCellDef mat-header-cell></th>
|
||||
<td *matCellDef="let row" class="p-3" mat-cell>
|
||||
<mat-checkbox (change)="$event ? selectRow($event, row) : null"
|
||||
(click)="$event.stopPropagation()"
|
||||
[checked]="selectionModel.isSelected(row)"
|
||||
[disabled]="isCheckBoxDisable(row)"
|
||||
matTooltip="toggle to view marker on map"
|
||||
matTooltipPosition="above">
|
||||
</mat-checkbox>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="endStationName">
|
||||
<th *matHeaderCellDef mat-header-cell> station of rental destination</th>
|
||||
<td *matCellDef="let element" mat-cell>
|
||||
<a [routerLink]="['/dashboard/', element.stationId]">{{element.stationName}}</a>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="number">
|
||||
<th *matHeaderCellDef mat-header-cell> number of drives</th>
|
||||
<td *matCellDef="let element" mat-cell> {{element.number}} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="number">
|
||||
<th *matHeaderCellDef mat-header-cell> number of drives</th>
|
||||
<td *matCellDef="let element" mat-cell> {{element.number}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="avgDuration">
|
||||
<th *matHeaderCellDef mat-header-cell> average rental duration</th>
|
||||
<td *matCellDef="let element" mat-cell> {{humanizeAvgDuration(element.avgDuration)}} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="avgDuration">
|
||||
<th *matHeaderCellDef mat-header-cell> average rental duration</th>
|
||||
<td *matCellDef="let element" mat-cell> {{humanizeAvgDuration(element.avgDuration)}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="marker">
|
||||
<th *matHeaderCellDef mat-header-cell> icon on map</th>
|
||||
<td *matCellDef="let element" mat-cell><img [src]="drawIconInTable(element)" alt="marker"></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="marker">
|
||||
<th *matHeaderCellDef mat-header-cell> icon on map</th>
|
||||
<td *matCellDef="let element" mat-cell><img [src]="drawIconInTable(element)" alt="marker"></td>
|
||||
</ng-container>
|
||||
|
||||
<tr *matHeaderRowDef="displayedColumnsTo" mat-header-row></tr>
|
||||
<tr *matRowDef="let row; columns: displayedColumnsTo;" mat-row></tr>
|
||||
</table>
|
||||
<div *ngIf="isLoadingToSource"
|
||||
style="display: flex; justify-content: center; align-items: center; background: white; padding: 10px">
|
||||
<mat-progress-spinner
|
||||
color="primary"
|
||||
mode="indeterminate">
|
||||
</mat-progress-spinner>
|
||||
<tr *matHeaderRowDef="displayedColumnsTo" mat-header-row></tr>
|
||||
<tr *matRowDef="let row; columns: displayedColumnsTo;" mat-row></tr>
|
||||
</table>
|
||||
<div *ngIf="isLoadingToSource" class="col d-flex align-items-center justify-content-center">
|
||||
<mat-progress-spinner color="primary" mode="indeterminate"></mat-progress-spinner>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<table [dataSource]="stationFromSource" class="mat-elevation-z0 w-100" mat-table>
|
||||
<ng-container matColumnDef="select">
|
||||
<th *matHeaderCellDef mat-header-cell></th>
|
||||
<td *matCellDef="let row" class="p-3" mat-cell>
|
||||
<mat-checkbox (change)="$event ? selectRow($event, row) : null"
|
||||
(click)="$event.stopPropagation()"
|
||||
[checked]="selectionModel.isSelected(row)"
|
||||
[disabled]="isCheckBoxDisable(row)"
|
||||
matTooltip="toggle to view marker on map"
|
||||
matTooltipPosition="above">
|
||||
</mat-checkbox>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="startStationName">
|
||||
<th *matHeaderCellDef mat-header-cell> station of rental origin</th>
|
||||
<td *matCellDef="let element" mat-cell>
|
||||
<a [routerLink]="['/dashboard/', element.stationId]"> {{element.stationName}}</a>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="number">
|
||||
<th *matHeaderCellDef mat-header-cell> number of drives</th>
|
||||
<td *matCellDef="let element" mat-cell> {{element.number}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="avgDuration">
|
||||
<th *matHeaderCellDef mat-header-cell> average rental duration</th>
|
||||
<td *matCellDef="let element" mat-cell> {{humanizeAvgDuration(element.avgDuration)}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="marker">
|
||||
<th *matHeaderCellDef mat-header-cell> icon on map</th>
|
||||
<td *matCellDef="let element" mat-cell><img [src]="drawIconInTable(element)" alt="marker"></td>
|
||||
</ng-container>
|
||||
|
||||
<tr *matHeaderRowDef="displayedColumnsFrom" mat-header-row></tr>
|
||||
<tr *matRowDef="let row; columns: displayedColumnsFrom;" mat-row></tr>
|
||||
</table>
|
||||
<div *ngIf="isLoadingFromSource" class="col d-flex align-items-center justify-content-center">
|
||||
<mat-progress-spinner color="primary" mode="indeterminate"></mat-progress-spinner>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard-table-from" fxFlex>
|
||||
<table [dataSource]="stationFromSource" class="mat-elevation-z9" fxFill mat-table>
|
||||
<ng-container matColumnDef="select">
|
||||
<th *matHeaderCellDef mat-header-cell></th>
|
||||
<td *matCellDef="let row" mat-cell>
|
||||
<mat-checkbox [disabled]="isCheckBoxDisable(row)"
|
||||
(change)="$event ? selectRow($event, row) : null" (click)="$event.stopPropagation()"
|
||||
[checked]="selectionModel.isSelected(row)"
|
||||
matTooltip="toggle to view marker on map"
|
||||
matTooltipPosition="above">
|
||||
</mat-checkbox>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="startStationName">
|
||||
<th *matHeaderCellDef mat-header-cell> station of rental origin</th>
|
||||
<td *matCellDef="let element" mat-cell><a
|
||||
[routerLink]="['/dashboard/', element.stationId]"> {{element.stationName}}</a></td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="number">
|
||||
<th *matHeaderCellDef mat-header-cell> number of drives</th>
|
||||
<td *matCellDef="let element" mat-cell> {{element.number}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="avgDuration">
|
||||
<th *matHeaderCellDef mat-header-cell> average rental duration</th>
|
||||
<td *matCellDef="let element" mat-cell> {{humanizeAvgDuration(element.avgDuration)}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="marker">
|
||||
<th *matHeaderCellDef mat-header-cell> icon on map</th>
|
||||
<td *matCellDef="let element" mat-cell><img [src]="drawIconInTable(element)" alt="marker"></td>
|
||||
</ng-container>
|
||||
|
||||
<tr *matHeaderRowDef="displayedColumnsFrom" mat-header-row></tr>
|
||||
<tr *matRowDef="let row; columns: displayedColumnsFrom;" mat-row></tr>
|
||||
</table>
|
||||
<div *ngIf="isLoadingFromSource"
|
||||
style="display: flex; justify-content: center; align-items: center; background: white; padding: 10px">
|
||||
<mat-progress-spinner
|
||||
color="primary"
|
||||
mode="indeterminate">
|
||||
</mat-progress-spinner>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -4,12 +4,9 @@ img {
|
||||
|
||||
a {
|
||||
color: black;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.dashboard-table-to {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.dashboard-table-from {
|
||||
margin-left: 1em;
|
||||
.mat-checkbox-layout label {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
@ -1,13 +1,15 @@
|
||||
<mat-card fxFlex fxLayout="column">
|
||||
<mat-card-header fxFlex="15%">
|
||||
<div class="header-image" mat-card-avatar></div>
|
||||
<mat-card-title style="margin-top: 1em; margin-left: 0">{{bikePoint?.commonName}}</mat-card-title>
|
||||
<mat-card style="height: 30rem">
|
||||
<mat-card-header>
|
||||
<mat-card-title class="d-flex align-items-center">
|
||||
<div class="header-image d-inline-flex" mat-card-avatar></div>
|
||||
{{bikePoint?.commonName}}
|
||||
</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content fxFlex="70%" fxLayout="column" fxLayoutAlign="space-between">
|
||||
<div class="user-input" fxFlex fxLayout="row" fxLayoutAlign="start center">
|
||||
<form [formGroup]="form" style="margin-left: 2em">
|
||||
<p>Select a range to analyze data</p>
|
||||
<mat-form-field appearance="fill" class="datepicker">
|
||||
<mat-card-content class="p-4 d-flex flex-column justify-content-center">
|
||||
<div>
|
||||
<p>Select a range to analyze data</p>
|
||||
<form [formGroup]="form" class="d-flex flex-row align-items-center justify-content-between">
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Enter a range</mat-label>
|
||||
<mat-date-range-input [max]="maxEndDate" [min]="maxStartDate" [rangePicker]="picker"
|
||||
formGroupName="dateRange">
|
||||
@ -17,32 +19,28 @@
|
||||
<mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
|
||||
<mat-date-range-picker #picker></mat-date-range-picker>
|
||||
</mat-form-field>
|
||||
</form>
|
||||
<div class="submit-date">
|
||||
<button (click)="onSubmit()" color="primary" mat-raised-button>
|
||||
<button (click)="onSubmit()" class="mt-n3" color="primary" mat-raised-button>
|
||||
<mat-icon>dashboard</mat-icon>
|
||||
<span id="submit-date-span"> reload</span>
|
||||
reload
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="chart-bikepoint-availability" fxFlex fxLayout="column">
|
||||
<div id="chart">
|
||||
<apx-chart
|
||||
[chart]="chartOptions.chart"
|
||||
[colors]="chartOptions.colors"
|
||||
[dataLabels]="chartOptions.dataLabels"
|
||||
[fill]="chartOptions.fill"
|
||||
[legend]="chartOptions.legend"
|
||||
[plotOptions]="chartOptions.plotOptions"
|
||||
[series]="chartOptions.series"
|
||||
[stroke]="chartOptions.stroke"
|
||||
[subtitle]="chartOptions.subtitle"
|
||||
[title]="chartOptions.title"
|
||||
[tooltip]="chartOptions.tooltip"
|
||||
[xaxis]="chartOptions.xaxis"
|
||||
[yaxis]="chartOptions.yaxis"
|
||||
></apx-chart>
|
||||
</div>
|
||||
<div class="ml-n4" id="chart">
|
||||
<apx-chart
|
||||
[chart]="chartOptions.chart"
|
||||
[colors]="chartOptions.colors"
|
||||
[dataLabels]="chartOptions.dataLabels"
|
||||
[fill]="chartOptions.fill"
|
||||
[legend]="chartOptions.legend"
|
||||
[plotOptions]="chartOptions.plotOptions"
|
||||
[series]="chartOptions.series"
|
||||
[stroke]="chartOptions.stroke"
|
||||
[subtitle]="chartOptions.subtitle"
|
||||
[title]="chartOptions.title"
|
||||
[tooltip]="chartOptions.tooltip"
|
||||
[xaxis]="chartOptions.xaxis"
|
||||
[yaxis]="chartOptions.yaxis"
|
||||
></apx-chart>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
@ -1,30 +1,4 @@
|
||||
.header-image {
|
||||
margin-top: 1em;
|
||||
margin-left: 1em;
|
||||
margin-bottom: 1em;
|
||||
background-image: url('../../../assets/bike-point-blue.png');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.mat-card {
|
||||
padding: 1px 1px 1px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.mat-card-title {
|
||||
margin-top: 1em;
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
.mat-card-subtitle {
|
||||
margin-left: 39px;
|
||||
}
|
||||
|
||||
#chart {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.submit-date {
|
||||
margin-top: 1em;
|
||||
margin-left: 4em;
|
||||
}
|
||||
|
||||
@ -11,6 +11,12 @@ body {
|
||||
@import "~leaflet/dist/leaflet.css";
|
||||
@import "~leaflet.markercluster/dist/MarkerCluster.css";
|
||||
@import "~leaflet.markercluster/dist/MarkerCluster.Default.css";
|
||||
@import "~bootstrap/scss/bootstrap";
|
||||
|
||||
/* WTF ANGULAR!?!?!?! WHY DO I HAVE TO DO THIS? (see table.component.html@7 and table.component.html@50) */
|
||||
label.mat-checkbox-layout {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.legend {
|
||||
padding: 6px 8px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user