From c0a91524ffe17ccc842f1d7291d52adf21e014af Mon Sep 17 00:00:00 2001 From: gemaquejr Date: Fri, 15 Sep 2023 21:03:48 -0300 Subject: [PATCH] =?UTF-8?q?Refatora=20c=C3=B3digo=20original?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.module.ts | 4 +- .../card-pricing/card-pricing.component.ts | 4 +- src/app/components/card/card.component.ts | 24 ++++++++-- .../menu-bar-item/menu-bar-item.component.css | 29 ++++++++++++ .../menu-bar-item.component.html | 9 ++++ .../menu-bar-item/menu-bar-item.component.ts | 15 +++++++ .../menu-bar/menu-bar.component.css | 33 ++------------ .../menu-bar/menu-bar.component.html | 8 +--- src/app/data/dataFake.ts | 45 +++++++++++++++++++ src/app/pages/home/home.component.html | 20 ++------- src/app/services/game.service.spec.ts | 16 +++++++ src/app/services/game.service.ts | 14 ++++++ 12 files changed, 163 insertions(+), 58 deletions(-) create mode 100644 src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.css create mode 100644 src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.html create mode 100644 src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.ts create mode 100644 src/app/data/dataFake.ts create mode 100644 src/app/services/game.service.spec.ts create mode 100644 src/app/services/game.service.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 4146f1f..a887534 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -8,6 +8,7 @@ import { CardComponent } from './components/card/card.component'; import { MenuBarComponent } from './components/menu-bar/menu-bar.component'; import { CardLabelComponent } from './components/card/card-label/card-label.component'; import { CardPricingComponent } from './components/card/card-pricing/card-pricing.component'; +import { MenuBarItemComponent } from './components/menu-bar/menu-bar-item/menu-bar-item.component'; @NgModule({ declarations: [ @@ -16,7 +17,8 @@ import { CardPricingComponent } from './components/card/card-pricing/card-pricin CardComponent, MenuBarComponent, CardLabelComponent, - CardPricingComponent + CardPricingComponent, + MenuBarItemComponent ], imports: [ BrowserModule, diff --git a/src/app/components/card/card-pricing/card-pricing.component.ts b/src/app/components/card/card-pricing/card-pricing.component.ts index 5dc831e..5bf9313 100644 --- a/src/app/components/card/card-pricing/card-pricing.component.ts +++ b/src/app/components/card/card-pricing/card-pricing.component.ts @@ -8,9 +8,9 @@ import { Component, Input, OnInit } from '@angular/core'; export class CardPricingComponent implements OnInit { @Input() - gameType:string ="Digital PS4" + gameType:string ="" @Input() - gamePrice:string = "R$ 399,90" + gamePrice:string = "" constructor() { } ngOnInit(): void { diff --git a/src/app/components/card/card.component.ts b/src/app/components/card/card.component.ts index d2c9e49..7ad8f3a 100644 --- a/src/app/components/card/card.component.ts +++ b/src/app/components/card/card.component.ts @@ -1,5 +1,7 @@ import { Component, Input, OnInit } from '@angular/core'; +import { GameService } from 'src/app/services/game.service'; + @Component({ selector: 'app-card', templateUrl: './card.component.html', @@ -12,13 +14,29 @@ export class CardComponent implements OnInit { @Input() gameLabel:string="" @Input() - gameType:string ="XPTO | PS4" + gameType:string ="" + @Input() + gamePrice:string = "" @Input() - gamePrice:string = "R$ 399,90" + id:string = "" - constructor() { } + + constructor(private gameService: GameService) { } ngOnInit(): void { + this.setValuesToComponent(this.id); } + setValuesToComponent(id: string) { + const result = this.gameService.getDataById(id); + + if (result) { + this.gameCover = result.gameCover; + this.gameLabel = result.gameLabel; + this.gameType = result.gameType; + this.gamePrice = result.gamePrice + } else { + console.error(`Artigo com ID ${id} não encontrado.`); + } + } } diff --git a/src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.css b/src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.css new file mode 100644 index 0000000..46399ba --- /dev/null +++ b/src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.css @@ -0,0 +1,29 @@ +.menu-bar__item{ + display: flex; + margin-right: 600px; + align-items: center; + justify-content: center; + } + + .menu-bar__item > ul{ + display: flex; + list-style-type: none; + } + + .menu-bar__item > ul > li { + padding: 5px; + margin-right: 15px; + } + + .menu-bar__item > ul > li > a { + text-decoration: none; + padding: 5px; + color: rgb(7, 7, 7); + font-family: 'Segoe UI'; + } + + .menu-bar__item > ul > li > a:hover { + color: blue; + font-weight: 600; + } + \ No newline at end of file diff --git a/src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.html b/src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.html new file mode 100644 index 0000000..1cf4d07 --- /dev/null +++ b/src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.html @@ -0,0 +1,9 @@ +
+ +
\ No newline at end of file diff --git a/src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.ts b/src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.ts new file mode 100644 index 0000000..dcd6e22 --- /dev/null +++ b/src/app/components/menu-bar/menu-bar-item/menu-bar-item.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-menu-bar-item', + templateUrl: './menu-bar-item.component.html', + styleUrls: ['./menu-bar-item.component.css'] +}) +export class MenuBarItemComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/components/menu-bar/menu-bar.component.css b/src/app/components/menu-bar/menu-bar.component.css index b90bbc7..d8f7a72 100644 --- a/src/app/components/menu-bar/menu-bar.component.css +++ b/src/app/components/menu-bar/menu-bar.component.css @@ -7,38 +7,13 @@ width: 100%; height: 40px; box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5); + + align-items: center; + justify-content: space-between; } .menu-bar__logo{ margin-left: 30px; display: flex; align-items: center; -} - -.menu-bar__item{ - display: flex; - margin:auto; - align-items: center; -} - -.menu-bar__item > ul{ - display: flex; - list-style-type: none; -} - -.menu-bar__item > ul > li { - padding: 5px; - margin-right: 15px; -} - -.menu-bar__item > ul > li > a { - text-decoration: none; - padding: 5px; - color: rgb(7, 7, 7); - font-family: 'Segoe UI'; -} - -.menu-bar__item > ul > li > a:hover { - color: blue; - font-weight: 600; -} +} \ No newline at end of file diff --git a/src/app/components/menu-bar/menu-bar.component.html b/src/app/components/menu-bar/menu-bar.component.html index 44067d8..1c59c80 100644 --- a/src/app/components/menu-bar/menu-bar.component.html +++ b/src/app/components/menu-bar/menu-bar.component.html @@ -8,11 +8,5 @@ height="32px" > -
- -
+ diff --git a/src/app/data/dataFake.ts b/src/app/data/dataFake.ts new file mode 100644 index 0000000..808afe0 --- /dev/null +++ b/src/app/data/dataFake.ts @@ -0,0 +1,45 @@ +export const dataFake = [ + { + "id": "1", + "gameCover": "assets/ac-cover.jpg", + "gameLabel": "BEST OF YEAR", + "gameType": "DISC | PS5", + "gamePrice": "R$ 369,99" + }, + { + "id": "2", + "gameCover": "assets/bt-1.jpg", + "gameLabel": "DIGITAL", + "gameType": "DIGITAL | PS4", + "gamePrice": "R$ 129,99" + + }, + { + "id": "3", + "gameCover": "assets/bt-4.jpg", + "gameLabel": "EXCLUSIVE", + "gameType": "DISC | PS5", + "gamePrice": "R$ 269,99" + }, + { + "id": "4", + "gameCover": "assets/bt-5.jpg", + "gameLabel": "CLASSIC", + "gameType": "DISC | PS5", + "gamePrice": "R$ 289,99" + }, + { + "id": "5", + "gameCover": "assets/bt-bad-company-2.jpg", + "gameLabel": "CLASSIC", + "gameType": "DISC | PS3 PS4", + "gamePrice": "R$ 199,99" + }, + { + "id": "6", + "gameCover": "assets/bt-hardline.jpg", + "gameLabel": "NEW", + "gameType": "DIGITAL | PS3 PS4 PS5", + "gamePrice": "R$ 369,99" + } +] \ No newline at end of file diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index 4613fb7..858b447 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -1,30 +1,18 @@
diff --git a/src/app/services/game.service.spec.ts b/src/app/services/game.service.spec.ts new file mode 100644 index 0000000..fb5f120 --- /dev/null +++ b/src/app/services/game.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { GameService } from './game.service'; + +describe('GameService', () => { + let service: GameService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(GameService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/game.service.ts b/src/app/services/game.service.ts new file mode 100644 index 0000000..c9633f5 --- /dev/null +++ b/src/app/services/game.service.ts @@ -0,0 +1,14 @@ +import { Injectable } from '@angular/core'; + +import { dataFake } from '../data/dataFake'; + +@Injectable({ + providedIn: 'root' +}) +export class GameService { + getDataById(id: string) { + return dataFake.find(article => article.id === id); + } + + constructor() { } +}