Mauricio Cattafi / autoservicio

Download as
Browse Code »

Commit 6c30b17918d848c2ca2d35e0396a37e2f98260b0

Authored by Marcelo Puebla
2 parents 8424afdf20 5aee6bac60
Exists in master and in 1 other branch validar_pve

Merge branch 'master' of git.focasoftware.com:angular/autoservicio

Showing 9 changed files   Show diff stats
src/app/app-routing.module.ts
Diff comments   View file @ 6c30b17
... ... @@ -3,11 +3,13 @@ import { Routes, RouterModule } from '@angular/router';
3 3 import { HomeComponent } from './components/home/home.component';
4 4 import { InicioComponent } from './components/inicio/inicio.component';
5 5 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
  6 +import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
6 7  
7 8 const routes: Routes = [
8 9 { path: 'home', component: HomeComponent },
9 10 { path: 'inicio', component: InicioComponent },
10 11 { path: 'busqueda-productos', component: BusquedaProductosComponent },
  12 + { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
11 13 { path: '**', redirectTo: '/home', pathMatch: 'full' },
12 14 ];
13 15  
... ... @@ -15,4 +17,5 @@ const routes: Routes = [
15 17 imports: [RouterModule.forRoot(routes)],
16 18 exports: [RouterModule]
17 19 })
  20 +
18 21 export class AppRoutingModule { }
src/app/app.module.ts
Diff comments   View file @ 6c30b17
... ... @@ -13,6 +13,7 @@ import { CarouselComponent } from './components/carousel/carousel.component';
13 13 import { HomeComponent } from './components/home/home.component';
14 14 import { InicioComponent } from './components/inicio/inicio.component';
15 15 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
  16 +import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
