From a876a3e70b951d3c86514b14732399a4b267d2aa Mon Sep 17 00:00:00 2001
From: Lucien Cartier-Tilet <lucien@phundrak.com>
Date: Fri, 24 Feb 2023 10:57:57 +0100
Subject: [PATCH] Fin section 8 : pipes

---
 src/app/app.component.html         |  8 ++++-
 src/app/app.module.ts              |  3 +-
 src/app/pokemon-type-color.pipe.ts | 49 ++++++++++++++++++++++++++++++
 3 files changed, 58 insertions(+), 2 deletions(-)
 create mode 100644 src/app/pokemon-type-color.pipe.ts

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 4663012..35fc690 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -17,8 +17,14 @@
               {{ pokemon.name }}
             </p>
             <p>
-              <small>{{ pokemon.created }}</small>
+              <small>{{ pokemon.created | date : "yyyy-MM-dd" }}</small>
             </p>
+            <span
+              *ngFor="let type of pokemon.types"
+              class="{{ type | pokemonTypeColor }}"
+            >
+              {{ type }}
+            </span>
           </div>
         </div>
       </div>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 5426295..09027b8 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -4,9 +4,10 @@ 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';
 
 @NgModule({
-  declarations: [AppComponent, BorderCardDirective],
+  declarations: [AppComponent, BorderCardDirective, PokemonTypeColorPipe],
   imports: [BrowserModule, AppRoutingModule],
   providers: [],
   bootstrap: [AppComponent],
diff --git a/src/app/pokemon-type-color.pipe.ts b/src/app/pokemon-type-color.pipe.ts
new file mode 100644
index 0000000..564a817
--- /dev/null
+++ b/src/app/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;
+  }
+}