Skip to content

Commit

Permalink
implementing user and product services
Browse files Browse the repository at this point in the history
  • Loading branch information
ClaudiOmatheuuss committed Jul 8, 2024
1 parent c151b46 commit cc6b406
Show file tree
Hide file tree
Showing 54 changed files with 998 additions and 115 deletions.
2 changes: 2 additions & 0 deletions src/app/app-routing.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,12 @@ import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { InicioComponent } from './inicio/inicio.component';
import { LoginComponent } from './login/login.component';
import { RestritoComponent } from './restrito/restrito.component';

const routes: Routes = [
{path:'inicio', component: InicioComponent},
{path:'login', component: LoginComponent},
{path:'restrito', component: RestritoComponent},
{path:'', redirectTo:'/inicio',pathMatch:'full'}
];

Expand Down
2 changes: 1 addition & 1 deletion src/app/app.component.html
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<app-menu></app-menu>
<app-menu *ngIf="currentRoute === '/inicio' || currentRoute === '/login'" ></app-menu>
<router-outlet></router-outlet>
<app-rodape></app-rodape>
18 changes: 15 additions & 3 deletions src/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,22 @@
import { Component } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
export class AppComponent implements OnInit {
title = 'Hypnix - Home';
}
currentRoute!: string;

constructor(private router: Router) { }

ngOnInit() {
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
this.currentRoute = event.urlAfterRedirects;
}
});
}
}
29 changes: 27 additions & 2 deletions src/app/app.module.ts
Original file line number Diff line number Diff line change
@@ -1,27 +1,44 @@
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

/* Importações Angular Material */
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatCardModule} from '@angular/material/card';
import {MatMenuModule} from '@angular/material/menu';
import {MatButtonModule} from '@angular/material/button';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatGridListModule} from '@angular/material/grid-list';
import {MatIconModule} from '@angular/material/icon';
import {MatInputModule} from '@angular/material/input';

import { AppRoutingModule } from './app-routing.module';
import { RestritoRoutingModule } from './restrito/restrito-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { InicioComponent } from './inicio/inicio.component';
import { LoginComponent } from './login/login.component';
import { MenuComponent } from './menu/menu.component';
import { RodapeComponent } from './rodape/rodape.component';
import { RestritoComponent } from './restrito/restrito.component';
import { AtualizaProdutoComponent } from './restrito/atualiza-produto/atualiza-produto.component';
import { CadastroProdutoComponent } from './restrito/cadastro-produto/cadastro-produto.component';
import { ListaProdutoComponent } from './restrito/lista-produto/lista-produto.component';
import { MenuRestritoComponent } from './restrito/menu-restrito/menu-restrito.component';

