Fin module 10 : routes et modules

src/app/pokemon/border-card.directive.ts

@@ -0,0 +1,33 @@
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
+
+@Directive({
+  selector: '[pkmnBorderCard]'
+})
+export class BorderCardDirective {
+  initialColor = '#f5f5f5';
+  defaultColor = '#009688';
+  defaultHeight = 180;
+
+  constructor(private el: ElementRef) {
+    this.setHeight(this.defaultHeight);
+    this.setBorder(this.initialColor)
+  }
+
+  @Input('pkmnBorderCard') borderColor: string;
+
+  @HostListener('mouseenter') onMouseEnter() {
+    this.setBorder(this.borderColor || this.defaultColor);
+  }
+
+  @HostListener('mouseleave') onMouseLeave() {
+    this.setBorder(this.initialColor);
+  }
+
+  setHeight(height: number) {
+    this.el.nativeElement.style.height = `${height}px`;
+  }
+
+  setBorder(color: string) {
+    this.el.nativeElement.style.border = `solid 4px ${color}`
+  }
+}

src/app/pokemon/detail-pokemon/detail-pokemon.component.html

@@ -0,0 +1,56 @@
+<div *ngIf="pokemon" class="row">
+  <div class="col s12 m8 offset-m2">
+    <h2 class="header center">{{ pokemon.name }}</h2>
+    <div class="card horizontal hoverable">
+      <div class="card-image">
+        <img [src]="pokemon.picture" />
+      </div>
+      <div class="card-stacked">
+        <div class="card-content">
+          <table class="bordered striped">
+            <tbody>
+              <tr>
+                <td>Nom</td>
+                <td>
+                  <strong>{{ pokemon.name }}</strong>
+                </td>
+              </tr>
+              <tr>
+                <td>Points de vie</td>
+                <td>
+                  <strong>{{ pokemon.hp }}</strong>
+                </td>
+              </tr>
+              <tr>
+                <td>Dégâts</td>
+                <td>
+                  <strong>{{ pokemon.cp }}</strong>
+                </td>
+              </tr>
+              <tr>
+                <td>Types</td>
+                <td>
+                  <span
+                    *ngFor="let type of pokemon.types"
+                    class="{{ type | pokemonTypeColor }}"
+                    >{{ type }}</span
+                  >
+                </td>
+              </tr>
+              <tr>
+                <td>Date de création</td>
+                <td>
+                  <em>{{ pokemon.created | date : "yyyy-MM-dd" }}</em>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="card-action">
+          <a (click)="goToPokemonList()">Retour</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<h4 *ngIf="!pokemon" class="center">Aucun pokémon à afficher !</h4>

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']);
+  }
+}

src/app/pokemon/list-pokemon/list-pokemon.component.html

@@ -0,0 +1,31 @@
+<div class="container">
+  <div class="row">
+    <div
+      *ngFor="let pokemon of pokemonList"
+      class="col m4 s6"
+      (click)="goToPokemon(pokemon)"
+    >
+      <div class="card horizontal" pkmnBorderCard>
+        <div class="card-image">
+          <img [alt]="pokemon.name" [src]="pokemon.picture" />
+        </div>
+        <div class="card-stacked">
+          <div class="card-content">
+            <p>
+              {{ pokemon.name }}
+            </p>
+            <p>
+              <small>{{ pokemon.created | date : "yyyy-MM-dd" }}</small>
+            </p>
+            <span
+              *ngFor="let type of pokemon.types"
+              class="{{ type | pokemonTypeColor }}"
+            >
+              {{ type }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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]);
+  }
+}

src/app/pokemon/mock-pokemon-list.ts

