Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit e1403fb0860f86f4daa9f292e5ce6387a290b533

Authored by Marcelo Puebla
2 parents 0f314b0cc7 dce89e1a73
Exists in develop

Merge branch 'master' into 'develop' 

Master(benjamin)

See merge request !35
Showing 1 changed file   Show diff stats
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ e1403fb
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <!-- PUBLICIDADES --> 2 <!-- PUBLICIDADES -->
3 <app-header-publicidad></app-header-publicidad> 3 <app-header-publicidad></app-header-publicidad>
4 4
5 <div class="row mx-0 h-80 align-items-end"> 5 <div class="row mx-0 h-80 align-items-end">
6 <!-- CABECERA --> 6 <!-- CABECERA -->
7 <div class="row w-100 mx-3 h-auto border border-primary rounded-sm"> 7 <div class="row w-100 mx-3 h-auto border border-primary rounded-sm">
8 <div class="col-12 p-2 align-self-center"> 8 <div class="col-12 p-2 align-self-center">
9 <div class="px-3"> 9 <div class="px-3">
10 <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p> 10 <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
11 </div> 11 </div>
12 </div> 12 </div>
13 </div> 13 </div>
14 <!-- CUERPO --> 14 <!-- CUERPO -->
15 <div class="row w-100 mr-4 h-70"> 15 <div class="row w-100 mr-4 h-70">
16 <div class="col-12 h-100 px-0 py-3"> 16 <div class="col-12 h-100 px-0 py-3">
17 <div class="row mx-0 h-100"> 17 <div class="row mx-0 h-100">
18 <!-- FILTRO CATEGORIAS --> 18 <!-- FILTRO CATEGORIAS -->
19 <div class="col-5 col-sm-3 col-xl-2 h-100"> 19 <div class="col-5 col-sm-3 col-xl-2 h-100">
20 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p> 20 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
21 <div class="row mx-0 h-94 justify-content-center align-items-center"> 21 <div class="row mx-0 h-94 justify-content-center align-items-center">
22 <div class="col-auto btn-effect h-5"> 22 <div class="col-auto btn-effect h-5">
23 <img 23 <img
24 draggable="false" 24 draggable="false"
25 ondragstart="return false;" 25 ondragstart="return false;"
26 (contextmenu)="false" 26 (contextmenu)="false"
27 class="h-100 d-block mx-auto rotate-90-neg" 27 class="h-100 d-block mx-auto rotate-90-neg"
28 src="assets/img/ir-color.svg" 28 src="assets/img/ir-color.svg"
29 (mousedown)="scrollY(templateCategorias, -100)" 29 (mousedown)="scrollY(templateCategorias, -100)"
30 (mouseup)="mouseup()" 30 (mouseup)="mouseup()"
31 (mouseleave)="mouseup()"> 31 (mouseleave)="mouseup()">
32 </div> 32 </div>
33 <!-- CATEGORIAS --> 33 <!-- CATEGORIAS -->
34 <div 34 <div
35 #templateCategorias 35 #templateCategorias
36 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y"> 36 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">
37 <div 37 <div
38 class="row mx-4 mb-2 h-32 justify-content-center tab" 38 class="row mx-4 mb-2 h-32 justify-content-center tab"
39 [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }" 39 [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }"
40 (click)="selectCategoria(-1, 0)"> 40 (click)="selectCategoria(-1, 0)">
41 <img 41 <img
42 draggable="false" 42 draggable="false"
43 ondragstart="return false;" 43 ondragstart="return false;"
44 (contextmenu)="false" 44 (contextmenu)="false"
45 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle" 45 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
46 src="assets/img/logo-spot.svg"> 46 src="assets/img/logo-spot.svg">
47 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small> 47 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small>
48 </div> 48 </div>
49 <div 49 <div
50 class="row mx-4 mb-2 h-32 justify-content-center tab" 50 class="row mx-4 mb-2 h-32 justify-content-center tab"
51 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }" 51 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
52 (click)="selectCategoria(i, categoria.id)" 52 (click)="selectCategoria(i, categoria.id)"
53 *ngFor="let categoria of categorias; let i = index;"> 53 *ngFor="let categoria of categorias; let i = index;">
54 <img 54 <img
55 draggable="false" 55 draggable="false"
56 ondragstart="return false;" 56 ondragstart="return false;"
57 (contextmenu)="false" 57 (contextmenu)="false"
58 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle" 58 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
59 src="{{urlImagenes}}{{categoria.path_imagen}}" 59 src="{{urlImagenes}}{{categoria.path_imagen}}"
60 onerror="this.src='assets/img/image-not-found.jpg'"> 60 onerror="this.src='assets/img/image-not-found.jpg'">
61 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small> 61 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
62 </div> 62 </div>
63 </div> 63 </div>
64 <div class="col-auto btn-effect h-5"> 64 <div class="col-auto btn-effect h-5">
65 <img 65 <img
66 draggable="false" 66 draggable="false"
67 ondragstart="return false;" 67 ondragstart="return false;"
68 (contextmenu)="false" 68 (contextmenu)="false"
69 class="h-100 d-block mx-auto rotate-90" 69 class="h-100 d-block mx-auto rotate-90"
70 src="assets/img/ir-color.svg" 70 src="assets/img/ir-color.svg"
71 (mousedown)="scrollY(templateCategorias, 100)" 71 (mousedown)="scrollY(templateCategorias, 100)"
72 (mouseup)="mouseup()" 72 (mouseup)="mouseup()"
73 (mouseleave)="mouseup()"> 73 (mouseleave)="mouseup()">
74 </div> 74 </div>
75 </div> 75 </div>
76 </div> 76 </div>
77 <!-- LISTA DE ARTICULOS --> 77 <!-- LISTA DE ARTICULOS -->
78 <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y-visible"> 78 <div class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible">
79 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6"> 79 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
80 <!-- ARTICULO --> 80 <!-- ARTICULO -->
81 <div 81 <div
82 class="col px-2 my-1 my-md-3 h-auto" 82 class="col px-2 my-1 my-md-3 h-auto"
83 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;"> 83 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
84 <div class="swing-in-top-fwd card h-auto"> 84 <div class="swing-in-top-fwd card h-auto">
85 <img 85 <img
86 draggable="false" 86 draggable="false"
87 ondragstart="return false;" 87 ondragstart="return false;"
88 (contextmenu)="false" 88 (contextmenu)="false"
89 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 89 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
90 onerror="this.src='assets/img/image-not-found.jpg'" 90 onerror="this.src='assets/img/image-not-found.jpg'"
91 class="card-img-top h-55 rounded-sm"> 91 class="card-img-top h-55 rounded-sm">
92 <div class="row mx-0 py-1 h-auto justify-content-center"> 92 <div class="row mx-0 py-1 h-auto justify-content-center">
93 <p 93 <p
94 [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}" 94 [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}"
95 class="col-12 px-1 h6 h-auto text-center min-h-60"> 95 class="col-12 px-1 h6 h-auto text-center min-h-60">
96 {{articulo.DetArt}} 96 {{articulo.DetArt}}
97 </p> 97 </p>
98 <p class="col-12 px-1 h-auto text-center line-height-sm min-h-50"> 98 <p class="col-12 px-1 h-auto text-center line-height-sm min-h-50">
99 <small>{{articulo.DET_LAR}}</small> 99 <small>{{articulo.DET_LAR}}</small>
100 </p> 100 </p>
101 <div class="col-12 px-1 align-self-end btn-effect h-auto"> 101 <div class="col-12 px-1 align-self-end btn-effect h-auto">
102 <div 102 <div
103 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}" 103 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}"
104 class="row mx-0 justify-content-between badge-pill" 104 class="row mx-0 justify-content-between badge-pill"
105 (click)="elegirArticulo(articulo)"> 105 (click)="elegirArticulo(articulo)">
106 <div class="col px-0 align-self-center text-white text-right"> 106 <div class="col px-0 align-self-center text-white text-right">
107 {{articulo.PreVen | currency}} 107 {{articulo.PreVen | currency}}
108 </div> 108 </div>
109 <div class="col-5 px-0"> 109 <div class="col-5 px-0">
110 <img 110 <img
111 draggable="false" 111 draggable="false"
112 ondragstart="return false;" 112 ondragstart="return false;"
113 (contextmenu)="false" 113 (contextmenu)="false"
114 class="d-block ml-auto py-1 icon-30" 114 class="d-block ml-auto py-1 icon-30"
115 src="assets/img/ir.svg"> 115 src="assets/img/ir.svg">
116 </div> 116 </div>
117 </div> 117 </div>
118 </div> 118 </div>
119 </div> 119 </div>
120 </div> 120 </div>
121 </div> 121 </div>
122 </div> 122 </div>
123 <!-- BOTON VER MAS --> 123 <!-- BOTON VER MAS -->
124 <div class="row mx-0"> 124 <div class="row mx-0">
125 <div 125 <div
126 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length" 126 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
127 class="col-12 px-0 mb-2"> 127 class="col-12 px-0 mb-2">
128 <button 128 <button
129 (click)="increaseShow()" 129 (click)="increaseShow()"
130 class="btn btn-block btn-outline-primary"> 130 class="btn btn-block btn-outline-primary">
131 Ver Más 131 Ver Más
132 </button> 132 </button>
133 </div> 133 </div>
134 </div> 134 </div>
135 </div> 135 </div>
136 </div> 136 </div>
137 </div> 137 </div>
138 </div> 138 </div>
139 <!-- FOOTER CARRITO DE COMPRAS --> 139 <!-- FOOTER CARRITO DE COMPRAS -->
140 <div class="row w-90 mx-auto h-auto justify-content-center"> 140 <div class="row w-90 mx-auto h-auto justify-content-center">
141 <div class="col-12 h-75 px-0 border border-primary rounded"> 141 <div class="col-12 h-75 px-0 border border-primary rounded">
142 <!-- CABECERA --> 142 <!-- CABECERA -->
143 <div class="row mx-0 h-15 border-bottom border-primary"> 143 <div class="row mx-0 h-15 border-bottom border-primary">
144 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> 144 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
145 </div> 145 </div>
146 <!-- CUERPO --> 146 <!-- CUERPO -->
147 <div class="row h-85 mx-0 justify-content-around"> 147 <div class="row h-85 mx-0 justify-content-around">
148 <!-- BOTON SCROLL IZQUIERDA --> 148 <!-- BOTON SCROLL IZQUIERDA -->
149 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 149 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
150 <img 150 <img
151 draggable="false" 151 draggable="false"
152 ondragstart="return false;" 152 ondragstart="return false;"
153 (contextmenu)="false" 153 (contextmenu)="false"
154 class="icon-30 rotate-180-neg" 154 class="icon-30 rotate-180-neg"
155 src="assets/img/ir-fondo-color.svg" 155 src="assets/img/ir-fondo-color.svg"
156 (mousedown)="scrollX(templateCarrito, -100)" 156 (mousedown)="scrollX(templateCarrito, -100)"
157 (mouseup)="mouseup()" 157 (mouseup)="mouseup()"
158 (mouseleave)="mouseup()"> 158 (mouseleave)="mouseup()">
159 </div> 159 </div>
160 <!-- CARRITO --> 160 <!-- CARRITO -->
161 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100"> 161 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
162 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"> 162 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x">
163 <!-- MENSAJE DE ADVERTENCIA --> 163 <!-- MENSAJE DE ADVERTENCIA -->
164 <div *ngIf="!articuloService.carrito.length" class="col h-100"> 164 <div *ngIf="!articuloService.carrito.length" class="col h-100">
165 <p class="text-center py-5">No hay articulos en el carrito</p> 165 <p class="text-center py-5">No hay articulos en el carrito</p>
166 </div> 166 </div>
167 <!-- ARTICULOS --> 167 <!-- ARTICULOS -->
168 <div 168 <div
169 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary" 169 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
170 *ngFor="let articulo of articuloService.carrito; let i = index;"> 170 *ngFor="let articulo of articuloService.carrito; let i = index;">
171 <div class="swing-in-top-fwd"> 171 <div class="swing-in-top-fwd">
172 <img 172 <img
173 draggable="false" 173 draggable="false"
174 ondragstart="return false;" 174 ondragstart="return false;"
175 (contextmenu)="false" 175 (contextmenu)="false"
176 class="d-block img-fluid p-2 mx-auto rounded" 176 class="d-block img-fluid p-2 mx-auto rounded"
177 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 177 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
178 onerror="this.src='assets/img/image-not-found.jpg'"> 178 onerror="this.src='assets/img/image-not-found.jpg'">
179 <p class="d-block mt-auto text-center text-primary text-truncate"> 179 <p class="d-block mt-auto text-center text-primary text-truncate">
180 <small>{{articulo.DetArt}}</small> 180 <small>{{articulo.DetArt}}</small>
181 </p> 181 </p>
182 </div> 182 </div>
183 </div> 183 </div>
184 </div> 184 </div>
185 </div> 185 </div>
186 <!-- BOTON SCROLL DERECHA --> 186 <!-- BOTON SCROLL DERECHA -->
187 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 187 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
188 <img 188 <img
189 draggable="false" 189 draggable="false"
190 ondragstart="return false;" 190 ondragstart="return false;"
191 (contextmenu)="false" 191 (contextmenu)="false"
192 class="icon-30" 192 class="icon-30"
193 src="assets/img/ir-fondo-color.svg" 193 src="assets/img/ir-fondo-color.svg"
194 (mousedown)="scrollX(templateCarrito, 100)" 194 (mousedown)="scrollX(templateCarrito, 100)"
195 (mouseup)="mouseup()" 195 (mouseup)="mouseup()"
196 (mouseleave)="mouseup()"> 196 (mouseleave)="mouseup()">
197 </div> 197 </div>
198 </div> 198 </div>
199 </div> 199 </div>
200 <!-- VER CARRITO Y TOTAL--> 200 <!-- VER CARRITO Y TOTAL-->
201 <div 201 <div
202 class="col-auto p-0 mt-2 ml-auto h-20" 202 class="col-auto p-0 mt-2 ml-auto h-20"
203 *ngIf="articuloService.carrito.length"> 203 *ngIf="articuloService.carrito.length">
204 <div 204 <div
205 class="btn-effect col-auto align-self-center px-0 bg-white" 205 class="btn-effect col-auto align-self-center px-0 bg-white"
206 [routerLink]="['/carrito']"> 206 [routerLink]="['/carrito']">
207 <div class="row justify-content-between mx-0"> 207 <div class="row justify-content-between mx-0">
208 <div class="col-auto align-self-center text-primary">TOTAL</div> 208 <div class="col-auto align-self-center text-primary">TOTAL</div>
209 <div class="col-auto p-0 bg-primary d-none d-sm-block bg-total"> 209 <div class="col-auto p-0 bg-primary d-none d-sm-block bg-total">
210 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p> 210 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
211 </div> 211 </div>
212 <div class="col-auto align-self-center text-primary ml-2 bg-light">VER CARRITO</div> 212 <div class="col-auto align-self-center text-primary ml-2 bg-light">VER CARRITO</div>
213 <div class="col-auto p-0 bg-primary d-none d-sm-block"> 213 <div class="col-auto p-0 bg-primary d-none d-sm-block">
214 <img 214 <img
215 draggable="false" 215 draggable="false"
216 ondragstart="return false;" 216 ondragstart="return false;"
217 (contextmenu)="false" 217 (contextmenu)="false"
218 class="p-2 icon-40" 218 class="p-2 icon-40"
219 src="assets/img/carrito.svg"> 219 src="assets/img/carrito.svg">
220 </div> 220 </div>
221 </div> 221 </div>
222 </div> 222 </div>
223 </div> 223 </div>
224 224
225 </div> 225 </div>
226 </div> 226 </div>
227 227
228 </div> 228 </div>
229 229