@NgModule({
declarations: [
AppComponent,
InicioComponent,
LoginComponent,
MenuComponent,
RodapeComponent
RodapeComponent,
RestritoComponent,
AtualizaProdutoComponent,
CadastroProdutoComponent,
ListaProdutoComponent,
MenuRestritoComponent
],
imports: [
BrowserModule,
Expand All @@ -30,7 +47,15 @@ import { RodapeComponent } from './rodape/rodape.component';
MatToolbarModule,
MatCardModule,
MatMenuModule,
MatButtonModule
MatButtonModule,
FormsModule,
ReactiveFormsModule,
MatFormFieldModule,
MatGridListModule,
MatIconModule,
MatInputModule,
HttpClientModule,
RestritoRoutingModule,
],
providers: [],
bootstrap: [AppComponent]
Expand Down
16 changes: 16 additions & 0 deletions src/app/guard.guard.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { TestBed } from '@angular/core/testing';

import { GuardGuard } from './guard.guard';

describe('GuardGuard', () => {
let guard: GuardGuard;

beforeEach(() => {
TestBed.configureTestingModule({});
guard = TestBed.inject(GuardGuard);
});

it('should be created', () => {
expect(guard).toBeTruthy();
});
});
24 changes: 24 additions & 0 deletions src/app/guard.guard.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class GuardGuard implements CanActivate {

constructor(private _router: Router){}

canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

if(localStorage.getItem('token') !== null){
return true;
}

this._router.navigate(['login']);
return false;
}

}
35 changes: 26 additions & 9 deletions src/app/inicio/inicio.component.css
Original file line number Diff line number Diff line change
Expand Up @@ -25,23 +25,42 @@ video {
#section-products {
display: flex;
flex-direction: column;
margin-bottom: 4rem;
margin: 2rem 0;
}

.section-header {
align-items: center;
display: flex;
font-weight: 700;
justify-content: space-around;
}

.section-header button {
align-items: center;
color: #006494;
display: flex;
font-size: 16px;
gap: 8px;
background: none;
border: none;
justify-content: space-between;
text-decoration: none;
}

.section-header p { margin: 0; }

#video-desc { color: white; }

#section-products .section-header { padding: 50px 0 50px 0; }

.products_list {
display: flex;
flex-wrap: wrap;
padding-top: 24px;
justify-content: space-evenly;
gap: 50px;
}

mat-grid-tile{
padding: 2px;
border-radius: 50px;
}

mat-card-title{ color: #006494; }

mat-card { background-color: #F2F3F4; }
Expand All @@ -54,7 +73,7 @@ mat-card img{
mat-card-actions{
display: flex;
flex-direction: column;
align-items: start;
align-items: flex-start;
padding-left: 10px;
}

Expand All @@ -65,8 +84,6 @@ mat-card-actions p, h2{

@media screen and (min-width: 600px) {
.products_list { margin: 0 10%; }

#section-products h2 { padding: 25px 0 0 150px; }
}


Expand Down
108 changes: 32 additions & 76 deletions src/app/inicio/inicio.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@

<div class="carousel-item active">

<img src="../../assets/img/banner1.jpg" class="d-block w-100" alt="Banner com imagem detalhes em tons de azul e roxa bem futurística">
<img src="../../assets/img/banner1.jpg" class="d-block w-100"
alt="Banner com imagem detalhes em tons de azul e roxa bem futurística">
</div>

<div class="carousel-item">
Expand All @@ -41,10 +42,12 @@ <h3>PS4(console e controle) + jogos + 3 meses de PS Plus</h3>
</div>
<div class="carousel-item" data-bs-interval="9100">

<video preload="auto" muted autoplay loop playsinline webkit-playsinline poster="../../assets/img/banner4.jpg">
<source type="video/mp4" src="https://gmedia.playstation.com/is/content/SIEPDC/global_pdc/en/games/pdps/l/la/the-last-of-us-part-ii/videos/the-last-of-us-part-ii-live-video-block-01-ps4-us-23sep19.mp4">
<video preload="auto" muted autoplay loop playsinline webkit-playsinline
poster="../../assets/img/banner4.jpg">
<source type="video/mp4"
src="https://gmedia.playstation.com/is/content/SIEPDC/global_pdc/en/games/pdps/l/la/the-last-of-us-part-ii/videos/the-last-of-us-part-ii-live-video-block-01-ps4-us-23sep19.mp4">
</video>


<div class="carousel-caption d-none d-md-block">
<h3 id="video-desc">The last of us part II</h3>
Expand All @@ -68,78 +71,31 @@ <h3 id="video-desc">The last of us part II</h3>
</section>

<section id="section-products">
<h2>Produtos</h2>
<div class="products_list">

<mat-card class="example-card">
<mat-card-header>
<mat-card-title>Xícara SW</mat-card-title>
</mat-card-header>
<img mat-card-image src="../../assets/img/caneca_st.png" alt="Imagem do produto">
<mat-card-content>
<br>
</mat-card-content>
<mat-card-actions>
<p>R$ 300,00</p>
<button type="button" class="btn btn-outline-primary">Comprar</button>
</mat-card-actions>
</mat-card>

<mat-card class="example-card">
<mat-card-header>
<mat-card-title>Nintendo Switch</mat-card-title>
</mat-card-header>
<img mat-card-image src="../../assets/img/nintendo_switch.png" alt="Imagem do produto">
<mat-card-content>
<br>
</mat-card-content>
<mat-card-actions>
<p>R$ 300,00</p>
<button type="button" class="btn btn-outline-primary">Comprar</button>
</mat-card-actions>
</mat-card>

<mat-card class="example-card">
<mat-card-header>
<mat-card-title>Xbox Series S</mat-card-title>
</mat-card-header>
<img mat-card-image src="../../assets/img/xbox_series_s.png" alt="Imagem do produto">
<mat-card-content>
<br>
</mat-card-content>
<mat-card-actions>
<p>R$ 300,00</p>
<button type="button" class="btn btn-outline-primary">Comprar</button>
</mat-card-actions>
</mat-card>

<mat-card class="example-card">
<mat-card-header>
<mat-card-title>Playstation 5</mat-card-title>
</mat-card-header>
<img mat-card-image src="../../assets/img/console.png" alt="Imagem do produto">
<mat-card-content>
<br>
</mat-card-content>
<mat-card-actions>
<p>R$ 300,00</p>
<button type="button" class="btn btn-outline-primary">Comprar</button>
</mat-card-actions>
</mat-card>
<div class="section-header">
<h2>Produtos</h2>
<button *ngIf="!showAll" (click)="verTudo()">
<p>Ver tudo</p>
<img src="../../assets/img/header-arrow.svg" alt="Flecha que redireciona para ver todos os produtos">
</button>
</div>
<div class="products_list">
<mat-card class="mat-mdc-card mdc-card example-card" *ngFor="let produto of produtos | slice:0:(showAll ? produtos.length : 5)">
<mat-card-header class="mat-mdc-card-header">
<div class="mat-mdc-card-header-text">
<mat-card-title class="mat-mdc-card-title">{{produto.produto}}</mat-card-title>
</div>
</mat-card-header>
<img mat-card-image="" src="{{produto.foto}}" alt="Imagem do produto"
class="mat-mdc-card-image mdc-card__media">

<mat-card class="example-card">
<mat-card-header>
<mat-card-title>Óculos VR</mat-card-title>
</mat-card-header>
<img mat-card-image src="../../assets/img/oculosvr.png" alt="Imagem do produto">
<mat-card-content>
<br>
</mat-card-content>
<mat-card-actions>
<p>R$ 300,00</p>
<button type="button" class="btn btn-outline-primary">Comprar</button>
</mat-card-actions>
</mat-card>
</div>
<mat-card-content class="mat-mdc-card-content">
<br>
</mat-card-content>
<mat-card-actions class="mat-mdc-card-actions mdc-card__actions">
<p>{{produto.preco | currency : 'BRL'}}</p>
<button type="button" class="btn btn-outline-primary">Comprar</button>
</mat-card-actions>
</mat-card>
</div>
</section>
</main>
36 changes: 34 additions & 2 deletions src/app/inicio/inicio.component.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,42 @@
import { Component } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { Produto } from '../models/Produto.model';
import { ProdutoService } from '../services/produto.service';

@Component({
selector: 'app-inicio',
templateUrl: './inicio.component.html',
styleUrls: ['./inicio.component.css']
})
export class InicioComponent {
export class InicioComponent implements OnInit{

public produtos: Produto[] = [];

constructor(private _produtoService:ProdutoService){}

ngOnInit(): void {
this.listarProdutos();
}
showAll: boolean = false;

verTudo() {
this.showAll = true;
}

listarProdutos():void{
this._produtoService.getProdutos().subscribe(
retornaProduto =>{
this.produtos = retornaProduto.map(
item => {
return new Produto(
item.id,
item.produto,
item.foto,
item.preco
);
}
)
}
)
}

}
Loading

0 comments on commit cc6b406

Please sign in to comment.