@@ -0,0 +1,124 @@
+import { Pokemon } from "./pokemon";
+
+export const POKEMONS: Pokemon[] = [
+  {
+    id: 1,
+    name: "Bulbizarre",
+    hp: 25,
+    cp: 5,
+    picture:
+      "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/001.png",
+    types: ["Plante", "Poison"],
+    created: new Date(),
+  },
+  {
+    id: 2,
+    name: "Salamèche",
+    hp: 28,
+    cp: 6,
+    picture:
+      "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/004.png",
+    types: ["Feu"],
+    created: new Date(),
+  },
+  {
+    id: 3,
+    name: "Carapuce",
+    hp: 21,
+    cp: 4,
+    picture:
+      "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/007.png",
+    types: ["Eau"],
+    created: new Date(),
+  },
+  {
+    id: 4,
+    name: "Aspicot",
+    hp: 16,
+    cp: 2,
+    picture:
+      "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/013.png",
+    types: ["Insecte", "Poison"],
+    created: new Date(),
+  },
+  {
+    id: 5,
+    name: "Roucool",
+    hp: 30,
+    cp: 7,
+    picture:
+      "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/016.png",
+    types: ["Normal", "Vol"],
+    created: new Date(),
+  },
+  {
+    id: 6,
+    name: "Rattata",
+    hp: 18,
+    cp: 6,
+    picture:
+      "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/019.png",
+    types: ["Normal"],
+    created: new Date(),
+  },
+  {
+    id: 7,
+    name: "Piafabec",
+    hp: 14,
+    cp: 5,
+    picture:
+      "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/021.png",
+    types: ["Normal", "Vol"],
+    created: new Date(),
+  },
+  {
+    id: 8,
+    name: "Abo",
+    hp: 16,
+    cp: 4,
+    picture:
+      "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/023.png",
+    types: ["Poison"],
+    created: new Date(),
+  },
+  {
+    id: 9,
+    name: "Pikachu",
+    hp: 21,
+    cp: 7,
+    picture:
+      "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/025.png",
+    types: ["Electrik"],
+    created: new Date(),
+  },
+  {
+    id: 10,
+    name: "Sabelette",
+    hp: 19,
+    cp: 3,
+    picture:
+      "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/027.png",
+    types: ["Normal"],
+    created: new Date(),
+  },
+  {
+    id: 11,
+    name: "Mélofée",
+    hp: 25,
+    cp: 5,
+    picture:
+      "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/035.png",
+    types: ["Fée"],
+    created: new Date(),
+  },
+  {
+    id: 12,
+    name: "Groupix",
+    hp: 17,
+    cp: 8,
+    picture:
+      "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/037.png",
+    types: ["Feu"],
+    created: new Date(),
+  },
+];

src/app/pokemon/pokemon-type-color.pipe.ts

@@ -0,0 +1,49 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'pokemonTypeColor'
+})
+export class PokemonTypeColorPipe implements PipeTransform {
+  transform(type: string): string {
+    let color: string;
+    switch (type) {
+      case 'Feu':
+        color = 'red lighten-1';
+        break;
+      case 'Eau':
+        color = 'blue lighten-1';
+        break;
+      case 'Plante':
+        color = 'green lighten-1';
+        break;
+      case 'Insecte':
+        color = 'brown lighten-1';
+        break;
+      case 'Normal':
+        color = 'grey lighten-3';
+        break;
+      case 'Vol':
+        color = 'blue lighten-3';
+        break;
+      case 'Poison':
+        color = 'deep-purple accent-1';
+        break;
+      case 'Fée':
+        color = 'pink lighten-4';
+        break;
+      case 'Psy':
+        color = 'deep-purple darken-2';
+        break;
+      case 'Electrik':
+        color = 'lime accent-1';
+        break;
+      case 'Combat':
+        color = 'deep-orange';
+        break;
+      default:
+        color = 'grey';
+        break;
+    }
+    return 'chip ' + color;
+  }
+}

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 {}

src/app/pokemon/pokemon.ts

@@ -0,0 +1,9 @@
+export class Pokemon {
+  id: number;
+  hp: number;
+  cp: number;
+  name: string;
+  picture: string;
+  types: Array<string>;
+  created: Date;
+}