Martin Macola / autoservicio

Download as
Browse Code ยป

Commit db0af85b136ddd7432bf5479db0cbc887e33167d

Authored by =
1 parent d05888154c
Exists in master

Contadores de total y cant items

Showing 2 changed files with 45 additions and 22 deletions   Show diff stats
src/app/components/sidebar/sidebar.component.html
Diff comments   View file @ db0af85
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(i)">+</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(i)">-</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" *ngIf="cont === 1">({{cont}}) 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 <h4 class="border-bottom border-secondary text-secondary" *ngIf="cont > 1">({{cont}}) items</h4>
35 <h3 class="text-secondary">Total</h3> 35 <h3 class="text-secondary">Total</h3>
36 <h3 class="text-dark"><strong>{{total | currency}}</strong></h3> 36 <h3 class="text-dark"><strong>{{total | currency}}</strong></h3>
37 </div> 37 </div>
38 <div class="col 12 p-0"> 38 <div class="col 12 p-0">
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 mb-2"><strong>Finalizar y pagar</strong></button>
40 <button type="button" class="btn btn-light shadow btn-sm">Cancelar</button> 40 <button type="button" class="btn btn-light shadow btn-sm" (click)="clearCar()">Cancelar</button>
41 </div> 41 </div>
42 </div> 42 </div>
43 </div> 43 </div>
src/app/components/sidebar/sidebar.component.ts
Diff comments   View file @ db0af85
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { timingSafeEqual } from 'crypto'; 2
3 3
4 @Component({ 4 @Component({
5 selector: 'app-sidebar', 5 selector: 'app-sidebar',
6 templateUrl: './sidebar.component.html', 6 templateUrl: './sidebar.component.html',
7 styleUrls: ['./sidebar.component.scss'] 7 styleUrls: ['./sidebar.component.scss']
8 }) 8 })
9 export class SidebarComponent implements OnInit { 9 export class SidebarComponent implements OnInit {
10 10
11 private cont: number = 1; 11 private cont: number = 1;
12 private min: number = 1; 12 private min: number = 1;
13 private max: number = 50; 13 private max: number = 50;
14 private total: number = 0; 14 private total: number = 0;
15 15
16 private productos = [ 16 private productos = [
17 { 17 {
18 "id": 1, 18 "id": 1,
19 "desc": "Galletas Oreo", 19 "desc": "Galletas Oreo",
20 "cod": 225412, 20 "cod": 225412,
21 "precio": 15, 21 "precio": 15,
22 "img": "./assets/descarga.jpg", 22 "img": "./assets/descarga.jpg",
23 "cantidad": 1 23 "cantidad": 1
24 }, 24 },
25 { 25 {
26 "id": 2, 26 "id": 2,
27 "desc": "Coca cola 500ml", 27 "desc": "Coca cola 500ml",
28 "cod": 512632, 28 "cod": 512632,
29 "precio": 40, 29 "precio": 40,
30 "img": "./assets/descarga.jpg", 30 "img": "./assets/descarga.jpg",
31 "cantidad": 1 31 "cantidad": 1
32 }, 32 },
33 { 33 {
34 "id": 3, 34 "id": 3,
35 "desc": "Pancho grande", 35 "desc": "Pancho grande",
36 "cod": 775987, 36 "cod": 775987,
37 "precio": 45, 37 "precio": 45,
38 "img": "./assets/descarga.jpg", 38 "img": "./assets/descarga.jpg",
39 "cantidad": 1 39 "cantidad": 1
40 } 40 }
41 ]; 41 ];
42 42
43 constructor() { } 43 constructor() { }
44 44
45 ngOnInit() { 45 ngOnInit() {
46 this.getProductosCarrito(); 46
47 this.getCantidadProductos(); 47 this.getCantidadProductos();
48 this.getTotal(); 48 this.getTotal();
49
49 } 50 }
50 51
51 getCantidadProductos(){ 52 getCantidadProductos() {
52 var aux = 0; 53 var aux = 0;
53 for (let i = 0; i < this.productos.length; i++) { 54 for (let i = 0; i < this.productos.length; i++) {
54 ++aux; 55 ++aux;
55 } 56 }
56 return this.cont = aux; 57 return this.cont = aux;
57
58 } 58 }
59 59
60 getProductosCarrito() { 60 getTotal() {
61 return this.productos;
62 }
63 61
64 getTotal(){ 62 let subTotal = 0;
65 var subTotal;
66 for (let i = 0; i < this.productos.length; i++) { 63 for (let i = 0; i < this.productos.length; i++) {
67 this.productos[i].cantidad; 64 subTotal = subTotal + (this.productos[i].precio * this.productos[i].cantidad);
68 } 65 }
66 console.log(subTotal);
67 return this.total = subTotal;
69 } 68 }
70 69
71 public aumentarContador(index) { 70 public aumentarContador(index) {
72 ++this.cont; 71
73 for (let i = 0; i < this.productos.length; i++) { 72 ++this.cont;
73 for (let i = 0; i < this.productos.length; i++) {
74 if (i === index) { 74 if (i === index) {
75 this.total = this.total + this.productos[i].precio;
75 return (this.productos[i].cantidad === this.max) ? 76 return (this.productos[i].cantidad === this.max) ?
76 this.productos[i].cantidad : ++this.productos[i].cantidad; 77 this.productos[i].cantidad : ++this.productos[i].cantidad;
77 78
78 } 79 }
79 } 80 }
80 } 81 }
81 82
82 decrementarContador(index) { 83 decrementarContador(index) {
83 --this.cont; 84
84 for (let i = 0; i < this.productos.length; i++) { 85 for (let i = 0; i < this.productos.length; i++) {
85 if (i === index) { 86 if (i === index && this.productos[i].cantidad > 1) {
86 return (this.productos[i].cantidad === this.min) ? 87 --this.productos[i].cantidad;
87 this.productos[i].cantidad : --this.productos[i].cantidad; 88 --this.cont;
89 break;
88 } 90 }
89 } 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 }
90 } 102 }
91 103
92 deleteProducto(index) { 104 deleteProducto(index) {
93 --this.cont; 105
94 for (let i = 0; i < this.productos.length; i++) 106 for (let i = 0; i < this.productos.length; i++){
95 if (i === index) { 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);
96 this.productos.splice(i, 1); 111 this.productos.splice(i, 1);
97 return this.productos; 112 return;
98 } 113 }
114 }
115 }
99 116
117 clearCar(){
118 let arr = [];
119 this.productos = arr;
120 this.total = 0;
121 this.cont = 0;