Remove unused hero part
This commit is contained in:
@@ -4,14 +4,10 @@ import { RouterModule, Routes } from '@angular/router';
|
||||
import { DashboardComponent } from './dashboard.component';
|
||||
import { AlbumComponent } from './album.component';
|
||||
import { ArtistComponent } from './artist.component';
|
||||
import { HeroesComponent } from './heroes.component';
|
||||
import { HeroDetailComponent } from './hero-detail.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
|
||||
{ path: 'dashboard', component: DashboardComponent },
|
||||
{ path: 'detail/:id', component: HeroDetailComponent },
|
||||
{ path: 'heroes', component: HeroesComponent },
|
||||
{ path: 'album/:name', component: AlbumComponent },
|
||||
{ path: 'artist/:name', component: ArtistComponent }
|
||||
];
|
||||
|
||||
@@ -8,12 +8,9 @@ import { HttpModule } from '@angular/http';
|
||||
// import { InMemoryDataService } from './in-memory-data.service';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
import { HeroDetailComponent } from './hero-detail.component';
|
||||
import { HeroesComponent } from './heroes.component';
|
||||
import { DashboardComponent } from './dashboard.component';
|
||||
import { AlbumComponent } from './album.component';
|
||||
import { ArtistComponent } from './artist.component';
|
||||
import { HeroService } from './hero.service';
|
||||
|
||||
import { ElsService } from './els.service';
|
||||
|
||||
@@ -32,8 +29,6 @@ import { SortPipe } from './sortby.pipe';
|
||||
],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
HeroDetailComponent,
|
||||
HeroesComponent,
|
||||
DashboardComponent,
|
||||
AlbumComponent,
|
||||
ArtistComponent,
|
||||
@@ -41,7 +36,6 @@ import { SortPipe } from './sortby.pipe';
|
||||
SortPipe
|
||||
],
|
||||
providers: [
|
||||
HeroService,
|
||||
ElsService
|
||||
],
|
||||
bootstrap: [ AppComponent ]
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { HeroService } from './hero.service';
|
||||
import { ElsService } from './els.service';
|
||||
import { Song } from './object/song';
|
||||
import { Bucket } from './object/bucket';
|
||||
|
||||
@@ -1,33 +0,0 @@
|
||||
label {
|
||||
display: inline-block;
|
||||
width: 3em;
|
||||
margin: .5em 0;
|
||||
color: #607D8B;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input {
|
||||
height: 2em;
|
||||
font-size: 1em;
|
||||
padding-left: .4em;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 20px;
|
||||
font-family: Arial;
|
||||
background-color: #eee;
|
||||
border: none;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer; cursor: hand;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #cfd8dc;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
background-color: #eee;
|
||||
color: #ccc;
|
||||
cursor: auto;
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
<div *ngIf="hero">
|
||||
<h2>{{hero.name}} details!</h2>
|
||||
<div>
|
||||
<label>id: </label>{{hero.id}}</div>
|
||||
<div>
|
||||
<label>name: </label>
|
||||
<input [(ngModel)]="hero.name" placeholder="name" />
|
||||
</div>
|
||||
<button (click)="save()">Save</button>
|
||||
<button (click)="goBack()">Back</button>
|
||||
</div>
|
||||
@@ -1,37 +0,0 @@
|
||||
import 'rxjs/add/operator/switchMap';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute, Params } from '@angular/router';
|
||||
import { Location } from '@angular/common';
|
||||
|
||||
import { HeroService } from './hero.service';
|
||||
import { Hero } from './hero';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-detail',
|
||||
templateUrl: './hero-detail.component.html'
|
||||
})
|
||||
|
||||
export class HeroDetailComponent implements OnInit {
|
||||
hero: Hero;
|
||||
|
||||
constructor(
|
||||
private heroService: HeroService,
|
||||
private route: ActivatedRoute,
|
||||
private location: Location
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.route.params
|
||||
.switchMap((params: Params) => this.heroService.getHero(+params['id']))
|
||||
.subscribe(hero => this.hero = hero);
|
||||
}
|
||||
|
||||
save(): void {
|
||||
this.heroService.update(this.hero)
|
||||
.then(() => this.goBack());
|
||||
}
|
||||
|
||||
goBack(): void {
|
||||
this.location.back();
|
||||
}
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Headers, Http } from '@angular/http';
|
||||
|
||||
import 'rxjs/add/operator/toPromise';
|
||||
|
||||
import { Hero } from './hero';
|
||||
|
||||
@Injectable()
|
||||
export class HeroService {
|
||||
private heroesUrl = 'api/heroes'; // URL to web api
|
||||
private headers = new Headers({'Content-Type': 'application/json'});
|
||||
|
||||
constructor(private http: Http) { }
|
||||
|
||||
getHeroes(): Promise<Hero[]> {
|
||||
return this.http.get(this.heroesUrl)
|
||||
.toPromise()
|
||||
.then(response => response.json().data as Hero[])
|
||||
.catch(this.handleError);
|
||||
}
|
||||
|
||||
update(hero: Hero): Promise<Hero> {
|
||||
const url = `${this.heroesUrl}/${hero.id}`;
|
||||
return this.http.put(url, JSON.stringify(hero), {headers: this.headers})
|
||||
.toPromise()
|
||||
.then(() => hero)
|
||||
.catch(this.handleError);
|
||||
}
|
||||
|
||||
create(name: string): Promise<Hero> {
|
||||
return this.http.post(this.heroesUrl, JSON.stringify({name: name}), {headers: this.headers})
|
||||
.toPromise()
|
||||
.then(res => res.json().data as Hero)
|
||||
.catch(this.handleError);
|
||||
}
|
||||
|
||||
delete(id: number): Promise<void> {
|
||||
const url = `${this.heroesUrl}/${id}`;
|
||||
return this.http.delete(url, {headers: this.headers})
|
||||
.toPromise()
|
||||
.then(() => null)
|
||||
.catch(this.handleError);
|
||||
}
|
||||
|
||||
getHero(id: number): Promise<Hero> {
|
||||
const url = `${this.heroesUrl}/${id}`;
|
||||
return this.http.get(url)
|
||||
.toPromise()
|
||||
.then(response => response.json().data as Hero)
|
||||
.catch(this.handleError);
|
||||
}
|
||||
|
||||
private handleError(error: any): Promise<any> {
|
||||
console.error('An error occurred', error); // for demo purposes only
|
||||
return Promise.reject(error.message || error);
|
||||
}
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
export class Hero {
|
||||
id: number;
|
||||
name: string;
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
.selected {
|
||||
background-color: #CFD8DC !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.heroes {
|
||||
margin: 0 0 2em 0;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
width: 15em;
|
||||
}
|
||||
|
||||
.heroes li {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
left: 0;
|
||||
background-color: #EEE;
|
||||
margin: .5em;
|
||||
padding: .3em 0;
|
||||
height: 1.6em;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.heroes li.selected:hover {
|
||||
background-color: #BBD8DC !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.heroes li:hover {
|
||||
color: #607D8B;
|
||||
background-color: #DDD;
|
||||
left: .1em;
|
||||
}
|
||||
|
||||
.heroes .text {
|
||||
position: relative;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.heroes .badge {
|
||||
display: inline-block;
|
||||
font-size: small;
|
||||
color: white;
|
||||
padding: 0.8em 0.7em 0 0.7em;
|
||||
background-color: #607D8B;
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
left: -1px;
|
||||
top: -4px;
|
||||
height: 1.8em;
|
||||
margin-right: .8em;
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
button.delete {
|
||||
float:right;
|
||||
margin-top: 2px;
|
||||
margin-right: .8em;
|
||||
background-color: gray !important;
|
||||
color:white;
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
<h2>My Heroes</h2>
|
||||
<ul class="heroes">
|
||||
<li *ngFor="let hero of heroes"
|
||||
[class.selected]="hero === selectedHero"
|
||||
(click)="onSelect(hero)" >
|
||||
<span class="badge">{{hero.id}}</span> {{hero.name}}
|
||||
<button class="delete"
|
||||
(click)="delete(hero); $event.stopPropagation()">x</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div *ngIf="selectedHero">
|
||||
<h2>{{selectedHero.name | uppercase}} is my hero</h2>
|
||||
<button (click)="gotoDetail()">View Details</button>
|
||||
</div>
|
||||
<div>
|
||||
<label>Hero name:</label> <input #heroName />
|
||||
<button (click)="add(heroName.value); heroName.value=''">
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
@@ -1,65 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { OnInit } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
import { Hero } from './hero';
|
||||
|
||||
import { HeroService } from './hero.service';
|
||||
|
||||
@Component({
|
||||
selector: 'my-heroes',
|
||||
templateUrl: './heroes.component.html',
|
||||
styleUrls: [ './heroes.component.css' ]
|
||||
})
|
||||
|
||||
export class HeroesComponent implements OnInit {
|
||||
heroes: Hero[];
|
||||
selectedHero: Hero;
|
||||
|
||||
constructor(
|
||||
private heroService: HeroService,
|
||||
private router: Router
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.getHeroes();
|
||||
}
|
||||
|
||||
onSelect(hero: Hero) {
|
||||
this.selectedHero = hero;
|
||||
}
|
||||
|
||||
getHeroes(): void {
|
||||
// this.heroService.getHeroes().then(heroes => this.heroes = heroes);
|
||||
this.heroService.getHeroes().then(heroes => this.heroes = heroes);
|
||||
}
|
||||
|
||||
add(name: string): void {
|
||||
name = name.trim();
|
||||
if (!name) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.heroService.create(name)
|
||||
.then(hero => {
|
||||
this.heroes.push(hero);
|
||||
this.selectedHero = null;
|
||||
});
|
||||
}
|
||||
|
||||
delete(hero: Hero): void {
|
||||
this.heroService
|
||||
.delete(hero.id)
|
||||
.then(() => {
|
||||
this.heroes = this.heroes.filter(h => h !== hero);
|
||||
if (this.selectedHero === hero) { this.selectedHero = null; }
|
||||
});
|
||||
}
|
||||
|
||||
gotoDetail(): void {
|
||||
this.router.navigate(['/detail', this.selectedHero.id]);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
import { InMemoryDbService } from 'angular-in-memory-web-api';
|
||||
|
||||
export class InMemoryDataService implements InMemoryDbService {
|
||||
createDb() {
|
||||
let heroes = [
|
||||
{id: 11, name: 'Mr. Nice'},
|
||||
{id: 12, name: 'Narco'},
|
||||
{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};
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user