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/platform-browser-dynamic": "~10.2.0",
|
||||||
"@angular/router": "~10.2.0",
|
"@angular/router": "~10.2.0",
|
||||||
"apexcharts": "^3.23.0",
|
"apexcharts": "^3.23.0",
|
||||||
"bootstrap": "^3.4.1",
|
"bootstrap": "^4.5.3",
|
||||||
"jquery": "^3.5.1",
|
"jquery": "^3.5.1",
|
||||||
"leaflet": "~1.3.1",
|
"leaflet": "~1.3.1",
|
||||||
"leaflet.heat": "^0.2.0",
|
"leaflet.heat": "^0.2.0",
|
||||||
"leaflet.markercluster": "^1.4.1",
|
"leaflet.markercluster": "^1.4.1",
|
||||||
"ng-apexcharts": "^1.5.6",
|
"ng-apexcharts": "^1.5.6",
|
||||||
"popper.js": "^1.14.3",
|
|
||||||
"rxjs": "~6.6.0",
|
"rxjs": "~6.6.0",
|
||||||
"seconds-to-human-time": "^1.0.0",
|
"seconds-to-human-time": "^1.0.0",
|
||||||
"tslib": "^2.0.0",
|
"tslib": "^2.0.0",
|
||||||
|
|||||||
@ -1,42 +1,36 @@
|
|||||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
<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 routerLink="/">Bike Stations in London</span>
|
||||||
<span class="toolbar-spacer"></span>
|
<span class="spacer"></span>
|
||||||
<a class="button-wiki" color="primary"
|
<a color="primary"
|
||||||
href="https://gitlab.com/marcel.schwarz/geovisualisierung/-/wikis/Projektarbeit%203" mat-flat-button
|
href="https://gitlab.com/marcel.schwarz/geovisualisierung/-/wikis/Projektarbeit%203"
|
||||||
|
mat-flat-button
|
||||||
target="_blank">
|
target="_blank">
|
||||||
<mat-icon>library_books</mat-icon>
|
<mat-icon>library_books</mat-icon>
|
||||||
Wiki
|
Wiki
|
||||||
</a>
|
</a>
|
||||||
<a class="button-back" color="primary"
|
<a color="primary" mat-flat-button routerLink="/">
|
||||||
mat-flat-button routerLink="/">
|
|
||||||
<mat-icon>map</mat-icon>
|
<mat-icon>map</mat-icon>
|
||||||
back to map
|
back to map
|
||||||
</a>
|
</a>
|
||||||
</mat-toolbar>
|
</mat-toolbar>
|
||||||
<mat-sidenav-container>
|
<div class="px-5 py-3" style="background: #2f2f2f">
|
||||||
<mat-sidenav-content class="mat-sidenav-content" fxFlex fxLayout="column" fxLayoutAlign="center">
|
<div>
|
||||||
<div class="container-map" fxFlex="100%" fxLayout="row" fxLayoutAlign="center">
|
<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>
|
||||||
<div class="input-container" fxFlex="35%" fxLayout="column">
|
<app-mini-map class="col-xl-7 col-lg-6 col-md-12"></app-mini-map>
|
||||||
<app-user-input
|
|
||||||
fxFlex
|
|
||||||
(startEndDate)="onSubmit($event)"
|
|
||||||
></app-user-input>
|
|
||||||
</div>
|
|
||||||
<app-mini-map fxFlex></app-mini-map>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container-table" fxFlex fxLayout="row" fxLayoutAlign="space-evenly center">
|
<div class="mb-3">
|
||||||
<app-table fxFlex></app-table>
|
<app-table></app-table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container-borrow-duration" fxLayout="row" fxLayoutAlign="center">
|
<div class="row mb-3">
|
||||||
<app-rent-duration-chart fxFlex></app-rent-duration-chart>
|
<app-rent-duration-chart class="col"></app-rent-duration-chart>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container-borrow-time" fxLayout="row" fxLayoutAlign="center">
|
<div class="row mb-3">
|
||||||
<app-rent-time-chart fxFlex></app-rent-time-chart>
|
<app-rent-time-chart class="col"></app-rent-time-chart>
|
||||||
</div>
|
</div>
|
||||||
</mat-sidenav-content>
|
</div>
|
||||||
</mat-sidenav-container>
|
</div>
|
||||||
|
|||||||
@ -1,74 +1,16 @@
|
|||||||
mat-sidenav-content {
|
.toolbar {
|
||||||
background: #2f2f2f;
|
height: 5vh;
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar-spacer {
|
.toolbar-spacer {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-back:hover, .button-wiki:hover {
|
a:hover {
|
||||||
background: #086ed2;
|
background: #086ed2;
|
||||||
}
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
.submit-date {
|
.spacer {
|
||||||
margin-top: 1em;
|
flex: 1 1 auto;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,3 @@
|
|||||||
<mat-card class="mat-card-map" fxFlex>
|
<mat-card class="p-0">
|
||||||
<div class="mini-map" fxFlex>
|
<div id="minimap" style="height: 30rem"></div>
|
||||||
<div class="map-frame" fxFill>
|
|
||||||
<div fxFill id="minimap"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</mat-card>
|
</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,11 +1,13 @@
|
|||||||
<div class="dashboard-table-to" fxFlex>
|
<div class="row">
|
||||||
<table [dataSource]="stationToSource" class="mat-elevation-z8" fxFill mat-table>
|
<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">
|
<ng-container matColumnDef="select">
|
||||||
<th *matHeaderCellDef mat-header-cell></th>
|
<th *matHeaderCellDef mat-header-cell></th>
|
||||||
<td *matCellDef="let row" mat-cell>
|
<td *matCellDef="let row" class="p-3" mat-cell>
|
||||||
<mat-checkbox [disabled]="isCheckBoxDisable(row)"
|
<mat-checkbox (change)="$event ? selectRow($event, row) : null"
|
||||||
(change)="$event ? selectRow($event, row) : null" (click)="$event.stopPropagation()"
|
(click)="$event.stopPropagation()"
|
||||||
[checked]="selectionModel.isSelected(row)"
|
[checked]="selectionModel.isSelected(row)"
|
||||||
|
[disabled]="isCheckBoxDisable(row)"
|
||||||
matTooltip="toggle to view marker on map"
|
matTooltip="toggle to view marker on map"
|
||||||
matTooltipPosition="above">
|
matTooltipPosition="above">
|
||||||
</mat-checkbox>
|
</mat-checkbox>
|
||||||
@ -13,8 +15,9 @@
|
|||||||
</ng-container>
|
</ng-container>
|
||||||
<ng-container matColumnDef="endStationName">
|
<ng-container matColumnDef="endStationName">
|
||||||
<th *matHeaderCellDef mat-header-cell> station of rental destination</th>
|
<th *matHeaderCellDef mat-header-cell> station of rental destination</th>
|
||||||
<td *matCellDef="let element" mat-cell><a
|
<td *matCellDef="let element" mat-cell>
|
||||||
[routerLink]="['/dashboard/', element.stationId]">{{element.stationName}}</a></td>
|
<a [routerLink]="['/dashboard/', element.stationId]">{{element.stationName}}</a>
|
||||||
|
</td>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
<ng-container matColumnDef="number">
|
<ng-container matColumnDef="number">
|
||||||
@ -35,22 +38,19 @@
|
|||||||
<tr *matHeaderRowDef="displayedColumnsTo" mat-header-row></tr>
|
<tr *matHeaderRowDef="displayedColumnsTo" mat-header-row></tr>
|
||||||
<tr *matRowDef="let row; columns: displayedColumnsTo;" mat-row></tr>
|
<tr *matRowDef="let row; columns: displayedColumnsTo;" mat-row></tr>
|
||||||
</table>
|
</table>
|
||||||
<div *ngIf="isLoadingToSource"
|
<div *ngIf="isLoadingToSource" class="col d-flex align-items-center justify-content-center">
|
||||||
style="display: flex; justify-content: center; align-items: center; background: white; padding: 10px">
|
<mat-progress-spinner color="primary" mode="indeterminate"></mat-progress-spinner>
|
||||||
<mat-progress-spinner
|
|
||||||
color="primary"
|
|
||||||
mode="indeterminate">
|
|
||||||
</mat-progress-spinner>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="dashboard-table-from" fxFlex>
|
<div class="col-lg-6 col-md-12">
|
||||||
<table [dataSource]="stationFromSource" class="mat-elevation-z9" fxFill mat-table>
|
<table [dataSource]="stationFromSource" class="mat-elevation-z0 w-100" mat-table>
|
||||||
<ng-container matColumnDef="select">
|
<ng-container matColumnDef="select">
|
||||||
<th *matHeaderCellDef mat-header-cell></th>
|
<th *matHeaderCellDef mat-header-cell></th>
|
||||||
<td *matCellDef="let row" mat-cell>
|
<td *matCellDef="let row" class="p-3" mat-cell>
|
||||||
<mat-checkbox [disabled]="isCheckBoxDisable(row)"
|
<mat-checkbox (change)="$event ? selectRow($event, row) : null"
|
||||||
(change)="$event ? selectRow($event, row) : null" (click)="$event.stopPropagation()"
|
(click)="$event.stopPropagation()"
|
||||||
[checked]="selectionModel.isSelected(row)"
|
[checked]="selectionModel.isSelected(row)"
|
||||||
|
[disabled]="isCheckBoxDisable(row)"
|
||||||
matTooltip="toggle to view marker on map"
|
matTooltip="toggle to view marker on map"
|
||||||
matTooltipPosition="above">
|
matTooltipPosition="above">
|
||||||
</mat-checkbox>
|
</mat-checkbox>
|
||||||
@ -58,8 +58,9 @@
|
|||||||
</ng-container>
|
</ng-container>
|
||||||
<ng-container matColumnDef="startStationName">
|
<ng-container matColumnDef="startStationName">
|
||||||
<th *matHeaderCellDef mat-header-cell> station of rental origin</th>
|
<th *matHeaderCellDef mat-header-cell> station of rental origin</th>
|
||||||
<td *matCellDef="let element" mat-cell><a
|
<td *matCellDef="let element" mat-cell>
|
||||||
[routerLink]="['/dashboard/', element.stationId]"> {{element.stationName}}</a></td>
|
<a [routerLink]="['/dashboard/', element.stationId]"> {{element.stationName}}</a>
|
||||||
|
</td>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
<ng-container matColumnDef="number">
|
<ng-container matColumnDef="number">
|
||||||
@ -80,12 +81,8 @@
|
|||||||
<tr *matHeaderRowDef="displayedColumnsFrom" mat-header-row></tr>
|
<tr *matHeaderRowDef="displayedColumnsFrom" mat-header-row></tr>
|
||||||
<tr *matRowDef="let row; columns: displayedColumnsFrom;" mat-row></tr>
|
<tr *matRowDef="let row; columns: displayedColumnsFrom;" mat-row></tr>
|
||||||
</table>
|
</table>
|
||||||
<div *ngIf="isLoadingFromSource"
|
<div *ngIf="isLoadingFromSource" class="col d-flex align-items-center justify-content-center">
|
||||||
style="display: flex; justify-content: center; align-items: center; background: white; padding: 10px">
|
<mat-progress-spinner color="primary" mode="indeterminate"></mat-progress-spinner>
|
||||||
<mat-progress-spinner
|
</div>
|
||||||
color="primary"
|
|
||||||
mode="indeterminate">
|
|
||||||
</mat-progress-spinner>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -4,12 +4,9 @@ img {
|
|||||||
|
|
||||||
a {
|
a {
|
||||||
color: black;
|
color: black;
|
||||||
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-table-to {
|
.mat-checkbox-layout label {
|
||||||
margin-right: 1em;
|
margin: 0 !important;
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-table-from {
|
|
||||||
margin-left: 1em;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,13 +1,15 @@
|
|||||||
<mat-card fxFlex fxLayout="column">
|
<mat-card style="height: 30rem">
|
||||||
<mat-card-header fxFlex="15%">
|
<mat-card-header>
|
||||||
<div class="header-image" mat-card-avatar></div>
|
<mat-card-title class="d-flex align-items-center">
|
||||||
<mat-card-title style="margin-top: 1em; margin-left: 0">{{bikePoint?.commonName}}</mat-card-title>
|
<div class="header-image d-inline-flex" mat-card-avatar></div>
|
||||||
|
{{bikePoint?.commonName}}
|
||||||
|
</mat-card-title>
|
||||||
</mat-card-header>
|
</mat-card-header>
|
||||||
<mat-card-content fxFlex="70%" fxLayout="column" fxLayoutAlign="space-between">
|
<mat-card-content class="p-4 d-flex flex-column justify-content-center">
|
||||||
<div class="user-input" fxFlex fxLayout="row" fxLayoutAlign="start center">
|
<div>
|
||||||
<form [formGroup]="form" style="margin-left: 2em">
|
|
||||||
<p>Select a range to analyze data</p>
|
<p>Select a range to analyze data</p>
|
||||||
<mat-form-field appearance="fill" class="datepicker">
|
<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-label>Enter a range</mat-label>
|
||||||
<mat-date-range-input [max]="maxEndDate" [min]="maxStartDate" [rangePicker]="picker"
|
<mat-date-range-input [max]="maxEndDate" [min]="maxStartDate" [rangePicker]="picker"
|
||||||
formGroupName="dateRange">
|
formGroupName="dateRange">
|
||||||
@ -17,16 +19,13 @@
|
|||||||
<mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
|
<mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
|
||||||
<mat-date-range-picker #picker></mat-date-range-picker>
|
<mat-date-range-picker #picker></mat-date-range-picker>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</form>
|
<button (click)="onSubmit()" class="mt-n3" color="primary" mat-raised-button>
|
||||||
<div class="submit-date">
|
|
||||||
<button (click)="onSubmit()" color="primary" mat-raised-button>
|
|
||||||
<mat-icon>dashboard</mat-icon>
|
<mat-icon>dashboard</mat-icon>
|
||||||
<span id="submit-date-span"> reload</span>
|
reload
|
||||||
</button>
|
</button>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="ml-n4" id="chart">
|
||||||
<div class="chart-bikepoint-availability" fxFlex fxLayout="column">
|
|
||||||
<div id="chart">
|
|
||||||
<apx-chart
|
<apx-chart
|
||||||
[chart]="chartOptions.chart"
|
[chart]="chartOptions.chart"
|
||||||
[colors]="chartOptions.colors"
|
[colors]="chartOptions.colors"
|
||||||
@ -43,6 +42,5 @@
|
|||||||
[yaxis]="chartOptions.yaxis"
|
[yaxis]="chartOptions.yaxis"
|
||||||
></apx-chart>
|
></apx-chart>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</mat-card-content>
|
</mat-card-content>
|
||||||
</mat-card>
|
</mat-card>
|
||||||
|
|||||||
@ -1,30 +1,4 @@
|
|||||||
.header-image {
|
.header-image {
|
||||||
margin-top: 1em;
|
|
||||||
margin-left: 1em;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
background-image: url('../../../assets/bike-point-blue.png');
|
background-image: url('../../../assets/bike-point-blue.png');
|
||||||
background-size: cover;
|
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/dist/leaflet.css";
|
||||||
@import "~leaflet.markercluster/dist/MarkerCluster.css";
|
@import "~leaflet.markercluster/dist/MarkerCluster.css";
|
||||||
@import "~leaflet.markercluster/dist/MarkerCluster.Default.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 {
|
.legend {
|
||||||
padding: 6px 8px;
|
padding: 6px 8px;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user