Martin Macola / autoservicio

Download as
Browse Code »

Commit b299c5cf8e0c9c40dd6491f7cc06a3f9abd0021a

Authored by Eric Fernandez
1 parent 8ccb80fcda
Exists in master

medio de pago

Showing 3 changed files with 6 additions and 6 deletions   Show diff stats
src/app/components/pago/pago.component.html
Diff comments   View file @ b299c5c
1 <div 1 <div
2 *ngIf="!compraConEfectivofinalizada && !compraConQRfinalizada" 2 *ngIf="!compraConEfectivofinalizada && !compraConQRfinalizada"
3 class="row m-0 fade-in bg-primary-gradient disable-user-select" 3 class="row m-0 fade-in bg-primary-gradient disable-user-select"
4 (click)="reiniciarTimer()"> 4 (click)="reiniciarTimer()">
5 5
6 <div class="col-12 p-0 vh-100"> 6 <div class="col-12 p-0 vh-100">
7 7
8 <app-header></app-header> 8 <app-header></app-header>
9 9
10 <!-- NOMBRE DE SECCION --> 10 <!-- NOMBRE DE SECCION -->
11 <div class="row m-0"> 11 <div class="row m-0">
12 <div class="col-12 p-0"> 12 <div class="col-12 p-0">
13 <p class="h5 py-1 bg-gray text-muted text-center m-0"> 13 <p class="h5 py-1 bg-gray text-muted text-center m-0">
14 Pagar 14 Pagar
15 <i class="fa fa-usd"></i> 15 <i class="fa fa-usd"></i>
16 </p> 16 </p>
17 </div> 17 </div>
18 </div> 18 </div>
19 19
20 <div *ngIf="!verQR" class="row mt-4 m-3 d-flex align-items-center"> 20 <div *ngIf="!verQR" class="row mt-4 m-3 d-flex align-items-center">
21 <div class="col-7 text-center"> 21 <div class="col-7 text-center">
22 <p class="text-white h2" *ngIf="!verQR">Elija forma de pago</p> 22 <p class="text-white h2" *ngIf="!verQR">Elija forma de pago</p>
23 </div> 23 </div>
24 </div> 24 </div>
25 25
26 <div *ngIf="!verQR" class="row fade-in mt-3"> 26 <div *ngIf="!verQR" class="row fade-in mt-3">
27 <!-- GRILLA DE PRODUCTOS DE MI COMPRA --> 27 <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
28 <div class="col-sm-7"> 28 <div class="col-sm-7">
29 <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark"> 29 <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark">
30 <div class="col-4 p-2"> 30 <div class="col-4 p-2">
31 <div 31 <div
32 class="bg-white rounded-sm shadow border-0" 32 class="bg-white rounded-sm shadow border-0"
33 (click)="pagoEfectivo()"> 33 (click)="pagoEfectivo('efectivo')">
34 <img src="{{apiUrl}}/imagenes/efectivo.png" class="rounded-sm w-75 py-2 mx-auto d-block"> 34 <img src="{{apiUrl}}/imagenes/efectivo.png" class="rounded-sm w-75 py-2 mx-auto d-block">
35 <div class="p-2 card-text text-center"> 35 <div class="p-2 card-text text-center">
36 <p class="h6 text-center m-0">Efectivo</p> 36 <p class="h6 text-center m-0">Efectivo</p>
37 </div> 37 </div>
38 </div> 38 </div>
39 </div> 39 </div>
40 <div class="col-4 p-2"> 40 <div class="col-4 p-2">
41 <div class="bg-white rounded-sm shadow border-0"> 41 <div class="bg-white rounded-sm shadow border-0">
42 <img src="{{apiUrl}}/imagenes/tarjeta.png" class="rounded-sm w-75 py-2 mx-auto d-block"> 42 <img src="{{apiUrl}}/imagenes/tarjeta.png" class="rounded-sm w-75 py-2 mx-auto d-block">
43 <div class="p-2 card-text text-center"> 43 <div class="p-2 card-text text-center">
44 <p class="h6 text-center m-0">Tarjeta</p> 44 <p class="h6 text-center m-0">Tarjeta</p>
45 </div> 45 </div>
46 </div> 46 </div>
47 </div> 47 </div>
48 <div class="col-4 p-2"> 48 <div class="col-4 p-2">
49 <div 49 <div
50 class="bg-white rounded-sm shadow border-0" 50 class="bg-white rounded-sm shadow border-0"
51 (click)="pagar()"> 51 (click)="pagar('electronico')">
52 <img src="{{apiUrl}}/imagenes/qr.png" class="rounded-sm w-75 py-2 mx-auto d-block"> 52 <img src="{{apiUrl}}/imagenes/qr.png" class="rounded-sm w-75 py-2 mx-auto d-block">
53 <div class="p-2 card-text text-center"> 53 <div class="p-2 card-text text-center">
54 <p class="h6 text-center m-0">Pago Electrónico</p> 54 <p class="h6 text-center m-0">Pago Electrónico</p>
55 </div> 55 </div>
56 </div> 56 </div>
57 </div> 57 </div>
58 </div> 58 </div>
59 </div> 59 </div>
60 60
61 <div class="col-sm-5 pl-0"> 61 <div class="col-sm-5 pl-0">
62 <div class="row ml-3"> 62 <div class="row ml-3">
63 <!-- TICKET --> 63 <!-- TICKET -->
64 <div class="col-sm-7 p-0"> 64 <div class="col-sm-7 p-0">
65 <div class="card rounded-sm shadow"> 65 <div class="card rounded-sm shadow">
66 <div class="card-body"> 66 <div class="card-body">
67 <p class="h5 card-title">Su Ticket</p> 67 <p class="h5 card-title">Su Ticket</p>
68 <div class="row mt-4 m-0"> 68 <div class="row mt-4 m-0">
69 <div class="col-12 p-0 mb-2"> 69 <div class="col-12 p-0 mb-2">
70 <p class="h6 m-0 card-text text-left"> 70 <p class="h6 m-0 card-text text-left">
71 <small class="font-weight-bold">DESCRIPCIÓN</small> 71 <small class="font-weight-bold">DESCRIPCIÓN</small>
72 </p> 72 </p>
73 <p class="h6 m-0 card-text text-left"> 73 <p class="h6 m-0 card-text text-left">
74 <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small> 74 <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small>
75 </p> 75 </p>
76 </div> 76 </div>
77 </div> 77 </div>
78 <div class="row px-2 vh-50 overflow-scroll m-0"> 78 <div class="row px-2 vh-50 overflow-scroll m-0">
79 <div class="col-12 p-0 mb-2" *ngFor="let producto of productos"> 79 <div class="col-12 p-0 mb-2" *ngFor="let producto of productos">
80 <p class="h6 m-0 card-text text-left"> 80 <p class="h6 m-0 card-text text-left">
81 <small>{{producto.DET_LAR}}</small> 81 <small>{{producto.DET_LAR}}</small>
82 </p> 82 </p>
83 <div class="row d-flex justify-content-between m-0"> 83 <div class="row d-flex justify-content-between m-0">
84 <div class="col p-0"> 84 <div class="col p-0">
85 <p class="h6 m-0 card-text text-left"> 85 <p class="h6 m-0 card-text text-left">
86 <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small> 86 <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small>
87 </p> 87 </p>
88 </div> 88 </div>
89 <div class="col p-0"> 89 <div class="col p-0">
90 <p class="h6 m-0 card-text text-right"> 90 <p class="h6 m-0 card-text text-right">
91 <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small> 91 <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small>
92 </p> 92 </p>
93 </div> 93 </div>
94 </div> 94 </div>
95 </div> 95 </div>
96 </div> 96 </div>
97 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0"> 97 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0">
98 Total {{getTotal() | currency}} 98 Total {{getTotal() | currency}}
99 </p> 99 </p>
100 </div> 100 </div>
101 </div> 101 </div>
102 </div> 102 </div>
103 </div> 103 </div>
104 </div> 104 </div>
105 </div> 105 </div>
106 106
107 <div *ngIf="verQR" class="row fade-in mt-5"> 107 <div *ngIf="verQR" class="row fade-in mt-5">
108 <div class="col-6 offset-3 border-0 mb-auto"> 108 <div class="col-6 offset-3 border-0 mb-auto">
109 <img src="{{apiUrl}}/imagenes/qrmp.jpg" class="w-50 mx-auto d-block shadow rounded-sm"> 109 <img src="{{apiUrl}}/imagenes/qrmp.jpg" class="w-50 mx-auto d-block shadow rounded-sm">
110 </div> 110 </div>
111 </div> 111 </div>
112 112
113 <!-- OPCIONES ABAJO DERECHA --> 113 <!-- OPCIONES ABAJO DERECHA -->
114 <div class="row m-0 fixed-bottom" > 114 <div class="row m-0 fixed-bottom" >
115 <div class="col-sm-2 offset-sm-10 p-0 mt-auto"> 115 <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
116 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0"> 116 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
117 <div class="card-body row m-0"> 117 <div class="card-body row m-0">
118 <div class="col-12 p-3"> 118 <div class="col-12 p-3">
119 <button 119 <button
120 type="button" 120 type="button"
121 class="btn btn-block btn-light shadow btn-sm shadow" 121 class="btn btn-block btn-light shadow btn-sm shadow"
122 (click)="volverPreviousPage()"> 122 (click)="volverPreviousPage()">
123 <span class="pr-2">Volver</span> 123 <span class="pr-2">Volver</span>
124 <i class="fa fa-undo text-warning"></i> 124 <i class="fa fa-undo text-warning"></i>
125 </button> 125 </button>
126 <button 126 <button
127 type="button" 127 type="button"
128 class="btn btn-block btn-light shadow btn-sm shadow" 128 class="btn btn-block btn-light shadow btn-sm shadow"
129 [routerLink]="['/cancelar-compra']"> 129 [routerLink]="['/cancelar-compra']">
130 <span class="pr-2">Cancelar</span> 130 <span class="pr-2">Cancelar</span>
131 <i class="fa fa-times text-danger"></i> 131 <i class="fa fa-times text-danger"></i>
132 </button> 132 </button>
133 </div> 133 </div>
134 </div> 134 </div>
135 </div> 135 </div>
136 </div> 136 </div>
137 </div> 137 </div>
138 138
139 </div> 139 </div>
140 140
141 </div> 141 </div>
142 142
143 <div 143 <div
144 *ngIf="compraConQRfinalizada" 144 *ngIf="compraConQRfinalizada"
145 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100"> 145 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
146 <div class="col-12 text-center text-white my-auto"> 146 <div class="col-12 text-center text-white my-auto">
147 <p class="font-weight-bold display-4"> 147 <p class="font-weight-bold display-4">
148 Su pago fue<br> 148 Su pago fue<br>
149 acreditado 149 acreditado
150 exitosamente 150 exitosamente
151 </p> 151 </p>
152 <p class="font-weight-bold display-4">Recuerde retirar su ticket</p> 152 <p class="font-weight-bold display-4">Recuerde retirar su ticket</p>
153 </div> 153 </div>
154 </div> 154 </div>
155 155
156 <div 156 <div
157 *ngIf="compraConEfectivofinalizada" 157 *ngIf="compraConEfectivofinalizada"
158 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100"> 158 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
159 <div class="col-12 text-center text-white my-auto"> 159 <div class="col-12 text-center text-white my-auto">
160 <p class="font-weight-bold display-4"> 160 <p class="font-weight-bold display-4">
161 Retire su ticket<br> 161 Retire su ticket<br>
162 y diríjase a caja para<br> 162 y diríjase a caja para<br>
163 efectuar el pago. 163 efectuar el pago.
164 </p> 164 </p>
165 </div> 165 </div>
166 </div> 166 </div>
167 167
src/app/components/pago/pago.component.ts
Diff comments   View file @ b299c5c
1 import { Component, OnInit, OnDestroy } from '@angular/core'; 1 import { Component, OnInit, OnDestroy } from '@angular/core';
2 import { appSettings } from 'src/etc/AppSettings'; 2 import { appSettings } from 'src/etc/AppSettings';
3 import { Location } from '@angular/common'; 3 import { Location } from '@angular/common';
4 import { ProductoService } from 'src/app/services/producto.service'; 4 import { ProductoService } from 'src/app/services/producto.service';
5 import { Router } from '@angular/router'; 5 import { Router } from '@angular/router';
6 import { Producto } from 'src/app/wrappers/producto'; 6 import { Producto } from 'src/app/wrappers/producto';
7 7
8 @Component({ 8 @Component({
9 selector: 'app-pago', 9 selector: 'app-pago',
10 templateUrl: './pago.component.html', 10 templateUrl: './pago.component.html',
11 styleUrls: ['./pago.component.scss'] 11 styleUrls: ['./pago.component.scss']
12 }) 12 })
13 export class PagoComponent implements OnInit, OnDestroy { 13 export class PagoComponent implements OnInit, OnDestroy {
14 14
15 private apiUrl: string = appSettings.apiUrl; 15 private apiUrl: string = appSettings.apiUrl;
16 private verQR: boolean = false; 16 private verQR: boolean = false;
17 private productos: Producto[] = []; 17 private productos: Producto[] = [];
18 private total: number = 0; 18 private total: number = 0;
19 19
20 private compraConQRfinalizada: boolean = false; 20 private compraConQRfinalizada: boolean = false;
21 private compraConEfectivofinalizada: boolean = false; 21 private compraConEfectivofinalizada: boolean = false;
22 private timerReposo: any; 22 private timerReposo: any;
23 23
24 constructor( 24 constructor(
25 private productoService: ProductoService, 25 private productoService: ProductoService,
26 private location: Location, 26 private location: Location,
27 private router: Router, 27 private router: Router,
28 ) { } 28 ) { }
29 29
30 ngOnInit() { 30 ngOnInit() {
31 31
32 this.timerReposo = setTimeout(() => { 32 this.timerReposo = setTimeout(() => {
33 33
34 this.router.navigate(['cancelar-compra']); 34 this.router.navigate(['cancelar-compra']);
35 }, 90000) 35 }, 90000)
36 this.productos = this.productoService.productos; 36 this.productos = this.productoService.productos;
37 } 37 }
38 38
39 ngOnDestroy() { 39 ngOnDestroy() {
40 40
41 clearTimeout(this.timerReposo); 41 clearTimeout(this.timerReposo);
42 } 42 }
43 43
44 pagoEfectivo() { 44 pagoEfectivo() {
45 45
46 this.compraConEfectivofinalizada = true; 46 this.compraConEfectivofinalizada = true;
47 clearTimeout(this.timerReposo); 47 clearTimeout(this.timerReposo);
48 setTimeout(() => { 48 setTimeout(() => {
49 49
50 this.router.navigate(['mensaje-final']); 50 this.router.navigate(['mensaje-final']);
51 }, 3000); 51 }, 3000);
52 } 52 }
53 53
54 pagar() { 54 pagar(medioPago: string) {
55 55
56 this.verQR = true; 56 this.verQR = true;
57 57
58 this.productoService.pagar() 58 this.productoService.pagar(medioPago)
59 .subscribe(() => { 59 .subscribe(() => {
60 60
61 clearTimeout(this.timerReposo); 61 clearTimeout(this.timerReposo);
62 this.compraConQRfinalizada = true; 62 this.compraConQRfinalizada = true;
63 setTimeout(() => { 63 setTimeout(() => {
64 64
65 this.router.navigate(['mensaje-final']); 65 this.router.navigate(['mensaje-final']);
66 }, 3000); 66 }, 3000);
67 }, err => { 67 }, err => {
68 console.log(err); 68 console.log(err);
69 alert('algo salió mal'); 69 alert('algo salió mal');
70 }) 70 })
71 } 71 }
72 72
73 volverPreviousPage() { 73 volverPreviousPage() {
74 74
75 if (this.verQR) { 75 if (this.verQR) {
76 this.verQR = false; 76 this.verQR = false;
77 return; 77 return;
78 } 78 }
79 this.location.back(); 79 this.location.back();
80 } 80 }
81 81
82 getTotal() { 82 getTotal() {
83 83
84 var subTotal = 0; 84 var subTotal = 0;
85 this.productos.forEach(producto => { 85 this.productos.forEach(producto => {
86 86
87 subTotal = subTotal + (producto.PreVen * producto.cantidad); 87 subTotal = subTotal + (producto.PreVen * producto.cantidad);
88 }); 88 });
89 return this.total = subTotal; 89 return this.total = subTotal;
90 } 90 }
91 91
92 reiniciarTimer() { 92 reiniciarTimer() {
93 93
94 clearTimeout(this.timerReposo); 94 clearTimeout(this.timerReposo);
95 this.timerReposo = setTimeout(() => { 95 this.timerReposo = setTimeout(() => {
96 96
97 this.router.navigate(['cancelar-compra']); 97 this.router.navigate(['cancelar-compra']);
98 }, 90000) 98 }, 90000)
99 } 99 }
100 100
101 } 101 }
102 102
src/app/services/producto.service.ts
Diff comments   View file @ b299c5c
1 import { Injectable } from '@angular/core'; 1 import { Injectable } from '@angular/core';
2 import { HttpClient } from '@angular/common/http'; 2 import { HttpClient } from '@angular/common/http';
3 import { Observable } from 'rxjs'; 3 import { Observable } from 'rxjs';
4 import { appSettings } from 'src/etc/AppSettings'; 4 import { appSettings } from 'src/etc/AppSettings';
5 import { Producto } from '../wrappers/producto'; 5 import { Producto } from '../wrappers/producto';
6 6
7 @Injectable({ 7 @Injectable({
8 providedIn: 'root' 8 providedIn: 'root'
9 }) 9 })
10 export class ProductoService { 10 export class ProductoService {
11 11
12 productos: Producto[] = []; 12 productos: Producto[] = [];
13 productoAcargar: Producto; 13 productoAcargar: Producto;
14 promoAcargar: Producto; 14 promoAcargar: Producto;
15 mostrar: string; 15 mostrar: string;
16 16
17 constructor(private http: HttpClient) { } 17 constructor(private http: HttpClient) { }
18 18
19 getProductoById(id): Observable<any> { 19 getProductoById(id): Observable<any> {
20 20
21 return this.http.get(`${appSettings.apiUrl}/articulos/${id}`); 21 return this.http.get(`${appSettings.apiUrl}/articulos/${id}`);
22 } 22 }
23 23
24 getAll(): Observable<any> { 24 getAll(): Observable<any> {
25 25
26 return this.http.get(`${appSettings.apiUrl}/articulos`); 26 return this.http.get(`${appSettings.apiUrl}/articulos`);
27 } 27 }
28 28
29 setProductos(producto: Producto) { 29 setProductos(producto: Producto) {
30 30
31 for (let i = 0; i < this.productos.length; i++) { 31 for (let i = 0; i < this.productos.length; i++) {
32 32
33 if (this.productos[i].id === producto.id) { 33 if (this.productos[i].id === producto.id) {
34 34
35 if (producto.PRO) { 35 if (producto.PRO) {
36 if (this.promosIdenticas(this.productos[i], producto)) { 36 if (this.promosIdenticas(this.productos[i], producto)) {
37 this.productos[i].cantidad++; 37 this.productos[i].cantidad++;
38 return; 38 return;
39 } else { 39 } else {
40 break; 40 break;
41 } 41 }
42 } 42 }
43 this.productos[i].cantidad++; 43 this.productos[i].cantidad++;
44 return; 44 return;
45 } 45 }
46 } 46 }
47 47
48 this.productos.push(producto); 48 this.productos.push(producto);
49 } 49 }
50 50
51 getPromocionByCodigos(sector, codigo): Observable<any> { 51 getPromocionByCodigos(sector, codigo): Observable<any> {
52 52
53 var url = `${appSettings.apiUrl}/promociones/by-codigos/${sector}/${codigo}`; 53 var url = `${appSettings.apiUrl}/promociones/by-codigos/${sector}/${codigo}`;
54 // var url = `${appSettings.apiUrl}/promociones/by-codigos/${2}/${7}`; 54 // var url = `${appSettings.apiUrl}/promociones/by-codigos/${2}/${7}`;
55 return this.http.get(url); 55 return this.http.get(url);
56 } 56 }
57 57
58 getPromociones(sector, codigo): Observable<any> { 58 getPromociones(sector, codigo): Observable<any> {
59 59
60 var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${sector}/${codigo}`; 60 var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${sector}/${codigo}`;
61 // var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${2}/${1306}`; 61 // var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${2}/${1306}`;
62 return this.http.get(url); 62 return this.http.get(url);
63 } 63 }
64 64
65 getPromocionSinonimos(sector, codigo): Observable<any> { 65 getPromocionSinonimos(sector, codigo): Observable<any> {
66 66
67 var url = `${appSettings.apiUrl}/sinonimos/promo/${sector}/${codigo}`; 67 var url = `${appSettings.apiUrl}/sinonimos/promo/${sector}/${codigo}`;
68 // var url = `${appSettings.apiUrl}/sinonimos/promo/${2}/${7}`; 68 // var url = `${appSettings.apiUrl}/sinonimos/promo/${2}/${7}`;
69 return this.http.get(url); 69 return this.http.get(url);
70 } 70 }
71 71
72 updateImages(body): Observable<any> { 72 updateImages(body): Observable<any> {
73 return this.http.post(`${appSettings.apiUrl}/imagenes/guardar`, body); 73 return this.http.post(`${appSettings.apiUrl}/imagenes/guardar`, body);
74 } 74 }
75 75
76 getCategorias() { 76 getCategorias() {
77 return this.http.get(`${appSettings.apiUrl}/categorias`); 77 return this.http.get(`${appSettings.apiUrl}/categorias`);
78 } 78 }
79 79
80 pagar() { 80 pagar(medioPago: string) {
81 return this.http.post(`${appSettings.apiUrl}/comprobante/guardar`, { 81 return this.http.post(`${appSettings.apiUrl}/comprobante/guardar/${medioPago}`, {
82 productos: this.productos 82 productos: this.productos
83 }); 83 });
84 } 84 }
85 85
86 private promosIdenticas(promoEnCarrito: Producto, promo: Producto) { 86 private promosIdenticas(promoEnCarrito: Producto, promo: Producto) {
87 87
88 var sonIdenticas = true; 88 var sonIdenticas = true;
89 var productosPromoCarrito = promoEnCarrito.productos; 89 var productosPromoCarrito = promoEnCarrito.productos;
90 var productosPromoAcargar = promo.productos; 90 var productosPromoAcargar = promo.productos;
91 91
92 if (productosPromoCarrito.length !== productosPromoAcargar.length) { 92 if (productosPromoCarrito.length !== productosPromoAcargar.length) {
93 return false; 93 return false;
94 } 94 }
95 95
96 for (let i = 0; i < productosPromoCarrito.length; i++) { 96 for (let i = 0; i < productosPromoCarrito.length; i++) {
97 97
98 if (productosPromoCarrito[i].id !== productosPromoAcargar[i].id) { 98 if (productosPromoCarrito[i].id !== productosPromoAcargar[i].id) {
99 return false; 99 return false;
100 } 100 }
101 } 101 }
102 102
103 return sonIdenticas; 103 return sonIdenticas;
104 } 104 }
105 105
106 } 106 }
107 107