Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit eedab79d123ba2be06bd25595f199ec4bb1f2a81

Authored by Marcelo Puebla
2 parents 0e8f037ca5 032999d5a5
Exists in develop

Merge branch 'develop' into 'develop' 

Develop

See merge request !118
Showing 1 changed file   Show diff stats
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ eedab79
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 align-items-end" 5 <div class="row mx-0 align-items-end"
6 [ngClass]="boxCarrito.classList.contains('media-pantalla') 6 [ngClass]="boxCarrito.classList.contains('media-pantalla')
7 ? 'h-68' : 'h-80'"> 7 ? 'h-68' : 'h-80'">
8 <!-- CABECERA --> 8 <!-- CABECERA -->
9 <div class="row w-100 mx-3 h-auto border border-primary rounded-sm"> 9 <div class="row w-100 mx-3 h-auto border border-primary rounded-sm">
10 <div class="col-12 p-2 align-self-center"> 10 <div class="col-12 p-2 align-self-center">
11 <div class="px-3"> 11 <div class="px-3">
12 <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p> 12 <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
13 </div> 13 </div>
14 </div> 14 </div>
15 </div> 15 </div>
16 <!-- CUERPO --> 16 <!-- CUERPO -->
17 <div class="row w-100 mr-4 h-50 h-md-70" id="content"> 17 <div class="row w-100 mr-4 h-50 h-md-70" id="content">
18 <div class="col-12 h-100 px-0 py-3"> 18 <div class="col-12 h-100 px-0 py-3">
19 <div class="row mx-0 h-100"> 19 <div class="row mx-0 h-100">
20 <app-filtro-categorias 20 <app-filtro-categorias
21 class="col-5 col-sm-3 col-xl-2 h-100" 21 class="col-5 col-sm-3 col-xl-2 h-100"
22 #filtroCategorias 22 #filtroCategorias
23 (getProductos)="getProductos()" 23 (getProductos)="getProductos()"
24 (setProductos)="setProductos()" 24 (setProductos)="setProductos()"
25 (filterItems)="filterItems()"> 25 (filterItems)="filterItems()">
26 </app-filtro-categorias> 26 </app-filtro-categorias>
27 <!-- LISTA DE ARTICULOS --> 27 <!-- LISTA DE ARTICULOS -->
28 <div 28 <div
29 class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible" 29 class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible"
30 (scroll)="scrollEvent($event)"> 30 (scroll)="scrollEvent($event)">
31 <!-- SPINNER --> 31 <!-- SPINNER -->
32 <div 32 <div
33 class="d-flex justify-content-center" 33 class="d-flex justify-content-center"
34 *ngIf="loading"> 34 *ngIf="loading">
35 <div class="spinner-border text-primary mt-5" role="status"> 35 <div class="spinner-border text-primary mt-5" role="status">
36 <span class="sr-only">Loading...</span> 36 <span class="sr-only">Loading...</span>
37 </div> 37 </div>
38 </div> 38 </div>
39 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6"> 39 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
40 <!-- ARTICULO --> 40 <!-- ARTICULO -->
41 <div 41 <div
42 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;" 42 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;"
43 class="col px-2 my-1 my-md-3 h-auto"> 43 class="col px-2 my-1 my-md-3 h-auto">
44 <div 44 <div
45 class="swing-in-top-fwd btn-effect card h-auto" 45 class="swing-in-top-fwd btn-effect card h-auto"
46 (click)="selectArticulo(articulo)"> 46 (click)="selectArticulo(articulo)">
47 <img 47 <img
48 draggable="false" 48 draggable="false"
49 ondragstart="return false;" 49 ondragstart="return false;"
50 (contextmenu)="false" 50 (contextmenu)="false"
51 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 51 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
52 onerror="this.src='assets/img/imagen-no-encontrada.jpg'" 52 onerror="this.src='assets/img/imagen-no-encontrada.jpg'"
53 class="card-img-top w-100 h-auto h-md-55 rounded-sm"> 53 class="card-img-top w-100 h-auto h-md-55 rounded-sm">
54 <div class="row mx-0 py-1 h-auto justify-content-center"> 54 <div class="row mx-0 py-1 h-auto justify-content-center">
55 <p class="col-12 px-1 h6 h-auto text-primary text-center min-h-60"> 55 <p class="col-12 px-1 h6 h-auto text-primary text-center min-h-60">
56 {{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}} 56 {{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}
57 </p> 57 </p>
58 <div class="col-12 px-1 align-self-end h-auto"> 58 <div class="col-12 px-1 align-self-end h-auto">
59 <div class="row mx-0 justify-content-between bg-primary badge-pill"> 59 <div class="row mx-0 justify-content-between bg-primary badge-pill">
60 <div class="col px-0 align-self-center text-white text-right"> 60 <div class="col px-0 align-self-center text-white text-right">
61 {{articulo.PreVen | currency}} 61 {{articulo.PreVen | currency}}
62 </div> 62 </div>
63 <div class="col-5 px-0"> 63 <div class="col-5 px-0">
64 <img 64 <img
65 draggable="false" 65 draggable="false"
66 ondragstart="return false;" 66 ondragstart="return false;"
67 (contextmenu)="false" 67 (contextmenu)="false"
68 class="d-block ml-auto py-1 icon-30" 68 class="d-block ml-auto py-1 icon-30"
69 src="assets/img/ir.svg"> 69 src="assets/img/ir.svg">
70 </div> 70 </div>
71 </div> 71 </div>
72 </div> 72 </div>
73 </div> 73 </div>
74 </div> 74 </div>
75 </div> 75 </div>
76 </div> 76 </div>
77 <!-- BOTON VER MAS --> 77 <!-- BOTON VER MAS -->
78 <div class="row mx-0"> 78 <div class="row mx-0">
79 <div 79 <div
80 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length" 80 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
81 class="col-12 px-0 mb-2"> 81 class="col-12 px-0 mb-2">
82 <button 82 <button
83 (click)="increaseShow()" 83 (click)="increaseShow()"
84 class="btn btn-block btn-outline-primary"> 84 class="btn btn-block btn-outline-primary">
85 Ver Más 85 Ver Más
86 </button> 86 </button>
87 </div> 87 </div>
88 </div> 88 </div>
89 </div> 89 </div>
90 </div> 90 </div>
91 </div> 91 </div>
92 </div> 92 </div>
93 <!-- FOOTER CARRITO DE COMPRAS --> 93 <!-- FOOTER CARRITO DE COMPRAS -->
94 <div class="row w-90 mx-auto h-auto justify-content-center"> 94 <div class="row w-90 mx-auto h-auto justify-content-center">
95 <div class="h-75 px-0 border border-primary rounded" #boxCarrito 95 <div class="h-75 px-0 border border-primary rounded" #boxCarrito
96 [ngClass]="boxCarrito.classList.contains('media-pantalla') 96 [ngClass]="boxCarrito.classList.contains('media-pantalla')
97 ? 'col-8' : 'col-12'" id="boxCarrito"> 97 ? 'col-8' : 'col-12'" id="boxCarrito">
98 <!-- CABECERA --> 98 <!-- CABECERA -->
99 <div class="row mx-0 h-15 border-bottom border-primary"> 99 <div class="row mx-0 h-15 border-bottom border-primary">
100 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> 100 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
101 </div> 101 </div>
102 <!-- CUERPO --> 102 <!-- CUERPO -->
103 <div class="row h-85 mx-0 justify-content-around"> 103 <div class="row h-85 mx-0 justify-content-around">
104 <!-- BOTON SCROLL IZQUIERDA --> 104 <!-- BOTON SCROLL IZQUIERDA -->
105 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 105 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
106 <img 106 <img
107 draggable="false" 107 draggable="false"
108 ondragstart="return false;" 108 ondragstart="return false;"
109 (contextmenu)="false" 109 (contextmenu)="false"
110 class="icon-30 rotate-180-neg" 110 class="icon-30 rotate-180-neg"
111 src="assets/img/ir-fondo-color.svg" 111 src="assets/img/ir-fondo-color.svg"
112 (mousedown)="scrollX(templateCarrito, -100)" 112 (mousedown)="scrollX(templateCarrito, -100)"
113 (mouseup)="mouseup()" 113 (mouseup)="mouseup()"
114 (mouseleave)="mouseup()"> 114 (mouseleave)="mouseup()">
115 </div> 115 </div>
116 <!-- CARRITO --> 116 <!-- CARRITO -->
117 <div class="col-6 col-sm-8 col-lg-10 h-100"> 117 <div class="col-6 col-sm-8 col-lg-10 h-100">
118 <div 118 <div
119 #templateCarrito 119 #templateCarrito
120 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x" 120 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"
121 (scroll)="scrollEvent($event)"> 121 (scroll)="scrollEvent($event)">
122 <!-- ARTICULOS --> 122 <!-- ARTICULOS -->
123 <div 123 <div
124 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary" 124 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
125 *ngFor="let articulo of articuloService.carrito; let i = index;" 125 *ngFor="let articulo of articuloService.carrito; let i = index;"
126 @EnterLeaveY> 126 @EnterLeaveY>
127 <img 127 <img
128 class="btn-effect icon-20 mr-2 position-absolute right-0" 128 class="btn-effect icon-20 mr-2 position-absolute right-0"
129 src="assets/img/icono-cancelar-color.svg" 129 src="assets/img/icono-cancelar-color.svg"
130 (click)="deleteArticulo(i)"> 130 (click)="deleteArticulo(i)">
131 <img 131 <img
132 draggable="false" 132 draggable="false"
133 ondragstart="return false;" 133 ondragstart="return false;"
134 (contextmenu)="false" 134 (contextmenu)="false"
135 class="d-block img-fluid p-2 mx-auto rounded w-100 h-auto" 135 class="d-block img-fluid p-2 mx-auto rounded w-100 h-auto"
136 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 136 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
137 onerror="this.src='assets/img/imagen-no-encontrada.jpg'"> 137 onerror="this.src='assets/img/imagen-no-encontrada.jpg'">
138 <p class="d-block mt-auto text-center text-primary text-truncate"> 138 <p class="d-block mt-auto text-center text-primary text-truncate">
139 <small>{{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}</small> 139 <small>{{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}</small>
140 </p> 140 </p>
141 <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad> 141 <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad>
142 </div> 142 </div>
143 <!-- MENSAJE DE ADVERTENCIA --> 143 <!-- MENSAJE DE ADVERTENCIA -->
144 <div *ngIf="!articuloService.carrito.length" class="col h-100"> 144 <div *ngIf="!articuloService.carrito.length" class="col h-100">
145 <p class="text-center py-5">No hay articulos en el carrito</p> 145 <p class="text-center py-5">No hay artículos en el carrito</p>
146 </div> 146 </div>
147 </div> 147 </div>
148 </div> 148 </div>
149 <!-- BOTON SCROLL DERECHA --> 149 <!-- BOTON SCROLL DERECHA -->
150 <div *ngIf="articuloService.carrito.length" 150 <div *ngIf="articuloService.carrito.length"
151 class="col-auto btn-effect h-20 align-self-center d-contents"> 151 class="col-auto btn-effect h-20 align-self-center d-contents">
152 <img 152 <img
153 draggable="false" 153 draggable="false"
154 ondragstart="return false;" 154 ondragstart="return false;"
155 (contextmenu)="false" 155 (contextmenu)="false"
156 class="icon-30" 156 class="icon-30"
157 src="assets/img/ir-fondo-color.svg" 157 src="assets/img/ir-fondo-color.svg"
158 (mousedown)="scrollX(templateCarrito, 100)" 158 (mousedown)="scrollX(templateCarrito, 100)"
159 (mouseup)="mouseup()" 159 (mouseup)="mouseup()"
160 (mouseleave)="mouseup()"> 160 (mouseleave)="mouseup()">
161 </div> 161 </div>
162 </div> 162 </div>
163 </div> 163 </div>
164 <!-- TOTAL--> 164 <!-- TOTAL-->
165 <div 165 <div
166 class="col-auto mt-2 ml-auto h-20"> 166 class="col-auto mt-2 ml-auto h-20">
167 <div class="row mx-0"> 167 <div class="row mx-0">
168 <div class="col-auto font-weight-bold align-self-center text-primary py-2 h3">TOTAL</div> 168 <div class="col-auto font-weight-bold align-self-center text-primary py-2 h3">TOTAL</div>
169 <div class="col-auto align-self-center bg-primary badge-pill"> 169 <div class="col-auto align-self-center bg-primary badge-pill">
170 <p class="text-center font-weight-bold text-white py-2 h3 px-2">{{articuloService.total | currency}}</p> 170 <p class="text-center font-weight-bold text-white py-2 h3 px-2">{{articuloService.total | currency}}</p>
171 </div> 171 </div>
172 </div> 172 </div>
173 </div> 173 </div>
174 174
175 <!-- VER CARRITO --> 175 <!-- VER CARRITO -->
176 <div 176 <div
177 class="col-auto px-0 h-20" 177 class="col-auto px-0 h-20"
178 *ngIf="articuloService.carrito.length" 178 *ngIf="articuloService.carrito.length"
179 [ngClass]="boxCarrito.classList.contains('media-pantalla') ? 'ml-auto' : 'mt-3'"> 179 [ngClass]="boxCarrito.classList.contains('media-pantalla') ? 'ml-auto' : 'mt-3'">
180 <div 180 <div
181 class="btn-effect col-auto px-0 align-self-center bg-white" 181 class="btn-effect col-auto px-0 align-self-center bg-white"
182 [routerLink]="['/carrito']"> 182 [routerLink]="['/carrito']">
183 <div class="row mx-0 bg-light"> 183 <div class="row mx-0 bg-light">
184 <div class="col-auto p-0 bg-primary"> 184 <div class="col-auto p-0 bg-primary">
185 <img 185 <img
186 draggable="false" 186 draggable="false"
187 ondragstart="return false;" 187 ondragstart="return false;"
188 (contextmenu)="false" 188 (contextmenu)="false"
189 class="p-2 icon-40" 189 class="p-2 icon-40"
190 src="assets/img/carrito.svg"> 190 src="assets/img/carrito.svg">
191 </div> 191 </div>
192 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div> 192 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div>
193 </div> 193 </div>
194 </div> 194 </div>
195 </div> 195 </div>
196 196
197 </div> 197 </div>
198 </div> 198 </div>
199 199
200 </div> 200 </div>
201 201