From 6f069e88472b21bc64ae7bc34817a9ee9837a48d Mon Sep 17 00:00:00 2001 From: nikurasu Date: Fri, 30 Sep 2022 09:30:47 +0200 Subject: [PATCH] Added Navigation --- src/app/app-routing.module.ts | 10 +- src/app/app.component.html | 6 +- src/app/app.component.scss | 21 ++++ src/app/app.module.ts | 4 +- src/app/dashboard/dashboard.component.html | 6 + src/app/dashboard/dashboard.component.scss | 50 ++++++++ src/app/dashboard/dashboard.component.spec.ts | 23 ++++ src/app/dashboard/dashboard.component.ts | 23 ++++ .../hero-detail/hero-detail.component.html | 3 +- .../hero-detail/hero-detail.component.scss | 24 ++++ src/app/hero-detail/hero-detail.component.ts | 25 +++- src/app/hero.service.ts | 6 + src/app/heroes/heroes.component.html | 10 +- src/app/heroes/heroes.component.scss | 116 ++++++++---------- src/app/heroes/heroes.component.ts | 7 -- 15 files changed, 249 insertions(+), 85 deletions(-) create mode 100644 src/app/dashboard/dashboard.component.html create mode 100644 src/app/dashboard/dashboard.component.scss create mode 100644 src/app/dashboard/dashboard.component.spec.ts create mode 100644 src/app/dashboard/dashboard.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 0297262..f618552 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,7 +1,15 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; +import { DashboardComponent } from './dashboard/dashboard.component'; +import { HeroDetailComponent } from './hero-detail/hero-detail.component'; +import { HeroesComponent } from './heroes/heroes.component'; -const routes: Routes = []; +const routes: Routes = [ + {path: 'heroes', component: HeroesComponent}, + {path: 'dashboard', component: DashboardComponent}, + {path: 'detail/:id', component: HeroDetailComponent}, + {path: '', redirectTo: '/dashboard', pathMatch: 'full'}, +]; @NgModule({ imports: [RouterModule.forRoot(routes)], diff --git a/src/app/app.component.html b/src/app/app.component.html index b9bf817..93af176 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,3 +1,7 @@

{{ title }}

- + + \ No newline at end of file diff --git a/src/app/app.component.scss b/src/app/app.component.scss index e69de29..a97839e 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -0,0 +1,21 @@ +/* AppComponent's private CSS styles */ +h1 { + margin-bottom: 0; + } + nav a { + padding: 1rem; + text-decoration: none; + margin-top: 10px; + display: inline-block; + background-color: #e8e8e8; + color: #3d3d3d; + border-radius: 4px; + } + + nav a:hover { + color: white; + background-color: #42545C; + } + nav a:active { + background-color: black; + } \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 9eaf3b9..4ddf6f4 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.html b/src/app/dashboard/dashboard.component.html new file mode 100644 index 0000000..f9f58dd --- /dev/null +++ b/src/app/dashboard/dashboard.component.html @@ -0,0 +1,6 @@ +

Top Heroes

+
+ + {{hero.name}} + +
diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss new file mode 100644 index 0000000..e9d534d --- /dev/null +++ b/src/app/dashboard/dashboard.component.scss @@ -0,0 +1,50 @@ +/* DashboardComponent's private CSS styles */ + +h2 { + text-align: center; + } + + .heroes-menu { + padding: 0; + margin: auto; + max-width: 1000px; + + /* flexbox */ + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; + align-content: flex-start; + align-items: flex-start; + } + + a { + background-color: #3f525c; + border-radius: 2px; + padding: 1rem; + font-size: 1.2rem; + text-decoration: none; + display: inline-block; + color: #fff; + text-align: center; + width: 100%; + min-width: 70px; + margin: .5rem auto; + box-sizing: border-box; + + /* flexbox */ + order: 0; + flex: 0 1 auto; + align-self: auto; + } + + @media (min-width: 600px) { + a { + width: 18%; + box-sizing: content-box; + } + } + + a:hover { + background-color: #000; + } \ No newline at end of file diff --git a/src/app/dashboard/dashboard.component.spec.ts b/src/app/dashboard/dashboard.component.spec.ts new file mode 100644 index 0000000..6e4dcd8 --- /dev/null +++ b/src/app/dashboard/dashboard.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DashboardComponent } from './dashboard.component'; + +describe('DashboardComponent', () => { + let component: DashboardComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ DashboardComponent ] + }) + .compileComponents(); + + 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..901afd3 --- /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.scss'] +}) +export class DashboardComponent implements OnInit { + heroes: Hero[] = [] + + constructor(private heroService: HeroService) { } + + ngOnInit(): void { + this.getHeroes() + } + + getHeroes(): void { + this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes.slice(1,5)) + } + +} diff --git a/src/app/hero-detail/hero-detail.component.html b/src/app/hero-detail/hero-detail.component.html index 89d81d2..6af9e5b 100644 --- a/src/app/hero-detail/hero-detail.component.html +++ b/src/app/hero-detail/hero-detail.component.html @@ -1,8 +1,9 @@
-

{{hero.name | uppercase}}

+

{{hero.name | uppercase}} Details

id: {{hero.id}}
+
\ No newline at end of file diff --git a/src/app/hero-detail/hero-detail.component.scss b/src/app/hero-detail/hero-detail.component.scss index e69de29..7509fb2 100644 --- a/src/app/hero-detail/hero-detail.component.scss +++ b/src/app/hero-detail/hero-detail.component.scss @@ -0,0 +1,24 @@ +/* HeroDetailComponent's private CSS styles */ +label { + color: #435960; + font-weight: bold; + } + input { + font-size: 1em; + padding: .5rem; + } + button { + margin-top: 20px; + background-color: #eee; + padding: 1rem; + border-radius: 4px; + font-size: 1rem; + } + button:hover { + background-color: #cfd8dc; + } + button:disabled { + background-color: #eee; + color: #ccc; + cursor: auto; + } \ No newline at end of file diff --git a/src/app/hero-detail/hero-detail.component.ts b/src/app/hero-detail/hero-detail.component.ts index 9fef691..166d61e 100644 --- a/src/app/hero-detail/hero-detail.component.ts +++ b/src/app/hero-detail/hero-detail.component.ts @@ -1,5 +1,8 @@ -import { Component, OnInit,Input } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; +import { Location } from '@angular/common'; +import { ActivatedRoute } from '@angular/router'; import { Hero } from '../hero'; +import { HeroService } from '../hero.service'; @Component({ selector: 'app-hero-detail', @@ -7,12 +10,26 @@ import { Hero } from '../hero'; styleUrls: ['./hero-detail.component.scss'] }) export class HeroDetailComponent implements OnInit { - - @Input() hero?: Hero + hero: Hero | undefined - constructor() { } + constructor( + private route: ActivatedRoute, + private location: Location, + private heroService: HeroService, + ) { } ngOnInit(): void { + this.getHero() + } + + getHero(): void { + const id = Number(this.route.snapshot.paramMap.get('id')); + this.heroService.getHero(id) + .subscribe(hero => this.hero = hero); + } + + goBack(): void { + this.location.back() } } diff --git a/src/app/hero.service.ts b/src/app/hero.service.ts index 5a5f136..eece890 100644 --- a/src/app/hero.service.ts +++ b/src/app/hero.service.ts @@ -16,4 +16,10 @@ export class HeroService { this.messageService.add('HeroService: Heroes fetched!') return heroes } + + getHero(id: number): Observable { + const hero = HEROES.find(h => h.id === id)! + this.messageService.add(`HeroService: fetched hero id=${id}`) + return of(hero) + } } diff --git a/src/app/heroes/heroes.component.html b/src/app/heroes/heroes.component.html index 6a9dc78..6ad5eee 100644 --- a/src/app/heroes/heroes.component.html +++ b/src/app/heroes/heroes.component.html @@ -1,10 +1,8 @@

Heroes

- \ No newline at end of file + \ No newline at end of file diff --git a/src/app/heroes/heroes.component.scss b/src/app/heroes/heroes.component.scss index 904937a..4bf53ff 100644 --- a/src/app/heroes/heroes.component.scss +++ b/src/app/heroes/heroes.component.scss @@ -1,66 +1,54 @@ /* HeroesComponent's private CSS styles */ .heroes { - margin: 0 0 2em 0; - list-style-type: none; - padding: 0; - width: 15em; - } - - .heroes li { - display: flex; - } - - .heroes button { - flex: 1; - cursor: pointer; - position: relative; - left: 0; - background-color: #EEE; - margin: .5em; - padding: 0; - border-radius: 4px; - display: flex; - align-items: stretch; - height: 1.8em; - } - - .heroes button:hover { - color: #2c3a41; - background-color: #e6e6e6; - left: .1em; - } - - .heroes button:active { - background-color: #525252; - color: #fafafa; - } - - .heroes button.selected { - background-color: black; - color: white; - } - - .heroes button.selected:hover { - background-color: #505050; - color: white; - } - - .heroes button.selected:active { - background-color: black; - color: white; - } - - .heroes .badge { - display: inline-block; - font-size: small; - color: white; - padding: 0.8em 0.7em 0 0.7em; - background-color: #405061; - line-height: 1em; - margin-right: .8em; - border-radius: 4px 0 0 4px; - } - - .heroes .name { - align-self: center; - } \ No newline at end of file + margin: 0 0 2em 0; + list-style-type: none; + padding: 0; + width: 15em; +} +.heroes li { + position: relative; + cursor: pointer; +} + +.heroes li:hover { + left: .1em; +} + +.heroes a { + color: #333; + text-decoration: none; + background-color: #EEE; + margin: .5em; + padding: .3em 0; + height: 1.6em; + border-radius: 4px; + display: block; + width: 100%; +} + +.heroes a:hover { + color: #2c3a41; + background-color: #e6e6e6; +} + +.heroes a:active { + background-color: #525252; + color: #fafafa; +} + +.heroes .badge { + display: inline-block; + font-size: small; + color: white; + padding: 0.8em 0.7em 0 0.7em; + background-color: #405061; + line-height: 1em; + position: relative; + left: -1px; + top: -4px; + height: 1.8em; + min-width: 16px; + text-align: right; + margin-right: .8em; + border-radius: 4px 0 0 4px; +} \ No newline at end of file diff --git a/src/app/heroes/heroes.component.ts b/src/app/heroes/heroes.component.ts index 42beb29..35da9a0 100644 --- a/src/app/heroes/heroes.component.ts +++ b/src/app/heroes/heroes.component.ts @@ -12,13 +12,6 @@ export class HeroesComponent implements OnInit { constructor(private heroService: HeroService, private messageService: MessageService) { } - selectedHero?: Hero - - onSelect(hero: Hero): void { - this.selectedHero = hero - this.messageService.add(`Hero Component: Selected hero id=${hero.id}`) - } - heroes: Hero[] = [] ngOnInit(): void {