Commit 4384b790cfe9be0594a1111e56b2e8f63857df6a
1 parent
afc1dce764
Exists in
master
Funcion incrrementar
Showing
2 changed files
with
53 additions
and
47 deletions
Show diff stats
src/app/sidebar/sidebar.component.html
| 1 | <div class="d-flex align-items-center flex-column h-100 bg-dark pt-2 text-center"> | 1 | <div class="d-flex align-items-center flex-column h-100 bg-dark pt-2 text-center"> |
| 2 | 2 | ||
| 3 | <h4 class="border-bottom border-white"> Mi compra </h4> | 3 | <h4 class="border-bottom border-white"> Mi compra </h4> |
| 4 | <div class="overflow-auto mb-2"> | 4 | <div class="overflow-auto mb-2"> |
| 5 | <div class="card my-2 bg-primary border-0" *ngFor="let prod of productos; let i = index"> | 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="..."> | 6 | <img src="{{prod.img}}" class="card-img-top" alt="..."> |
| 7 | <div class="card-body row m-0 p-0 px-1 py-1 shadow rounded"> | 7 | <div class="card-body row m-0 p-0 px-1 py-1 shadow rounded"> |
| 8 | <div class="col-8 p-0 text-left my-auto"> | 8 | <div class="col-8 p-0 text-left my-auto"> |
| 9 | <p class="m-0 card-description">{{prod.desc}}</p> | 9 | <p class="m-0 card-description">{{prod.desc}}</p> |
| 10 | <p class="m-0 card-description">COD: {{prod.cod}}</p> | 10 | <p class="m-0 card-description">COD: {{prod.cod}}</p> |
| 11 | </div> | 11 | </div> |
| 12 | <div class="col-4 p-1 text-center my-auto"> | 12 | <div class="col-4 p-1 text-center my-auto"> |
| 13 | {{prod.precio | currency}} | 13 | {{prod.precio | currency}} |
| 14 | </div> | 14 | </div> |
| 15 | </div> | 15 | </div> |
| 16 | <div class="row m-0 p-0"> | 16 | <div class="row m-0 p-0"> |
| 17 | <div class="col p-1 pb-1 mt-2"> | 17 | <div class="col p-1 pb-1 mt-2"> |
| 18 | <button type="button" class="btn btn-light btn-sm float-left my-auto" (click)="deleteProducto(i)">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> | 19 | <button type="button" class="btn btn-light btn-sm my-auto">Y</button> |
| 20 | <div class="btn-group-sm btn-group float-right my-auto" role="group" aria-label="Basic example"> | 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" (click)="aumentarContador(prod.cantidad)">+</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> | 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()">-</button> | 23 | <button type="button" class="btn btn-light btn-sm mb-2" (click)="decrementarContador(i)">-</button> |
| 24 | </div> | 24 | </div> |
| 25 | </div> | 25 | </div> |
| 26 | </div> | 26 | </div> |
| 27 | </div> | 27 | </div> |
| 28 | </div> | 28 | </div> |
| 29 | 29 | ||
| 30 | <div class="card mt-auto blue-gradient border-0"> | 30 | <div class="card mt-auto blue-gradient border-0"> |
| 31 | <div class="card-body row"> | 31 | <div class="card-body row"> |
| 32 | <div class="col"> | 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 | <h3 class="text-secondary">Total</h3> | 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 | </div> | 37 | </div> |
| 37 | <div class="col 12 p-0"> | 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 mb-2"><strong>Finalizar y pagar</strong></button> |
| 39 | <button type="button" class="btn btn-light shadow btn-sm">Cancelar</button> | 40 | <button type="button" class="btn btn-light shadow btn-sm">Cancelar</button> |
| 40 | </div> | 41 | </div> |
| 41 | </div> | 42 | </div> |
| 42 | </div> | 43 | </div> |
src/app/sidebar/sidebar.component.ts
| 1 | import { Component, OnInit } from '@angular/core'; | 1 | import { Component, OnInit } from '@angular/core'; |
| 2 | import { timingSafeEqual } from 'crypto'; | ||
| 2 | 3 | ||
| 3 | @Component({ | 4 | @Component({ |
| 4 | selector: 'app-sidebar', | 5 | selector: 'app-sidebar', |
| 5 | templateUrl: './sidebar.component.html', | 6 | templateUrl: './sidebar.component.html', |
| 6 | styleUrls: ['./sidebar.component.scss'] | 7 | styleUrls: ['./sidebar.component.scss'] |
| 7 | }) | 8 | }) |
| 8 | export class SidebarComponent implements OnInit { | 9 | export class SidebarComponent implements OnInit { |
| 9 | 10 | ||
| 10 | private cont: number = 1; | 11 | private cont: number = 1; |
| 11 | private min: number = 1; | 12 | private min: number = 1; |
| 12 | private max: number =50; | 13 | private max: number = 50; |
| 14 | private total: number = 0; | ||
| 13 | 15 | ||
| 14 | private productos = [ | 16 | private productos = [ |
| 15 | { | 17 | { |
| 16 | "id": 1, | 18 | "id": 1, |
| 17 | "desc": "Galletas Oreo", | 19 | "desc": "Galletas Oreo", |
| 18 | "cod": 225412, | 20 | "cod": 225412, |
| 19 | "precio": 15, | 21 | "precio": 15, |
| 20 | "img": "./assets/descarga.jpg", | 22 | "img": "./assets/descarga.jpg", |
| 21 | "cantidad": 1 | 23 | "cantidad": 1 |
| 22 | }, | 24 | }, |
| 23 | { | 25 | { |
| 24 | "id": 2, | 26 | "id": 2, |
| 25 | "desc": "Coca cola 500ml", | 27 | "desc": "Coca cola 500ml", |
| 26 | "cod": 512632, | 28 | "cod": 512632, |
| 27 | "precio": 40, | 29 | "precio": 40, |
| 28 | "img": "./assets/descarga.jpg", | 30 | "img": "./assets/descarga.jpg", |
| 29 | "cantidad": 1 | 31 | "cantidad": 1 |
| 30 | }, | 32 | }, |
| 31 | { | 33 | { |
| 32 | "id": 3, | 34 | "id": 3, |
| 33 | "desc": "Pancho grande", | 35 | "desc": "Pancho grande", |
| 34 | "cod": 775987, | 36 | "cod": 775987, |
| 35 | "precio": 45, | 37 | "precio": 45, |
| 36 | "img": "./assets/descarga.jpg", | 38 | "img": "./assets/descarga.jpg", |
| 37 | "cantidad": 1 | 39 | "cantidad": 1 |
| 38 | } | 40 | } |
| 39 | ]; | 41 | ]; |
| 40 | 42 | ||
| 41 | constructor() { } | 43 | constructor() { } |
| 42 | 44 | ||
| 43 | ngOnInit() { | 45 | ngOnInit() { |
| 44 | this.getProductosCarrito(); | 46 | this.getProductosCarrito(); |
| 47 | this.getCantidadProductos(); | ||
| 48 | this.getTotal(); | ||
| 45 | } | 49 | } |
| 46 | 50 | ||
| 47 | getProductosCarrito(){ | 51 | getCantidadProductos(){ |
| 52 | var aux = 0; | ||
| 53 | for (let i = 0; i < this.productos.length; i++) { | ||
| 54 | ++aux; | ||
| 55 | } | ||
| 56 | return this.cont = aux; | ||
| 57 | |||
| 58 | } | ||
| 59 | |||
| 60 | getProductosCarrito() { | ||
| 48 | return this.productos; | 61 | return this.productos; |
| 49 | |||
| 50 | } | 62 | } |
| 51 | 63 | ||
| 52 | public aumentarContador(cant){ | 64 | getTotal(){ |
| 53 | console.log("llego"); | 65 | var subTotal; |
| 54 | for (const i of this.productos) { | 66 | for (const pr of this.productos) { |
| 55 | if (cant === this.max) { | 67 | subTotal = pr.cantidad * pr.precio; |
| 56 | return i.cantidad; | 68 | } |
| 57 | } else{ | 69 | this.total = this.total + subTotal; |
| 58 | ++i.cantidad | 70 | this.total = this.total * this.cont; |
| 59 | return i.cantidad; | 71 | return this.total; |
| 60 | } | 72 | } |
| 61 | } | 73 | |
| 62 | 74 | public aumentarContador(index) { | |
| 63 | // if (this.cont === this.max) { | 75 | ++this.cont; |
| 64 | // this.cont; | 76 | for (let i = 0; i < this.productos.length; i++) { |
| 65 | // return this.cont; | ||
| 66 | // } else { | ||
| 67 | // ++this.cont; | ||
| 68 | // return this.cont; | ||
| 69 | // } | ||
| 70 | |||
| 71 | } | ||
| 72 | aumentarContador2(index){ | ||
| 73 | for (let i = 0; i < this.productos.length; i++) | ||
| 74 | if (i === index) { | 77 | if (i === index) { |
| 75 | for (const pr of this.productos) { | 78 | return (this.productos[i].cantidad === this.max) ? |
| 79 | this.productos[i].cantidad : ++this.productos[i].cantidad; | ||
| 76 | 80 | ||
| 77 | } | 81 | } |
| 78 | } | 82 | } |
| 79 | } | 83 | } |
| 80 | 84 | ||
| 81 | decrementarContador(){ | 85 | decrementarContador(index) { |
| 82 | if (this.cont === this.min) { | 86 | --this.cont; |
| 83 | this.cont; | 87 | for (let i = 0; i < this.productos.length; i++) { |
| 84 | return this.cont; | 88 | if (i === index) { |
| 85 | } else { | 89 | return (this.productos[i].cantidad === this.min) ? |
| 86 | --this.cont; | 90 | this.productos[i].cantidad : --this.productos[i].cantidad; |
| 87 | return this.cont; | 91 | } |
| 88 | } | 92 | } |
| 89 | } | 93 | } |
| 90 | 94 | ||
| 91 | deleteProducto(index){ | 95 | deleteProducto(index) { |