diff --git a/.dir-locals.el b/.dir-locals.el index 0affd72..4d2c06c 100644 --- a/.dir-locals.el +++ b/.dir-locals.el @@ -5,4 +5,7 @@ (eval . (prettier-js-mode 1)))) (typescript-mode . ((typescript-indent-level . 2) (eval . (prettier-js-mode 1)) - (prettier-js-args . ("--single-quote" "--jsx-single-quote"))))) + (prettier-js-args . ("--single-quote" "--jsx-single-quote")))) + (typescript-ts-mode . ((typescript-indent-level . 2) + (eval . (prettier-js-mode 1)) + (prettier-js-args . ("--single-quote" "--jsx-single-quote"))))) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 0297262..55798a2 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,10 +1,14 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; +import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; -const routes: Routes = []; +const routes: Routes = [ + { path: '', redirectTo: 'pokemons', pathMatch: 'full' }, + { path: '**', component: PageNotFoundComponent }, +]; @NgModule({ imports: [RouterModule.forRoot(routes)], - exports: [RouterModule] + exports: [RouterModule], }) -export class AppRoutingModule { } +export class AppRoutingModule {} diff --git a/src/app/app.component.html b/src/app/app.component.html index 35fc690..5d9c252 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,33 +1,7 @@ -

Pokémons

- -
-
-
-
-
- -
-
-
-

- {{ pokemon.name }} -

-

- {{ pokemon.created | date : "yyyy-MM-dd" }} -

- - {{ type }} - -
-
-
-
+
+ + + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 0454d5f..14781f5 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,21 +1,7 @@ -import { Component, OnInit } from '@angular/core'; -import { POKEMONS } from './mock-pokemon-list'; -import { Pokemon } from './pokemon'; +import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: 'app.component.html', }) -export class AppComponent implements OnInit { - pokemonList: Pokemon[] = POKEMONS; - pokemonSelected: Pokemon | undefined; - - ngOnInit() { - console.table(this.pokemonList); - } - - selectPokemon(pokemon: Pokemon) { - console.log(`Vous avez cliqué sur le pokémon ${pokemon.name}`); - this.pokemonSelected = pokemon; - } -} +export class AppComponent {} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 09027b8..02fc907 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,12 +3,12 @@ import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; -import { BorderCardDirective } from './border-card.directive'; -import { PokemonTypeColorPipe } from './pokemon-type-color.pipe'; +import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; +import { PokemonModule } from './pokemon/pokemon.module'; @NgModule({ - declarations: [AppComponent, BorderCardDirective, PokemonTypeColorPipe], - imports: [BrowserModule, AppRoutingModule], + declarations: [AppComponent, PageNotFoundComponent], + imports: [BrowserModule, PokemonModule, AppRoutingModule], providers: [], bootstrap: [AppComponent], }) diff --git a/src/app/page-not-found/page-not-found.component.ts b/src/app/page-not-found/page-not-found.component.ts new file mode 100644 index 0000000..89def93 --- /dev/null +++ b/src/app/page-not-found/page-not-found.component.ts @@ -0,0 +1,17 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'page-404', + template: ` +
+ +

Hey, cette page n'existe pas !

+ + Retourner à l' accueil + +
+ `, +}) +export class PageNotFoundComponent {} diff --git a/src/app/border-card.directive.ts b/src/app/pokemon/border-card.directive.ts similarity index 100% rename from src/app/border-card.directive.ts rename to src/app/pokemon/border-card.directive.ts diff --git a/src/app/pokemon/detail-pokemon/detail-pokemon.component.html b/src/app/pokemon/detail-pokemon/detail-pokemon.component.html new file mode 100644 index 0000000..c9abbcf --- /dev/null +++ b/src/app/pokemon/detail-pokemon/detail-pokemon.component.html @@ -0,0 +1,56 @@ +
+
+

{{ pokemon.name }}

+
+
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
Nom + {{ pokemon.name }} +
Points de vie + {{ pokemon.hp }} +
Dégâts + {{ pokemon.cp }} +
Types + {{ type }} +
Date de création + {{ pokemon.created | date : "yyyy-MM-dd" }} +
+
+
+ Retour +
+
+
+
+
+

Aucun pokémon à afficher !

