Marcelo Puebla / autoservicio-axion

Download as
Browse Code »

Commit 0e817b67e5c2696d5693700f73fe870ac18e82a0

Authored by Benjamin Rodriguez
1 parent a36af12088
Exists in develop

arreglo pago-tarjeta

Showing 2 changed files with 9 additions and 9 deletions   Show diff stats
src/app/modules/pago-tarjeta/pago-tarjeta.component.html
Diff comments   View file @ 0e817b6
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <div class="row mx-0 h-15"> 2 <div class="row mx-0 h-15">
3 <div class="col-12 px-0 h-80 my-auto"> 3 <div class="col-12 px-0 h-80 my-auto">
4 <img 4 <img
5 draggable="false" 5 draggable="false"
6 ondragstart="return false;" 6 ondragstart="return false;"
7 (contextmenu)="false" 7 (contextmenu)="false"
8 class="d-block mx-auto h-100" 8 class="d-block mx-auto h-100"
9 src="assets/img/logo-spot.svg"> 9 src="assets/img/logo-spot.svg">
10 </div> 10 </div>
11 </div> 11 </div>
12 <div class="h-85 pago-tarjeta"> 12 <div class="h-85 pago-tarjeta">
13 <div class="row h-50 mx-0 justify-content-center text-center"> 13 <div class="row h-50 mx-0 justify-content-center text-center">
14 <div class="col-7 p-5 h-auto align-self-end border border-secondary rounded"> 14 <div class="col-7 p-5 h-auto align-self-end border border-secondary rounded">
15 <img 15 <img
16 draggable="false" 16 draggable="false"
17 ondragstart="return false;" 17 ondragstart="return false;"
18 (contextmenu)="false" 18 (contextmenu)="false"
19 class="img-in-top px-4 bg-white" 19 class="img-in-top px-4 bg-white"
20 src="assets/img/icono-tarjetas.svg"> 20 src="assets/img/icono-tarjetas.svg">
21 <p class="h6 m-0">AHORA ESPERE QUE SE ACTIVE EL POSNET</p> 21 <p class="h6 m-0">AHORA ESPERÁ QUE SE ACTIVE EL POSNET</p>
22 <p class="h2 mb-3 text-secondary"> 22 <p class="h2 mb-3 text-secondary">
23 deslice su tarjeta 23 deslice su tarjeta
24 </p> 24 </p>
25 <p class="h6 m-0">Y SIGA LAS INSTRUCCIONES DEL LECTOR</p> 25 <p class="h6 m-0">Y SEGUÍ LAS INSTRUCCIONES DEL LECTOR</p>
26 </div> 26 </div>
27 </div> 27 </div>
28 <div class="row mt-5 justify-content-center arrow-slide arrow-delay-1"> 28 <div class="row mt-5 justify-content-center arrow-slide arrow-delay-1">
29 <div class="col-1"> 29 <div class="col-1">
30 <img 30 <img
31 draggable="false" 31 draggable="false"
32 ondragstart="return false;" 32 ondragstart="return false;"
33 (contextmenu)="false" 33 (contextmenu)="false"
34 class="img-fluid" 34 class="img-fluid"
35 src="assets/img/down-chevron.svg"> 35 src="assets/img/down-chevron.svg">
36 </div> 36 </div>
37 </div> 37 </div>
38 <div class="row justify-content-center arrow-slide arrow-delay-2"> 38 <div class="row justify-content-center arrow-slide arrow-delay-2">
39 <div class="col-1"> 39 <div class="col-1">
40 <img 40 <img
41 draggable="false" 41 draggable="false"
42 ondragstart="return false;" 42 ondragstart="return false;"
43 (contextmenu)="false" 43 (contextmenu)="false"
44 class="img-fluid" 44 class="img-fluid"
45 src="assets/img/down-chevron.svg"> 45 src="assets/img/down-chevron.svg">
46 </div> 46 </div>
47 </div> 47 </div>
48 <div class="row justify-content-center arrow-slide arrow-delay-3"> 48 <div class="row justify-content-center arrow-slide arrow-delay-3">
49 <div class="col-1"> 49 <div class="col-1">
50 <img 50 <img
51 draggable="false" 51 draggable="false"
52 ondragstart="return false;" 52 ondragstart="return false;"
53 (contextmenu)="false" 53 (contextmenu)="false"
54 class="img-fluid" 54 class="img-fluid"
55 src="assets/img/down-chevron.svg"> 55 src="assets/img/down-chevron.svg">
56 </div> 56 </div>
57 </div> 57 </div>
58 </div> 58 </div>
59 </div> 59 </div>
60 60
61 <ng-template #template> 61 <ng-template #template>
62 <div class="modal-body rounded bg-primary"> 62 <div class="modal-body rounded bg-primary">
63 <h1 class="text-white text-center my-4">Por favor,<br>espera un momento</h1> 63 <h1 class="text-white text-center my-4">Por favor,<br>esperá un momento</h1>
64 <div class="d-flex justify-content-center mt-2 mb-4"> 64 <div class="d-flex justify-content-center mt-2 mb-4">
65 <div class="spinner-border text-white text-center" role="status"> 65 <div class="spinner-border text-white text-center" role="status">
66 <span class="sr-only">Loading...</span> 66 <span class="sr-only">Loading...</span>
67 </div> 67 </div>
68 </div> 68 </div>
69 </div> 69 </div>
70 </ng-template> 70 </ng-template>
71
src/app/modules/pago-tarjeta/pago-tarjeta.component.ts
Diff comments   View file @ 0e817b6
1 import { Component, OnInit, TemplateRef, OnDestroy, ViewChild } from '@angular/core'; 1 import { Component, OnInit, TemplateRef, OnDestroy, ViewChild } from '@angular/core';
2 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 2 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
3 import { Router } from '@angular/router'; 3 import { Router } from '@angular/router';
4 import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal'; 4 import { BsModalService } from 'ngx-bootstrap/modal';
5 import { ErrorFormaPagoComponent } from 'src/app/shared/error-forma-pago/error-forma-pago.component'; 5 import { ErrorFormaPagoComponent } from 'src/app/shared/error-forma-pago/error-forma-pago.component';
6 6
7 @Component({ 7 @Component({
8 selector: 'app-pago-tarjeta', 8 selector: 'app-pago-tarjeta',
9 templateUrl: './pago-tarjeta.component.html', 9 templateUrl: './pago-tarjeta.component.html',
10 styleUrls: ['./pago-tarjeta.component.scss'] 10 styleUrls: ['./pago-tarjeta.component.scss']
11 }) 11 })
12 export class PagoTarjetaComponent implements OnInit, OnDestroy { 12 export class PagoTarjetaComponent implements OnInit, OnDestroy {
13 timer: any; 13 timer: any;
14 @ViewChild('template', {static: true}) public template: TemplateRef<any>; 14 @ViewChild('template', {static: true}) public template: TemplateRef<any>;
15 modalRef: BsModalRef;
16 15
17 constructor( 16 constructor(
18 private articuloService: ArticuloService, 17 private articuloService: ArticuloService,
19 private router: Router, 18 private router: Router,
20 private modalService: BsModalService, 19 private modalService: BsModalService,
21 ) { } 20 ) { }
22 21
23 ngOnInit() { 22 ngOnInit() {
24 if (!this.articuloService.carrito.length) { 23 if (!this.articuloService.carrito.length) {
25 this.router.navigate(['']); 24 this.router.navigate(['']);
26 return; 25 return;
27 } 26 }
28 this.openModalEspera(this.template); 27 this.openModalEspera(this.template);
29 const dataPago = { 28 const dataPago = {
30 pedidoAnombreDe: '' 29 pedidoAnombreDe: ''
31 }; 30 };
32 this.articuloService.pay(dataPago) 31 this.articuloService.pay(dataPago)
33 .subscribe((res: any) => { 32 .subscribe((res: any) => {
34 this.modalRef.hide();
35 this.articuloService.idComanda = res.data; 33 this.articuloService.idComanda = res.data;
36 this.router.navigate(['mensaje-final']); 34 this.router.navigate(['mensaje-final']);
37 }, (err) => { 35 }, (err) => {
38 this.modalRef.hide();
39 this.modalService.show(ErrorFormaPagoComponent, { 36 this.modalService.show(ErrorFormaPagoComponent, {
40 class: 'modal-lg modal-dialog-centered', 37 class: 'modal-lg modal-dialog-centered',
41 ignoreBackdropClick: true, 38 ignoreBackdropClick: true,
42 }); 39 });
43 }); 40 });
44 this.mediaPantalla(); 41 this.mediaPantalla();
45 } 42 }
46 43
47 ngOnDestroy() { 44 ngOnDestroy() {
48 if (this.timer) clearTimeout(this.timer); 45 if (this.timer) clearTimeout(this.timer);
49 for (let i = 1; i <= this.modalService.getModalsCount(); i++) { 46 for (let i = 1; i <= this.modalService.getModalsCount(); i++) {
50 this.modalService.hide(i); 47 this.modalService.hide(i);
51 } 48 }
52 } 49 }
53 50
54 mediaPantalla() { 51 mediaPantalla() {
55 if ($('body').hasClass('media-pantalla')) { 52 if ($('body').hasClass('media-pantalla')) {
56 $('.pago-tarjeta').addClass('media-pantalla'); 53 $('.pago-tarjeta').addClass('media-pantalla');
57 } 54 }
58 } 55 }
59 56
60 openModalEspera(templateRef: TemplateRef<any>) { 57 openModalEspera(templateRef: TemplateRef<any>) {
61 this.modalRef = this.modalService.show(templateRef, { class: 'modal-lg modal-dialog-centered' }); 58 const modalRef = this.modalService.show(templateRef, { class: 'modal-lg modal-dialog-centered' });
59 this.timer = setTimeout(() => {
60 modalRef.hide();
61 }, 6000);