Martin Macola / autoservicio

Download as
Browse Code ยป

Commit 8467eb3d10d2c2b44c95bed514adb447fb2cc326

Authored by =
1 parent 45a6a13ed1
Exists in master

Funciones aumentar y decrementar

Showing 2 changed files with 85 additions and 10 deletions   Show diff stats
src/app/sidebar/sidebar.component.html
Diff comments   View file @ 8467eb3
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"> 5 <div class="card my-2 bg-primary border-0" *ngFor="let prod of productos; let i = index">
6 <img src="../../assets/descarga.jpg" 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">Galleta oreo x 199 gs Chocolate</p> 9 <p class="m-0 card-description">{{prod.desc}}</p>
10 <p class="m-0 card-description"><small>COD: 1234567</small></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 {{90 | 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">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">X</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">+</button> 21 <button type="button" class="btn btn-light btn-sm mb-2" (click)="aumentarContador(prod.cantidad)">+</button>
22 <label for="" class="border border.white px-1">12</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">-</button> 23 <button type="button" class="btn btn-light btn-sm mb-2" (click)="decrementarContador()">-</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">(1) item</h4>
34 <h3 class="text-secondary">Total</h3> 34 <h3 class="text-secondary">Total</h3>
35 <h3 class="text-dark"><strong>{{5000 | currency}}</strong></h3> 35 <h3 class="text-dark"><strong>{{5000 | currency}}</strong></h3>
36 </div> 36 </div>
37 <div class="col 12 p-0"> 37 <div class="col 12 p-0">
38 <button type="button" class="btn btn-light shadow mb-2"><strong>Finalizar y pagar</strong></button> 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 btn-sm">Cancelar</button>
40 </div> 40 </div>
41 </div> 41 </div>
42 </div> 42 </div>
src/app/sidebar/sidebar.component.ts
Diff comments   View file @ 8467eb3
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 2
3 @Component({ 3 @Component({
4 selector: 'app-sidebar', 4 selector: 'app-sidebar',
5 templateUrl: './sidebar.component.html', 5 templateUrl: './sidebar.component.html',
6 styleUrls: ['./sidebar.component.scss'] 6 styleUrls: ['./sidebar.component.scss']
7 }) 7 })
8 export class SidebarComponent implements OnInit { 8 export class SidebarComponent implements OnInit {
9 9
10 private cont: number = 1;
11 private min: number = 1;
12 private max: number =50;
13
14 private productos = [
15 {
16 "id": 1,
17 "desc": "Galletas Oreo",
18 "cod": 225412,
19 "precio": 15,
20 "img": "./assets/descarga.jpg",
21 "cantidad": 1
22 },
23 {
24 "id": 2,
25 "desc": "Coca cola 500ml",
26 "cod": 512632,
27 "precio": 40,
28 "img": "./assets/descarga.jpg",
29 "cantidad": 1
30 },
31 {
32 "id": 3,
33 "desc": "Pancho grande",
34 "cod": 775987,
35 "precio": 45,
36 "img": "./assets/descarga.jpg",
37 "cantidad": 1
38 }
39 ];
40
10 constructor() { } 41 constructor() { }
11 42
12 ngOnInit() { 43 ngOnInit() {
44 this.getProductosCarrito();
45 }
46
47 getProductosCarrito(){
48 return this.productos;
49
50 }
51
52 public aumentarContador(cant){
53 console.log("llego");
54 for (const i of this.productos) {
55 if (cant === this.max) {
56 return i.cantidad;
57 } else{
58 ++i.cantidad
59 return i.cantidad;
60 }
61 }
62 // if (this.cont === this.max) {
63 // this.cont;
64 // return this.cont;
65 // } else {
66 // ++this.cont;
67 // return this.cont;
68 // }
69
70 }
71
72 decrementarContador(){
73 if (this.cont === this.min) {
74 this.cont;
75 return this.cont;
76 } else {
77 --this.cont;
78 return this.cont;
79 }
13 } 80 }
14 81
82 deleteProducto(index){
83 for (let i = 0; i < this.productos.length; i++)
84 if (i === index) {
85 this.productos.splice(i,1);
86 return this.productos ;
87 }
88
89 }
15 } 90 }
16 91