Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit b17d5cb584f9062785bf704aecde78d60e6f3d11

Authored by Marcelo Puebla
2 parents 77c21febeb b7f1c71d50
Exists in develop

Merge branch 'master' into 'develop' 

Master(benjamin)

See merge request !52
Showing 3 changed files   Show diff stats
src/app/modules/opcion-pedido/opcion-pedido.component.html
Diff comments   View file @ b17d5cb
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <div class="row mx-0 h-15"> 2 <div class="row mx-0 h-20">
3 <div class="col-12 px-0 h-80 my-auto"> 3 <div class="col-12 px-0 h-80 my-auto">
4 <img 4 <img
5 draggable="false" 5 draggable="false"
6 ondragstart="return false;" 6 ondragstart="return false;"
7 (contextmenu)="false" 7 (contextmenu)="false"
8 class="d-block mx-auto h-100" 8 class="d-block mx-auto h-100"
9 src="assets/img/logo-spot.svg"> 9 src="assets/img/logo-spot.svg">
10 </div> 10 </div>
11 </div> 11 </div>
12 <div class="h-85"> 12 <div class="h-100">
13 <div class="h-10"></div>
13 <div class="row mt-5 mx-3 h-auto"> 14 <div class="row mt-5 mx-3 h-auto">
14 <div class="col-12 px-0 py-2 align-self-center"> 15 <div class="col-12 px-0 py-2 align-self-center">
15 <p class="h6 text-truncate text-center">TU PEDIDO ES PARA</p> 16 <p class="col-auto h4 text-truncate text-center">TU PEDIDO ES PARA</p>
16 </div> 17 </div>
17 </div> 18 </div>
18 <div class="row mt-5 h-auto justify-content-center mx-0"> 19 <div class="row mt-5 h-auto justify-content-center mx-0">
19 <div class="col-auto px-0 h-auto align-self-start reduce-card-1"> 20 <div class="col-5 px-0 h-auto align-self-start reduce-card-1">
20 <div 21 <div class="row justify-content-between">
21 class="btn-effect col-auto align-self-center px-0 bg-white" 22 <div class="col-12">
22 (click)="goTo('/seleccion-articulos'); seleccionPedido('false')"> 23 <div
23 <div class="row mx-0 bg-primary badge-pill"> 24 class="btn-effect col-12 px-0 bg-white"
24 <div class="col-auto p-0"> 25 (click)="goTo('/seleccion-articulos'); seleccionPedido('false')">
25 <img 26 <div class="row mx-0 bg-primary badge-pill">
26 draggable="false" 27 <div class="col-2 p-0">
27 ondragstart="return false;" 28 <img
28 (contextmenu)="false" 29 draggable="false"
29 class="p-1 icon-50" 30 ondragstart="return false;"
30 src="assets/img/icono-plato.svg"> 31 (contextmenu)="false"
31 </div> 32 class="p-1 icon-50"
32 <div class="col-auto align-self-center text-white">comer acá</div> 33 src="assets/img/icono-plato.svg">
33 <div class="col-auto align-self-center p-0"> 34 </div>
34 <img 35 <div class="col-8 align-self-center text-center text-white">comer acá</div>
35 draggable="false" 36 <div class="col-2 align-self-center p-0">
36 ondragstart="return false;" 37 <img
37 (contextmenu)="false" 38 draggable="false"
38 class="p-1 icon-30" 39 ondragstart="return false;"
39 src="assets/img/ir.svg"> 40 (contextmenu)="false"
41 class="p-1 icon-30"
42 src="assets/img/ir.svg">
43 </div>
44 </div>
40 </div> 45 </div>
41 </div> 46 </div>
42 </div> 47 </div>
43 </div> 48 </div>
44 </div> 49 </div>
45 <div class="row mt-4 h-auto justify-content-center mx-0"> 50 <div class="row mt-5 h-auto justify-content-center mx-0">
46 <div class="col-auto px-0 h-auto align-self-start reduce-card-2"> 51 <div class="col-5 px-0 h-auto align-self-start reduce-card-2">
47 <div 52 <div class="row justify-content-between">
48 class="btn-effect col-auto align-self-center px-0 bg-white" 53 <div class="col-12">
49 (click)="goTo('/seleccion-articulos'); seleccionPedido('true')"> 54 <div
50 <div class="row mx-0 bg-primary badge-pill"> 55 class="btn-effect col-12 align-self-center px-0 bg-white"
51 <div class="col-auto p-0"> 56 (click)="goTo('/seleccion-articulos'); seleccionPedido('true')">
52 <img 57 <div class="row mx-0 bg-primary badge-pill">
53 draggable="false" 58 <div class="col-2 p-0">
54 ondragstart="return false;" 59 <img
55 (contextmenu)="false" 60 draggable="false"
56 class="p-1 icon-50" 61 ondragstart="return false;"
57 src="assets/img/icono-take-away.svg"> 62 (contextmenu)="false"
58 </div> 63 class="p-1 icon-50"
59 <div class="col-auto align-self-center text-white">para llevar</div> 64 src="assets/img/icono-take-away.svg">
60 <div class="col-auto align-self-center p-0"> 65 </div>
61 <img 66 <div class="col-8 align-self-center text-center text-white">para llevar</div>
62 draggable="false" 67 <div class="col-2 align-self-center p-0">
63 ondragstart="return false;" 68 <img
64 (contextmenu)="false" 69 draggable="false"
65 class="p-1 icon-30" 70 ondragstart="return false;"
66 src="assets/img/ir.svg"> 71 (contextmenu)="false"
72 class="p-1 icon-30"
73 src="assets/img/ir.svg">
74 </div>
75 </div>
67 </div> 76 </div>
68 </div> 77 </div>
69 </div> 78 </div>
79
70 </div> 80 </div>
71 </div> 81 </div>
72 </div> 82 </div>
73 </div> 83 </div>
74 84
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ b17d5cb
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-50 h-md-70" id="content"> 15 <div class="row w-100 mr-4 h-50 h-md-70" id="content">
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 cat-btn"> 22 <div class="col-auto btn-effect h-5 cat-btn">
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 36 class="col-12 px-0 box-categorias border border-primary py-1
37 border-left-0 rounded-right scroll-y cat-box" 37 border-left-0 rounded-right scroll-y cat-box"
38 (scroll)="scrollEvent($event)"> 38 (scroll)="scrollEvent($event)">
39 <div 39 <div
40 class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content" 40 class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"
41 [ngClass]="{ 'active rounded-sm shadow': allActive, 'border-bottom-effect': !allActive, 41 [ngClass]="{ 'active rounded-sm shadow': allActive, 'border-bottom-effect': !allActive,
42 'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }" 42 'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }"
43 (click)="selectCategoria(-1, 0)"> 43 (click)="selectCategoria(-1, 0)">
44 <img 44 <img
45 draggable="false" 45 draggable="false"
46 ondragstart="return false;" 46 ondragstart="return false;"
47 (contextmenu)="false" 47 (contextmenu)="false"
48 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle" 48 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
49 src="assets/img/logo-spot.svg"> 49 src="assets/img/logo-spot.svg">
50 <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">Todos</small> 50 <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">Todos</small>
51 </div> 51 </div>
52 <div 52 <div
53 class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content" 53 class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"
54 [ngClass]="{ 'active rounded-sm shadow': categoria.selected, 'border-bottom-effect': !categoria.selected, 54 [ngClass]="{ 'active rounded-sm shadow': categoria.selected, 'border-bottom-effect': !categoria.selected,
55 'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }" 55 'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }"
56 (click)="selectCategoria(i, categoria.id)" 56 (click)="selectCategoria(i, categoria.id)"
57 *ngFor="let categoria of categorias; let i = index;"> 57 *ngFor="let categoria of categorias; let i = index;">
58 <img 58 <img
59 draggable="false" 59 draggable="false"
60 ondragstart="return false;" 60 ondragstart="return false;"
61 (contextmenu)="false" 61 (contextmenu)="false"
62 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle img-categoria" 62 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle img-categoria"
63 [ngClass]="{'media-pantalla' : boxCarrito.classList.contains('media-pantalla')}" 63 [ngClass]="{'media-pantalla' : boxCarrito.classList.contains('media-pantalla')}"
64 src="{{urlImagenes}}{{categoria.path_imagen}}" 64 src="{{urlImagenes}}{{categoria.path_imagen}}"
65 onerror="this.src='assets/img/image-not-found.jpg'"> 65 onerror="this.src='assets/img/image-not-found.jpg'">
66 <small class="col-12 px-1 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small> 66 <small class="col-12 px-1 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
67 </div> 67 </div>
68 </div> 68 </div>
69 <div class="col-auto btn-effect h-5 cat-btn"> 69 <div class="col-auto btn-effect h-5 cat-btn">
70 <img 70 <img
71 draggable="false" 71 draggable="false"
72 ondragstart="return false;" 72 ondragstart="return false;"
73 (contextmenu)="false" 73 (contextmenu)="false"
74 class="h-100 d-block mx-auto rotate-90" 74 class="h-100 d-block mx-auto rotate-90"
75 src="assets/img/ir-color.svg" 75 src="assets/img/ir-color.svg"
76 (mousedown)="scrollY(templateCategorias, 100)" 76 (mousedown)="scrollY(templateCategorias, 100)"
77 (mouseup)="mouseup()" 77 (mouseup)="mouseup()"
78 (mouseleave)="mouseup()"> 78 (mouseleave)="mouseup()">
79 </div> 79 </div>
80 </div> 80 </div>
81 </div> 81 </div>
82 <!-- LISTA DE ARTICULOS --> 82 <!-- LISTA DE ARTICULOS -->
83 <div 83 <div
84 class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible" 84 class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible"
85 (scroll)="scrollEvent($event)"> 85 (scroll)="scrollEvent($event)">
86 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6"> 86 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
87 <!-- ARTICULO --> 87 <!-- ARTICULO -->
88 <div 88 <div
89 class="col px-2 my-1 my-md-3 h-auto" 89 class="col px-2 my-1 my-md-3 h-auto"
90 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;"> 90 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
91 <div 91 <div
92 class="swing-in-top-fwd btn-effect card h-auto" 92 class="swing-in-top-fwd btn-effect card h-auto"
93 (click)="selectArticulo(articulo)"> 93 (click)="selectArticulo(articulo)">
94 <img 94 <img
95 draggable="false" 95 draggable="false"
96 ondragstart="return false;" 96 ondragstart="return false;"
97 (contextmenu)="false" 97 (contextmenu)="false"
98 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 98 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
99 onerror="this.src='assets/img/image-not-found.jpg'" 99 onerror="this.src='assets/img/image-not-found.jpg'"
100 class="card-img-top h-30 h-md-55 rounded-sm"> 100 class="card-img-top h-30 h-md-55 rounded-sm">
101 <div class="row mx-0 py-1 h-auto justify-content-center"> 101 <div class="row mx-0 py-1 h-auto justify-content-center">
102 <p 102 <p
103 [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}" 103 [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}"
104 class="col-12 px-1 h6 h-auto text-center min-h-60"> 104 class="col-12 px-1 h6 h-auto text-center min-h-60">
105 {{articulo.DetArt.toUpperCase()}} 105 {{articulo.DetArt.toUpperCase()}}
106 </p> 106 </p>
107 <div class="col-12 px-1 align-self-end h-auto"> 107 <div class="col-12 px-1 align-self-end h-auto">
108 <div 108 <div
109 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}" 109 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}"
110 class="row mx-0 justify-content-between badge-pill"> 110 class="row mx-0 justify-content-between badge-pill">
111 <div class="col px-0 align-self-center text-white text-right"> 111 <div class="col px-0 align-self-center text-white text-right">
112 {{articulo.PreVen | currency}} 112 {{articulo.PreVen | currency}}
113 </div> 113 </div>
114 <div class="col-5 px-0"> 114 <div class="col-5 px-0">
115 <img 115 <img
116 draggable="false" 116 draggable="false"
117 ondragstart="return false;" 117 ondragstart="return false;"
118 (contextmenu)="false" 118 (contextmenu)="false"
119 class="d-block ml-auto py-1 icon-30" 119 class="d-block ml-auto py-1 icon-30"
120 src="assets/img/ir.svg"> 120 src="assets/img/ir.svg">
121 </div> 121 </div>
122 </div> 122 </div>
123 </div> 123 </div>
124 </div> 124 </div>
125 </div> 125 </div>
126 </div> 126 </div>
127 </div> 127 </div>
128 <!-- BOTON VER MAS --> 128 <!-- BOTON VER MAS -->
129 <div class="row mx-0"> 129 <div class="row mx-0">
130 <div 130 <div
131 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length" 131 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
132 class="col-12 px-0 mb-2"> 132 class="col-12 px-0 mb-2">
133 <button 133 <button
134 (click)="increaseShow()" 134 (click)="increaseShow()"
135 class="btn btn-block btn-outline-primary"> 135 class="btn btn-block btn-outline-primary">
136 Ver Más 136 Ver Más
137 </button> 137 </button>
138 </div> 138 </div>
139 </div> 139 </div>
140 </div> 140 </div>
141 </div> 141 </div>
142 </div> 142 </div>
143 </div> 143 </div>
144 <!-- FOOTER CARRITO DE COMPRAS --> 144 <!-- FOOTER CARRITO DE COMPRAS -->
145 <div class="row w-90 mx-auto h-auto justify-content-center"> 145 <div class="row w-90 mx-auto h-auto justify-content-center">
146 <div class="h-75 px-0 border border-primary rounded" #boxCarrito 146 <div class="h-75 px-0 border border-primary rounded" #boxCarrito
147 [ngClass]="boxCarrito.classList.contains('media-pantalla') 147 [ngClass]="boxCarrito.classList.contains('media-pantalla')
148 ? 'col-8' : 'col-12'" id="boxCarrito"> 148 ? 'col-8' : 'col-12'" id="boxCarrito">
149 <!-- CABECERA --> 149 <!-- CABECERA -->
150 <div class="row mx-0 h-15 border-bottom border-primary"> 150 <div class="row mx-0 h-15 border-bottom border-primary">
151 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> 151 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
152 </div> 152 </div>
153 <!-- CUERPO --> 153 <!-- CUERPO -->
154 <div class="row h-85 mx-0 justify-content-around"> 154 <div class="row h-85 mx-0 justify-content-around">
155 <!-- BOTON SCROLL IZQUIERDA --> 155 <!-- BOTON SCROLL IZQUIERDA -->
156 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 156 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
157 <img 157 <img
158 draggable="false" 158 draggable="false"
159 ondragstart="return false;" 159 ondragstart="return false;"
160 (contextmenu)="false" 160 (contextmenu)="false"
161 class="icon-30 rotate-180-neg" 161 class="icon-30 rotate-180-neg"
162 src="assets/img/ir-fondo-color.svg" 162 src="assets/img/ir-fondo-color.svg"
163 (mousedown)="scrollX(templateCarrito, -100)" 163 (mousedown)="scrollX(templateCarrito, -100)"
164 (mouseup)="mouseup()" 164 (mouseup)="mouseup()"
165 (mouseleave)="mouseup()"> 165 (mouseleave)="mouseup()">
166 </div> 166 </div>
167 <!-- CARRITO --> 167 <!-- CARRITO -->
168 <div class="col-6 col-sm-8 col-lg-10 h-100"> 168 <div class="col-6 col-sm-8 col-lg-10 h-100">
169 <div 169 <div
170 #templateCarrito 170 #templateCarrito
171 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x" 171 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"
172 (scroll)="scrollEvent($event)"> 172 (scroll)="scrollEvent($event)">
173 <!-- MENSAJE DE ADVERTENCIA --> 173 <!-- MENSAJE DE ADVERTENCIA -->
174 <div *ngIf="!articuloService.carrito.length" class="col h-100"> 174 <div *ngIf="!articuloService.carrito.length" class="col h-100">
175 <p class="text-center py-5">No hay articulos en el carrito</p> 175 <p class="text-center py-5">No hay articulos en el carrito</p>
176 </div> 176 </div>
177 <!-- ARTICULOS --> 177 <!-- ARTICULOS -->
178 <div 178 <div
179 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary" 179 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
180 *ngFor="let articulo of articuloService.carrito; let i = index;"> 180 *ngFor="let articulo of articuloService.carrito; let i = index;">
181 <div class="swing-in-top-fwd"> 181 <div class="swing-in-top-fwd">
182 <img 182 <img
183 class="btn-effect icon-20 position-absolute right-0" 183 class="btn-effect icon-20 position-absolute right-0"
184 src="assets/img/icono-cancelar-color.svg" 184 src="assets/img/icono-cancelar-color.svg"
185 (click)="deleteArticulo(i)"> 185 (click)="deleteArticulo(i)">
186 <img 186 <img
187 draggable="false" 187 draggable="false"
188 ondragstart="return false;" 188 ondragstart="return false;"
189 (contextmenu)="false" 189 (contextmenu)="false"
190 class="d-block img-fluid p-2 mx-auto rounded" 190 class="d-block img-fluid p-2 mx-auto rounded"
191 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 191 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
192 onerror="this.src='assets/img/image-not-found.jpg'"> 192 onerror="this.src='assets/img/image-not-found.jpg'">
193 <p class="d-block mt-auto text-center text-primary text-truncate"> 193 <p class="d-block mt-auto text-center text-primary text-truncate">
194 <small>{{articulo.DetArt}}</small> 194 <small>{{articulo.DetArt}}</small>
195 </p> 195 </p>
196 </div> 196 </div>
197 </div> 197 </div>
198 </div> 198 </div>
199 </div> 199 </div>
200 <!-- BOTON SCROLL DERECHA --> 200 <!-- BOTON SCROLL DERECHA -->
201 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 201 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
202 <img 202 <img
203 draggable="false" 203 draggable="false"
204 ondragstart="return false;" 204 ondragstart="return false;"
205 (contextmenu)="false" 205 (contextmenu)="false"
206 class="icon-30" 206 class="icon-30"
207 src="assets/img/ir-fondo-color.svg" 207 src="assets/img/ir-fondo-color.svg"
208 (mousedown)="scrollX(templateCarrito, 100)" 208 (mousedown)="scrollX(templateCarrito, 100)"
209 (mouseup)="mouseup()" 209 (mouseup)="mouseup()"
210 (mouseleave)="mouseup()"> 210 (mouseleave)="mouseup()">
211 </div> 211 </div>
212 </div> 212 </div>
213 </div> 213 </div>
214 <!-- TOTAL--> 214 <!-- TOTAL-->
215 <div 215 <div
216 class="col-auto mt-2 ml-auto h-20"> 216 class="col-auto mt-2 ml-auto h-20">
217 <div class="row mx-0"> 217 <div class="row mx-0">
218 <div class="col-auto align-self-center text-primary">TOTAL</div> 218 <div class="col-auto align-self-center text-primary">TOTAL</div>
219 <div class="col-auto bg-primary badge-pill"> 219 <div class="col-auto bg-primary badge-pill">
220 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p> 220 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
221 </div> 221 </div>
222 </div> 222 </div>
223 </div> 223 </div>
224 224
225 <!-- VER CARRITO --> 225 <!-- VER CARRITO -->
226 <div 226 <div
227 class="col-auto px-0 mt-2 h-20" 227 class="col-auto px-0 mt-2 h-20"
228 *ngIf="articuloService.carrito.length" 228 *ngIf="articuloService.carrito.length"
229 [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}"> 229 [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}">
230 <div 230 <div
231 class="btn-effect col-auto px-0 align-self-center bg-white" 231 class="btn-effect col-auto px-0 align-self-center bg-white"
232 [routerLink]="['/carrito']"> 232 [routerLink]="['/carrito']">
233 <div class="row mx-0 bg-light"> 233 <div class="row mx-0 bg-light">
234 <div class="col-auto p-0 bg-primary"> 234 <div class="col-auto p-0 bg-primary">
235 <img 235 <img
236 draggable="false" 236 draggable="false"
237 ondragstart="return false;" 237 ondragstart="return false;"
238 (contextmenu)="false" 238 (contextmenu)="false"
239 class="p-2 icon-40" 239 class="p-2 icon-40"
240 src="assets/img/carrito.svg"> 240 src="assets/img/carrito.svg">
241 </div> 241 </div>
242 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div> 242 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div>
243 </div> 243 </div>
244 </div> 244 </div>
245 </div> 245 </div>
246 246
247 </div> 247 </div>
248 </div> 248 </div>
249 249
250 </div> 250 </div>
251 251
src/app/shared/header-publicidad/header-publicidad.component.ts
Diff comments   View file @ b17d5cb
1 import { Component, OnInit, TemplateRef } from '@angular/core'; 1 import { Component, OnInit, TemplateRef } from '@angular/core';
2 import { APP_SETTINGS } from 'src/etc/AppSettings'; 2 import { APP_SETTINGS } from 'src/etc/AppSettings';
3 import { IPublicidad } from 'src/app/interfaces/IPublicidad'; 3 import { IPublicidad } from 'src/app/interfaces/IPublicidad';
4 import { PublicidadService } from 'src/app/services/publicidad/publicidad.service'; 4 import { PublicidadService } from 'src/app/services/publicidad/publicidad.service';
5 import { IArticulo } from 'src/app/interfaces/IArticulo'; 5 import { IArticulo } from 'src/app/interfaces/IArticulo';
6 import { PromocionComponent } from '../promocion/promocion.component'; 6 import { PromocionComponent } from '../promocion/promocion.component';
7 import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal'; 7 import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
8 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 8 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
9 import { ConfirmacionComponent } from '../confirmacion/confirmacion.component'; 9 import { ConfirmacionComponent } from '../confirmacion/confirmacion.component';
10 import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';
11 import { ISinonimo } from 'src/app/interfaces/ISinonimo';
12 import { SinonimoComponent } from '../sinonimo/sinonimo.component';
10 13
11 @Component({ 14 @Component({
12 selector: 'app-header-publicidad', 15 selector: 'app-header-publicidad',
13 templateUrl: './header-publicidad.component.html', 16 templateUrl: './header-publicidad.component.html',
14 styleUrls: ['./header-publicidad.component.scss'] 17 styleUrls: ['./header-publicidad.component.scss']
15 }) 18 })
16 export class HeaderPublicidadComponent implements OnInit { 19 export class HeaderPublicidadComponent implements OnInit {
17 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 20 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
18 publicidades: IPublicidad[] = []; 21 publicidades: IPublicidad[] = [];
19 modalRef: BsModalRef; 22 modalRef: BsModalRef;
20 23
21 constructor( 24 constructor(
22 private publicidadService: PublicidadService, 25 private publicidadService: PublicidadService,
23 private articuloService: ArticuloService, 26 private articuloService: ArticuloService,
24 private modalService: BsModalService, 27 private modalService: BsModalService,
28 private sinonimoService: SinonimoService
25 ) { } 29 ) { }
26 30
27 ngOnInit() { 31 ngOnInit() {
28 this.getPublicidades(); 32 this.getPublicidades();
29 this.mediaPantalla(); 33 this.mediaPantalla();
30 } 34 }
31 35
32 getPublicidades() { 36 getPublicidades() {
33 this.publicidadService.getAll() 37 this.publicidadService.getAll()
34 .subscribe((res: IPublicidad[]) => { 38 .subscribe((res: IPublicidad[]) => {
35 this.publicidades = res; 39 this.publicidades = res;
36 }, err => console.error(err)); 40 }, err => console.error(err));
37 } 41 }
38 42
39 elegirArticulo(publicidad: IPublicidad) { 43 elegirArticulo(publicidad: IPublicidad) {
40 if (publicidad.id_articulo) this.getByID(publicidad.id_articulo); 44 if (publicidad.id_articulo) this.getByID(publicidad.id_articulo);
41 } 45 }
42 46
43 getByID(id: number) { 47 getByID(id: number) {
44 this.articuloService.getById(id) 48 this.articuloService.getById(id)
45 .subscribe((res: IArticulo) => { 49 .subscribe((res: IArticulo) => {
46 if (res.FPP) { 50 if (res.FPP) {
47 this.openModalPromos(res); 51 this.openModalPromos(res);
48 return; 52 return;
49 } else { 53 } else {
50 this.openModalConfirmacion(res); 54 this.openModalConfirmacion(res);
51 return; 55 return;
52 } 56 }
53 }, err => console.error(err)); 57 }, err => console.error(err));
54 } 58 }
55 59
56 openModalPromos(articulo: IArticulo) { 60 openModalPromos(articulo: IArticulo) {
57 this.modalRef = this.modalService.show(PromocionComponent, 61 this.modalRef = this.modalService.show(PromocionComponent,
58 { 62 {
59 initialState: { 63 initialState: {
60 idArticulo: articulo.id 64 idArticulo: articulo.id
61 }, 65 },
62 class: 'modal-promo modal-dialog-centered' 66 class: 'modal-promo modal-dialog-centered'
63 }); 67 });
64 } 68 }
65 69
66 openModalConfirmacion(articulo: IArticulo) { 70 openModalConfirmacion(articulo: IArticulo) {
67 this.modalRef = this.modalService.show(ConfirmacionComponent, 71 this.modalRef = this.modalService.show(ConfirmacionComponent,
68 { 72 {
69 initialState: { 73 initialState: {
70 titleMessage: articulo.DET_LAR, 74 titleMessage: articulo.DET_LAR,
71 imagenPath: articulo.imagenes.length ? articulo.imagenes[0].imagen : '', 75 imagenPath: articulo.imagenes.length ? articulo.imagenes[0].imagen : '',
72 footerMessageFirst: `¿DESEA AGREGAR ESTE ARTÍCULO`, 76 footerMessageFirst: `¿DESEA AGREGAR ESTE ARTÍCULO`,
73 footerMessageSecond: `a su carrito?`, 77 footerMessageSecond: `a su carrito?`,
74 footerConfirmation: articulo.PreVen, 78 footerConfirmation: articulo.PreVen,
75 footerClose: `volver` 79 footerClose: `volver`
76 }, 80 },
77 class: 'modal-promo modal-dialog-centered' 81 class: 'modal-promo modal-dialog-centered'
78 }); 82 });
79 this.modalRef.content.onClose.subscribe(() => { 83 this.modalRef.content.onClose.subscribe(() => {
80 this.articuloService.setArticulo(articulo); 84 this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt)
85 .subscribe((res: ISinonimo[]) => {
86 if (res.length) {
87 this.openModalSinonimos(res, articulo);
88 } else {
89 articulo.cantidad = 1;
90 this.articuloService.setArticulo(articulo);
91 }
92 }, err => console.error(err));
81 }); 93 });
94 this.mediaPantalla();
82 } 95 }
83 96
97 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
98 const modalSinonimo = this.modalService.show(SinonimoComponent, {
99 initialState: { sinonimos: sinonimosData },
100 class: 'modal-promo modal-dialog-centered'
101 });
102 modalSinonimo.content.onClose
103 .subscribe((res: any) => {
104 for (const a of articulo.productos) {
105 if (a.idSinonimo === res.ID_SIN) {
106 a.CODA = res.articulo.CodArt;
107 a.CodArt = res.articulo.CodArt;
108 a.SECA = res.articulo.CodSec;
109 a.CodSec = res.articulo.CodSec;
110 a.PreVen = res.articulo.PreVen;
111 a.id = res.articulo.id;
112 a.DET_LAR = res.articulo.DET_LAR;
113 a.DetArt = res.articulo.DetArt;
114 }
115 }
116 this.articuloService.setArticulo(articulo);
117 });
118 }
119
84 mediaPantalla() { 120 mediaPantalla() {
85 if ($('body').hasClass('media-pantalla')) { 121 if ($('body').hasClass('media-pantalla')) {
86 $('#headerPublicidad,#headerPad').addClass('media-pantalla'); 122 $('#headerPublicidad,#headerPad').addClass('media-pantalla');
87 } 123 }
88 } 124 }
89 } 125 }
90 126