From: Kai Moritz Date: Fri, 8 May 2020 23:08:05 +0000 (+0200) Subject: 5: Add In-app Navigation X-Git-Url: http://juplo.de/gitweb/?a=commitdiff_plain;h=2f6f2d86ff7765914cd9105069181ed1f1792f44;p=examples%2Fangular-tour-of-heroes 5: Add In-app Navigation c) Add a dashboard view --- diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 807a865..b0354f5 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,10 +1,13 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HeroesComponent } from './heroes/heroes.component'; +import { DashboardComponent } from './dashboard/dashboard.component'; const routes : Routes = [ - { path: 'heroes', component: HeroesComponent } + { path: '', redirectTo: 'dashboard', pathMatch: 'full'}, + { path: 'heroes', component: HeroesComponent }, + { path: 'dashboard', component: DashboardComponent } ]; diff --git a/src/app/app.component.html b/src/app/app.component.html index aeb56ff..0a2742a 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,6 +1,8 @@

{{title}}

+ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c66df3c..e4e6882 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -7,13 +7,15 @@ import { AppComponent } from './app.component'; import { HeroesComponent } from './heroes/heroes.component'; import { HeroDetailComponent } from './hero-detail/hero-detail.component'; import { MessagesComponent } from './messages/messages.component'; +import { DashboardComponent } from './dashboard/dashboard.component'; @NgModule({ declarations: [ AppComponent, HeroesComponent, HeroDetailComponent, - MessagesComponent + MessagesComponent, + DashboardComponent ], imports: [ BrowserModule, diff --git a/src/app/dashboard/dashboard.component.css b/src/app/dashboard/dashboard.component.css new file mode 100644 index 0000000..4b7ec1c --- /dev/null +++ b/src/app/dashboard/dashboard.component.css @@ -0,0 +1,63 @@ +/* DashboardComponent's private CSS styles */ +[class*='col-'] { + float: left; + padding-right: 20px; + padding-bottom: 20px; +} +[class*='col-']:last-of-type { + padding-right: 0; +} +a { + text-decoration: none; +} +*, *:after, *:before { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +h3 { + text-align: center; + margin-bottom: 0; +} +h4 { + position: relative; +} +.grid { + margin: 0; +} +.col-1-4 { + width: 25%; +} +.module { + padding: 20px; + text-align: center; + color: #eee; + max-height: 120px; + min-width: 120px; + background-color: #3f525c; + border-radius: 2px; +} +.module:hover { + background-color: #eee; + cursor: pointer; + color: #607d8b; +} +.grid-pad { + padding: 10px 0; +} +.grid-pad > [class*='col-']:last-of-type { + padding-right: 20px; +} +@media (max-width: 600px) { + .module { + font-size: 10px; + max-height: 75px; } +} +@media (max-width: 1024px) { + .grid { + margin: 0; + } + .module { + min-width: 60px; + } +} diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html new file mode 100644 index 0000000..ddb4fd2 --- /dev/null +++ b/src/app/dashboard/dashboard.component.html @@ -0,0 +1,8 @@ +

Top Heroes

+
+ +
+

{{hero.name}}

+
+
+
diff --git a/src/app/dashboard/dashboard.component.spec.ts b/src/app/dashboard/dashboard.component.spec.ts new file mode 100644 index 0000000..9c996c3 --- /dev/null +++ b/src/app/dashboard/dashboard.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DashboardComponent } from './dashboard.component'; + +describe('DashboardComponent', () => { + let component: DashboardComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DashboardComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DashboardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts new file mode 100644 index 0000000..c559ccd --- /dev/null +++ b/src/app/dashboard/dashboard.component.ts @@ -0,0 +1,23 @@ +import { Component, OnInit } from '@angular/core'; +import { Hero } from '../hero'; +import { HeroService } from '../hero.service'; + +@Component({ + selector: 'app-dashboard', + templateUrl: './dashboard.component.html', + styleUrls: [ './dashboard.component.css' ] +}) +export class DashboardComponent implements OnInit { + heroes: Hero[] = []; + + constructor(private heroService: HeroService) { } + + ngOnInit() { + this.getHeroes(); + } + + getHeroes(): void { + this.heroService.getHeroes() + .subscribe(heroes => this.heroes = heroes.slice(1, 5)); + } +}