diff --git a/src/app/app.component.css b/src/app/app.component.css index e69de29..92ca4ed 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -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.component.html b/src/app/app.component.html index 0fc7503..fda4fd2 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.ts b/src/app/app.component.ts index 98e7175..5ba68b4 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,12 +1,13 @@ import { Component } from '@angular/core'; -import { HeroesComponent } from "./heroes/heroes.component"; + import { MessagesComponent } from "./messages/messages.component"; +import { RouterLink, RouterOutlet } from '@angular/router'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], - imports: [HeroesComponent, MessagesComponent] + imports: [MessagesComponent, RouterOutlet, RouterLink] }) export class App { diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index dc39edb..16dea5b 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,3 +1,13 @@ import { Routes } from '@angular/router'; +import { HeroesComponent } from './heroes/heroes.component'; +import { DashboardComponent } from './dashboard/dashboard.component'; +import { HeroDetailComponent } from './hero-detail/hero-detail.component'; -export const routes: Routes = []; +export const routes: Routes = [ + + { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, //путь по умолчанию + { path: 'heroes', component: HeroesComponent }, + { path: 'dashboard', component: DashboardComponent }, + { path: 'detail/:id', component: HeroDetailComponent }, + +]; diff --git a/src/app/dashboard/dashboard.component.css b/src/app/dashboard/dashboard.component.css new file mode 100644 index 0000000..78b6b3e --- /dev/null +++ b/src/app/dashboard/dashboard.component.css @@ -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.html b/src/app/dashboard/dashboard.component.html new file mode 100644 index 0000000..9223622 --- /dev/null +++ b/src/app/dashboard/dashboard.component.html @@ -0,0 +1,7 @@ +

Top Heroes

+
+ + {{hero.name}} + +
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts new file mode 100644 index 0000000..f78c40a --- /dev/null +++ b/src/app/dashboard/dashboard.component.ts @@ -0,0 +1,28 @@ +import { CommonModule } from '@angular/common'; +import { Component, OnInit } from '@angular/core'; +import { Hero } from '../hero'; +import { HeroService } from '../hero.service'; +import { RouterLink } from '@angular/router'; + +@Component({ + selector: 'app-dashboard.component', + imports: [CommonModule, RouterLink], + templateUrl: './dashboard.component.html', + styleUrl: './dashboard.component.css' +}) +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.css b/src/app/hero-detail/hero-detail.component.css index e69de29..b7029d5 100644 --- a/src/app/hero-detail/hero-detail.component.css +++ b/src/app/hero-detail/hero-detail.component.css @@ -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.html b/src/app/hero-detail/hero-detail.component.html index 698c682..d780243 100644 --- a/src/app/hero-detail/hero-detail.component.html +++ b/src/app/hero-detail/hero-detail.component.html @@ -1,5 +1,7 @@
+ +

{{hero.name | uppercase}} Details

id: {{hero.id}}
@@ -7,4 +9,4 @@
-
\ 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 f1bdbb2..78342f4 100644 --- a/src/app/hero-detail/hero-detail.component.ts +++ b/src/app/hero-detail/hero-detail.component.ts @@ -2,6 +2,10 @@ import {Component, Input} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {Hero} from '../hero'; import {CommonModule} from '@angular/common'; +import { ActivatedRoute } from '@angular/router'; +import { HeroService } from '../hero.service'; +import { Location } from '@angular/common'; + @Component({ standalone: true, @@ -12,6 +16,27 @@ import {CommonModule} from '@angular/common'; }) export class HeroDetailComponent { + @Input() hero?: Hero; + constructor( + private route: ActivatedRoute, + private heroService: HeroService, + private location: Location + ) {} + + goBack(): void { + this.location.back(); + } + + ngOnInit(): void { + this.getHero(); + } + + getHero(): void { + const id = Number(this.route.snapshot.paramMap.get('id')); + this.heroService.getHero(id) + .subscribe(hero => this.hero = hero); + } + } diff --git a/src/app/hero.service.ts b/src/app/hero.service.ts index 936e1c1..488a84e 100644 --- a/src/app/hero.service.ts +++ b/src/app/hero.service.ts @@ -10,12 +10,20 @@ import { MessageService } from './message.service'; export class HeroService { - getHeroes(): Observable { + constructor(private messageService: MessageService) { } + +getHeroes(): Observable { const heroes = of(HEROES); this.messageService.add('HeroService: fetched heroes'); return heroes; } - constructor(private messageService: MessageService) { } -} + getHero(id: number): Observable { + // For now, assume that a hero with the specified `id` always exists. + // Error handling will be added in the next step of the tutorial. + const hero = HEROES.find(h => h.id === id)!; + this.messageService.add(`HeroService: fetched hero id=${id}`); + return of(hero); + } +} \ No newline at end of file diff --git a/src/app/heroes/heroes.component.css b/src/app/heroes/heroes.component.css index 9b8b843..4bf53ff 100644 --- a/src/app/heroes/heroes.component.css +++ b/src/app/heroes/heroes.component.css @@ -5,51 +5,37 @@ 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; + cursor: pointer; } -.heroes button:hover { - color: #2c3a41; - background-color: #e6e6e6; +.heroes li:hover { left: .1em; } -.heroes button:active { +.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 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; @@ -57,10 +43,12 @@ 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; -} - -.heroes .name { - align-self: center; } \ No newline at end of file diff --git a/src/app/heroes/heroes.component.html b/src/app/heroes/heroes.component.html index e049c03..9e5774a 100644 --- a/src/app/heroes/heroes.component.html +++ b/src/app/heroes/heroes.component.html @@ -1,12 +1,8 @@

My Heroes

- - - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/heroes/heroes.component.ts b/src/app/heroes/heroes.component.ts index 2896eed..37a6802 100644 --- a/src/app/heroes/heroes.component.ts +++ b/src/app/heroes/heroes.component.ts @@ -5,12 +5,13 @@ import { FormsModule } from '@angular/forms'; import { HeroService } from '../hero.service'; //новая библиотека добавлена вместо HEROES import { HeroDetailComponent } from '../hero-detail/hero-detail.component'; import { MessageService } from '../message.service'; +import { RouterLink } from '@angular/router'; @Component({ selector: 'app-heroes', templateUrl: './heroes.component.html', styleUrls: ['./heroes.component.css'], - imports: [CommonModule, FormsModule, HeroDetailComponent] + imports: [CommonModule, FormsModule, RouterLink] }) export class HeroesComponent implements OnInit { @@ -25,10 +26,7 @@ export class HeroesComponent implements OnInit { this.getHeroes(); } - onSelect(hero: Hero): void { - this.selectedHero = hero; - this.messageService.add(`HeroesComponent: Selected hero Name=${hero.name}`); - } + getHeroes(): void { this.heroService.getHeroes()