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

rearrange user-input card and add auto-refresh component

Browse Source
This commit is contained in:
Tim Herbst 2020-12-28 11:13:42 +01:00
parent 8a69ffe29e
commit 3600f3a6e3
7 changed files with 95 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,13 +24,15 @@ import {MatNativeDateModule} from '@angular/material/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatInputModule} from '@angular/material/input';
import {MatTableModule} from '@angular/material/table';
import {AutoRefreshComponent} from './map/auto-refresh/auto-refresh.component';
@NgModule({
declarations: [
AppComponent,
MapComponent,
DashboardComponent,
PopUpComponent
PopUpComponent,
AutoRefreshComponent
],
imports: [
BrowserModule,

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

@ -19,63 +19,54 @@
<div class="container-map" fxFlex="100%" fxLayout="row" fxLayoutAlign="center">
<div class="input-container" fxFlex="35%" fxLayout="column">
<div class="user-input" fxFlex fxLayout="column" fxLayoutAlign="space-between">
<div class="container-info" fxFlex="55%">
<mat-card fxFlex="100%">
<mat-card-header>
<div class="example-header-image" mat-card-avatar></div>
<mat-card-title>{{bikePoint?.commonName}}</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="chart-bikepoint-availability">
<div id="chart">
<apx-chart
[chart]="bikePointChartOptions.chart"
[colors]="bikePointChartOptions.colors"
[dataLabels]="bikePointChartOptions.dataLabels"
[fill]="bikePointChartOptions.fill"
[legend]="bikePointChartOptions.legend"
[plotOptions]="bikePointChartOptions.plotOptions"
[series]="bikePointChartOptions.series"
[stroke]="bikePointChartOptions.stroke"
[title]="bikePointChartOptions.title"
[tooltip]="bikePointChartOptions.tooltip"
[xaxis]="bikePointChartOptions.xaxis"
[yaxis]="bikePointChartOptions.yaxis"
></apx-chart>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="mat-card-info" fxFlex="40%" fxLayout="column" fxLayoutAlign="center center">
<mat-card>
<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">
<input formControlName="start" matStartDate placeholder="Start date">
<input formControlName="end" matEndDate placeholder="End date">
</mat-date-range-input>
<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" fxLayout="row" fxLayoutAlign="center">
<button (click)="onSubmit()" color="primary" mat-raised-button>
<mat-icon>dashboard</mat-icon>
<span id="submit-date-span"> reload dashboard</span>
</button>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
<mat-card fxFlex fxLayout="column">
<mat-card-header fxFlex="15%">
<div class="example-header-image" mat-card-avatar></div>
<mat-card-title>{{bikePoint?.commonName}}</mat-card-title>
</mat-card-header>
<mat-card-content fxFlex="70%" fxLayout="column" fxLayoutAlign="space-evenly">
<div class="user-input" fxFlex fxLayout="row" fxLayoutAlign="space-evenly center">
<form [formGroup]="form">
<mat-form-field appearance="fill" class="datepicker">
<mat-label>Enter a range</mat-label>
<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>
<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>
<mat-icon>dashboard</mat-icon>
<span id="submit-date-span"> reload</span>
</button>
</div>
</div>
<div class="chart-bikepoint-availability" fxFlex fxLayout="column">
<div id="chart">
<apx-chart
[chart]="bikePointChartOptions.chart"
[colors]="bikePointChartOptions.colors"
[dataLabels]="bikePointChartOptions.dataLabels"
[fill]="bikePointChartOptions.fill"
[legend]="bikePointChartOptions.legend"
[plotOptions]="bikePointChartOptions.plotOptions"
[series]="bikePointChartOptions.series"
[stroke]="bikePointChartOptions.stroke"
[title]="bikePointChartOptions.title"
[tooltip]="bikePointChartOptions.tooltip"
[xaxis]="bikePointChartOptions.xaxis"
[yaxis]="bikePointChartOptions.yaxis"
></apx-chart>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<mat-card class="mat-card-map" fxFlex fxLayout="row">
<mat-card class="mat-card-map" fxFlex>
<div class="mini-map" fxFlex>
<div class="map-frame" fxFill>
<div fxFill id="minimap"></div>

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

@ -14,28 +14,14 @@ a {
background: #086ed2;
}
.submit-date {
margin-bottom: 15px;
}
#chart {
margin-right: 16px;
}
#submit-date-span {
padding: 10px;
}
.user-input {
height: 10em;
}
.datepicker {
margin-top: 2em;
margin-left: 1em;
margin-right: 1em
}
.submit-date {
padding-bottom: 2em;
}
.mat-card {
padding: 1px 1px 1px;
margin: 10px;

1
projects/project-3/frontend/src/app/map/auto-refresh/auto-refresh.component.html Normal file
View File

@ -0,0 +1 @@
<p>auto-refresh works!</p>

0
projects/project-3/frontend/src/app/map/auto-refresh/auto-refresh.component.scss Normal file
View File

25
projects/project-3/frontend/src/app/map/auto-refresh/auto-refresh.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AutoRefreshComponent } from './auto-refresh.component';
describe('AutoRefreshComponent', () => {
let component: AutoRefreshComponent;
let fixture: ComponentFixture<AutoRefreshComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ AutoRefreshComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(AutoRefreshComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

15
projects/project-3/frontend/src/app/map/auto-refresh/auto-refresh.component.ts Normal file
View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-auto-refresh',
templateUrl: './auto-refresh.component.html',
styleUrls: ['./auto-refresh.component.scss']
})
export class AutoRefreshComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}