cleaned up template
This commit is contained in:
nikurasu
parent
0fb191a129
commit
32133cc1e3
34 changed files with 0 additions and 805 deletions
|
|
@ -27,7 +27,6 @@
|
||||||
"@angular/cli": "~14.2.3",
|
"@angular/cli": "~14.2.3",
|
||||||
"@angular/compiler-cli": "^14.2.0",
|
"@angular/compiler-cli": "^14.2.0",
|
||||||
"@types/jasmine": "~4.0.0",
|
"@types/jasmine": "~4.0.0",
|
||||||
"angular-in-memory-web-api": "^0.14.0",
|
|
||||||
"jasmine-core": "~4.3.0",
|
"jasmine-core": "~4.3.0",
|
||||||
"karma": "~6.4.0",
|
"karma": "~6.4.0",
|
||||||
"karma-chrome-launcher": "~3.1.0",
|
"karma-chrome-launcher": "~3.1.0",
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,7 @@
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { RouterModule, Routes } from '@angular/router';
|
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({
|
@NgModule({
|
||||||
|
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
<h1>{{ title }}</h1>
|
|
||||||
<nav>
|
|
||||||
<a routerLink="/dashboard">Dashboard</a>
|
|
||||||
<a routerLink="/heroes">Heroes</a>
|
|
||||||
</nav>
|
|
||||||
<router-outlet></router-outlet>
|
|
||||||
<app-messages></app-messages>
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,35 +1,18 @@
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { BrowserModule } from '@angular/platform-browser';
|
import { BrowserModule } from '@angular/platform-browser';
|
||||||
import { FormsModule } from '@angular/forms';
|
import { FormsModule } from '@angular/forms';
|
||||||
import { HttpClientModule } from '@angular/common/http';
|
|
||||||
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
|
|
||||||
import { InMemoryDataService } from './in-memory-data.service';
|
|
||||||
|
|
||||||
import { AppRoutingModule } from './app-routing.module';
|
import { AppRoutingModule } from './app-routing.module';
|
||||||
import { AppComponent } from './app.component';
|
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';
|
|
||||||
import { HeroSearchComponent } from './hero-search/hero-search.component';
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
AppComponent,
|
AppComponent,
|
||||||
HeroesComponent,
|
|
||||||
HeroDetailComponent,
|
|
||||||
MessagesComponent,
|
|
||||||
DashboardComponent,
|
|
||||||
HeroSearchComponent
|
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
FormsModule,
|
FormsModule,
|
||||||
AppRoutingModule,
|
AppRoutingModule,
|
||||||
HttpClientModule,
|
|
||||||
HttpClientInMemoryWebApiModule.forRoot(
|
|
||||||
InMemoryDataService, {dataEncapsulation: false},
|
|
||||||
),
|
|
||||||
],
|
],
|
||||||
providers: [],
|
providers: [],
|
||||||
bootstrap: [AppComponent]
|
bootstrap: [AppComponent]
|
||||||
|
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
<h2>Top Heroes</h2>
|
|
||||||
<div class="heroes-menu">
|
|
||||||
<a *ngFor="let hero of heroes" routerLink="/detail/{{hero.id}}">
|
|
||||||
{{hero.name}}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<app-hero-search></app-hero-search>
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
/* DashboardComponent's private CSS styles */
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.heroes-menu {
|
|
||||||
padding: 0;
|
|
||||||
margin: auto;
|
|
||||||
max-width: 1000px;
|
|
||||||
|
|
||||||
/* flexbox */
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -moz-box;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: -webkit-flex;
|
|
||||||
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: black;
|
|
||||||
}
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
||||||
|
|
||||||
import { DashboardComponent } from './dashboard.component';
|
|
||||||
|
|
||||||
describe('DashboardComponent', () => {
|
|
||||||
let component: DashboardComponent;
|
|
||||||
let fixture: ComponentFixture<DashboardComponent>;
|
|
||||||
|
|
||||||
beforeEach(async () => {
|
|
||||||
await TestBed.configureTestingModule({
|
|
||||||
declarations: [ DashboardComponent ]
|
|
||||||
})
|
|
||||||
.compileComponents();
|
|
||||||
|
|
||||||
fixture = TestBed.createComponent(DashboardComponent);
|
|
||||||
component = fixture.componentInstance;
|
|
||||||
fixture.detectChanges();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should create', () => {
|
|
||||||
expect(component).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
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))
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
<div *ngIf="hero">
|
|
||||||
<h2>{{hero.name | uppercase}} Details</h2>
|
|
||||||
<div>id: {{hero.id}}</div>
|
|
||||||
<div>
|
|
||||||
<label for="hero-name">Hero name: </label>
|
|
||||||
<input id="hero-name" [(ngModel)]="hero.name" placeholder="name">
|
|
||||||
</div>
|
|
||||||
<button type="button" (click)="goBack()">go back</button>
|
|
||||||
<button type="button" (click)="save()">save</button>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
/* HeroDetailComponent's private CSS styles */
|
|
||||||
label {
|
|
||||||
color: #435960;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
input {
|
|
||||||
font-size: 1em;
|
|
||||||
padding: .5rem;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
margin-top: 20px;
|
|
||||||
margin-right: .5rem;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
||||||
|
|
||||||
import { HeroDetailComponent } from './hero-detail.component';
|
|
||||||
|
|
||||||
describe('HeroDetailComponent', () => {
|
|
||||||
let component: HeroDetailComponent;
|
|
||||||
let fixture: ComponentFixture<HeroDetailComponent>;
|
|
||||||
|
|
||||||
beforeEach(async () => {
|
|
||||||
await TestBed.configureTestingModule({
|
|
||||||
declarations: [ HeroDetailComponent ]
|
|
||||||
})
|
|
||||||
.compileComponents();
|
|
||||||
|
|
||||||
fixture = TestBed.createComponent(HeroDetailComponent);
|
|
||||||
component = fixture.componentInstance;
|
|
||||||
fixture.detectChanges();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should create', () => {
|
|
||||||
expect(component).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
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',
|
|
||||||
templateUrl: './hero-detail.component.html',
|
|
||||||
styleUrls: ['./hero-detail.component.scss']
|
|
||||||
})
|
|
||||||
export class HeroDetailComponent implements OnInit {
|
|
||||||
hero: Hero | undefined
|
|
||||||
|
|
||||||
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()
|
|
||||||
}
|
|
||||||
|
|
||||||
save(): void {
|
|
||||||
if(this.hero){
|
|
||||||
this.heroService.updateHero(this.hero).subscribe(() => this.goBack())
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
<div id="search-component">
|
|
||||||
<label for="search-box">Hero Search</label>
|
|
||||||
<input #searchBox id="search-box" (input)="search(searchBox.value)">
|
|
||||||
|
|
||||||
<ul class="search-result">
|
|
||||||
<li *ngFor="let hero of heroes$ | async">
|
|
||||||
|
|
||||||
<a routerLink="/detail/{{hero.id}}">
|
|
||||||
{{hero.name}}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,47 +0,0 @@
|
||||||
/* HeroSearch private styles */
|
|
||||||
|
|
||||||
label {
|
|
||||||
display: block;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
margin-top: 1rem;
|
|
||||||
margin-bottom: .5rem;
|
|
||||||
|
|
||||||
}
|
|
||||||
input {
|
|
||||||
padding: .5rem;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 600px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
input:focus {
|
|
||||||
outline: #336699 auto 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
.search-result li a {
|
|
||||||
border-bottom: 1px solid gray;
|
|
||||||
border-left: 1px solid gray;
|
|
||||||
border-right: 1px solid gray;
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 600px;
|
|
||||||
padding: .5rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
text-decoration: none;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-result li a:hover {
|
|
||||||
background-color: #435A60;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.search-result {
|
|
||||||
margin-top: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
||||||
|
|
||||||
import { HeroSearchComponent } from './hero-search.component';
|
|
||||||
|
|
||||||
describe('HeroSearchComponent', () => {
|
|
||||||
let component: HeroSearchComponent;
|
|
||||||
let fixture: ComponentFixture<HeroSearchComponent>;
|
|
||||||
|
|
||||||
beforeEach(async () => {
|
|
||||||
await TestBed.configureTestingModule({
|
|
||||||
declarations: [ HeroSearchComponent ]
|
|
||||||
})
|
|
||||||
.compileComponents();
|
|
||||||
|
|
||||||
fixture = TestBed.createComponent(HeroSearchComponent);
|
|
||||||
component = fixture.componentInstance;
|
|
||||||
fixture.detectChanges();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should create', () => {
|
|
||||||
expect(component).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
|
||||||
import { debounceTime, distinctUntilChanged, Observable, Subject, switchMap } from 'rxjs';
|
|
||||||
import { Hero } from '../hero';
|
|
||||||
import { HeroService } from '../hero.service';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-hero-search',
|
|
||||||
templateUrl: './hero-search.component.html',
|
|
||||||
styleUrls: ['./hero-search.component.scss']
|
|
||||||
})
|
|
||||||
export class HeroSearchComponent implements OnInit {
|
|
||||||
heroes$!: Observable<Hero[]>
|
|
||||||
private searchTerms = new Subject<string>()
|
|
||||||
|
|
||||||
constructor(
|
|
||||||
private heroService: HeroService
|
|
||||||
) { }
|
|
||||||
|
|
||||||
search(term: string): void {
|
|
||||||
this.searchTerms.next(term)
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
|
||||||
this.heroes$ = this.searchTerms.pipe(
|
|
||||||
debounceTime(300),
|
|
||||||
distinctUntilChanged(),
|
|
||||||
switchMap((term: string) => this.heroService.searchHeroes(term))
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
import { TestBed } from '@angular/core/testing';
|
|
||||||
|
|
||||||
import { HeroService } from './hero.service';
|
|
||||||
|
|
||||||
describe('HeroService', () => {
|
|
||||||
let service: HeroService;
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
TestBed.configureTestingModule({});
|
|
||||||
service = TestBed.inject(HeroService);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should be created', () => {
|
|
||||||
expect(service).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,81 +0,0 @@
|
||||||
import { HttpClient, HttpHeaders } from '@angular/common/http';
|
|
||||||
import { Injectable } from '@angular/core';
|
|
||||||
import { catchError, Observable, of, pipe, tap } from 'rxjs';
|
|
||||||
import { Hero } from './hero';
|
|
||||||
import { MessageService } from './messages.service';
|
|
||||||
import { HEROES } from './mock-heroes';
|
|
||||||
|
|
||||||
@Injectable({
|
|
||||||
providedIn: 'root'
|
|
||||||
})
|
|
||||||
export class HeroService {
|
|
||||||
httpOptions = {
|
|
||||||
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
|
|
||||||
};
|
|
||||||
|
|
||||||
private heroesUrl = 'api/heroes'
|
|
||||||
|
|
||||||
constructor(private messageService: MessageService, private http: HttpClient) { }
|
|
||||||
|
|
||||||
getHeroes(): Observable<Hero[]> {
|
|
||||||
return this.http.get<Hero[]>(this.heroesUrl).pipe(
|
|
||||||
tap(_ => this.log('fetched Heroes')),
|
|
||||||
catchError(this.handleError<Hero[]>('getHeroes', []))
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
getHero(id: number): Observable<Hero> {
|
|
||||||
const url = `${this.heroesUrl}/${id}`
|
|
||||||
return this.http.get<Hero>(url).pipe(
|
|
||||||
tap(_ => this.log(`fetched hero id=${id}`)),
|
|
||||||
catchError(this.handleError<Hero>(`getHero id=${id}`))
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
updateHero(hero: Hero): Observable<any> {
|
|
||||||
return this.http.put(this.heroesUrl, hero, this.httpOptions).pipe(
|
|
||||||
tap(_ => this.log(`updated hero id=${hero.id}`)),
|
|
||||||
catchError(this.handleError<any>(`updatedHero`))
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
addHero(hero: Hero): Observable<Hero> {
|
|
||||||
return this.http.post<Hero>(this.heroesUrl, hero, this.httpOptions).pipe(
|
|
||||||
tap((newHero: Hero) => this.log(`added hero w/ id=${newHero.id}`)),
|
|
||||||
catchError(this.handleError<Hero>('addHero'))
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
deleteHero(id: number): Observable<Hero> {
|
|
||||||
const url = `${this.heroesUrl}/${id}`
|
|
||||||
|
|
||||||
return this.http.delete<Hero>(url, this.httpOptions).pipe(
|
|
||||||
tap(_ => this.log(`deleted hero id=${id}`)),
|
|
||||||
catchError(this.handleError<Hero>('deleteHero'))
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
searchHeroes(term: string): Observable<Hero[]> {
|
|
||||||
if (!term.trim()) {
|
|
||||||
return of([])
|
|
||||||
}
|
|
||||||
return this.http.get<Hero[]>(`${this.heroesUrl}/?name=${term}`).pipe(
|
|
||||||
tap(x => x.length ?
|
|
||||||
this.log(`found heroes matching "${term}"`) :
|
|
||||||
this.log(`no heroes matching "${term}"`)),
|
|
||||||
catchError(this.handleError<Hero[]>('searchHeroes', []))
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
private log(message: string) {
|
|
||||||
this.messageService.add(`HeroService: ${message}`)
|
|
||||||
}
|
|
||||||
|
|
||||||
private handleError<T>(operation = 'operation', result?: T) {
|
|
||||||
return (error: any): Observable<T> => {
|
|
||||||
console.log(error);
|
|
||||||
this.log(`${operation} failed: ${error} message`)
|
|
||||||
return of(result as T)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
export interface Hero {
|
|
||||||
id: number
|
|
||||||
name: string
|
|
||||||
}
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
<h2>Heroes</h2>
|
|
||||||
<div>
|
|
||||||
<label for="new-hero">Hero name: </label>
|
|
||||||
<input id="new-hero" #heroName />
|
|
||||||
|
|
||||||
<!-- (click) passes input value to add() and then clears the input -->
|
|
||||||
<button type="button" class="add-button" (click)="add(heroName.value); heroName.value=''">
|
|
||||||
Add hero
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<ul class="heroes">
|
|
||||||
<li *ngFor="let hero of heroes">
|
|
||||||
<a routerLink="/detail/{{hero.id}}">
|
|
||||||
<span class="badge">{{hero.id}}</span>{{hero.name}}
|
|
||||||
</a>
|
|
||||||
<button type="button" class="delete" title="delete hero" (click)="delete(hero)">x</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
@ -1,90 +0,0 @@
|
||||||
/* HeroesComponent's private CSS styles */
|
|
||||||
.heroes {
|
|
||||||
margin: 0 0 2em 0;
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
width: 15em;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
padding: .5rem;
|
|
||||||
margin: 1rem 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-button {
|
|
||||||
padding: .5rem 1.5rem;
|
|
||||||
font-size: 1rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-button:hover {
|
|
||||||
color: white;
|
|
||||||
background-color: #42545C;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.delete {
|
|
||||||
position: absolute;
|
|
||||||
left: 210px;
|
|
||||||
top: 5px;
|
|
||||||
background-color: white;
|
|
||||||
color: #525252;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
margin: 0;
|
|
||||||
padding: 1px 10px 3px 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.delete:hover {
|
|
||||||
background-color: #525252;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
||||||
|
|
||||||
import { HeroesComponent } from './heroes.component';
|
|
||||||
|
|
||||||
describe('HeroesComponent', () => {
|
|
||||||
let component: HeroesComponent;
|
|
||||||
let fixture: ComponentFixture<HeroesComponent>;
|
|
||||||
|
|
||||||
beforeEach(async () => {
|
|
||||||
await TestBed.configureTestingModule({
|
|
||||||
declarations: [ HeroesComponent ]
|
|
||||||
})
|
|
||||||
.compileComponents();
|
|
||||||
|
|
||||||
fixture = TestBed.createComponent(HeroesComponent);
|
|
||||||
component = fixture.componentInstance;
|
|
||||||
fixture.detectChanges();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should create', () => {
|
|
||||||
expect(component).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,36 +0,0 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
|
||||||
import { Hero } from '../hero';
|
|
||||||
import { HeroService } from '../hero.service';
|
|
||||||
import { MessageService } from '../messages.service';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-heroes',
|
|
||||||
templateUrl: './heroes.component.html',
|
|
||||||
styleUrls: ['./heroes.component.scss']
|
|
||||||
})
|
|
||||||
export class HeroesComponent implements OnInit {
|
|
||||||
|
|
||||||
constructor(private heroService: HeroService, private messageService: MessageService) { }
|
|
||||||
|
|
||||||
heroes: Hero[] = []
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
|
||||||
this.getHeroes()
|
|
||||||
}
|
|
||||||
|
|
||||||
getHeroes(): void {
|
|
||||||
this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes)
|
|
||||||
}
|
|
||||||
|
|
||||||
add(name: string): void {
|
|
||||||
name = name.trim()
|
|
||||||
if (!name) { return }
|
|
||||||
this.heroService.addHero({ name } as Hero).subscribe((hero: Hero) => {this.heroes.push(hero)})
|
|
||||||
}
|
|
||||||
|
|
||||||
delete(hero: Hero): void {
|
|
||||||
this.heroes = this.heroes.filter(h => h !== hero)
|
|
||||||
this.heroService.deleteHero(hero.id).subscribe()
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
import { TestBed } from '@angular/core/testing';
|
|
||||||
|
|
||||||
import { InMemoryDataService } from './in-memory-data.service';
|
|
||||||
|
|
||||||
describe('InMemoryDataService', () => {
|
|
||||||
let service: InMemoryDataService;
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
TestBed.configureTestingModule({});
|
|
||||||
service = TestBed.inject(InMemoryDataService);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should be created', () => {
|
|
||||||
expect(service).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
import { Injectable } from '@angular/core';
|
|
||||||
import { InMemoryDbService } from 'angular-in-memory-web-api';
|
|
||||||
import { Hero } from './hero';
|
|
||||||
|
|
||||||
@Injectable({
|
|
||||||
providedIn: 'root'
|
|
||||||
})
|
|
||||||
export class InMemoryDataService implements InMemoryDbService {
|
|
||||||
createDb() {
|
|
||||||
const heroes = [
|
|
||||||
{ id: 12, name: 'Dr. Nice' },
|
|
||||||
{ id: 13, name: 'Bombasto' },
|
|
||||||
{ id: 14, name: 'Celeritas' },
|
|
||||||
{ id: 15, name: 'Magneta' },
|
|
||||||
{ id: 16, name: 'RubberMan' },
|
|
||||||
{ id: 17, name: 'Dynama' },
|
|
||||||
{ id: 18, name: 'Dr. IQ' },
|
|
||||||
{ id: 19, name: 'Magma' },
|
|
||||||
{ id: 20, name: 'Tornado' }
|
|
||||||
]
|
|
||||||
return {heroes}
|
|
||||||
}
|
|
||||||
|
|
||||||
genId(heroes: Hero[]): number {
|
|
||||||
return heroes.length > 0 ? Math.max(...heroes.map(hero => hero.id)) + 1 : 11
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor() { }
|
|
||||||
}
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
import { TestBed } from '@angular/core/testing';
|
|
||||||
|
|
||||||
import { MessageService } from './messages.service';
|
|
||||||
|
|
||||||
describe('MessagesService', () => {
|
|
||||||
let service: MessageService;
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
TestBed.configureTestingModule({});
|
|
||||||
service = TestBed.inject(MessageService);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should be created', () => {
|
|
||||||
expect(service).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
import { Injectable } from '@angular/core';
|
|
||||||
|
|
||||||
@Injectable({
|
|
||||||
providedIn: 'root'
|
|
||||||
})
|
|
||||||
export class MessageService {
|
|
||||||
messages: string[] = []
|
|
||||||
|
|
||||||
add(message: string) {
|
|
||||||
this.messages.push(message)
|
|
||||||
}
|
|
||||||
|
|
||||||
clear() {
|
|
||||||
this.messages = []
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor() { }
|
|
||||||
}
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
<div *ngIf="messageService.messages.length">
|
|
||||||
|
|
||||||
<h2>Messages</h2>
|
|
||||||
<button type="button" class="clear" (click)="messageService.clear()">Clear Messages</button>
|
|
||||||
<div *ngFor="let message of messageService.messages">{{message}}</div>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
/* MessagesComponent's private CSS styles */
|
|
||||||
h2 {
|
|
||||||
color: #A80000;
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
font-weight: lighter;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clear {
|
|
||||||
color: #333;
|
|
||||||
background-color: #eee;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
padding: 1rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
.clear:hover {
|
|
||||||
color: white;
|
|
||||||
background-color: #42545C;
|
|
||||||
}
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
||||||
|
|
||||||
import { MessagesComponent } from './messages.component';
|
|
||||||
|
|
||||||
describe('MessagesComponent', () => {
|
|
||||||
let component: MessagesComponent;
|
|
||||||
let fixture: ComponentFixture<MessagesComponent>;
|
|
||||||
|
|
||||||
beforeEach(async () => {
|
|
||||||
await TestBed.configureTestingModule({
|
|
||||||
declarations: [ MessagesComponent ]
|
|
||||||
})
|
|
||||||
.compileComponents();
|
|
||||||
|
|
||||||
fixture = TestBed.createComponent(MessagesComponent);
|
|
||||||
component = fixture.componentInstance;
|
|
||||||
fixture.detectChanges();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should create', () => {
|
|
||||||
expect(component).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
|
||||||
import { MessageService } from '../messages.service';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-messages',
|
|
||||||
templateUrl: './messages.component.html',
|
|
||||||
styleUrls: ['./messages.component.scss']
|
|
||||||
})
|
|
||||||
export class MessagesComponent implements OnInit {
|
|
||||||
|
|
||||||
constructor(public messageService: MessageService) { }
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
import { Hero } from "./hero";
|
|
||||||
|
|
||||||
export const HEROES: Hero[] = [
|
|
||||||
{ id: 12, name: 'Dr. Nice' },
|
|
||||||
{ id: 13, name: 'Bombasto' },
|
|
||||||
{ id: 14, name: 'Celeritas' },
|
|
||||||
{ id: 15, name: 'Magneta' },
|
|
||||||
{ id: 16, name: 'RubberMan' },
|
|
||||||
{ id: 17, name: 'Dynama' },
|
|
||||||
{ id: 18, name: 'Dr. IQ' },
|
|
||||||
{ id: 19, name: 'Magma' },
|
|
||||||
{ id: 20, name: 'Tornado' }
|
|
||||||
]
|
|
||||||
|
|
@ -1876,13 +1876,6 @@ ajv@^6.12.4, ajv@^6.12.5:
|
||||||
json-schema-traverse "^0.4.1"
|
json-schema-traverse "^0.4.1"
|
||||||
uri-js "^4.2.2"
|
uri-js "^4.2.2"
|
||||||
|
|
||||||
angular-in-memory-web-api@^0.14.0:
|
|
||||||
version "0.14.0"
|
|
||||||
resolved "https://registry.yarnpkg.com/angular-in-memory-web-api/-/angular-in-memory-web-api-0.14.0.tgz#4f8aae27d5e59ecb7acbf17ceefb3393c30085a3"
|
|
||||||
integrity sha512-8RLFBpXZONDQxYGKiheaYQQl3iydesCrhWLuzDD6AsQDcOF+HEvIuOfBdJaTWKfqyNZNWjHvXzIyT0bUIunb/A==
|
|
||||||
dependencies:
|
|
||||||
tslib "^2.3.0"
|
|
||||||
|
|
||||||
ansi-colors@4.1.3:
|
ansi-colors@4.1.3:
|
||||||
version "4.1.3"
|
version "4.1.3"
|
||||||
resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.3.tgz#37611340eb2243e70cc604cad35d63270d48781b"
|
resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.3.tgz#37611340eb2243e70cc604cad35d63270d48781b"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue