Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit c886fbe1c054c3f3fd2947aa066ccf0b67fd1f1e

Authored by Marcelo Puebla
2 parents 4423e0b5b6 3e236fbaab
Exists in develop

Merge branch 'master' into 'develop' 

Master(benjamin)

See merge request !102
Showing 2 changed files   Show diff stats
src/app/modules/pago-tarjeta/pago-tarjeta.component.html
Diff comments   View file @ c886fbe
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 71
src/app/modules/pago-tarjeta/pago-tarjeta.component.ts
Diff comments   View file @ c886fbe
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 import { Subscription } from 'rxjs'; 6 import { Subscription } from 'rxjs';
7 7
8 @Component({ 8 @Component({
9 selector: 'app-pago-tarjeta', 9 selector: 'app-pago-tarjeta',
10 templateUrl: './pago-tarjeta.component.html', 10 templateUrl: './pago-tarjeta.component.html',
11 styleUrls: ['./pago-tarjeta.component.scss'] 11 styleUrls: ['./pago-tarjeta.component.scss']
12 }) 12 })
13 export class PagoTarjetaComponent implements OnInit, OnDestroy { 13 export class PagoTarjetaComponent implements OnInit, OnDestroy {
14 timer: any; 14 timer: any;
15 @ViewChild('template', {static: true}) public template: TemplateRef<any>;
15 subscription: Subscription; 16 subscription: Subscription;
16 modalRef: BsModalRef;
17 @ViewChild('template', { static: true }) public template: TemplateRef<any>;
18 17
19 constructor( 18 constructor(
20 private articuloService: ArticuloService, 19 private articuloService: ArticuloService,
21 private router: Router, 20 private router: Router,
22 private modalService: BsModalService, 21 private modalService: BsModalService,
23 ) { } 22 ) { }
24 23
25 ngOnInit() { 24 ngOnInit() {
26 if (!this.articuloService.carrito.length) { 25 if (!this.articuloService.carrito.length) {
27 this.router.navigate(['']); 26 this.router.navigate(['']);
28 return; 27 return;
29 } 28 }
30 this.openModalEspera(this.template); 29 this.openModalEspera(this.template);
31 const dataPago = { 30 const dataPago = {
32 pedidoAnombreDe: '' 31 pedidoAnombreDe: ''
33 }; 32 };
34 this.subscription = this.articuloService.pay(dataPago) 33 this.subscription = this.articuloService.pay(dataPago)
35 .subscribe((res: any) => { 34 .subscribe((res: any) => {
36 this.modalRef.hide();
37 this.articuloService.idComanda = res.data; 35 this.articuloService.idComanda = res.data;
38 this.router.navigate(['mensaje-final']); 36 this.router.navigate(['mensaje-final']);
39 }, (err) => { 37 }, (err) => {
40 this.modalRef.hide();
41 this.modalService.show(ErrorFormaPagoComponent, { 38 this.modalService.show(ErrorFormaPagoComponent, {
42 class: 'modal-lg modal-dialog-centered', 39 class: 'modal-lg modal-dialog-centered',
43 ignoreBackdropClick: true, 40 ignoreBackdropClick: true,
44 }); 41 });
45 }); 42 });
46 this.mediaPantalla(); 43 this.mediaPantalla();
47 } 44 }
48 45
49 ngOnDestroy() { 46 ngOnDestroy() {
50 if (this.subscription) this.subscription.unsubscribe(); 47 if (this.subscription) this.subscription.unsubscribe();
51 if (this.timer) clearTimeout(this.timer); 48 if (this.timer) clearTimeout(this.timer);
52 for (let i = 1; i <= this.modalService.getModalsCount(); i++) { 49 for (let i = 1; i <= this.modalService.getModalsCount(); i++) {
53 this.modalService.hide(i); 50 this.modalService.hide(i);
54 } 51 }
55 } 52 }
56 53
57 mediaPantalla() { 54 mediaPantalla() {
58 if ($('body').hasClass('media-pantalla')) { 55 if ($('body').hasClass('media-pantalla')) {
59 $('.pago-tarjeta').addClass('media-pantalla'); 56 $('.pago-tarjeta').addClass('media-pantalla');
60 } 57 }
61 } 58 }
62 59
63 openModalEspera(templateRef: TemplateRef<any>) { 60 openModalEspera(templateRef: TemplateRef<any>) {
64 this.modalRef = this.modalService.show(templateRef, { class: 'modal-lg modal-dialog-centered' }); 61 const modalRef = this.modalService.show(templateRef, { class: 'modal-lg modal-dialog-centered' });
62 this.timer = setTimeout(() => {
63 modalRef.hide();