Mauricio Cattafi / autoservicio

Download as
Browse Code »

Commit d057e540dad7c3daf1e1227ce4ea43e9a2c8724f

Authored by Marcelo Puebla
2 parents 0174932778 86217ae037
Exists in master and in 1 other branch validar_pve

Merge branch 'master' into 'master' 

Master(mpuebla)

See merge request !123
Showing 1 changed file   Show diff stats
src/app/components/pago-con-tarjeta/pago-con-tarjeta.component.html
Diff comments   View file @ d057e54
1 <div class="modal-header p-2"> 1 <div class="modal-header p-2">
2 <div class="row m-0 w-100"> 2 <div class="row m-0 w-100">
3 <div class="col"> 3 <div class="col">
4 <span class="h4 m-0">Pago con tarjeta</span> 4 <span class="h4 m-0">Pago con tarjeta</span>
5 </div> 5 </div>
6 </div> 6 </div>
7 </div> 7 </div>
8 8
9 <div class="modal-body" id="modal-body"> 9 <div class="modal-body" id="modal-body">
10 <!-- TARJETAS --> 10 <!-- TARJETAS -->
11 <div class="w-75 mx-auto card-columns"> 11 <div class="w-75 mx-auto card-columns">
12 <div 12 <div
13 class="card card-effect shadow-sm rounded-sm" 13 class="card card-effect shadow-sm rounded-sm"
14 [ngClass]="{'active': tarjetaSeleccionada && tarjetaSeleccionada.ID === tarjeta.ID}" 14 [ngClass]="{'active': tarjetaSeleccionada && tarjetaSeleccionada.ID === tarjeta.ID}"
15 (click)="seleccionarTarjeta(tarjeta)" 15 (click)="seleccionarTarjeta(tarjeta)"
16 *ngFor="let tarjeta of tarjetas"> 16 *ngFor="let tarjeta of tarjetas">
17 <img 17 <img
18 class="w-100 p-1" 18 class="w-100 p-1"
19 src="../../../assets/img/{{tarjeta.nombreImagen ? tarjeta.nombreImagen : 'generica.png'}}"> 19 src="../../../assets/img/{{tarjeta.nombreImagen ? tarjeta.nombreImagen : 'generica.png'}}">
20 </div> 20 </div>
21 </div> 21 </div>
22 <!-- FORMULARIO --> 22 <!-- FORMULARIO -->
23 <div class="border-top w-75 mx-auto" *ngIf="showForm"> 23 <div class="border-top w-75 mx-auto" *ngIf="showForm">
24 <div class="row mt-2 fade-in"> 24 <div class="row mt-2 fade-in">
25 <form [formGroup]="form" class="col" novalidate> 25 <form [formGroup]="form" class="col" novalidate>
26 <!-- TARJETA SELECCIONADA --> 26 <!-- TARJETA SELECCIONADA -->
27 <div class="row py-2"> 27 <div class="row py-2">
28 <div class="col-auto pr-1"> 28 <div class="col-auto pr-1">
29 <span class="font-weight-bold">{{tarjetaSeleccionada.ID}}</span> 29 <span class="font-weight-bold">{{tarjetaSeleccionada.ID}}</span>
30 </div> 30 </div>
31 <div class="col-auto pl-2"> 31 <div class="col-auto pl-2">
32 <span class="font-weight-bold">{{tarjetaSeleccionada.NOM}}</span> 32 <span class="font-weight-bold">{{tarjetaSeleccionada.NOM}}</span>
33 </div> 33 </div>
34 </div> 34 </div>
35 <!-- IMPORTE --> 35 <!-- IMPORTE -->
36 <div class="row pb-2"> 36 <div class="row pb-2">
37 <div class="col-auto pr-1"> 37 <div class="col-auto pr-1">
38 <span>Importe</span> 38 <span>Importe</span>
39 </div> 39 </div>
40 <div class="col-auto pl-2"> 40 <div class="col-auto pl-2">
41 <span class="font-weight-bold">{{ importeTotal | currency}}</span> 41 <span class="font-weight-bold">{{ importeTotal | currency}}</span>
42 </div> 42 </div>
43 </div> 43 </div>
44 <!-- NUMERO TERMINAL --> 44 <!-- NUMERO TERMINAL -->
45 <div class="row pb-2"> 45 <div class="row pb-2">
46 <div class="col-auto pr-1"> 46 <div class="col-auto pr-1">
47 <span>Terminal Nº</span> 47 <span>Terminal Nº</span>
48 </div> 48 </div>
49 <div class="col-12 col-md-auto pl-md-1"> 49 <div class="col-12 col-md-auto pl-md-1">
50 <div class="input-group"> 50 <div class="input-group">
51 <input 51 <input
52 formControlName="terminal" 52 formControlName="terminal"
53 class="form-control form-control-sm" 53 class="form-control form-control-sm"
54 maxlength="45"> 54 maxlength="45">
55 </div> 55 </div>
56 <p 56 <p
57 *ngIf="form.get('terminal').errors?.required && form.get('terminal').dirty" 57 *ngIf="form.get('terminal').errors?.required && form.get('terminal').dirty"
58 class="m-0 wobble-hor-bottom text-danger font-weight-light"> 58 class="m-0 wobble-hor-bottom text-danger font-weight-light">
59 <small>Campo requerido*</small> 59 <small>Campo requerido*</small>
60 </p> 60 </p>
61 <p 61 <p
62 *ngIf="form.get('terminal').errors?.pattern && form.get('terminal').dirty" 62 *ngIf="form.get('terminal').errors?.pattern && form.get('terminal').dirty"
63 class="m-0 wobble-hor-bottom text-danger font-weight-light"> 63 class="m-0 wobble-hor-bottom text-danger font-weight-light">
64 <small>Solo números*</small> 64 <small>Solo números*</small>
65 </p> 65 </p>
66 </div> 66 </div>
67 </div> 67 </div>
68 <!-- NUMERO DE CUPON --> 68 <!-- NUMERO DE CUPON -->
69 <div class="row pb-2"> 69 <div class="row pb-2">
70 <div class="col-auto pr-1"> 70 <div class="col-auto pr-1">
71 <span>Número de Cupón</span> 71 <span>Número de Cupón</span>
72 </div> 72 </div>
73 <div class="col-12 col-md-auto pl-md-1"> 73 <div class="col-12 col-md-auto pl-md-1">
74 <div class="input-group"> 74 <div class="input-group">
75 <input 75 <input
76 formControlName="numeroCupon" 76 formControlName="numeroCupon"
77 class="form-control form-control-sm" 77 class="form-control form-control-sm"
78 maxlength="45"> 78 maxlength="45">
79 </div> 79 </div>
80 <p 80 <p
81 *ngIf="form.get('numeroCupon').errors?.required && form.get('numeroCupon').dirty" 81 *ngIf="form.get('numeroCupon').errors?.required && form.get('numeroCupon').dirty"
82 class="m-0 wobble-hor-bottom text-danger font-weight-light"> 82 class="m-0 wobble-hor-bottom text-danger font-weight-light">
83 <small>Campo requerido*</small> 83 <small>Campo requerido*</small>
84 </p> 84 </p>
85 <p 85 <p
86 *ngIf="form.get('numeroCupon').errors?.pattern && form.get('numeroCupon').dirty" 86 *ngIf="form.get('numeroCupon').errors?.pattern && form.get('numeroCupon').dirty"
87 class="m-0 wobble-hor-bottom text-danger font-weight-light"> 87 class="m-0 wobble-hor-bottom text-danger font-weight-light">
88 <small>Solo números*</small> 88 <small>Solo números*</small>
89 </p> 89 </p>
90 </div> 90 </div>
91 </div> 91 </div>
92 <!-- CUOTAS --> 92 <!-- CUOTAS -->
93 <div class="row pb-2"> 93 <div class="row pb-2">
94 <div class="col-auto pr-1"> 94 <div class="col-auto pr-1">
95 <span>Cuotas</span> 95 <span>Cuotas</span>
96 </div> 96 </div>
97 <div class="col-12 col-md-auto pl-md-1"> 97 <div class="col-12 col-md-auto pl-md-1">
98 <div class="input-group"> 98 <div class="input-group">
99 <input 99 <input
100 formControlName="cuotas" 100 formControlName="cuotas"
101 class="form-control form-control-sm" 101 class="form-control form-control-sm"
102 maxlength="45"> 102 maxlength="45">
103 </div> 103 </div>
104 <p 104 <p
105 *ngIf="form.get('cuotas').errors?.required && form.get('cuotas').dirty" 105 *ngIf="form.get('cuotas').errors?.required && form.get('cuotas').dirty"
106 class="m-0 wobble-hor-bottom text-danger font-weight-light"> 106 class="m-0 wobble-hor-bottom text-danger font-weight-light">
107 <small>Campo requerido*</small> 107 <small>Campo requerido*</small>
108 </p> 108 </p>
109 <p 109 <p
110 *ngIf="form.get('cuotas').errors?.pattern && form.get('cuotas').dirty" 110 *ngIf="form.get('cuotas').errors?.pattern && form.get('cuotas').dirty"
111 class="m-0 wobble-hor-bottom text-danger font-weight-light"> 111 class="m-0 wobble-hor-bottom text-danger font-weight-light">
112 <small>Solo números*</small> 112 <small>Solo números*</small>
113 </p> 113 </p>
114 </div> 114 </div>
115 </div> 115 </div>
116 </form> 116 </form>
117 </div> 117 </div>
118 </div> 118 </div>
119 </div> 119 </div>
120 120
121 <div class="modal-footer py-1"> 121 <div class="modal-footer py-1">
122 <button 122 <button
123 class="btn btn-sm btn-secondary" 123 class="btn btn-sm btn-secondary"
124 type="button" 124 type="button"
125 (click)="close()"> 125 (click)="close()">
126 Cancelar 126 Cancelar
127 </button> 127 </button>
128 <button 128 <button
129 class="btn btn-sm btn-primary" 129 class="btn btn-sm btn-primary"
130 type="button" 130 type="button"
131 [disabled]="!form.valid"> 131 [disabled]="!form.valid"
132 (click)="close()">
132 Guardar 133 Guardar
133 </button> 134 </button>
134 </div> 135 </div>
135 136