diff --git a/src/app/pokemon/detail-pokemon/detail-pokemon.component.ts b/src/app/pokemon/detail-pokemon/detail-pokemon.component.ts new file mode 100644 index 0000000..a93c221 --- /dev/null +++ b/src/app/pokemon/detail-pokemon/detail-pokemon.component.ts @@ -0,0 +1,28 @@ +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { POKEMONS } from '../mock-pokemon-list'; +import { Pokemon } from '../pokemon'; + +@Component({ + selector: 'app-detail-pokemon', + templateUrl: './detail-pokemon.component.html', +}) +export class DetailPokemonComponent implements OnInit { + constructor(private route: ActivatedRoute, private router: Router) {} + pokemonList: Pokemon[]; + pokemon: Pokemon | undefined; + + ngOnInit(): void { + this.pokemonList = POKEMONS; + const pokemonId: string | null = this.route.snapshot.paramMap.get('id'); + if (pokemonId) { + this.pokemon = this.pokemonList.find( + (pokemon) => pokemon.id === +pokemonId + ); + } + } + + goToPokemonList() { + this.router.navigate(['/pokemons']); + } +} diff --git a/src/app/pokemon/list-pokemon/list-pokemon.component.html b/src/app/pokemon/list-pokemon/list-pokemon.component.html new file mode 100644 index 0000000..cffce96 --- /dev/null +++ b/src/app/pokemon/list-pokemon/list-pokemon.component.html @@ -0,0 +1,31 @@ +
+
+
+
+
+ +
+
+
+

+ {{ pokemon.name }} +

+

+ {{ pokemon.created | date : "yyyy-MM-dd" }} +

+ + {{ type }} + +
+
+
+
+
+
diff --git a/src/app/pokemon/list-pokemon/list-pokemon.component.ts b/src/app/pokemon/list-pokemon/list-pokemon.component.ts new file mode 100644 index 0000000..e8c7d33 --- /dev/null +++ b/src/app/pokemon/list-pokemon/list-pokemon.component.ts @@ -0,0 +1,18 @@ +import { Component } from '@angular/core'; +import { Router } from '@angular/router'; +import { POKEMONS } from '../mock-pokemon-list'; +import { Pokemon } from '../pokemon'; + +@Component({ + selector: 'app-list-pokemon', + templateUrl: './list-pokemon.component.html', +}) +export class ListPokemonComponent { + pokemonList: Pokemon[] = POKEMONS; + + constructor(private router: Router) {} + + goToPokemon(pokemon: Pokemon) { + this.router.navigate(['/pokemon', pokemon.id]); + } +} diff --git a/src/app/mock-pokemon-list.ts b/src/app/pokemon/mock-pokemon-list.ts similarity index 100% rename from src/app/mock-pokemon-list.ts rename to src/app/pokemon/mock-pokemon-list.ts diff --git a/src/app/pokemon-type-color.pipe.ts b/src/app/pokemon/pokemon-type-color.pipe.ts similarity index 100% rename from src/app/pokemon-type-color.pipe.ts rename to src/app/pokemon/pokemon-type-color.pipe.ts diff --git a/src/app/pokemon/pokemon.module.ts b/src/app/pokemon/pokemon.module.ts new file mode 100644 index 0000000..f28ee8c --- /dev/null +++ b/src/app/pokemon/pokemon.module.ts @@ -0,0 +1,24 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { BorderCardDirective } from './border-card.directive'; +import { PokemonTypeColorPipe } from './pokemon-type-color.pipe'; +import { ListPokemonComponent } from './list-pokemon/list-pokemon.component'; +import { DetailPokemonComponent } from './detail-pokemon/detail-pokemon.component'; +import { RouterModule, Routes } from '@angular/router'; + +const pokemonRoutes: Routes = [ + { path: 'pokemons', component: ListPokemonComponent }, + { path: 'pokemon/:id', component: DetailPokemonComponent }, +]; + +@NgModule({ + declarations: [ + BorderCardDirective, + PokemonTypeColorPipe, + ListPokemonComponent, + DetailPokemonComponent, + ], + imports: [CommonModule, RouterModule.forChild(pokemonRoutes)], +}) +export class PokemonModule {} diff --git a/src/app/pokemon.ts b/src/app/pokemon/pokemon.ts similarity index 100% rename from src/app/pokemon.ts rename to src/app/pokemon/pokemon.ts