Mauricio Cattafi / autoservicio

Download as
Browse Code ยป

Commit 2ca83d735651cb2bc133ebbab98cdcc67beb9c76

Authored by Marcelo Puebla
2 parents 21fa9c785f 4ae1292d74
Exists in master and in 1 other branch validar_pve

Merge branch 'master' into 'master' 

Master (Joel Vitelli)

See merge request !8
Showing 2 changed files   Show diff stats
src/app/components/sidebar/sidebar.component.html
Diff comments   View file @ 2ca83d7
... ... @@ -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 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" (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 @ 2ca83d7
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 }