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

start implementation of dashboard-component

Browse Source
This commit is contained in:
Tim Herbst 2020-12-22 07:56:39 +01:00
parent 6581b621fe
commit b3d6ee8473
3 changed files with 50 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,24 +1,21 @@
<div class="grid-container"> <mat-toolbar class="mat-toolbar">
<h1 class="mat-h1">Dashboard</h1> <span>Bike Stations in London</span>
<mat-grid-list cols="2" rowHeight="350px"> <span class="toolbar-spacer"></span>
<mat-grid-tile *ngFor="let card of cards | async" [colspan]="card.cols" [rowspan]="card.rows"> <a class="button-wiki" color="primary"
<mat-card class="dashboard-card"> href="https://gitlab.com/marcel.schwarz/geovisualisierung/-/wikis/Projektarbeit%203" mat-flat-button
<mat-card-header> target="_blank">
<mat-card-title> <mat-icon>library_books</mat-icon>
{{card.title}} Wiki</a>
<button mat-icon-button class="more-button" [matMenuTriggerFor]="menu" aria-label="Toggle menu"> </mat-toolbar>
<mat-icon>more_vert</mat-icon> <div class="sidenav-container">
</button> <mat-sidenav-container class="sidenav">
<mat-menu #menu="matMenu" xPosition="before"> <section>Main</section>
<button mat-menu-item>Expand</button> <mat-form-field appearance="fill">
<button mat-menu-item>Remove</button> <mat-label>Choose a date</mat-label>
</mat-menu> <input matInput [matDatepicker]="picker">
</mat-card-title> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
</mat-card-header> <mat-datepicker #picker></mat-datepicker>
<mat-card-content class="dashboard-card-content"> </mat-form-field>
<div>Card Content Here</div> </mat-sidenav-container>
</mat-card-content>
</mat-card>
</mat-grid-tile>
</mat-grid-list>
</div> </div>

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

@ -1,21 +1,21 @@
.grid-container {
margin: 20px;
.sidenav-container {
height: 100%;
width: 10vw;
position: fixed;
top: auto;
left: 0;
.sidenav {
background-color: gray;
height: 100%;
}
} }
.dashboard-card { .toolbar-spacer {
position: absolute; flex: 1 1 auto;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
} }
.more-button { .mat-toolbar {
position: absolute; top: 0;
top: 5px;
right: 10px;
}
.dashboard-card-content {
text-align: center;
} }

38
projects/project-3/frontend/src/app/dashboard/dashboard.component.ts
View File

@ -1,33 +1,23 @@
import { Component } from '@angular/core'; import {Component, OnInit} from '@angular/core';
import { map } from 'rxjs/operators'; import {ActivatedRoute} from '@angular/router';
import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout'; import {DashboardService} from '../service/dashboard.service';
@Component({ @Component({
selector: 'app-dashboard', selector: 'app-dashboard',
templateUrl: './dashboard.component.html', templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss'] styleUrls: ['./dashboard.component.scss']
}) })
export class DashboardComponent { export class DashboardComponent implements OnInit {
/** Based on the screen size, switch from standard to one column per row */
cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe( constructor(
map(({ matches }) => { private route: ActivatedRoute,
if (matches) { public service: DashboardService
return [ ) {
{ title: 'Card 1', cols: 1, rows: 1 }, }
{ title: 'Card 2', cols: 1, rows: 1 },
{ title: 'Card 3', cols: 1, rows: 1 }, ngOnInit(): void {
{ title: 'Card 4', cols: 1, rows: 1 } this.service.setBikeStation(this.route.snapshot.paramMap.get('id'));
]; }
}
return [
{ title: 'Card 1', cols: 2, rows: 1 },
{ title: 'Card 2', cols: 1, rows: 1 },
{ title: 'Card 3', cols: 1, rows: 2 },
{ title: 'Card 4', cols: 1, rows: 1 }
];
})
);
constructor(private breakpointObserver: BreakpointObserver) {}
} }