inicio.component.html
8.19 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<div class="row m-0 fade-in">
<div class="col-12 p-0">
<!-- NOMBRE DE SECCION -->
<div class="row m-0">
<div class="col-12 p-0">
<p class="h5 py-1 bg-gray text-muted text-center">Inicio</p>
</div>
</div>
<div class="row m-3 d-flex align-items-start disable-user-select">
<div class="col-md-5 d-flex align-items-end flex-column">
<!-- PROMOCIONES -->
<div
(click)="irBusquedaProductos('promociones')"
class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
<div class="card-body text-left px-4 py-3">
<div class="row">
<div class="col-auto">
<p class="h3 card-title">Promociones</p>
</div>
<div class="col-auto p-0">
<img src="{{apiUrl}}/imagenes/primario.promociones.png" class="icon-dim m-0">
</div>
</div>
<p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
</div>
<div id="carouselIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{{apiUrl}}/imagenes/beldent.jpg" class="d-block w-75 m-auto rounded">
</div>
<div class="carousel-item">
<img src="{{apiUrl}}/imagenes/cafe con leche y medialunas.jpg" class="d-block w-75 m-auto rounded">
</div>
<div class="carousel-item">
<img src="{{apiUrl}}/imagenes/Surtido bagley.jpg" class="d-block w-75 m-auto rounded">
</div>
<div class="carousel-item">
<img src="{{apiUrl}}/imagenes/yogurisimo.jpg" class="d-block w-75 m-auto rounded">
</div>
</div>
</div>
</div>
<!-- ORDENAR -->
<div (click)="irBusquedaProductos('ordenar')"
class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
<div class="card-body text-left px-4 py-3">
<div class="row">
<div class="col-auto">
<p class="h3 card-title">Ordenar Pedido</p>
</div>
<div class="col-auto p-0">
<img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim">
</div>
</div>
<p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
</div>
<img
class="card-img-bottom d-block w-100 mx-auto rounded"
src="{{apiUrl}}/imagenes/cafe.jpg">
</div>
</div>
<div class="col-md-7 d-flex align-items-end flex-column mt-4 mt-md-0">
<!-- CARGAR PRODUCTOS -->
<ng-template #popTemplate>
<app-popover-promos
*ngIf="promociones.length > 0 && sinonimos.length === 0"
[popover]="popoverDirective"
[popoverContent]="promociones"
(promoSeleccionada)="promoSeleccionada($event)"
class="text-white rounded-sm border-0">
</app-popover-promos>
<app-popover-sinonimos
*ngIf="sinonimos.length > 0"
[popover]="popoverDirective"
[popoverContent]="sinonimos"
(productosPersonalizados)="productosPersonalizados($event)"
class="text-white rounded-sm border-0">
</app-popover-sinonimos>
</ng-template>
<div
placement="left"
triggers=""
[popover]="popTemplate"
class="w-100"
#pop="bs-popover">
<div class="card bg-white border-0 shadow rounded mb-auto">
<div class="card-body text-left px-4 py-3">
<div class="row">
<div class="col-auto">
<p class="h3 card-title">Cargar Productos</p>
</div>
<div class="col-auto p-0">
<img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2">
</div>
</div>
<p class="h5 card-text text-muted font-weight-light">
Coloque un producto frente<br>
al lector de códigos o selecciónelo en pantalla
</p>
</div>
<div class="row m-4">
<div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm">
<!-- IMAGEN DE ESCANER -->
<img
*ngIf="!productoAcargar"
class="card-img-top d-block w-100 mx-auto rounded-sm"
src="{{apiUrl}}/imagenes/escanner.jpg">
<!-- PRODUCTO A CARGAR -->
<div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar">
<img
class="card-img-top d-block w-75 mx-auto rounded-sm"
src="{{apiUrl}}/imagenes/{{productoAcargar.imagenes[0].imagen}}">
<div class="row justify-content-between m-3">
<div class="col-12 text-left px-1">
<p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p>
</div>
<div class="col-12 text-right mt-2">
<p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p>
</div>
</div>
</div>
<!-- PROMO A CARGAR -->
<div class="fade-in m-0" *ngIf="promoAcargar">
<img
class="card-img-top d-block w-100 mx-auto rounded-sm"
src="{{apiUrl}}/imagenes/{{promoAcargar.imagenes[0].imagen}}">
<div class="row justify-content-between m-3">
<div class="col-12 text-left px-1">
<p class="h6 font-weight-bold mb-0">{{promoAcargar.DetArt}}</p>
</div>
<div class="col-12 text-right mt-2 align-self-end">
<p class="h5 font-weight-bold mb-0">{{promoAcargar.PreVen | currency}}</p>
</div>
</div>
</div>
</div>
<!-- BOTONES DE CARGAR PRODUCTOS-->
<div
class="col-5 pr-0"
*ngIf="promociones.length > 0">
<button
*ngIf="!promoAcargar || sinonimos.length == 0"
type="button"
class="btn btn-primary btn-block shadow-sm"
(click)="pop.show()">
<span class="pr-2">Mostrar promociones</span>
<i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i>
</button>
<button
type="button"
class="btn btn-light btn-block shadow-sm my-3"
(click)="confirmarProducto()">
<span class="pr-2 font-weight-bold">Confirmar</span>
<i class="fa fa-check text-success" aria-hidden="true"></i>
</button>
<button
type="button"
class="btn btn-light btn-block shadow-sm"
(click)="deshacerCarga()">
<span class="pr-2">Deshacer</span>
<i class="fa fa-undo text-warning" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
<!-- BUSCAR PRODUCTOS -->
<div (click)="irBusquedaProductos('todos')"
class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
<div class="card-body text-left px-4 py-3">
<div class="row">
<div class="col-auto">
<p class="h3 card-title">Buscar Productos</p>
<p class="h5 card-text text-muted font-weight-light">
Busque aquí los productos<br>
que no tienen código </p>
</div>
<div class="col-auto p-0">
<img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>