Martin Macola / autoservicio

Download as
Browse Code ยป

Commit 5b3ad9caacea48d737594d7dfb6d31c80af03399

Authored by Marcelo Puebla
1 parent 24181b4e9e
Exists in master

Cambios estilos.

Showing 5 changed files with 67 additions and 35 deletions   Show diff stats
src/app/components/sidebar/sidebar.component.html
Diff comments   View file @ 5b3ad9c
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 pt-2 text-center">
2 2
3 <h4 class="border-bottom border-white"> Mi compra </h4> 3 <h4 class="border-bottom border-white text-white"> Mi compra </h4>
4 <div class="overflow-auto overflow-scroll mb-2"> 4
5 <div class="card my-2 bg-primary border-0" *ngFor="let prod of productos; let i = index"> 5 <div class="overflow-auto overflow-scroll mb-2 w-100">
6 <img src="{{prod.img}}" class="card-img-top" alt="..."> 6 <div class="my-2 bg-white border-0 rounded-sm" *ngFor="let prod of productos; let i = index">
7 <div class="card-body row m-0 p-0 px-1 py-1 shadow rounded"> 7 <img class="m-auto pt-2" [src]="prod.img">
8 <div class="col-8 p-0 text-left my-auto"> 8 <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm">
9 <p class="m-0 card-description">{{prod.desc}}</p> 9 <div class="col-12 p-0 pt-2 text-left my-auto">
10 <p class="m-0 card-description">COD: {{prod.cod}}</p> 10 <p class="m-0 h6"><small>{{prod.desc}}</small></p>
11 <p class="m-0 h6"><small>COD: {{prod.cod}}</small></p>
11 </div> 12 </div>
12 <div class="col-4 p-1 text-center my-auto"> 13 <div class="col-12 pr-1 text-right h6 my-auto ">
13 {{prod.precio | currency}} 14 <p class="m-0">{{prod.precio | currency}}</p>
14 </div> 15 </div>
15 </div> 16 </div>
16 <div class="row m-0 p-0"> 17 <div class="row m-0 p-0">
17 <div class="col p-1 pb-1 mt-2"> 18 <div class="col px-2 my-2">
18 <button type="button" class="btn btn-light btn-sm float-left my-auto" (click)="deleteProducto(i)">X</button> 19 <div class="btn-group-sm btn-group float-left my-auto" role="group">
19 <button type="button" class="btn btn-light btn-sm my-auto">Y</button> 20 <button type="button" class="btn btn-light btn-sm my-auto border" (click)="aumentarContador(i)">
20 <div class="btn-group-sm btn-group float-right my-auto" role="group" aria-label="Basic example"> 21 <i class="fa fa-plus" aria-hidden="true"></i>
21 <button type="button" class="btn btn-light btn-sm mb-2" (click)="aumentarContador(i)">+</button> 22 </button>
22 <label for="" class="border border.white px-1">{{prod.cantidad}}</label> 23 <div class="bg-white border border-white px-3 my-auto text-dark h5">
23 <button type="button" class="btn btn-light btn-sm mb-2" (click)="decrementarContador(i)">-</button> 24 <small>{{prod.cantidad}}</small>
25 </div>
26 <button type="button" class="btn btn-light btn-sm my-auto border" (click)="decrementarContador(i)">
27 <i class="fa fa-minus" aria-hidden="true"></i>
28 </button>
29 </div>
30 </div>
31 <div class="col px-2 my-2">
32 <div class="btn-group-sm btn-group float-right my-auto" role="group">
33 <button type="button" class="btn btn-light btn-sm my-auto float-left border mr-2">
34 <i class="fa fa-hand-o-up" aria-hidden="true"></i>
35 </button>
36 <button type="button" class="btn btn-secondary btn-sm my-auto ml-2" (click)="deleteProducto(i)">
37 <i class="fa fa-times" aria-hidden="true"></i>
38 </button>
24 </div> 39 </div>
25 </div> 40 </div>
26 </div> 41 </div>
27 </div> 42 </div>
28 </div> 43 </div>
29 44
30 <div class="card mt-auto blue-gradient border-0"> 45 <div class="card rounded-top-sm mt-auto blue-gradient border-0">
31 <div class="card-body row"> 46 <div class="card-body row">
32 <div class="col"> 47 <div class="col">
33 <h4 class="border-bottom border-secondary text-secondary" *ngIf="cont === 1">({{cont}}) item</h4> 48 <h4 class="border-bottom border-secondary text-secondary pb-2" *ngIf="cont === 1">({{cont}}) item</h4>
34 <h4 class="border-bottom border-secondary text-secondary" *ngIf="cont > 1">({{cont}}) items</h4> 49 <h4 class="border-bottom border-secondary text-secondary pb-2" *ngIf="cont > 1">({{cont}}) items</h4>
35 <h3 class="text-secondary">Total</h3> 50 <h3 class="text-secondary">Total</h3>
36 <h3 class="text-dark"><strong>{{total | currency}}</strong></h3> 51 <h3 class=""><strong>{{total | currency}}</strong></h3>
37 </div> 52 </div>
38 <div class="col 12 p-0"> 53 <div class="col 12 p-0">
39 <button type="button" class="btn btn-light shadow mb-2" routerLink="/confirmacion-carrito"><strong>Finalizar y pagar</strong></button> 54 <button type="button" class="btn btn-light shadow mb-2" routerLink="/confirmacion-carrito">
55 <strong>Finalizar y pagar</strong>
56 </button>
40 <button type="button" class="btn btn-light shadow btn-sm" (click)="clearCar()">Cancelar</button> 57 <button type="button" class="btn btn-light shadow btn-sm" (click)="clearCar()">Cancelar</button>
41 </div> 58 </div>
42 </div> 59 </div>
43 </div>
60 </div>
61 </div>
src/app/components/sidebar/sidebar.component.scss
Diff comments   View file @ 5b3ad9c
1 .card-description{ 1 .card-description{
2 font-size: 12px; 2 font-size: 12px;
3 }
4
5 app-sidebar {
6 background-color: red !important;
3 } 7 }
src/app/components/sidebar/sidebar.component.ts
Diff comments   View file @ 5b3ad9c
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { Producto } from 'src/app/wrappers/producto';
2 3
3 4
4 @Component({ 5 @Component({
5 selector: 'app-sidebar', 6 selector: 'app-sidebar',
6 templateUrl: './sidebar.component.html', 7 templateUrl: './sidebar.component.html',
7 styleUrls: ['./sidebar.component.scss'] 8 styleUrls: ['./sidebar.component.scss']
8 }) 9 })
9 export class SidebarComponent implements OnInit { 10 export class SidebarComponent implements OnInit {
10 11
11 private cont: number = 1; 12 private cont: number = 1;
12 private min: number = 1; 13 private min: number = 1;
13 private max: number = 50; 14 private max: number = 50;
14 private total: number = 0; 15 private total: number = 0;
15 16
16 private productos = [ 17 private productos = [
17 { 18 {
18 "id": 1, 19 "id": 1,
19 "desc": "Galletas Oreo", 20 "Detart": "Galletas Oreo",
20 "cod": 225412, 21 "cod": 225412,
21 "precio": 15, 22 "precio": 15,
22 "img": "./assets/img/descarga.jpg", 23 "img": "./assets/img/logodebo.png",
23 "cantidad": 1 24 "cantidad": 1
24 }, 25 },
25 { 26 {
26 "id": 2, 27 "id": 2,
27 "desc": "Coca cola 500ml", 28 "desc": "Coca cola 500ml",
28 "cod": 512632, 29 "cod": 512632,
29 "precio": 40, 30 "precio": 40,
30 "img": "./assets/img/descarga.jpg", 31 "img": "./assets/img/logodebo.png",
31 "cantidad": 1 32 "cantidad": 1
32 }, 33 },
33 { 34 {
34 "id": 3, 35 "id": 3,
35 "desc": "Pancho grande", 36 "desc": "Pancho grande",
36 "cod": 775987, 37 "cod": 775987,
37 "precio": 45, 38 "precio": 45,
38 "img": "./assets/img/descarga.jpg", 39 "img": "./assets/img/logodebo.png",
39 "cantidad": 1 40 "cantidad": 1
40 } 41 }
41 ]; 42 ];
42 43
43 constructor() { } 44 constructor() { }
44 45
45 ngOnInit() { 46 ngOnInit() {
46 47
47 this.getCantidadProductos(); 48 this.getCantidadProductos();
48 this.getTotal(); 49 this.getTotal();
49 50
50 } 51 }
51 52
52 getCantidadProductos() { 53 getCantidadProductos() {
53 var aux = 0; 54 var aux = 0;
54 for (let i = 0; i < this.productos.length; i++) { 55 for (let i = 0; i < this.productos.length; i++) {
55 ++aux; 56 ++aux;
56 } 57 }
57 return this.cont = aux; 58 return this.cont = aux;
58 } 59 }
59 60
60 getTotal() { 61 getTotal() {
61 62
62 let subTotal = 0; 63 let subTotal = 0;
63 for (let i = 0; i < this.productos.length; i++) { 64 for (let i = 0; i < this.productos.length; i++) {
64 subTotal = subTotal + (this.productos[i].precio * this.productos[i].cantidad); 65 subTotal = subTotal + (this.productos[i].precio * this.productos[i].cantidad);
65 } 66 }
66 console.log(subTotal); 67 console.log(subTotal);
67 return this.total = subTotal; 68 return this.total = subTotal;
68 } 69 }
69 70
70 public aumentarContador(index) { 71 public aumentarContador(index) {
71 72
72 ++this.cont; 73 ++this.cont;
73 for (let i = 0; i < this.productos.length; i++) { 74 for (let i = 0; i < this.productos.length; i++) {
74 if (i === index) { 75 if (i === index) {
75 this.total = this.total + this.productos[i].precio; 76 this.total = this.total + this.productos[i].precio;
76 return (this.productos[i].cantidad === this.max) ? 77 return (this.productos[i].cantidad === this.max) ?
77 this.productos[i].cantidad : ++this.productos[i].cantidad; 78 this.productos[i].cantidad : ++this.productos[i].cantidad;
78 79
79 } 80 }
80 } 81 }
81 } 82 }
82 83
83 decrementarContador(index) { 84 decrementarContador(index) {
84 85
85 for (let i = 0; i < this.productos.length; i++) { 86 for (let i = 0; i < this.productos.length; i++) {
86 if (i === index && this.productos[i].cantidad > 1) { 87 if (i === index && this.productos[i].cantidad > 1) {
87 --this.productos[i].cantidad; 88 --this.productos[i].cantidad;
88 --this.cont; 89 --this.cont;
89 break; 90 break;
90 } 91 }
91 } 92 }
92 93
93 this.getTotal() 94 this.getTotal()
94 } 95 }
95 96
96 setCantidadItems() { 97 setCantidadItems() {
97 98
98 this.cont = 0; 99 this.cont = 0;
99 for (let i = 0; i < this.productos.length; i++) { 100 for (let i = 0; i < this.productos.length; i++) {
100 this.cont += this.productos[i].cantidad; 101 this.cont += this.productos[i].cantidad;
101 } 102 }
102 } 103 }
103 104
104 deleteProducto(index) { 105 deleteProducto(index) {
105 106
106 for (let i = 0; i < this.productos.length; i++) { 107 for (let i = 0; i < this.productos.length; i++) {
107 if (i === index) { 108 if (i === index) {
108 this.cont -= this.productos[i].cantidad; 109 this.cont -= this.productos[i].cantidad;
109 //Elimina del total el precio de todo el item 110 //Elimina del total el precio de todo el item
110 this.total = this.total - (this.productos[i].precio * this.productos[i].cantidad); 111 this.total = this.total - (this.productos[i].precio * this.productos[i].cantidad);
111 this.productos.splice(i, 1); 112 this.productos.splice(i, 1);
112 return; 113 return;
113 } 114 }
114 } 115 }
115 } 116 }
116 117
117 clearCar() { 118 clearCar() {
118 119
119 this.productos = []; 120 this.productos = [];
120 this.total = 0; 121 this.total = 0;
121 this.cont = 0; 122 this.cont = 0;
122 } 123 }
123 } 124 }
124 125
src/app/wrappers/producto.ts
Diff comments   View file @ 5b3ad9c
1 export interface Producto { 1 export interface Producto {
2 CodSec: number; 2 CodSec: number;
3 CodArt: number; 3 CodArt: number;
4 DetArt: string; 4 DetArt: string;
5 CodRub: number; 5 CodRub: number;
6 Costo: number; 6 Costo: number;
7 PreNet: number; 7 PreNet: number;
8 ImpInt: number; 8 ImpInt: number;
9 UniVen: number; 9 UniVen: number;
10 FecCos: Date; 10 FecCos: Date;
11 UltAct: Date; 11 UltAct: Date;
12 CodPro: number; 12 CodPro: number;
13 ExiDep: number; 13 ExiDep: number;
14 ExiVta: number; 14 ExiVta: number;
15 MinDep: number; 15 MinDep: number;
16 MaxDep: number; 16 MaxDep: number;
17 MinPVE: number; 17 MinPVE: number;
18 MaxPVE: number; 18 MaxPVE: number;
19 ENTTur: number; 19 ENTTur: number;
20 SINTur: number; 20 SINTur: number;
21 SALTur: number; 21 SALTur: number;
22 IvaSN: boolean; 22 IvaSN: boolean;
23 DepSN: boolean; 23 DepSN: boolean;
24 RubMay: number; 24 RubMay: number;
25 PreVen: number; 25 PreVen: number;
26 IvaCO: number; 26 IvaCO: number;
27 TIP: string; 27 TIP: string;
28 IMPIVA: number; 28 IMPIVA: number;
29 ENTADM: number; 29 ENTADM: number;
30 SALADM: number; 30 SALADM: number;
31 CODIIN: number; 31 CODIIN: number;
32 PRO: boolean; 32 PRO: boolean;
33 FPP: boolean; 33 FPP: boolean;
34 ESS: boolean; 34 ESS: boolean;
35 FID: Date; 35 FID: Date;
36 NID: number; 36 NID: number;
37 FIV: Date; 37 FIV: Date;
38 NIV: number; 38 NIV: number;
39 COO: string; 39 COO: string;
40 CAG: string; 40 CAG: string;
41 CAP: number; 41 CAP: number;
42 UTL: number; 42 UTL: number;
43 NHA: boolean; 43 NHA: boolean;
44 PID: boolean; 44 PID: boolean;
45 PRV: number; 45 PRV: number;
46 PRD: number; 46 PRD: number;
47 ImpInt2: number; 47 ImpInt2: number;
48 E_HD: string; 48 E_HD: string;
49 C_HD: string; 49 C_HD: string;
50 CLA: number; 50 CLA: number;
51 UNICAP: number; 51 UNICAP: number;
52 ELBPRO: string; 52 ELBPRO: string;
53 PPP: number; 53 PPP: number;
54 ALI: number; 54 ALI: number;
55 BAL_TIPO: string; 55 BAL_TIPO: string;
56 PER_MAY: boolean; 56 PER_MAY: boolean;
57 ES_MAY: boolean; 57 ES_MAY: boolean;
58 CLA_MAY: number; 58 CLA_MAY: number;
59 PME_CMP: string; 59 PME_CMP: string;
60 USA_BAL: boolean; 60 USA_BAL: boolean;
61 DET_LAR: string; 61 DET_LAR: string;
62 ROTULO: string; 62 ROTULO: string;
63 REC_MANUAL: boolean; 63 REC_MANUAL: boolean;
64 E_HD1: string; 64 E_HD1: string;
65 C_HD1: string; 65 C_HD1: string;
66 ImpInt3: number; 66 ImpInt3: number;
67 FUA_MAE_YPF: Date; 67 FUA_MAE_YPF: Date;
68 CPQ: number; 68 CPQ: number;
69 EPQ: string; 69 EPQ: string;
70 BPQ: number; 70 BPQ: number;
71 PUPQ: number; 71 PUPQ: number;
72 CORVTO: boolean; 72 CORVTO: boolean;
73 CORVTO_COSTO: number; 73 CORVTO_COSTO: number;
74 UTLFR: number; 74 UTLFR: number;
75 FAMILIA: number; 75 FAMILIA: number;
76 ES_LUB: boolean; 76 ES_LUB: boolean;
77 ES_FERT: boolean; 77 ES_FERT: boolean;
78 AutoFac: boolean; 78 AutoFac: boolean;
79 LitrosPCD: number; 79 LitrosPCD: number;
80 LisPCD: number; 80 LisPCD: number;
81 ImpLey23966: boolean; 81 ImpLey23966: boolean;
82 es_bio: boolean; 82 es_bio: boolean;
83 ExpArbaRev: boolean; 83 ExpArbaRev: boolean;
84 ES_AGROQ: boolean; 84 ES_AGROQ: boolean;
85 ES_PLAST: boolean; 85 ES_PLAST: boolean;
86 es_bio_por: string; 86 es_bio_por: string;
87 IMP_IMP_INT: boolean; 87 IMP_IMP_INT: boolean;
88 id: number; 88 id: number;
89 nombreImagen?: any; 89 nombreImagen?: any;
90
91 cantidad?:number;
90 } 92 }
91 93
1 @import "./assets/scss/animation.scss"; 1 @import "./assets/scss/animation.scss";
2 @import "./assets/scss/bootstrap-override.scss"; 2 @import "./assets/scss/bootstrap-override.scss";
3 3
4 html, 4 html,
5 body { 5 body {
6 background-color: #f0f0f0; 6 background-color: #f0f0f0;
7 overflow: hidden; 7 overflow: hidden;
8 } 8 }
9 9
10 .blur { 10 .blur {
11 filter: blur(10px); 11 filter: blur(10px);
12 -webkit-filter: blur(10px); 12 -webkit-filter: blur(10px);
13 } 13 }
14 14
15 .disable-user-select { 15 .disable-user-select {
16 -webkit-user-select: none; 16 -webkit-user-select: none;
17 -moz-user-select: none; 17 -moz-user-select: none;
18 -ms-user-select: none; 18 -ms-user-select: none;
19 user-select: none; 19 user-select: none;
20 } 20 }
21 21
22 .blue-gradient { 22 .blue-gradient {
23 background: linear-gradient(0deg, rgb(20, 56, 68), rgb(252, 252, 252)); 23 background: linear-gradient(0deg, #8093a4, #fcfcfc);
24 } 24 }
25 25
26 .rounded { 26 .rounded {
27 border-radius: 1.5rem !important; 27 border-radius: 1.5rem !important;
28 } 28 }
29 29
30 .rounded-top-sm {
31 border-top-left-radius: 0.75rem !important;
32 border-top-right-radius: 0.75rem !important;
33 }
34
30 .rounded-sm { 35 .rounded-sm {
31 border-radius: 0.75rem !important; 36 border-radius: 0.75rem !important;
32 } 37 }
33 38
34 .card-effect { 39 .card-effect {
35 &:active, 40 &:active {
36 img {
37 background-color: #c9c9c9b3 !important; 41 background-color: #c9c9c9b3 !important;
38 transition: background-color 0.5s; 42 transition: background-color 0.5s;
39 } 43 }
40 &:focus, 44 &:focus {
41 img {
42 background-color: #c9c9c9b3 !important; 45 background-color: #c9c9c9b3 !important;
43 transition: background-color 0.5s; 46 transition: background-color 0.5s;
44 } 47 }
45 } 48 }
46 49
47 .overflow-scroll { 50 .overflow-scroll {
48 overflow-y: auto !important; 51 overflow-y: auto !important;
49 overflow-x: hidden !important; 52 overflow-x: hidden !important;
50 &::-webkit-scrollbar { 53 &::-webkit-scrollbar {
51 width: 0.5em; 54 width: 0.5em;
52 } 55 }
53 &::-webkit-scrollbar-track { 56 &::-webkit-scrollbar-track {
54 border-radius: 10px; 57 border-radius: 10px;
55 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); 58 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
56 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); 59 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
57 } 60 }
58 &::-webkit-scrollbar-thumb { 61 &::-webkit-scrollbar-thumb {
59 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7); 62 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
60 outline: 1px solid slategrey; 63 outline: 1px solid slategrey;
61 border-radius: 10px; 64 border-radius: 10px;
62 height: 12px; 65 height: 12px;
63 &:active { 66 &:active {
64 box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9); 67 box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9);
65 -webkit-box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9); 68 -webkit-box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9);
66 } 69 }
67 } 70 }
68 &::-webkit-scrollbar-corner { 71 &::-webkit-scrollbar-corner {
69 border-radius: 10px; 72 border-radius: 10px;
70 } 73 }
71 } 74 }
72 75
73 .bg-gray{ 76 .bg-gray {
74 background-color: #e6e6e6; 77 background-color: #e6e6e6;
75 }
78 }
79
80 .bg-primary-gradient {