16 17 //#endregion
17 18  
18 19 @NgModule({
... ... @@ -23,7 +24,8 @@ import { BusquedaProductosComponent } from './components/busqueda-productos/busq
23 24 CarouselComponent,
24 25 HomeComponent,
25 26 InicioComponent,
26   - BusquedaProductosComponent
  27 + BusquedaProductosComponent,
  28 + ConfirmacionCarritoComponent
27 29 ],
28 30 imports: [
29 31 BrowserModule,
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
Diff comments   View file @ 6c30b17
... ... @@ -0,0 +1,48 @@
  1 +<app-header></app-header>
  2 +<div class="row">
  3 + <div class="col-10">
  4 +
  5 + <!-- NOMBRE DE SECCION -->
  6 + <div class="row m-0">
  7 + <div class="col-12 p-0">
  8 + <p class="h5 py-1 bg-light text-muted text-center">Pago <i class="fa fa-usd"></i></p>
  9 + </div>
  10 + </div>
  11 +
  12 + <div class="row m-4 d-flex align-items-center">
  13 + <div class="col-4">
  14 + <h1>Mi Compra <i class="fa fa-shopping-cart "></i></h1>
  15 + </div>
  16 + <div class="col-8">
  17 + <h2>¿Desea finalizar su compra?</h2>
  18 + <h3>Por favor, controle y confirme su compra.</h3>
  19 + </div>
  20 + <div class="col-sm-7">
  21 +
  22 + <div class="row pr-3 vh-50 overflow-scroll">
  23 + <div
  24 + class="col-4 p-2"
  25 + *ngFor="let producto of productos">
  26 + <div class="card card-effect bg-white rounded-sm shadow border-0">
  27 + <img src="../../../assets/img/descarga.jpg" class="card-img-top w-75 m-auto">
  28 + <div class="card-body">
  29 + <p class="h5 text-left m-0">{{producto.variable}}</p>
  30 + <div class="text-left">
  31 + <p class="m-0"><small>ASDASDSADASDSA</small></p>
  32 + <p class="m-0"><small>COD. 1222</small></p>
  33 + <p class="m-0"><strong>$ 563</strong></p>
  34 + </div>
  35 + </div>
  36 + </div>
  37 + </div>
  38 + </div>
  39 + </div>
  40 + <div class="col-sm-5">
  41 + <h3>TOTAL: $553</h3>
  42 + </div>
  43 +</div>
  44 +
  45 +<!-- SIDEBAR -->
  46 +</div>
  47 + <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
  48 +</div>
src/app/components/confirmacion-carrito/confirmacion-carrito.component.scss
Diff comments   View file @ 6c30b17
src/app/components/confirmacion-carrito/confirmacion-carrito.component.spec.ts
Diff comments   View file @ 6c30b17
... ... @@ -0,0 +1,25 @@
  1 +import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  2 +
  3 +import { ConfirmacionCarritoComponent } from './confirmacion-carrito.component';
  4 +
  5 +describe('ConfirmacionCarritoComponent', () => {
  6 + let component: ConfirmacionCarritoComponent;
  7 + let fixture: ComponentFixture<ConfirmacionCarritoComponent>;
  8 +
  9 + beforeEach(async(() => {
  10 + TestBed.configureTestingModule({
  11 + declarations: [ ConfirmacionCarritoComponent ]
  12 + })
  13 + .compileComponents();
  14 + }));
  15 +
  16 + beforeEach(() => {
  17 + fixture = TestBed.createComponent(ConfirmacionCarritoComponent);
  18 + component = fixture.componentInstance;
  19 + fixture.detectChanges();
  20 + });
  21 +
  22 + it('should create', () => {
  23 + expect(component).toBeTruthy();
  24 + });
  25 +});
src/app/components/confirmacion-carrito/confirmacion-carrito.component.ts
Diff comments   View file @ 6c30b17
... ... @@ -0,0 +1,16 @@
  1 +import { Component, OnInit } from '@angular/core';
  2 +
  3 +@Component({
  4 + selector: 'app-confirmacion-carrito',
  5 + templateUrl: './confirmacion-carrito.component.html',
  6 + styleUrls: ['./confirmacion-carrito.component.scss']
  7 +})
  8 +export class ConfirmacionCarritoComponent implements OnInit {
  9 +
  10 + productos = [{}, {}, {}]
  11 + constructor() { }
  12 +
  13 + ngOnInit() {
  14 + }
  15 +
  16 +}
src/app/components/inicio/inicio.component.html
Diff comments   View file @ 6c30b17
... ... @@ -91,4 +91,4 @@
91 91  
92 92 <!-- SIDEBAR -->
93 93 <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
94   -</div>
95 94 \ No newline at end of file
  95 +</div>
src/app/components/sidebar/sidebar.component.html
Diff comments   View file @ 6c30b17
... ... @@ -2,25 +2,25 @@
2 2  
3 3 <h4 class="border-bottom border-white"> Mi compra </h4>
4 4 <div class="overflow-auto mb-2">
5   - <div class="card my-2 bg-primary border-0">
6   - <img src="../../assets/img/descarga.jpg" class="card-img-top" alt="...">
  5 + <div class="card my-2 bg-primary border-0" *ngFor="let prod of productos; let i = index">
  6 + <img src="{{prod.img}}" class="card-img-top" alt="...">
7 7 <div class="card-body row m-0 p-0 px-1 py-1 shadow rounded">
8 8 <div class="col-8 p-0 text-left my-auto">
9   - <p class="m-0 card-description">Galleta oreo x 199 gs Chocolate</p>
10   - <p class="m-0 card-description"><small>COD: 1234567</small></p>
  9 + <p class="m-0 card-description">{{prod.desc}}</p>
  10 + <p class="m-0 card-description">COD: {{prod.cod}}</p>
11 11 </div>
12 12 <div class="col-4 p-1 text-center my-auto">
13   - {{90 | currency}}
  13 + {{prod.precio | currency}}
14 14 </div>
15 15 </div>
16 16 <div class="row m-0 p-0">
17 17 <div class="col p-1 pb-1 mt-2">
18   - <button type="button" class="btn btn-light btn-sm float-left my-auto">X</button>
19   - <button type="button" class="btn btn-light btn-sm my-auto">X</button>
  18 + <button type="button" class="btn btn-light btn-sm float-left my-auto" (click)="deleteProducto(i)">X</button>
  19 + <button type="button" class="btn btn-light btn-sm my-auto">Y</button>
20 20 <div class="btn-group-sm btn-group float-right my-auto" role="group" aria-label="Basic example">
21   - <button type="button" class="btn btn-light btn-sm mb-2">+</button>
22   - <label for="" class="border border.white px-1">12</label>
23   - <button type="button" class="btn btn-light btn-sm mb-2">-</button>
  21 + <button type="button" class="btn btn-light btn-sm mb-2" (click)="aumentarContador(i)">+</button>
  22 + <label for="" class="border border.white px-1">{{prod.cantidad}}</label>
  23 + <button type="button" class="btn btn-light btn-sm mb-2" (click)="decrementarContador(i)">-</button>
24 24 </div>
25 25 </div>
26 26 </div>
... ... @@ -30,13 +30,14 @@
30 30 <div class="card mt-auto blue-gradient border-0">
31 31 <div class="card-body row">
32 32 <div class="col">
33   - <h4 class="border-bottom border-secondary text-secondary">(1) item</h4>
  33 + <h4 class="border-bottom border-secondary text-secondary" *ngIf="cont === 1">({{cont}}) item</h4>
  34 + <h4 class="border-bottom border-secondary text-secondary" *ngIf="cont > 1">({{cont}}) items</h4>
34 35 <h3 class="text-secondary">Total</h3>
35   - <h3 class="text-dark"><strong>{{5000 | currency}}</strong></h3>
  36 + <h3 class="text-dark"><strong>{{total | currency}}</strong></h3>
36 37 </div>
37 38 <div class="col 12 p-0">
38   - <button type="button" class="btn btn-light shadow mb-2"><strong>Finalizar y pagar</strong></button>
39   - <button type="button" class="btn btn-light shadow btn-sm">Cancelar</button>
  39 + <button type="button" class="btn btn-light shadow mb-2" routerLink="/confirmacion-carrito"><strong>Finalizar y pagar</strong></button>
  40 + <button type="button" class="btn btn-light shadow btn-sm" (click)="clearCar()">Cancelar</button>
40 41 </div>
41 42 </div>
42 43 </div>
43 44 \ No newline at end of file
src/app/components/sidebar/sidebar.component.ts
Diff comments   View file @ 6c30b17
1 1 import { Component, OnInit } from '@angular/core';
2 2  
  3 +
3 4 @Component({
4 5 selector: 'app-sidebar',
5 6 templateUrl: './sidebar.component.html',
... ... @@ -7,9 +8,116 @@ import { Component, OnInit } from &#39;@angular/core&#39;;
7 8 })
8 9 export class SidebarComponent implements OnInit {
9 10  
  11 + private cont: number = 1;
  12 + private min: number = 1;
  13 + private max: number = 50;
  14 + private total: number = 0;
  15 +
  16 + private productos = [
  17 + {
  18 + "id": 1,
  19 + "desc": "Galletas Oreo",
  20 + "cod": 225412,
  21 + "precio": 15,
  22 + "img": "./assets/descarga.jpg",
  23 + "cantidad": 1
  24 + },
  25 + {
  26 + "id": 2,
  27 + "desc": "Coca cola 500ml",
  28 + "cod": 512632,
  29 + "precio": 40,
  30 + "img": "./assets/descarga.jpg",
  31 + "cantidad": 1
  32 + },
  33 + {
  34 + "id": 3,
  35 + "desc": "Pancho grande",
  36 + "cod": 775987,
  37 + "precio": 45,
  38 + "img": "./assets/descarga.jpg",
  39 + "cantidad": 1
  40 + }
  41 + ];
  42 +
10 43 constructor() { }
11 44  
12 45 ngOnInit() {
  46 +
  47 + this.getCantidadProductos();
  48 + this.getTotal();
  49 +
  50 + }
  51 +
  52 + getCantidadProductos() {
  53 + var aux = 0;
  54 + for (let i = 0; i < this.productos.length; i++) {
  55 + ++aux;
  56 + }
  57 + return this.cont = aux;
13 58 }
14 59  
  60 + getTotal() {
  61 +
  62 + let subTotal = 0;
  63 + for (let i = 0; i < this.productos.length; i++) {
  64 + subTotal = subTotal + (this.productos[i].precio * this.productos[i].cantidad);
  65 + }
  66 + console.log(subTotal);
  67 + return this.total = subTotal;
  68 + }
  69 +
  70 + public aumentarContador(index) {
  71 +
  72 + ++this.cont;
  73 + for (let i = 0; i < this.productos.length; i++) {
  74 + if (i === index) {
  75 + this.total = this.total + this.productos[i].precio;
  76 + return (this.productos[i].cantidad === this.max) ?
  77 + this.productos[i].cantidad : ++this.productos[i].cantidad;
  78 +
  79 + }
  80 + }
  81 + }
  82 +
  83 + decrementarContador(index) {
  84 +
  85 + for (let i = 0; i < this.productos.length; i++) {
  86 + if (i === index && this.productos[i].cantidad > 1) {
  87 + --this.productos[i].cantidad;
  88 + --this.cont;
  89 + break;
  90 + }
  91 + }
  92 +
  93 + this.getTotal()
  94 + }
  95 +
  96 + setCantidadItems() {
  97 +
  98 + this.cont = 0;
  99 + for (let i = 0; i < this.productos.length; i++) {
  100 + this.cont += this.productos[i].cantidad;
  101 + }
  102 + }
  103 +
  104 + deleteProducto(index) {
  105 +
  106 + for (let i = 0; i < this.productos.length; i++) {
  107 + if (i === index) {
  108 + this.cont -= this.productos[i].cantidad;
  109 + //Elimina del total el precio de todo el item
  110 + this.total = this.total - (this.productos[i].precio * this.productos[i].cantidad);
  111 + this.productos.splice(i, 1);
  112 + return;
  113 + }
  114 + }
  115 + }
  116 +
  117 + clearCar() {
  118 +
  119 + this.productos = [];
  120 + this.total = 0;
  121 + this.cont = 0;
  122 + }
15 123 }