diff --git a/projects/project-3/frontend/src/app/dashboard/dashboard.component.html b/projects/project-3/frontend/src/app/dashboard/dashboard.component.html index df9e4bf..8ba2c4c 100644 --- a/projects/project-3/frontend/src/app/dashboard/dashboard.component.html +++ b/projects/project-3/frontend/src/app/dashboard/dashboard.component.html @@ -1,24 +1,21 @@ -
-

Dashboard

- - - - - - {{card.title}} - - - - - - - - -
Card Content Here
-
-
-
-
+ + Bike Stations in London + + + library_books + Wiki + +
+ +
Main
+ + Choose a date + + + + +
+ diff --git a/projects/project-3/frontend/src/app/dashboard/dashboard.component.scss b/projects/project-3/frontend/src/app/dashboard/dashboard.component.scss index 49a8146..b46a059 100644 --- a/projects/project-3/frontend/src/app/dashboard/dashboard.component.scss +++ b/projects/project-3/frontend/src/app/dashboard/dashboard.component.scss @@ -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 { - position: absolute; - top: 15px; - left: 15px; - right: 15px; - bottom: 15px; +.toolbar-spacer { + flex: 1 1 auto; } -.more-button { - position: absolute; - top: 5px; - right: 10px; -} - -.dashboard-card-content { - text-align: center; +.mat-toolbar { + top: 0; } diff --git a/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts b/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts index 964d896..1f768fb 100644 --- a/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts +++ b/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts @@ -1,33 +1,23 @@ -import { Component } from '@angular/core'; -import { map } from 'rxjs/operators'; -import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout'; +import {Component, OnInit} from '@angular/core'; +import {ActivatedRoute} from '@angular/router'; +import {DashboardService} from '../service/dashboard.service'; @Component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html', styleUrls: ['./dashboard.component.scss'] }) -export class DashboardComponent { - /** Based on the screen size, switch from standard to one column per row */ - cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe( - map(({ matches }) => { - if (matches) { - return [ - { title: 'Card 1', cols: 1, rows: 1 }, - { title: 'Card 2', cols: 1, rows: 1 }, - { title: 'Card 3', cols: 1, rows: 1 }, - { title: 'Card 4', cols: 1, rows: 1 } - ]; - } +export class DashboardComponent implements OnInit { + + constructor( + private route: ActivatedRoute, + public service: DashboardService + ) { + } + + ngOnInit(): void { + 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) {} }