From 7b9abb3aba15da6ce59537aff5feee0777620ce3 Mon Sep 17 00:00:00 2001 From: Lucien Cartier-Tilet Date: Fri, 24 Feb 2023 09:31:35 +0100 Subject: [PATCH] Fin section 5 : premiers pas et composants web --- .dir-locals.el | 8 +++ src/app/app.component.ts | 42 +++++------- src/app/app.module.ts | 13 ++-- src/app/mock-pokemon-list.ts | 124 +++++++++++++++++++++++++++++++++++ src/app/pokemon.ts | 9 +++ tsconfig.json | 6 +- 6 files changed, 162 insertions(+), 40 deletions(-) create mode 100644 .dir-locals.el create mode 100644 src/app/mock-pokemon-list.ts create mode 100644 src/app/pokemon.ts diff --git a/.dir-locals.el b/.dir-locals.el new file mode 100644 index 0000000..0affd72 --- /dev/null +++ b/.dir-locals.el @@ -0,0 +1,8 @@ +;;; Directory Local Variables -*- no-byte-compile: t -*- +;;; For more information see (info "(emacs) Directory Variables") + +((js-json-mode . ((js-indent-level . 2) + (eval . (prettier-js-mode 1)))) + (typescript-mode . ((typescript-indent-level . 2) + (eval . (prettier-js-mode 1)) + (prettier-js-args . ("--single-quote" "--jsx-single-quote"))))) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 2ed4b22..e0569ce 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,32 +1,20 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; +import { POKEMONS } from './mock-pokemon-list'; +import { Pokemon } from './pokemon'; @Component({ selector: 'app-root', - template: ` - -
-

- Welcome to {{title}}! -

- {{ title }} app is running! - Angular Logo -
-

Here are some links to help you start:

- - - `, - styles: [] + template: `

Liste de Pokémons

`, }) -export class AppComponent { - title = 'ng-pokemon-app'; +export class AppComponent implements OnInit { + pokemonList: Pokemon[] = POKEMONS; + + ngOnInit() { + console.table(this.pokemonList); + this.selectPokemon(this.pokemonList[0]); + } + + selectPokemon(pokemon: Pokemon) { + console.log(`Vous avez cliqué sur le pokémon ${pokemon.name}`); + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b1c6c96..68937b4 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -5,14 +5,9 @@ import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - AppRoutingModule - ], + declarations: [AppComponent], + imports: [BrowserModule, AppRoutingModule], providers: [], - bootstrap: [AppComponent] + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} diff --git a/src/app/mock-pokemon-list.ts b/src/app/mock-pokemon-list.ts new file mode 100644 index 0000000..9673876 --- /dev/null +++ b/src/app/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(), + }, +]; diff --git a/src/app/pokemon.ts b/src/app/pokemon.ts new file mode 100644 index 0000000..71b3abc --- /dev/null +++ b/src/app/pokemon.ts @@ -0,0 +1,9 @@ +export class Pokemon { + id: number; + hp: number; + cp: number; + name: string; + picture: string; + types: Array; + created: Date; +} diff --git a/tsconfig.json b/tsconfig.json index ed966d4..e228907 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -6,6 +6,7 @@ "outDir": "./dist/out-tsc", "forceConsistentCasingInFileNames": true, "strict": true, + "strictPropertyInitialization": false, "noImplicitOverride": true, "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true, @@ -19,10 +20,7 @@ "target": "ES2022", "module": "ES2022", "useDefineForClassFields": false, - "lib": [ - "ES2022", - "dom" - ] + "lib": ["ES2022", "dom"] }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false,