Marcelo Puebla / autoservicio-axion

Download as
Browse Code »

Commit ae093e9b0133bf06bd6a9d9a4134b1737704650a

Authored by Marcelo Puebla
2 parents d9fcd2be65 7997e6b456
Exists in develop

Merge branch 'develop' into 'develop' 

Develop

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