Mauricio Cattafi / autoservicio

Download as
Browse Code »

Commit 92b76c47027b01cae95eabc7f45efbc8b4f80f15

Authored by Eric Fernandez
2 parents 3fa5b2492d 6544f80bf6
Exists in master and in 1 other branch validar_pve

Merge branch 'master' into 'master' 

Master(mpuebla)

See merge request !89
Showing 5 changed files   Show diff stats
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
Diff comments   View file @ 92b76c4
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 </div> 30 </div>
31 31
32 <div [ngClass]="{'mt-5': verQR}" class="row m-0"> 32 <div [ngClass]="{'mt-5': verQR}" class="row m-0">
33 <!-- GRILLA DE PRODUCTOS DE MI COMPRA --> 33 <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
34 <div *ngIf="!verQR" class="col-sm-9 pr-1"> 34 <div *ngIf="!verQR" class="col-sm-9 pr-1">
35 <div class="row mx-1 pr-1 vh-70 overflow-scroll text-dark"> 35 <div class="row mx-1 pr-1 vh-70 overflow-scroll text-dark">
36 <div class="mh-100 col-4 p-2" *ngFor="let producto of productos"> 36 <div class="mh-100 col-4 p-2" *ngFor="let producto of productos">
37 <div class="row m-0 h-100 bg-white rounded-sm shadow border-0"> 37 <div class="row m-0 h-100 bg-white rounded-sm shadow border-0">
38 <div class="d-flex align-items-end flex-column"> 38 <div class="d-flex align-items-end flex-column">
39 <div class="w-100"> 39 <div class="w-100">
40 <img 40 <img
41 src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}" 41 src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}"
42 class="shadow rounded-sm w-100 m-auto"> 42 class="shadow rounded-sm w-100 m-auto">
43 </div> 43 </div>
44 <div class="w-100 pt-2 px-2"> 44 <div class="w-100 pt-2 px-2">
45 <p class="h6 text-left"> 45 <p class="h6 text-left">
46 <small class="font-weight-bold"> 46 <small class="font-weight-bold">
47 {{producto.DET_LAR}} 47 {{producto.DET_LAR}}
48 </small> 48 </small>
49 </p> 49 </p>
50 <div *ngIf="producto.tieneSinonimos"> 50 <div *ngIf="producto.tieneSinonimos">
51 <p *ngFor="let p of producto.productos" class="h6 text-left m-0"> 51 <p *ngFor="let p of producto.productos" class="h6 text-left m-0">
52 <small> 52 <small>
53 - {{p.cantidad * producto.cantidad}} {{p.DET_LAR}} 53 - {{p.cantidad * producto.cantidad}} {{p.DET_LAR}}
54 </small> 54 </small>
55 </p> 55 </p>
56 </div> 56 </div>
57 </div> 57 </div>
58 <div class="w-100 d-flex justify-content-between mt-auto mb-1 px-2"> 58 <div class="w-100 d-flex justify-content-between mt-auto mb-1 px-2">
59 <span class="text-left m-0 px-1 h6"> 59 <span class="text-left m-0 px-1 h6">
60 {{producto.cantidad}} x {{producto.PreVen | currency}} 60 {{producto.cantidad}} x {{producto.PreVen | currency}}
61 </span> 61 </span>
62 <span class="text-right m-0 px-1 h6"> 62 <span class="text-right m-0 px-1 h6">
63 {{producto.cantidad * producto.PreVen | currency}} 63 {{producto.cantidad * producto.PreVen | currency}}
64 </span> 64 </span>
65 </div> 65 </div>
66 </div> 66 </div>
67 </div> 67 </div>
68 </div> 68 </div>
69 </div> 69 </div>
70 </div> 70 </div>
71 71
72 <!-- CODIGO QR --> 72 <!-- CODIGO QR -->
73 <div *ngIf="verQR" class="col-sm-9"> 73 <div *ngIf="verQR" class="col-sm-9">
74 <div class="col-6 offset-3 border-0 mb-auto"> 74 <div class="col-6 offset-3 border-0 mb-auto">
75 <img 75 <img
76 src="{{apiImagenes}}/imagenes/qrmp.jpg" 76 src="{{apiImagenes}}/imagenes/qrmp.jpg"
77 class="w-100 mx-auto d-block shadow rounded-sm"> 77 class="w-100 mx-auto d-block shadow rounded-sm">
78 </div> 78 </div>
79 </div> 79 </div>
80 80
81 <!-- TICKET --> 81 <!-- TICKET -->
82 <div class="col-sm-3 px-1"> 82 <div class="col-sm-3 px-1">
83 <div class="card shadow"> 83 <div class="card shadow">
84 <div class="card-body"> 84 <div class="card-body">
85 <p class="h5 card-title">Su Ticket</p> 85 <p class="h5 card-title">Su Ticket</p>
86 <div class="row mt-4 m-0"> 86 <div class="row mt-4 m-0">
87 <div class="col-12 p-0 mb-2"> 87 <div class="col-12 p-0 mb-2">
88 <p class="h6 m-0 card-text text-left"> 88 <p class="h6 m-0 card-text text-left">
89 <small class="font-weight-bold">DESCRIPCIÓN</small> 89 <small class="font-weight-bold">DESCRIPCIÓN</small>
90 </p> 90 </p>
91 <p class="h6 m-0 card-text text-left"> 91 <p class="h6 m-0 card-text text-left">
92 <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small> 92 <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small>
93 </p> 93 </p>
94 </div> 94 </div>
95 </div> 95 </div>
96 <div class="row vh-50 px-2 overflow-scroll m-0"> 96 <div class="row vh-50 px-2 overflow-scroll m-0">
97 <div class="col-12 p-0 mb-2" *ngFor="let producto of productos"> 97 <div class="col-12 p-0 mb-2" *ngFor="let producto of productos">
98 <p class="h6 m-0 card-text text-left"> 98 <p class="h6 m-0 card-text text-left">
99 <small>{{producto.DET_LAR}}</small> 99 <small>{{producto.DET_LAR}}</small>
100 </p> 100 </p>
101 <div class="row d-flex justify-content-between m-0"> 101 <div class="row d-flex justify-content-between m-0">
102 <div class="col p-0"> 102 <div class="col p-0">
103 <p class="h6 m-0 card-text text-left"> 103 <p class="h6 m-0 card-text text-left">
104 <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small> 104 <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small>
105 </p> 105 </p>
106 </div> 106 </div>
107 <div class="col p-0"> 107 <div class="col p-0">
108 <p class="h6 m-0 card-text text-right"> 108 <p class="h6 m-0 card-text text-right">
109 <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small> 109 <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small>
110 </p> 110 </p>
111 </div> 111 </div>
112 </div> 112 </div>
113 </div> 113 </div>
114 </div> 114 </div>
115 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0"> 115 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0">
116 Total {{getTotal() | currency}} 116 Total {{getTotal() | currency}}
117 </p> 117 </p>
118 </div> 118 </div>
119 </div> 119 </div>
120 </div> 120 </div>
121 </div> 121 </div>
122 122
123 <!-- OPCIONES ABAJO DERECHA --> 123 <!-- OPCIONES ABAJO DERECHA -->
124 <div class="row m-0 fixed-bottom"> 124 <div class="row m-0 fixed-bottom">
125 <div class="col-sm-2 offset-sm-10 p-0 mt-auto"> 125 <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
126 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0"> 126 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
127 <div class="card-body row m-0 p-1"> 127 <div class="card-body row m-0 p-1">
128 <div class="col-12 p-3"> 128 <div class="col-12 p-3">
129 <button 129 <button
130 type="button" 130 type="button"
131 class="btn btn-block btn-light shadow btn-sm shadow" 131 class="btn btn-block btn-light shadow btn-sm shadow"
132 (click)="volverPreviousPage()"> 132 (click)="volverPreviousPage()">
133 <span class="pr-2">Volver</span> 133 <span class="pr-2">Volver</span>
134 <i class="fa fa-undo text-warning"></i> 134 <i class="fa fa-undo text-warning"></i>
135 </button> 135 </button>
136 <button 136 <button
137 type="button" 137 type="button"
138 class="btn btn-block btn-light shadow btn-sm shadow" 138 class="btn btn-block btn-light shadow btn-sm shadow"
139 [routerLink]="['/cancelar-compra']"> 139 [routerLink]="['/cancelar-compra']">
140 <span class="pr-2">Cancelar</span> 140 <span class="pr-2">Cancelar</span>
141 <i class="fa fa-times text-danger"></i> 141 <i class="fa fa-times text-danger"></i>
142 </button> 142 </button>
143 </div> 143 </div>
144 </div> 144 </div>
145 </div> 145 </div>
146 </div> 146 </div>
147 </div> 147 </div>
148 </div> 148 </div>
149 149
150 <!-- FORMAS DE PAGO --> 150 <!-- FORMAS DE PAGO -->
151 <div *ngIf="!verQR" class="col-2 px-1"> 151 <div *ngIf="!verQR" class="col-2 px-1">
152 <p class="h4 text-white text-center mt-4 mx-2 pb-2 border-bottom border-white"> 152 <p class="h4 text-white text-center mt-4 mx-2 pb-2 border-bottom border-white">
153 Forma de pago 153 Forma de pago
154 </p> 154 </p>
155 155
156 <!-- EFECTIVO --> 156 <!-- EFECTIVO -->
157 <div 157 <div
158 class="row card-effect mx-1 my-3 rounded-sm shadow-sm bg-white" 158 class="row card-effect mx-1 my-3 rounded-sm shadow-sm bg-white"
159 (click)="pagar('efectivo')"> 159 (click)="pagar('efectivo')">
160 <div class="col-7 text-center my-auto py-3 px-2"> 160 <div class="col-7 text-center my-auto py-3 px-2">
161 <span class="h5">Efectivo</span> 161 <span class="h5">Efectivo</span>
162 </div> 162 </div>
163 <div class="col-5 my-auto p-0"> 163 <div class="col-5 my-auto p-0">
164 <img 164 <img
165 src="{{apiImagenes}}/imagenes/efectivo.png" 165 src="{{apiImagenes}}/imagenes/efectivo.png"
166 class="w-50 float-right mr-3"> 166 class="w-100 float-right">
167 </div> 167 </div>
168 </div> 168 </div>
169 169
170 <!-- TARJETA --> 170 <!-- TARJETA -->
171 <div class="row card-effect mx-1 my-3 rounded-sm shadow-sm bg-white"> 171 <div class="row card-effect mx-1 my-3 rounded-sm shadow-sm bg-white">
172 <div class="col-7 text-center my-auto py-3 px-2"> 172 <div class="col-7 text-center my-auto py-3 px-2">
173 <span class="h5">Tarjeta</span> 173 <span class="h5">Tarjeta</span>
174 </div> 174 </div>
175 <div class="col-5 my-auto p-0"> 175 <div class="col-5 my-auto p-0">
176 <img 176 <img
177 src="{{apiImagenes}}/imagenes/tarjeta.png" 177 src="{{apiImagenes}}/imagenes/tarjeta.png"
178 class="w-100 float-right"> 178 class="w-100 float-right">
179 </div> 179 </div>
180 </div> 180 </div>
181 181
182 <!-- QR --> 182 <!-- QR -->
183 <div 183 <div
184 class="row card-effect mx-1 my-3 rounded-sm shadow-sm bg-white" 184 class="row card-effect mx-1 my-3 rounded-sm shadow-sm bg-white"
185 (click)="pagar('electronico')"> 185 (click)="pagar('electronico')">
186 <div class="col-7 text-center my-auto py-1 px-2"> 186 <div class="col-7 text-center my-auto py-1 px-2">
187 <span class="h5">Pago Electrónico</span> 187 <span class="h5">Pago Electrónico</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="{{apiImagenes}}/imagenes/qr.png" 191 src="{{apiImagenes}}/imagenes/qr.png"
192 class="w-100 float-right"> 192 class="w-100 float-right">
193 </div> 193 </div>
194 </div> 194 </div>
195 </div> 195 </div>
196 </div> 196 </div>
197 197
198 </div> 198 </div>
199 </div> 199 </div>
200 200
201 <div 201 <div
202 *ngIf="compraConQRfinalizada" 202 *ngIf="compraConQRfinalizada"
203 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100"> 203 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
204 <div class="col-12 text-center text-white my-auto"> 204 <div class="col-12 text-center text-white my-auto">
205 <p class="font-weight-bold display-4"> 205 <p class="font-weight-bold display-4">
206 Su pago fue<br> 206 Su pago fue<br>
207 acreditado 207 acreditado
208 exitosamente 208 exitosamente
209 </p> 209 </p>
210 <p class="font-weight-bold display-4">Recuerde retirar su ticket</p> 210 <p class="font-weight-bold display-4">Recuerde retirar su ticket</p>
211 </div> 211 </div>
212 <div class="row z-index-0 fixed-top m-0 w-100"> 212 <div class="row z-index-0 fixed-top m-0 w-100">
213 <div class="col-12 p-3"> 213 <div class="col-12 p-3">
214 <img class="w-15 float-right" src="../../../assets/img/debo-gray.png"> 214 <img class="w-15 float-right" src="../../../assets/img/debo-gray.png">
215 </div> 215 </div>
216 </div> 216 </div>
217 </div> 217 </div>
218 218
219 <div 219 <div
220 *ngIf="compraConEfectivofinalizada" 220 *ngIf="compraConEfectivofinalizada"
221 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100"> 221 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
222 <div class="col-12 text-center text-white my-auto"> 222 <div class="col-12 text-center text-white my-auto">
223 <p class="font-weight-bold display-4"> 223 <p class="font-weight-bold display-4">
224 Retire su ticket<br> 224 Retire su ticket<br>
225 y diríjase a caja para<br> 225 y diríjase a caja para<br>
226 efectuar el pago. 226 efectuar el pago.
227 </p> 227 </p>
228 </div> 228 </div>
229 <div class="row z-index-0 fixed-top m-0 w-100"> 229 <div class="row z-index-0 fixed-top m-0 w-100">
230 <div class="col-12 p-3"> 230 <div class="col-12 p-3">
231 <img class="w-15 float-right" src="../../../assets/img/debo-gray.png"> 231 <img class="w-15 float-right" src="../../../assets/img/debo-gray.png">
232 </div> 232 </div>
233 </div> 233 </div>
234 </div> 234 </div>
235 235
src/app/components/home/home.component.html
Diff comments   View file @ 92b76c4
1 <div class="container-fluid p-0"> 1 <div class="container-fluid p-0">
2 <img 2 <img
3 src="{{apiImagenes}}/imagenes/homeBackground.jpg" 3 src="{{apiImagenes}}/imagenes/homeBackground.jpg"
4 class="background-image vh-100 w-100"> 4 class="background-image vh-100 w-100">
5 <div class="row m-0"> 5 <div class="row m-0">
6 <div class="col p-0"> 6 <div class="col p-0">
7 <div 7 <div
8 class="vh-100 fade-in d-flex align-items-start flex-column disable-user-select" 8 class="vh-100 fade-in d-flex align-items-start flex-column disable-user-select"
9 [routerLink]="['/inicio']"> 9 [routerLink]="['/inicio']">
10 10
11 <!-- HEADER --> 11 <!-- HEADER -->
12 <div class="row m-0 w-100 bg-primary-gradient-horizontal"> 12 <div class="row m-0 w-100 bg-primary-gradient-horizontal">
13 <div class="col-6 bg-white p-3 rounded-bottom-right"> 13 <div class="col-6 bg-white p-3 rounded-bottom-right">
14 <img class="w-25 mx-auto d-block" src="{{apiImagenes}}/imagenes/logoempresa.png"> 14 <img class="w-25 mx-auto d-block" src="{{apiImagenes}}/imagenes/logoempresa.png">
15 </div> 15 </div>
16 </div> 16 </div>
17 17
18 <!-- INFO DE BIENVENIDA --> 18 <!-- INFO DE BIENVENIDA -->
19 <div class="row my-auto mx-0 h-75 w-100"> 19 <div class="row my-auto mx-0 h-75 w-100">
20 <div class="col-8 col-lg-8 my-auto"> 20 <div class="col-6 col-lg-8 my-auto p-3 h-100">
21 <div class="embed-responsive embed-responsive-16by9"> 21 <div class="embed-responsive embed-responsive-16by9">
22 <iframe 22 <iframe
23 class="embed-responsive-item rounded fade-in" 23 class="embed-responsive-item rounded fade-in"
24 src="https://www.youtube.com/embed/vb8ZcalBDyw?&autoplay=1&loop=1&playlist=vb8ZcalBDyw&controls=0&showinfo=0&mute=1"> 24 src="https://www.youtube.com/embed/vb8ZcalBDyw?&autoplay=1&loop=1&playlist=vb8ZcalBDyw&controls=0&showinfo=0&mute=1">
25 </iframe> 25 </iframe>
26 </div> 26 </div>
27 </div> 27 </div>
28 <div class="col-8 col-lg-4 text-center text-white my-auto"> 28 <div class="col-6 col-lg-4 text-center text-white my-auto">
29 <p class="display-4 font-weight-bold m-0">¡BIENVENIDO!</p> 29 <p class="display-4 font-weight-bold m-0">¡BIENVENIDO!</p>
30 <p class="display-4 m-0 font-weight-bold">Toque la pantalla<br>para comenzar</p> 30 <p class="display-4 m-0 font-weight-bold">Toque la pantalla<br>para comenzar</p>
31 </div> 31 </div>
32 32
33 </div> 33 </div>
34 34
35 <!-- FOOTER --> 35 <!-- FOOTER -->
36 <div class="row m-0 w-100 bg-gray"> 36 <div class="row m-0 w-100 bg-gray">
37 <div class="col-6 bg-white offset-6 p-3 rounded-top-left"> 37 <div class="col-6 bg-white offset-6 p-3 rounded-top-left">
38 <img class="w-25 mx-auto d-block" src="{{apiImagenes}}/imagenes/logodebo.png"> 38 <img class="w-25 mx-auto d-block" src="{{apiImagenes}}/imagenes/logodebo.png">
39 </div> 39 </div>
40 </div> 40 </div>
41 41
42 </div> 42 </div>
43 </div> 43 </div>
44 </div> 44 </div>
45 </div> 45 </div>
46 46
src/app/components/inicio/inicio.component.html
Diff comments   View file @ 92b76c4
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 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-3 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 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="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="icon-dim 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-4"> 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="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="icon-dim"> 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 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="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="{{apiImagenes}}/imagenes/escanear.png" class="icon-dim mb-2"> 106 <img src="{{apiImagenes}}/imagenes/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 m-4"> 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="{{apiImagenes}}/imagenes/escanner.jpg"> 120 src="{{apiImagenes}}/imagenes/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 mx-auto rounded-sm" 125 class="card-img-top d-block w-75 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 type="button" 168 type="button"
169 class="btn btn-light btn-block shadow-sm my-3" 169 class="btn btn-light btn-block shadow-sm my-3"
170 (click)="confirmarProducto()"> 170 (click)="confirmarProducto()">
171 <span class="pr-2 font-weight-bold">Confirmar</span> 171 <span class="pr-2 font-weight-bold">Confirmar</span>
172 <i class="fa fa-check text-success" aria-hidden="true"></i> 172 <i class="fa fa-check text-success" aria-hidden="true"></i>
173 </button> 173 </button>
174 <button 174 <button
175 type="button" 175 type="button"
176 class="btn btn-light btn-block shadow-sm" 176 class="btn btn-light btn-block shadow-sm"
177 (click)="deshacerCarga()"> 177 (click)="deshacerCarga()">
178 <span class="pr-2">Deshacer</span> 178 <span class="pr-2">Deshacer</span>
179 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 179 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
180 </button> 180 </button>
181 </div> 181 </div>
182 </div> 182 </div>
183 </div> 183 </div>
184 </div> 184 </div>
185 185
186 <!-- BUSCAR PRODUCTOS --> 186 <!-- BUSCAR PRODUCTOS -->
187 <div (click)="irBusquedaProductos('todos')" 187 <div (click)="irBusquedaProductos('todos')"
188 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 188 class="card card-effect bg-white border-0 shadow rounded w-100 mt-3">
189 <div class="card-body text-left px-4 py-3"> 189 <div class="card-body text-left px-4 py-3">
190 <div class="row"> 190 <div class="row">
191 <div class="col-auto"> 191 <div class="col-auto">
192 <p class="h3 card-title">Buscar Productos</p> 192 <p class="m-0 h3 card-title">Buscar Productos</p>
193 <p class="h5 card-text text-muted font-weight-light"> 193 <p class="h5 card-text text-muted font-weight-light">
194 Busque aquí los productos<br> 194 Busque aquí los productos<br>
195 que no tienen código.</p> 195 que no tienen código.</p>
196 </div> 196 </div>
197 <div class="col-auto p-0"> 197 <div class="col-auto p-0">
198 <img src="{{apiImagenes}}/imagenes/primario.buscar.png" class="icon-dim mb-2"> 198 <img src="{{apiImagenes}}/imagenes/primario.buscar.png" class="w-15">
199 </div> 199 </div>
200 </div> 200 </div>
201 201
202 </div> 202 </div>
203 </div> 203 </div>
204 204
205 </div> 205 </div>
206 206
207 </div> 207 </div>
208 208
209 </div> 209 </div>
210 </div> 210 </div>
211 211
src/app/components/master/master.component.html
Diff comments   View file @ 92b76c4
1 <div 1 <div class="container-fluid m-0 p-0">
2 class="row m-0 fade-in"
3 (click)="reiniciarTimer">
4 <div class="col-10 p-0 vh-100">
5
6 <!-- TOP HEADER -->
7 <app-header></app-header>
8
9 <router-outlet></router-outlet>
10 2
11 </div> 3 <div class="row m-0 fade-in" (click)="reiniciarTimer">
4 <div class="col-10 p-0 vh-100">
5
6 <!-- TOP HEADER -->
7 <app-header></app-header>
8
9 <router-outlet></router-outlet>
12 10
13 <!-- SIDEBAR --> 11 </div>
14 <app-sidebar class="sidebar position-fixed float-right col-2 col-md-2 vh-100 bg-primary-gradient px-1 pt-2"> 12
1 @import "./assets/scss/animation.scss"; 1 @import "./assets/scss/animation.scss";
2 @import "./assets/scss/bootstrap-override.scss"; 2 @import "./assets/scss/bootstrap-override.scss";
3 @import "../node_modules/bootstrap/scss/_variables.scss"; 3 @import "../node_modules/bootstrap/scss/_variables.scss";
4 4
5 html, 5 html,
6 body { 6 body {
7 height: 100%; 7 height: 100%;
8 background: linear-gradient( 8 background: linear-gradient(0deg, #e6e6e6, #fff);
9 0deg,
10 #e6e6e6,
11 #fff
12 );
13 font-family: bahnschrift; 9 font-family: bahnschrift;
14 overflow: hidden !important; 10 overflow: hidden !important;
15 } 11 }
16 12
17 .blur { 13 .blur {
18 filter: blur(10px); 14 filter: blur(10px);
19 -webkit-filter: blur(10px); 15 -webkit-filter: blur(10px);
20 } 16 }
21 17
22 .disable-user-select { 18 .disable-user-select {
23 -webkit-user-select: none; 19 -webkit-user-select: none;
24 -moz-user-select: none; 20 -moz-user-select: none;
25 -ms-user-select: none; 21 -ms-user-select: none;
26 user-select: none; 22 user-select: none;
27 } 23 }
28 24
29 .blue-gradient { 25 .blue-gradient {
30 background: linear-gradient(0deg, #ffffff00, $white); 26 background: linear-gradient(0deg, #ffffff00, $white);
31 } 27 }
32 28
33 .rounded { 29 .rounded {
34 border-radius: 1.5rem !important; 30 border-radius: 1.5rem !important;
35 } 31 }
36 32
37 .rounded-top-sm { 33 .rounded-top-sm {
38 border-top-left-radius: 0.75rem !important; 34 border-top-left-radius: 0.75rem !important;
39 border-top-right-radius: 0.75rem !important; 35 border-top-right-radius: 0.75rem !important;
40 } 36 }
41 37
42 .rounded-sm { 38 .rounded-sm {
43 border-radius: 0.75rem !important; 39 border-radius: 0.75rem !important;
44 } 40 }
45 41
46 .card-effect { 42 .card-effect {
47 &:active { 43 &:active {
48 background-color: #c9c9c9b3 !important; 44 background-color: #c9c9c9b3 !important;
49 transition: background-color 0.5s; 45 transition: background-color 0.5s;
50 } 46 }
51 &:focus { 47 &:focus {
52 background-color: #c9c9c9b3 !important; 48 background-color: #c9c9c9b3 !important;
53 transition: background-color 0.5s; 49 transition: background-color 0.5s;
54 } 50 }
55 } 51 }
56 52
57 .overflow-scroll { 53 .overflow-scroll {
58 overflow-y: auto !important; 54 overflow-y: auto !important;
59 overflow-x: hidden !important; 55 overflow-x: hidden !important;
60 &::-webkit-scrollbar { 56 &::-webkit-scrollbar {
61 width: 0.75em; 57 width: 0.75em;
62 } 58 }
63 &::-webkit-scrollbar-track { 59 &::-webkit-scrollbar-track {
64 border-radius: 10px; 60 border-radius: 10px;
65 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); 61 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
66 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); 62 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
67 background-color: $white; 63 background-color: $white;
68 } 64 }
69 &::-webkit-scrollbar-thumb { 65 &::-webkit-scrollbar-thumb {
70 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7); 66 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
71 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7); 67 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
72 outline: 1px solid slategrey; 68 outline: 1px solid slategrey;
73 border-radius: 10px; 69 border-radius: 10px;
74 height: 12px; 70 height: 12px;
75 &:active { 71 &:active {
76 box-shadow: inset 0 0 8px $primary; 72 box-shadow: inset 0 0 8px $primary;
77 -webkit-box-shadow: inset 0 0 8px $primary; 73 -webkit-box-shadow: inset 0 0 8px $primary;
78 } 74 }
79 } 75 }
80 &::-webkit-scrollbar-corner { 76 &::-webkit-scrollbar-corner {
81 border-radius: 10px; 77 border-radius: 10px;
82 } 78 }
83 } 79 }
84 80
85 .bg-gray { 81 .bg-gray {
86 background-color: #e6e6e6; 82 background-color: #e6e6e6;
87 } 83 }
88 84
89 .bg-primary-gradient { 85 .bg-primary-gradient {
90 background: linear-gradient( 86 background: linear-gradient(
91 135deg, 87 135deg,
92 rgba(40, 112, 175, 1) 0%, 88 rgba(40, 112, 175, 1) 0%,
93 rgba(0, 32, 66, 1) 100% 89 rgba(0, 32, 66, 1) 100%
94 ); 90 );
95 } 91 }
96 92
97 .bg-primary-gradient-horizontal { 93 .bg-primary-gradient-horizontal {
98 background: linear-gradient( 94 background: linear-gradient(
99 90deg, 95 90deg,
100 rgba(40, 112, 175, 1) 0%, 96 rgba(40, 112, 175, 1) 0%,
101 rgba(0, 32, 66, 1) 100% 97 rgba(0, 32, 66, 1) 100%
102 ); 98 );
103 } 99 }
104 100
105 .icon-dim { 101 .icon-dim {
106 height: 40px !important; 102 height: 40px !important;
107 width: auto !important; 103 width: auto !important;
108 background-color: white !important; 104 background-color: white !important;
109 } 105 }
110 106
111 .text-purple { 107 .text-purple {
112 color: $purple; 108 color: $purple;
113 } 109 }
114 110
115 .vh-70 { 111 .vh-70 {
116 min-height: auto !important; 112 min-height: auto !important;
117 max-height: 70vh !important; 113 max-height: 70vh !important;
118 } 114 }
119 115
120 .vh-60 { 116 .vh-60 {
121 min-height: auto !important; 117 min-height: auto !important;
122 max-height: 60vh !important; 118 max-height: 60vh !important;
123 } 119 }
124 120
125 .vh-50 { 121 .vh-50 {
126 min-height: auto !important; 122 min-height: auto !important;
127 max-height: 50vh !important; 123 max-height: 50vh !important;
128 } 124 }
129 125
130 .spinner-lg { 126 .spinner-lg {
131 width: 3rem !important; 127 width: 3rem !important;
132 height: 3rem !important; 128 height: 3rem !important;
133 } 129 }
134 130
135 .sidebar { 131 .sidebar {
136 right: 0; 132 right: 0;
137 } 133 }
138 134
139 .background-image { 135 .background-image {
140 background-repeat: no-repeat; 136 background-repeat: no-repeat;
141 background-size: cover; 137 background-size: cover;
142 position: fixed; 138 position: fixed;
143 } 139 }
144 140
145 .rounded-bottom-right { 141 .rounded-bottom-right {
146 border-bottom-right-radius: 10rem; 142 border-bottom-right-radius: 10rem;
147 &:before { 143 &:before {
148 border-radius: 0 40px 40px 0; 144 border-radius: 0 40px 40px 0;
149 background-color: #fff; 145 background-color: #fff;
150 } 146 }
151 } 147 }
152 148
153 .rounded-top-left { 149 .rounded-top-left {
154 border-top-left-radius: 10rem; 150 border-top-left-radius: 10rem;
155 } 151 }
156 152
157 .bg-gray { 153 .bg-gray {
158 background-color: #cccccc; 154 background-color: #cccccc;
159 } 155 }
160 156
161 .cdk-overlay-container { 157 .cdk-overlay-container {
162 position: absolute; 158 position: absolute;
163 top: 65%; 159 top: 65%;
164 width: 100%; 160 width: 100%;
165 } 161 }
166 162
167 .min-h-40 { 163 .min-h-40 {
168 min-height: 40px; 164 min-height: 40px;
169 } 165 }
170 166
171 .min-h-55 { 167 .min-h-55 {
172 min-height: 55px; 168 min-height: 55px;
173 } 169 }
174 170
175 .pagination { 171 .pagination {
176 justify-content: center !important; 172 justify-content: center !important;
177 display: flex !important; 173 display: flex !important;
178 } 174 }
179 175
180 .z-index-0 { 176 .z-index-0 {
181 z-index: 0; 177 z-index: 0;
182 } 178 }
183 179
184 .w-15 { 180 .w-15 {
185 width: 15% !important; 181 width: 15% !important;
186 }