Mauricio Cattafi / autoservicio

Download as
Browse Code »

Commit 5b0545285c125ac3e8cbf2431adc1aefbbc9ea85

Authored by Marcelo Puebla
2 parents d057e540da 5541a004b3
Exists in master and in 1 other branch validar_pve

Merge branch 'master' into 'master' 

Master(mpuebla)

See merge request !124
Showing 5 changed files   Show diff stats
src/app/components/cancelar-compra/cancelar-compra.component.html
Diff comments   View file @ 5b05452
1 <div class="container-fluid fade-in p-0 disable-user-select"> 1 <div class="container-fluid fade-in p-0 disable-user-select">
2 2
3 <!-- INFO --> 3 <!-- INFO -->
4 <div class="row vh-100 py-5 m-0 w-100 bg-primary-gradient-horizontal"> 4 <div class="row vh-100 py-5 m-0 w-100 bg-primary-gradient-horizontal">
5 <div class="col-4 offset-1"> 5 <div class="col-4 offset-1">
6 <div class="row h-100"> 6 <div class="row h-100">
7 <div class="col-12 my-auto"> 7 <div class="col-12 my-auto">
8 <div class="card rounded"> 8 <div class="card rounded">
9 <img src="../../../assets/img/atencion.svg" class="w-50 mx-auto mt-5 mb-4"> 9 <img src="../../../assets/img/atencion.svg" class="w-50 mx-auto mt-5 mb-4">
10 <div class="mb-5 mt-4"> 10 <div class="mb-5 mt-4">
11 <p class="display-3 card-text text-center font-weight-bold"> 11 <p class="display-3 card-text text-center font-weight-bold">
12 Atención 12 Atención
13 </p> 13 </p>
14 </div> 14 </div>
15 </div> 15 </div>
16 </div> 16 </div>
17 </div> 17 </div>
18 </div> 18 </div>
19 <div class="col-6 text-center text-white my-auto"> 19 <div class="col-6 text-center text-white my-auto">
20 <p class="display-3 font-weight-bold mb-5"> 20 <p class="display-3 font-weight-bold mb-5">
21 ¿Desea Cancelar su compra? 21 ¿Desea Cancelar su compra?
22 </p> 22 </p>
23 <div class="d-flex justify-content-center mt-2"> 23 <div class="d-flex justify-content-center mt-2">
24 <button type="button" class="btn btn-lg btn-light shadow mr-4" (click)="volverPreviousPage()"> 24 <button type="button" class="btn btn-lg btn-light shadow mr-4" (click)="volverPreviousPage()">
25 <span class="pr-2">Continuar con mi compra</span> 25 <span class="pr-2">Continuar con mi compra</span>
26 <i class="fa fa-undo text-warning"></i> 26 <i class="fa fa-undo text-warning"></i>
27 </button> 27 </button>
28 <button type="button" class="btn btn-lg btn-light shadow ml-4" (click)="limpiarCarritoYvolver()"> 28 <button type="button" class="btn btn-lg btn-light shadow ml-4" (click)="limpiarCarritoYvolver()">
29 <span class="pr-2">Si, Cancelar</span> 29 <span class="pr-2">Si, Cancelar</span>
30 <i class="fa fa-times text-danger"></i> 30 <i class="fa fa-times text-danger"></i>
31 </button> 31 </button>
32 </div> 32 </div>
33 </div> 33 </div>
34 </div> 34 </div>
35 35
36 </div> 36 </div>
37 37
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
Diff comments   View file @ 5b05452
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 <div class="col-12 p-0 vh-100"> 5 <div class="col-12 p-0 vh-100">
6 <!-- TOP HEADER --> 6 <!-- TOP HEADER -->
7 <app-header></app-header> 7 <app-header></app-header>
8 8
9 <!-- NOMBRE DE SECCION --> 9 <!-- NOMBRE DE SECCION -->
10 <div class="row m-0"> 10 <div class="row m-0">
11 <div class="col-12 p-0"> 11 <div class="col-12 p-0">
12 <p class="h5 py-1 bg-gray text-muted text-center m-0"> 12 <p class="h5 py-1 bg-gray text-muted text-center m-0">
13 &nbsp; 13 &nbsp;
14 </p> 14 </p>
15 </div> 15 </div>
16 </div> 16 </div>
17 17
18 <div class="row m-0"> 18 <div class="row m-0">
19 <div class="col-10 px-1"> 19 <div class="col-10 px-1">
20 <!-- TEXTO DE IZQUIERDA --> 20 <!-- TEXTO DE IZQUIERDA -->
21 <div *ngIf="!verQR" class="row mx-2 mt-4 text-white"> 21 <div *ngIf="!verQR" class="row mx-2 mt-4 text-white">
22 <div class="col-sm-auto my-auto"> 22 <div class="col-sm-auto my-auto">
23 <p class="h2">Mi Compra 23 <p class="h2">Mi Compra
24 <i class="fa fa-shopping-cart "></i> 24 <i class="fa fa-shopping-cart "></i>
25 </p> 25 </p>
26 </div> 26 </div>
27 <div class="col-sm-9 my-auto"> 27 <div class="col-sm-9 my-auto">
28 <p class="h4">Por favor, controle y confirme su compra.</p> 28 <p class="h4">Por favor, controle y confirme su compra.</p>
29 </div> 29 </div>
30 <label for="customLabel" class="col-auto font-weight-bold h4 m-0"> 30 <label for="customLabel" class="col-auto font-weight-bold h4 m-0">
31 Pedido a nombre de: 31 Pedido a nombre de:
32 </label> 32 </label>
33 <div class="col-12 col-sm-6 col-md-5 col-lg-5"> 33 <div class="col-12 col-sm-6 col-md-5 col-lg-5">
34 <input 34 <input
35 type="text" 35 type="text"
36 class="form-control text-center" 36 class="form-control text-center"
37 id="customLabel" 37 id="customLabel"
38 maxlength="24" 38 maxlength="24"
39 [(ngModel)]="pedidoAnombreDe" 39 [(ngModel)]="pedidoAnombreDe"
40 autofocus 40 autofocus
41 > 41 >
42 </div> 42 </div>
43 </div> 43 </div>
44 44
45 <div [ngClass]="{'mt-5': verQR}" class="row m-0"> 45 <div [ngClass]="{'mt-5': verQR}" class="row m-0">
46 <!-- GRILLA DE PRODUCTOS DE MI COMPRA --> 46 <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
47 <div *ngIf="!verQR" class="col-sm-9 pr-1"> 47 <div *ngIf="!verQR" class="col-sm-9 pr-1">
48 <div class="row mx-1 pr-1 vh-70 overflow-scroll text-dark"> 48 <div class="row mx-1 pr-1 vh-70 overflow-scroll text-dark">
49 <div class="mh-100 col-4 p-2" *ngFor="let producto of productos"> 49 <div class="mh-100 col-4 p-2" *ngFor="let producto of productos">
50 <div class="row m-0 h-100 bg-white rounded-sm shadow border-0"> 50 <div class="row m-0 h-100 bg-white rounded-sm shadow border-0">
51 <div class="d-flex align-items-end flex-column"> 51 <div class="d-flex align-items-end flex-column">
52 <div class="w-100"> 52 <div class="w-100">
53 <img 53 <img
54 src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}" 54 src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}"
55 class="shadow rounded-sm w-100 m-auto"> 55 class="shadow rounded-sm w-100 m-auto">
56 </div> 56 </div>
57 <div class="w-100 pt-2 px-2"> 57 <div class="w-100 pt-2 px-2">
58 <p class="h6 text-left"> 58 <p class="h6 text-left">
59 <small class="font-weight-bold"> 59 <small class="font-weight-bold">
60 {{producto.DET_LAR}} 60 {{producto.DET_LAR}}
61 </small> 61 </small>
62 </p> 62 </p>
63 <div *ngIf="producto.tieneSinonimos"> 63 <div *ngIf="producto.tieneSinonimos">
64 <p *ngFor="let p of producto.productos" class="h6 text-left m-0"> 64 <p *ngFor="let p of producto.productos" class="h6 text-left m-0">
65 <small> 65 <small>
66 - {{producto.cantidad}} {{p.DET_LAR}} 66 - {{producto.cantidad}} {{p.DET_LAR}}
67 </small> 67 </small>
68 </p> 68 </p>
69 </div> 69 </div>
70 </div> 70 </div>
71 <div class="w-100 d-flex justify-content-between mt-auto mb-1 px-2"> 71 <div class="w-100 d-flex justify-content-between mt-auto mb-1 px-2">
72 <span class="text-left m-0 px-1 h6"> 72 <span class="text-left m-0 px-1 h6">
73 {{producto.cantidad}} x {{producto.PreVen | currency}} 73 {{producto.cantidad}} x {{producto.PreVen | currency}}
74 </span> 74 </span>
75 <span class="text-right m-0 px-1 h6"> 75 <span class="text-right m-0 px-1 h6">
76 {{producto.cantidad * producto.PreVen | currency}} 76 {{producto.cantidad * producto.PreVen | currency}}
77 </span> 77 </span>
78 </div> 78 </div>
79 </div> 79 </div>
80 </div> 80 </div>
81 </div> 81 </div>
82 </div> 82 </div>
83 </div> 83 </div>
84 84
85 <!-- CODIGO QR --> 85 <!-- CODIGO QR -->
86 <div *ngIf="verQR" class="col-sm-9"> 86 <div *ngIf="verQR" class="col-sm-9">
87 <div class="col-6 offset-3 border-0 mb-auto"> 87 <div class="col-6 offset-3 border-0 mb-auto">
88 <img 88 <img
89 src="../../../assets/img/qrmp.jpg" 89 src="../../../assets/img/qrmp.jpg"
90 class="w-100 mx-auto d-block shadow rounded-sm"> 90 class="w-100 mx-auto d-block shadow rounded-sm">
91 </div> 91 </div>
92 </div> 92 </div>
93 93
94 <!-- TICKET --> 94 <!-- TICKET -->
95 <div class="col-sm-3 px-1"> 95 <div class="col-sm-3 px-1">
96 <div class="card shadow"> 96 <div class="card shadow">
97 <div class="card-body"> 97 <div class="card-body">
98 <p class="h5 card-title">Su Ticket</p> 98 <p class="h5 card-title">Su Ticket</p>
99 <div class="row mt-4 m-0"> 99 <div class="row mt-4 m-0">
100 <div class="col-12 p-0 mb-2"> 100 <div class="col-12 p-0 mb-2">
101 <p class="h6 m-0 card-text text-left"> 101 <p class="h6 m-0 card-text text-left">
102 <small class="font-weight-bold">DESCRIPCIÓN</small> 102 <small class="font-weight-bold">DESCRIPCIÓN</small>
103 </p> 103 </p>
104 <p class="h6 m-0 card-text text-left"> 104 <p class="h6 m-0 card-text text-left">
105 <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small> 105 <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small>
106 </p> 106 </p>
107 </div> 107 </div>
108 </div> 108 </div>
109 <div class="row vh-50 px-2 overflow-scroll m-0"> 109 <div class="row vh-50 px-2 overflow-scroll m-0">
110 <div class="col-12 p-0 mb-2" *ngFor="let producto of productos"> 110 <div class="col-12 p-0 mb-2" *ngFor="let producto of productos">
111 <p class="h6 m-0 card-text text-left"> 111 <p class="h6 m-0 card-text text-left">
112 <small>{{producto.DET_LAR}}</small> 112 <small>{{producto.DET_LAR}}</small>
113 </p> 113 </p>
114 <div class="row d-flex justify-content-between m-0"> 114 <div class="row d-flex justify-content-between m-0">
115 <div class="col p-0"> 115 <div class="col p-0">
116 <p class="h6 m-0 card-text text-left"> 116 <p class="h6 m-0 card-text text-left">
117 <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small> 117 <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small>
118 </p> 118 </p>
119 </div> 119 </div>
120 <div class="col p-0"> 120 <div class="col p-0">
121 <p class="h6 m-0 card-text text-right"> 121 <p class="h6 m-0 card-text text-right">
122 <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small> 122 <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small>
123 </p> 123 </p>
124 </div> 124 </div>
125 </div> 125 </div>
126 </div> 126 </div>
127 </div> 127 </div>
128 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0"> 128 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0">
129 Total {{getTotal() | currency}} 129 Total {{getTotal() | currency}}
130 </p> 130 </p>
131 </div> 131 </div>
132 </div> 132 </div>
133 </div> 133 </div>
134 </div> 134 </div>
135 135
136 <!-- OPCIONES ABAJO DERECHA --> 136 <!-- OPCIONES ABAJO DERECHA -->
137 <div class="row m-0 fixed-bottom"> 137 <div class="row m-0 fixed-bottom">
138 <div class="col-sm-2 offset-sm-10 p-0 mt-auto"> 138 <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
139 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0"> 139 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
140 <div class="card-body row m-0 p-1"> 140 <div class="card-body row m-0 p-1">
141 <div class="col-12 p-3"> 141 <div class="col-12 p-3">
142 <button 142 <button
143 type="button" 143 type="button"
144 class="btn btn-block btn-light shadow btn-sm shadow" 144 class="btn btn-block btn-light shadow btn-sm shadow"
145 (click)="volverPreviousPage()"> 145 (click)="volverPreviousPage()">
146 <span class="pr-2">Volver</span> 146 <span class="pr-2">Volver</span>
147 <i class="fa fa-undo text-warning"></i> 147 <i class="fa fa-undo text-warning"></i>
148 </button> 148 </button>
149 <button 149 <button
150 type="button" 150 type="button"
151 class="btn btn-block btn-light shadow btn-sm shadow" 151 class="btn btn-block btn-light shadow btn-sm shadow"
152 [routerLink]="['/cancelar-compra']"> 152 [routerLink]="['/cancelar-compra']">
153 <span class="pr-2">Cancelar</span> 153 <span class="pr-2">Cancelar</span>
154 <i class="fa fa-times text-danger"></i> 154 <i class="fa fa-times text-danger"></i>
155 </button> 155 </button>
156 </div> 156 </div>
157 </div> 157 </div>
158 </div> 158 </div>
159 </div> 159 </div>
160 </div> 160 </div>
161 </div> 161 </div>
162 162
163 <!-- FORMAS DE PAGO --> 163 <!-- FORMAS DE PAGO -->
164 <div *ngIf="!verQR" class="col-2 px-1"> 164 <div *ngIf="!verQR" class="col-2 px-1">
165 <p class="h4 text-white text-center mt-4 mx-2 pb-2 border-bottom border-white"> 165 <p class="h4 text-white text-center mt-4 mx-2 pb-2 border-bottom border-white">
166 Forma de pago 166 Forma de pago
167 </p> 167 </p>
168 168
169 <!-- EFECTIVO --> 169 <!-- EFECTIVO -->
170 <div 170 <div
171 class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white" 171 class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white"
172 (click)="pagar(1)"> 172 (click)="pagar(1)">
173 <div class="col-7 text-center my-auto px-2"> 173 <div class="col-7 text-center my-auto px-2">
174 <span class="h5 font-weight-bold">Efectivo</span> 174 <span class="h5 font-weight-bold">Efectivo</span>
175 </div> 175 </div>
176 <div class="col-5 my-auto p-0"> 176 <div class="col-5 my-auto p-0">
177 <img 177 <img
178 src="../../../assets/img/efectivo.png" 178 src="../../../assets/img/efectivo.png"
179 class="w-100 float-right"> 179 class="w-100 float-right">
180 </div> 180 </div>
181 </div> 181 </div>
182 182
183 <!-- TARJETA --> 183 <!-- TARJETA -->
184 <div class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white" 184 <div class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white"
185 (click)="abrirPagoConTarjeta()"> 185 (click)="abrirPagoConTarjeta()">
186 <div class="col-7 text-center my-auto px-2"> 186 <div class="col-7 text-center my-auto px-2">
187 <span class="h5 font-weight-bold">Tarjeta</span> 187 <span class="h5 font-weight-bold">Tarjeta</span>
188 </div> 188 </div>
189 <div class="col-5 my-auto p-0"> 189 <div class="col-5 my-auto p-0">
190 <img 190 <img
191 src="../../../assets/img/tarjeta.png" 191 src="../../../assets/img/tarjeta.png"
192 class="w-100 float-right"> 192 class="w-100 float-right">
193 </div> 193 </div>
194 </div> 194 </div>
195 195
196 <!-- QR --> 196 <!-- QR -->
197 <div 197 <div
198 class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white" 198 class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white"
199 (click)="pagar(9)"> 199 (click)="pagar(9)">
200 <div class="col-7 text-center my-auto px-2"> 200 <div class="col-7 text-center my-auto px-2">
201 <span class="h5 font-weight-bold">Pago Electrónico</span> 201 <span class="h5 font-weight-bold">Pago Electrónico</span>
202 </div> 202 </div>
203 <div class="col-5 my-auto p-0"> 203 <div class="col-5 my-auto p-0">
204 <img 204 <img
205 src="../../../assets/img/qr.png" 205 src="../../../assets/img/qr.png"
206 class="w-100 float-right"> 206 class="w-100 float-right">
207 </div> 207 </div>
208 </div> 208 </div>
209 </div> 209 </div>
210 </div> 210 </div>
211 211
212 </div> 212 </div>
213 </div> 213 </div>
214 214
215 <div 215 <div
216 *ngIf="compraConQRfinalizada" 216 *ngIf="compraConQRfinalizada"
217 [routerLink]="['/mensaje-final']" 217 [routerLink]="['/mensaje-final']"
218 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100"> 218 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
219 <div class="col-12 text-center text-white my-auto"> 219 <div class="col-12 text-center text-white my-auto">
220 <p class="font-weight-bold display-4"> 220 <p class="font-weight-bold display-4">
221 Su pago fue<br> 221 Su pago fue<br>
222 acreditado 222 acreditado
223 exitosamente 223 exitosamente
224 </p> 224 </p>
225 <p class="font-weight-bold display-4">Recuerde retirar su ticket</p> 225 <p class="font-weight-bold display-4">Recuerde retirar su ticket</p>
226 </div> 226 </div>
227 <div class="row z-index-0 fixed-top m-0 w-100"> 227 <div class="row z-index-0 fixed-top m-0 w-100">
228 <div class="col-12 p-3"> 228 <div class="col-12 p-3">
229 <img class="w-15 float-right" src="../../../assets/img/debo-gray.png"> 229 <img class="w-15 float-right" src="../../../assets/img/debo-gray.png">
230 </div> 230 </div>
231 </div> 231 </div>
232 </div> 232 </div>
233 233
234 <div 234 <div
235 *ngIf="compraConEfectivofinalizada" 235 *ngIf="compraConEfectivofinalizada"
236 [routerLink]="['/mensaje-final']" 236 [routerLink]="['/mensaje-final']"
237 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100"> 237 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
238 <div class="col-12 text-center text-white my-auto"> 238 <div class="col-12 text-center text-white my-auto">
239 <p class="font-weight-bold display-4"> 239 <p class="font-weight-bold display-4">
240 Retire su ticket<br> 240 Retire su ticket<br>
241 y diríjase a caja para<br> 241 y diríjase a caja para<br>
242 efectuar el pago. 242 efectuar el pago.
243 </p> 243 </p>
244 </div> 244 </div>
245 <div class="row z-index-0 fixed-top m-0 w-100"> 245 <div class="row z-index-0 fixed-top m-0 w-100">
246 <div class="col-12 p-3"> 246 <div class="col-12 p-3">
247 <img class="w-15 float-right" src="../../../assets/img/debo-gray.png"> 247 <img class="w-15 float-right" src="../../../assets/img/debo-gray.png">
248 </div> 248 </div>
249 </div> 249 </div>
250 </div> 250 </div>
251 251
src/app/components/header/header.component.html
Diff comments   View file @ 5b05452
1 <div class="row m-0 bg-light p-3 justify-content-between"> 1 <div class="row m-0 bg-light p-3 justify-content-between">
2 <div class="col-6"> 2 <div class="col-6">
3 <img 3 <img
4 draggable="false" 4 draggable="false"
5 ondragstart="return false;" 5 ondragstart="return false;"
6 (contextmenu)="false" 6 (contextmenu)="false"
7 (press)="openConfigurationScreen()" 7 (press)="openConfigurationScreen()"
8 class="w-25 float-left" 8 class="w-25 float-left"
9 src="{{apiImagenes}}/imagenes/logoempresa.png"> 9 src="{{apiImagenes}}/imagenes/logoempresa.png">
10 </div> 10 </div>
11 <div class="col-6"> 11 <div class="col-6">
12 <img class="w-25 float-right" src="../../../assets/img/logodebo.png"> 12 <img class="w-25 float-right" src="../../../assets/img/logodebo.png">
13 </div> 13 </div>
14 </div> 14 </div>
15 15
src/app/components/inicio/inicio.component.html
Diff comments   View file @ 5b05452
1 <div class="row m-0 fade-in"> 1 <div class="row m-0 fade-in">
2 <div class="col-12 p-0"> 2 <div class="col-12 p-0">
3 3
4 <!-- NOMBRE DE SECCION --> 4 <!-- NOMBRE DE SECCION -->
5 <div class="row m-0"> 5 <div class="row m-0">
6 <div class="col-12 p-0"> 6 <div class="col-12 p-0">
7 <p class="h5 m-0 py-1 bg-gray text-muted text-center">Inicio</p> 7 <p class="h5 m-0 py-1 bg-gray text-muted text-center">Inicio</p>
8 </div> 8 </div>
9 </div> 9 </div>
10 10
11 <div class="row m-0 d-flex align-items-start disable-user-select"> 11 <div class="row m-0 d-flex align-items-start disable-user-select">
12 <div class="col-md-5 py-3 pr-0 d-flex align-items-end flex-column"> 12 <div class="col-md-5 py-3 pr-0 d-flex align-items-end flex-column">
13 13
14 <!-- PROMOCIONES --> 14 <!-- PROMOCIONES -->
15 <div 15 <div
16 (click)="irBusquedaProductos('promociones')" 16 (click)="irBusquedaProductos('promociones')"
17 class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto"> 17 class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
18 <div class="card-body text-left px-4 py-3"> 18 <div class="card-body text-left px-4 py-3">
19 <div class="row"> 19 <div class="row">
20 <div class="col-auto"> 20 <div class="col-auto">
21 <p class="m-0 h3 card-title">Promociones</p> 21 <p class="m-0 h3 card-title">Promociones</p>
22 </div> 22 </div>
23 <div class="col-auto p-0"> 23 <div class="col-auto p-0">
24 <img src="{{apiImagenes}}/imagenes/primario.promociones.png" class="w-15 m-0"> 24 <img src="{{apiImagenes}}/imagenes/primario.promociones.png" class="w-15 m-0">
25 </div> 25 </div>
26 </div> 26 </div>
27 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p> 27 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
28 </div> 28 </div>
29 <!-- CAROUSEL --> 29 <!-- CAROUSEL -->
30 <carousel [showIndicators]="false" [interval]="1500"> 30 <carousel [showIndicators]="false" [interval]="1500">
31 <slide class="h-100"> 31 <slide class="h-100">
32 <img 32 <img
33 src="{{apiImagenes}}/imagenes/beldent.jpg" 33 src="{{apiImagenes}}/imagenes/beldent.jpg"
34 class="fade-in d-block w-75 m-auto rounded"> 34 class="fade-in d-block w-75 m-auto rounded">
35 </slide> 35 </slide>
36 <slide class="h-100"> 36 <slide class="h-100">
37 <img 37 <img
38 src="{{apiImagenes}}/imagenes/cafe con leche y medialunas.jpg" 38 src="{{apiImagenes}}/imagenes/cafe con leche y medialunas.jpg"
39 class="fade-in d-block w-75 m-auto rounded"> 39 class="fade-in d-block w-75 m-auto rounded">
40 </slide> 40 </slide>
41 <slide class="h-100"> 41 <slide class="h-100">
42 <img 42 <img
43 src="{{apiImagenes}}/imagenes/Surtido bagley.jpg" 43 src="{{apiImagenes}}/imagenes/Surtido bagley.jpg"
44 class="fade-in d-block w-75 m-auto rounded"> 44 class="fade-in d-block w-75 m-auto rounded">
45 </slide> 45 </slide>
46 <slide class="h-100"> 46 <slide class="h-100">
47 <img 47 <img
48 src="{{apiImagenes}}/imagenes/yogurisimo.jpg" 48 src="{{apiImagenes}}/imagenes/yogurisimo.jpg"
49 class="fade-in d-block w-75 m-auto rounded"> 49 class="fade-in d-block w-75 m-auto rounded">
50 </slide> 50 </slide>
51 </carousel> 51 </carousel>
52 </div> 52 </div>
53 53
54 <!-- ORDENAR --> 54 <!-- ORDENAR -->
55 <div (click)="irBusquedaProductos('ordenar')" 55 <div (click)="irBusquedaProductos('ordenar')"
56 class="card card-effect bg-white border-0 shadow rounded w-100 mt-3"> 56 class="card card-effect bg-white border-0 shadow rounded w-100 mt-3">
57 <div class="card-body text-left px-4 py-3"> 57 <div class="card-body text-left px-4 py-3">
58 <div class="row"> 58 <div class="row">
59 <div class="col-auto"> 59 <div class="col-auto">
60 <p class="m-0 h3 card-title">Ordenar Pedido</p> 60 <p class="m-0 h3 card-title">Ordenar Pedido</p>
61 </div> 61 </div>
62 <div class="col-auto p-0"> 62 <div class="col-auto p-0">
63 <img src="{{apiImagenes}}/imagenes/primario.ordenar.png" class="w-15"> 63 <img src="{{apiImagenes}}/imagenes/primario.ordenar.png" class="w-15">
64 </div> 64 </div>
65 </div> 65 </div>
66 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p> 66 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
67 </div> 67 </div>
68 <img 68 <img
69 class="card-img-bottom d-block w-100 mx-auto rounded" 69 class="card-img-bottom d-block w-100 mx-auto rounded"
70 src="{{apiImagenes}}/imagenes/cafe.jpg"> 70 src="{{apiImagenes}}/imagenes/cafe.jpg">
71 </div> 71 </div>
72 </div> 72 </div>
73 73
74 <div class="col-md-7 py-3 d-flex align-items-end flex-column mt-4 mt-md-0"> 74 <div class="col-md-7 py-3 d-flex align-items-end flex-column mt-4 mt-md-0">
75 75
76 <!-- CARGAR PRODUCTOS --> 76 <!-- CARGAR PRODUCTOS -->
77 <ng-template #popTemplate> 77 <ng-template #popTemplate>
78 <app-popover-promos 78 <app-popover-promos
79 *ngIf="promociones.length > 0 && sinonimos.length === 0" 79 *ngIf="promociones.length > 0 && sinonimos.length === 0"
80 [popover]="popoverDirective" 80 [popover]="popoverDirective"
81 [popoverContent]="promociones" 81 [popoverContent]="promociones"
82 (promoSeleccionada)="promoSeleccionada($event, false)" 82 (promoSeleccionada)="promoSeleccionada($event, false)"
83 class="text-white rounded-sm border-0"> 83 class="text-white rounded-sm border-0">
84 </app-popover-promos> 84 </app-popover-promos>
85 <app-popover-sinonimos 85 <app-popover-sinonimos
86 *ngIf="sinonimos.length > 0" 86 *ngIf="sinonimos.length > 0"
87 [popover]="popoverDirective" 87 [popover]="popoverDirective"
88 [popoverContent]="sinonimos" 88 [popoverContent]="sinonimos"
89 (productosPersonalizados)="productosPersonalizados($event)" 89 (productosPersonalizados)="productosPersonalizados($event)"
90 class="text-white rounded-sm border-0"> 90 class="text-white rounded-sm border-0">
91 </app-popover-sinonimos> 91 </app-popover-sinonimos>
92 </ng-template> 92 </ng-template>
93 <div 93 <div
94 placement="left" 94 placement="left"
95 triggers="" 95 triggers=""
96 [popover]="popTemplate" 96 [popover]="popTemplate"
97 class="w-100" 97 class="w-100"
98 #pop="bs-popover"> 98 #pop="bs-popover">
99 <div class="card bg-white border-0 shadow rounded mb-auto"> 99 <div class="card bg-white border-0 shadow rounded mb-auto">
100 <div class="card-body text-left px-4 py-3"> 100 <div class="card-body text-left px-4 py-3">
101 <div class="row"> 101 <div class="row">
102 <div class="col-auto"> 102 <div class="col-auto">
103 <p class="m-0 h3 card-title">Cargar Productos</p> 103 <p class="m-0 h3 card-title">Cargar Productos</p>
104 </div> 104 </div>
105 <div class="col-auto p-0"> 105 <div class="col-auto p-0">
106 <img src="../../../assets/img/escanear.png" class="w-15"> 106 <img src="../../../assets/img/escanear.png" class="w-15">
107 </div> 107 </div>
108 </div> 108 </div>
109 <p class="h5 card-text text-muted font-weight-light"> 109 <p class="h5 card-text text-muted font-weight-light">
110 Coloque un producto frente<br> 110 Coloque un producto frente<br>
111 al lector de códigos o selecciónelo en pantalla. 111 al lector de códigos o selecciónelo en pantalla.
112 </p> 112 </p>
113 </div> 113 </div>
114 <div class="row mx-3 mb-3"> 114 <div class="row mx-3 mb-3">
115 <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm"> 115 <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm">
116 <!-- IMAGEN DE ESCANER --> 116 <!-- IMAGEN DE ESCANER -->
117 <img 117 <img
118 *ngIf="!productoAcargar" 118 *ngIf="!productoAcargar"
119 class="card-img-top d-block w-100 mx-auto rounded-sm" 119 class="card-img-top d-block w-100 mx-auto rounded-sm"
120 src="../../../assets/img/escanner.jpg"> 120 src="../../../assets/img/escanner.jpg">
121 121
122 <!-- PRODUCTO A CARGAR --> 122 <!-- PRODUCTO A CARGAR -->
123 <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar"> 123 <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar">
124 <img 124 <img
125 class="card-img-top d-block w-75 shadow mx-auto rounded-sm" 125 class="card-img-top d-block w-75 shadow mx-auto rounded-sm"
126 src="{{apiImagenes}}/imagenes/{{productoAcargar.imagenes[0].imagen}}"> 126 src="{{apiImagenes}}/imagenes/{{productoAcargar.imagenes[0].imagen}}">
127 127
128 <div class="row justify-content-between m-3"> 128 <div class="row justify-content-between m-3">
129 <div class="col-12 text-left px-1"> 129 <div class="col-12 text-left px-1">
130 <p class="h6 font-weight-bold mb-0">{{productoAcargar.DET_LAR}}</p> 130 <p class="h6 font-weight-bold mb-0">{{productoAcargar.DET_LAR}}</p>
131 </div> 131 </div>
132 <div class="col-12 text-right mt-2"> 132 <div class="col-12 text-right mt-2">
133 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p> 133 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p>
134 </div> 134 </div>
135 </div> 135 </div>
136 </div> 136 </div>
137 137
138 <!-- PROMO A CARGAR --> 138 <!-- PROMO A CARGAR -->
139 <div class="fade-in m-0" *ngIf="promoAcargar"> 139 <div class="fade-in m-0" *ngIf="promoAcargar">
140 <img 140 <img
141 class="card-img-top d-block w-100 mx-auto rounded-sm" 141 class="card-img-top d-block w-100 mx-auto rounded-sm"
142 src="{{apiImagenes}}/imagenes/{{promoAcargar.imagenes[0].imagen}}"> 142 src="{{apiImagenes}}/imagenes/{{promoAcargar.imagenes[0].imagen}}">
143 143
144 <div class="row justify-content-between m-3"> 144 <div class="row justify-content-between m-3">
145 <div class="col-12 text-left px-1"> 145 <div class="col-12 text-left px-1">
146 <p class="h6 font-weight-bold mb-0">{{promoAcargar.DET_LAR}}</p> 146 <p class="h6 font-weight-bold mb-0">{{promoAcargar.DET_LAR}}</p>
147 </div> 147 </div>
148 <div class="col-12 text-right mt-2 align-self-end"> 148 <div class="col-12 text-right mt-2 align-self-end">
149 <p class="h5 font-weight-bold mb-0">{{promoAcargar.PreVen | currency}}</p> 149 <p class="h5 font-weight-bold mb-0">{{promoAcargar.PreVen | currency}}</p>
150 </div> 150 </div>
151 </div> 151 </div>
152 </div> 152 </div>
153 153
154 </div> 154 </div>
155 <!-- BOTONES DE CARGAR PRODUCTOS--> 155 <!-- BOTONES DE CARGAR PRODUCTOS-->
156 <div 156 <div
157 class="col-5 pr-0" 157 class="col-5 pr-0"
158 *ngIf="promociones.length > 0"> 158 *ngIf="promociones.length > 0">
159 <button 159 <button
160 *ngIf="!promoAcargar || sinonimos.length == 0" 160 *ngIf="!promoAcargar || sinonimos.length == 0"
161 type="button" 161 type="button"
162 class="btn btn-primary btn-block shadow-sm" 162 class="btn btn-primary btn-block shadow-sm"
163 (click)="pop.show()"> 163 (click)="pop.show()">
164 <span class="pr-2">Mostrar promociones</span> 164 <span class="pr-2">Mostrar promociones</span>
165 <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i> 165 <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i>
166 </button> 166 </button>
167 <button 167 <button
168 *ngIf="sinonimos.length == 0" 168 *ngIf="sinonimos.length == 0"
169 type="button" 169 type="button"
170 class="btn btn-light btn-block shadow-sm my-3" 170 class="btn btn-light btn-block shadow-sm my-3"
171 (click)="confirmarProducto()"> 171 (click)="confirmarProducto()">
172 <span class="pr-2 font-weight-bold">Confirmar</span> 172 <span class="pr-2 font-weight-bold">Confirmar</span>
173 <i class="fa fa-check text-success" aria-hidden="true"></i> 173 <i class="fa fa-check text-success" aria-hidden="true"></i>
174 </button> 174 </button>
175 <button 175 <button
176 type="button" 176 type="button"
177 class="btn btn-light btn-block shadow-sm" 177 class="btn btn-light btn-block shadow-sm"
178 (click)="deshacerCarga()"> 178 (click)="deshacerCarga()">
179 <span class="pr-2">Deshacer</span> 179 <span class="pr-2">Deshacer</span>
180 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 180 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
181 </button> 181 </button>
182 </div> 182 </div>
183 </div> 183 </div>
184 </div> 184 </div>
185 </div> 185 </div>
186 186
187 <!-- BUSCAR PRODUCTOS --> 187 <!-- BUSCAR PRODUCTOS -->
188 <div (click)="irBusquedaProductos('todos')" 188 <div (click)="irBusquedaProductos('todos')"
189 class="card card-effect bg-white border-0 shadow rounded w-100 mt-3"> 189 class="card card-effect bg-white border-0 shadow rounded w-100 mt-3">
190 <div class="card-body text-left px-4 py-3"> 190 <div class="card-body text-left px-4 py-3">
191 <div class="row"> 191 <div class="row">
192 <div class="col-auto"> 192 <div class="col-auto">
193 <p class="m-0 h3 card-title">Buscar Productos</p> 193 <p class="m-0 h3 card-title">Buscar Productos</p>
194 <p class="h5 card-text text-muted font-weight-light"> 194 <p class="h5 card-text text-muted font-weight-light">
195 Busque aquí los productos<br> 195 Busque aquí los productos<br>
196 que no tienen código.</p> 196 que no tienen código.</p>
197 </div> 197 </div>
198 <div class="col-auto p-0"> 198 <div class="col-auto p-0">
199 <img src="../../../assets/img/primario.buscar.png" class="w-15"> 199 <img src="../../../assets/img/primario.buscar.png" class="w-15">
200 </div> 200 </div>
201 </div> 201 </div>
202 202
203 </div> 203 </div>
204 </div> 204 </div>
205 205
206 </div> 206 </div>
207 207
208 </div> 208 </div>
209 209
210 </div> 210 </div>
211 </div> 211 </div>
212 212
src/app/components/mensaje-final/mensaje-final.component.html
Diff comments   View file @ 5b05452
1 <div class="container-fluid fade-in p-0 disable-user-select"> 1 <div class="container-fluid fade-in p-0 disable-user-select">
2 <img src="../../../assets/img/homeBackground.jpg" class="background-image vh-100 w-100"> 2 <img src="../../../assets/img/homeBackground.jpg" class="background-image vh-100 w-100">
3 <div class="row m-0"> 3 <div class="row m-0">
4 <div class="col p-0"> 4 <div class="col p-0">
5 <div class="vh-100 fade-in d-flex align-content-between flex-wrap disable-user-select"> 5 <div class="vh-100 fade-in d-flex align-content-between flex-wrap disable-user-select">
6 6
7 <!-- HEADER --> 7 <!-- HEADER -->
8 <div class="row m-0 w-100 bg-primary-gradient-horizontal"> 8 <div class="row m-0 w-100 bg-primary-gradient-horizontal">
9 <div class="col-6 bg-white p-3 rounded-bottom-right"> 9 <div class="col-6 bg-white p-3 rounded-bottom-right">
10 <img class="w-25 mx-auto d-block" src="{{apiImagenes}}/imagenes/logoempresa.png"> 10 <img class="w-25 mx-auto d-block" src="{{apiImagenes}}/imagenes/logoempresa.png">
11 </div> 11 </div>
12 </div> 12 </div>
13 13
14 <div class="row py-5 m-0 w-100"> 14 <div class="row py-5 m-0 w-100">
15 <div class="col-6 offset-3"> 15 <div class="col-6 offset-3">
16 <div class="row h-100"> 16 <div class="row h-100">
17 <div class="col-12 my-auto"> 17 <div class="col-12 my-auto">
18 <div> 18 <div>
19 <div class="mb-5 mt-4"> 19 <div class="mb-5 mt-4">
20 <p class="display-1 card-text text-center text-white font-weight-bold"> 20 <p class="display-1 card-text text-center text-white font-weight-bold">
21 Gracias 21 Gracias
22 </p> 22 </p>
23 <p class="display-4 card-text text-center text-white font-weight-bold"> 23 <p class="display-4 card-text text-center text-white font-weight-bold">
24 Por su compra 24 Por su compra
25 </p> 25 </p>
26 </div> 26 </div>
27 </div> 27 </div>
28 </div> 28 </div>
29 </div> 29 </div>
30 </div> 30 </div>
31 </div> 31 </div>
32 32
33 <!-- FOOTER --> 33 <!-- FOOTER -->
34 <div class="row m-0 w-100 bg-gray"> 34 <div class="row m-0 w-100 bg-gray">
35 <div class="col-6 bg-white offset-6 p-3 rounded-top-left"> 35 <div class="col-6 bg-white offset-6 p-3 rounded-top-left">
36 <img class="w-25 mx-auto d-block" src="../../../assets/img/logodebo.png"> 36 <img class="w-25 mx-auto d-block" src="../../../assets/img/logodebo.png">
37 </div> 37 </div>
38 </div> 38 </div>
39 39
40 </div> 40 </div>
41 </div> 41 </div>
42 </div> 42 </div>
43 </div> 43 </div>
44 44