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 {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatInputModule} from '@angular/material/input'; import {MatInputModule} from '@angular/material/input';
import {MatTableModule} from '@angular/material/table'; import {MatTableModule} from '@angular/material/table';
import {AutoRefreshComponent} from './map/auto-refresh/auto-refresh.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent, AppComponent,
MapComponent, MapComponent,
DashboardComponent, DashboardComponent,
PopUpComponent PopUpComponent,
AutoRefreshComponent
], ],
imports: [ imports: [
BrowserModule, 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="container-map" fxFlex="100%" fxLayout="row" fxLayoutAlign="center">
<div class="input-container" fxFlex="35%" fxLayout="column"> <div class="input-container" fxFlex="35%" fxLayout="column">
<div class="user-input" fxFlex fxLayout="column" fxLayoutAlign="space-between"> <mat-card fxFlex fxLayout="column">
<div class="container-info" fxFlex="55%"> <mat-card-header fxFlex="15%">
<mat-card fxFlex="100%"> <div class="example-header-image" mat-card-avatar></div>
<mat-card-header> <mat-card-title>{{bikePoint?.commonName}}</mat-card-title>
<div class="example-header-image" mat-card-avatar></div> </mat-card-header>
<mat-card-title>{{bikePoint?.commonName}}</mat-card-title> <mat-card-content fxFlex="70%" fxLayout="column" fxLayoutAlign="space-evenly">
</mat-card-header> <div class="user-input" fxFlex fxLayout="row" fxLayoutAlign="space-evenly center">
<mat-card-content> <form [formGroup]="form">
<div class="chart-bikepoint-availability"> <mat-form-field appearance="fill" class="datepicker">
<div id="chart"> <mat-label>Enter a range</mat-label>
<apx-chart <mat-date-range-input [max]="maxEndDate" [min]="maxStartDate" [rangePicker]="picker"
[chart]="bikePointChartOptions.chart" formGroupName="daterange">
[colors]="bikePointChartOptions.colors" <input formControlName="start" matStartDate placeholder="Start date">
[dataLabels]="bikePointChartOptions.dataLabels" <input formControlName="end" matEndDate placeholder="End date">
[fill]="bikePointChartOptions.fill" </mat-date-range-input>
[legend]="bikePointChartOptions.legend" <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
[plotOptions]="bikePointChartOptions.plotOptions" <mat-date-range-picker #picker></mat-date-range-picker>
[series]="bikePointChartOptions.series" </mat-form-field>
[stroke]="bikePointChartOptions.stroke" </form>
[title]="bikePointChartOptions.title" <div class="submit-date">
[tooltip]="bikePointChartOptions.tooltip" <button (click)="onSubmit()" color="primary" mat-raised-button>
[xaxis]="bikePointChartOptions.xaxis" <mat-icon>dashboard</mat-icon>
[yaxis]="bikePointChartOptions.yaxis" <span id="submit-date-span"> reload</span>
></apx-chart> </button>
</div> </div>
</div> </div>
</mat-card-content> <div class="chart-bikepoint-availability" fxFlex fxLayout="column">
</mat-card> <div id="chart">
</div> <apx-chart
<div class="mat-card-info" fxFlex="40%" fxLayout="column" fxLayoutAlign="center center"> [chart]="bikePointChartOptions.chart"
<mat-card> [colors]="bikePointChartOptions.colors"
<mat-card-content> [dataLabels]="bikePointChartOptions.dataLabels"
<form [formGroup]="form"> [fill]="bikePointChartOptions.fill"
<mat-form-field appearance="fill" class="datepicker" fxLayout="column" fxLayoutAlign="center center"> [legend]="bikePointChartOptions.legend"
<mat-label>Enter a range</mat-label> [plotOptions]="bikePointChartOptions.plotOptions"
<mat-date-range-input [max]="maxEndDate" [min]="maxStartDate" [rangePicker]="picker" [series]="bikePointChartOptions.series"
formGroupName="daterange"> [stroke]="bikePointChartOptions.stroke"
<input formControlName="start" matStartDate placeholder="Start date"> [title]="bikePointChartOptions.title"
<input formControlName="end" matEndDate placeholder="End date"> [tooltip]="bikePointChartOptions.tooltip"
</mat-date-range-input> [xaxis]="bikePointChartOptions.xaxis"
<mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle> [yaxis]="bikePointChartOptions.yaxis"
<mat-date-range-picker #picker></mat-date-range-picker> ></apx-chart>
</mat-form-field> </div>
</form> </div>
<div class="submit-date" fxLayout="row" fxLayoutAlign="center"> </mat-card-content>
<button (click)="onSubmit()" color="primary" mat-raised-button> </mat-card>
<mat-icon>dashboard</mat-icon>
<span id="submit-date-span"> reload dashboard</span>
</button>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
</div> </div>
<mat-card class="mat-card-map" fxFlex>
<mat-card class="mat-card-map" fxFlex fxLayout="row">
<div class="mini-map" fxFlex> <div class="mini-map" fxFlex>
<div class="map-frame" fxFill> <div class="map-frame" fxFill>
<div fxFill id="minimap"></div> <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; background: #086ed2;
} }
.submit-date {
margin-bottom: 15px;
}
#chart { #chart {
margin-right: 16px; 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 { .mat-card {
padding: 1px 1px 1px; padding: 1px 1px 1px;
margin: 10px; 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 {
}
}