Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit db93fd5f319547c9409f00b8d2e92b08a36ad791

Authored by Marcelo Puebla
2 parents d0335a6992 e1403fb086
Exists in develop

Merge branch 'develop' of git.focasoftware.com:angular/autoservicio-axion into develop

Showing 4 changed files   Show diff stats
src/app/modules/carrito/carrito.component.html
Diff comments   View file @ db93fd5
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="h-75"> 5 <div class="h-75">
6 <!-- CABECERA --> 6 <!-- CABECERA -->
7 <div class="row mx-3 h-auto border border-primary rounded-sm"> 7 <div class="row mx-3 h-auto border border-primary rounded-sm">
8 <div class="col-12 px-0 py-2 align-self-center"> 8 <div class="col-12 px-0 py-2 align-self-center">
9 <div class="px-3"> 9 <div class="px-3">
10 <p class="h6 text-truncate">ESTE ES TÚ CARRITO DE COMPRAS</p> 10 <p class="h6 text-truncate">ESTE ES TÚ CARRITO DE COMPRAS</p>
11 </div> 11 </div>
12 </div> 12 </div>
13 </div> 13 </div>
14 14
15 <!-- CARRITO --> 15 <!-- CARRITO -->
16 <div 16 <div
17 class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y-visible" 17 class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y-visible"
18 (scroll)="scrollEvent($event)"> 18 (scroll)="scrollEvent($event)">
19 <!-- MENSAJE DE ADVERTENCIA --> 19 <!-- MENSAJE DE ADVERTENCIA -->
20 <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length"> 20 <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length">
21 <p class="h5 text-center">No hay artículos en el carrito</p> 21 <p class="h5 text-center">No hay artículos en el carrito</p>
22 </div> 22 </div>
23 <!-- ARTICULOS --> 23 <!-- ARTICULOS -->
24 <div 24 <div
25 class="col-12 col-xl-6 p-2 h-25 text-center text-truncate" 25 class="col-12 col-xl-6 p-2 h-25 text-center text-truncate"
26 *ngFor="let articulo of articuloService.carrito; let i = index;" 26 *ngFor="let articulo of articuloService.carrito; let i = index;"
27 @EnterLeave> 27 @EnterLeave>
28 <!-- ARTICULO --> 28 <!-- ARTICULO -->
29 <div class="h-100 px-2 py-4 border border-primary rounded-sm"> 29 <div class="h-100 px-2 py-4 border border-primary rounded-sm">
30 <div class="row mx-0 h-100"> 30 <div class="row mx-0 h-100">
31 <!-- NOMBRE E IMAGEN --> 31 <!-- NOMBRE E IMAGEN -->
32 <div class="col-3 h-100 border-right border-primary align-self-center"> 32 <div class="col-3 h-100 border-right border-primary align-self-center">
33 <img 33 <img
34 draggable="false" 34 draggable="false"
35 ondragstart="return false;" 35 ondragstart="return false;"
36 (contextmenu)="false" 36 (contextmenu)="false"
37 class="d-block mx-auto h-55 rounded-sm shadow-sm" 37 class="d-block mx-auto h-55 rounded-sm shadow-sm"
38 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 38 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
39 onerror="this.src='assets/img/image-not-found.jpg'"> 39 onerror="this.src='assets/img/image-not-found.jpg'">
40 <div class="row mx-0 h-45"> 40 <div class="row mx-0 h-45">
41 <p class="col text-primary text-truncate align-self-end"> 41 <p class="col text-primary text-truncate align-self-end">
42 <small>{{articulo.DetArt}}</small> 42 <small>{{articulo.DetArt}}</small>
43 </p> 43 </p>
44 </div> 44 </div>
45 </div> 45 </div>
46 <!-- CANTIDAD --> 46 <!-- CANTIDAD -->
47 <div class="col-3 border-right border-primary"> 47 <div class="col-3 border-right border-primary">
48 <p><small>CANT</small></p> 48 <p><small>CANT</small></p>
49 <div class="row mt-2 mx-0"> 49 <div class="row mt-2 mx-0">
50 <div class="col-12 h-auto"> 50 <div class="col-12 h-auto">
51 <div class="row mx-0 justify-content-between bg-primary badge-pill"> 51 <div class="row mx-0 justify-content-between bg-primary badge-pill">
52 <!-- BOTON MENOS --> 52 <!-- BOTON MENOS -->
53 <div class="col-auto px-0"> 53 <div class="col-auto px-0">
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="d-block ml-auto py-2 icon-20 btn-effect" 58 class="d-block ml-auto py-2 icon-20 btn-effect"
59 src="assets/img/menos-blanco.svg" 59 src="assets/img/menos-blanco.svg"
60 (click)="substractCant(articulo)"> 60 (click)="substractCant(articulo)">
61 </div> 61 </div>
62 <!-- CANTIDAD --> 62 <!-- CANTIDAD -->
63 <div class="col px-0 align-self-center text-white"> 63 <div class="col px-0 align-self-center text-white">
64 <p><small>{{articulo.cantidad}}</small></p> 64 <p><small>{{articulo.cantidad}}</small></p>
65 </div> 65 </div>
66 <!-- BOTON MAS --> 66 <!-- BOTON MAS -->
67 <div class="col-auto px-0"> 67 <div class="col-auto px-0">
68 <img 68 <img
69 draggable="false" 69 draggable="false"
70 ondragstart="return false;" 70 ondragstart="return false;"
71 (contextmenu)="false" 71 (contextmenu)="false"
72 class="d-block ml-auto py-2 icon-20 btn-effect" 72 class="d-block ml-auto py-2 icon-20 btn-effect"
73 src="assets/img/mas-blanco.svg" 73 src="assets/img/mas-blanco.svg"
74 (click)="addCant(articulo)"> 74 (click)="addCant(articulo)">
75 </div> 75 </div>
76 </div> 76 </div>
77 </div> 77 </div>
78 </div> 78 </div>
79 </div> 79 </div>
80 <!-- OPCIONALES --> 80 <!-- OPCIONALES -->
81 <!-- <div class="col-3 border-right border-primary"> 81 <!-- <div class="col-3 border-right border-primary">
82 <p><small>OPCIONALES</small></p> 82 <p><small>OPCIONALES</small></p>
83 <div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div> 83 <div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div>
84 <div class="row mx-0 mt-2 justify-content-center"> 84 <div class="row mx-0 mt-2 justify-content-center">
85 <div class="col-auto pl-3 btn-effect bg-primary badge-pill text-white"> 85 <div class="col-auto pl-3 btn-effect bg-primary badge-pill text-white">
86 <span> 86 <span>
87 <small class="pr-2">CAMBIAR</small> 87 <small class="pr-2">CAMBIAR</small>
88 <img 88 <img
89 draggable="false" 89 draggable="false"
90 ondragstart="return false;" 90 ondragstart="return false;"
91 (contextmenu)="false" 91 (contextmenu)="false"
92 class="icon-20" 92 class="icon-20"
93 src="assets/img/ir.svg"> 93 src="assets/img/ir.svg">
94 </span> 94 </span>
95 </div> 95 </div>
96 </div> --> 96 </div> -->
97 <!-- PRECIO --> 97 <!-- PRECIO -->
98 <div class="col-3 border-right border-primary"> 98 <div class="col-3 border-right border-primary">
99 <p><small>PRECIO</small></p> 99 <p><small>PRECIO</small></p>
100 <div class="py-1 mt-2 badge-pill bg-dark text-white"> 100 <div class="py-1 mt-2 badge-pill bg-dark text-white">
101 <p><small>{{articulo.PreVen | currency}}</small></p> 101 <p><small>{{articulo.PreVen | currency}}</small></p>
102 </div> 102 </div>
103 </div> 103 </div>
104 <!-- ELIMINAR --> 104 <!-- ELIMINAR -->
105 <div class="col-3 align-self-center"> 105 <div class="col-3 align-self-center">
106 <div class="row mx-0 justify-content-center"> 106 <div class="row mx-0 justify-content-center">
107 <div 107 <div
108 class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white" 108 class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white"
109 (click)="deleteArticulo(i)"> 109 (click)="deleteArticulo(i)">
110 <span> 110 <span>
111 <small class="pr-2">ELIMINAR</small> 111 <small class="pr-2">ELIMINAR</small>
112 <img 112 <img
113 draggable="false" 113 draggable="false"
114 ondragstart="return false;" 114 ondragstart="return false;"
115 (contextmenu)="false" 115 (contextmenu)="false"
116 class="icon-20 rotate-45" 116 class="icon-20 rotate-45"
117 src="assets/img/mas-blanco.svg"> 117 src="assets/img/mas-blanco.svg">
118 </span> 118 </span>
119 </div> 119 </div>
120 </div> 120 </div>
121 </div> 121 </div>
122 </div> 122 </div>
123 </div> 123 </div>
124 </div> 124 </div>
125 </div> 125 </div>
126 <!-- TOTAL --> 126 <!-- TOTAL -->
127 <div class="row mx-3 mt-2 h-auto justify-content-end"> 127 <div class="row mx-3 mt-2 h-auto justify-content-end">
128 <div class="col-auto align-self-center text-primary"><small>TOTAL</small></div> 128 <div class="col-auto align-self-center text-primary"><small>TOTAL</small></div>
129 <div class="col-auto p-0 bg-primary d-none d-sm-block bg-total"> 129 <div class="col-2 p-0 bg-primary d-none d-sm-block bg-total">
130 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p> 130 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
131 </div> 131 </div>
132 </div> 132 </div>
133 <!-- CONTINUAR --> 133 <!-- CONTINUAR -->
134 <div 134 <div
135 *ngIf="articuloService.carrito.length" 135 *ngIf="articuloService.carrito.length"
136 class="row mx-3 mt-4 h-auto justify-content-end"> 136 class="row mx-3 mt-4 h-auto justify-content-end">
137 <div 137 <div
138 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" 138 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
139 [routerLink]="['/forma-pago']"> 139 [routerLink]="['/forma-pago']">
140 <span> 140 <span>
141 <small class="pr-2">CONTINUAR</small> 141 <small class="pr-2">CONTINUAR</small>
142 <img 142 <img
143 draggable="false" 143 draggable="false"
144 ondragstart="return false;" 144 ondragstart="return false;"
145 (contextmenu)="false" 145 (contextmenu)="false"
146 class="icon-20" 146 class="icon-20"
147 src="assets/img/ir.svg"> 147 src="assets/img/ir.svg">
148 </span> 148 </span>
149 </div> 149 </div>
150 </div> 150 </div>
151 <!-- SEGUIR COMPRANDO --> 151 <!-- SEGUIR COMPRANDO -->
152 <!-- <div class="row mx-3 mt-2 h-auto justify-content-end"> 152 <!-- <div class="row mx-3 mt-2 h-auto justify-content-end">
153 <div 153 <div
154 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" 154 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
155 (click)="goBack()"> 155 (click)="goBack()">
156 <span> 156 <span>
157 <small class="pr-2">SEGUIR COMPRANDO</small> 157 <small class="pr-2">SEGUIR COMPRANDO</small>
158 <img 158 <img
159 draggable="false" 159 draggable="false"
160 ondragstart="return false;" 160 ondragstart="return false;"
161 (contextmenu)="false" 161 (contextmenu)="false"
162 class="icon-20" 162 class="icon-20"
163 src="assets/img/ir.svg"> 163 src="assets/img/ir.svg">
164 </span> 164 </span>
165 </div> 165 </div>
166 </div> --> 166 </div> -->
167 </div> 167 </div>
168 168
169 </div> 169 </div>
170 170
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ db93fd5
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 (scroll)="scrollEvent($event)"> 37 (scroll)="scrollEvent($event)">
38 <div 38 <div
39 class="row mx-4 mb-2 h-32 justify-content-center tab" 39 class="row mx-4 mb-2 h-32 justify-content-center tab"
40 [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }" 40 [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }"
41 (click)="selectCategoria(-1, 0)"> 41 (click)="selectCategoria(-1, 0)">
42 <img 42 <img
43 draggable="false" 43 draggable="false"
44 ondragstart="return false;" 44 ondragstart="return false;"
45 (contextmenu)="false" 45 (contextmenu)="false"
46 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle" 46 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
47 src="assets/img/logo-spot.svg"> 47 src="assets/img/logo-spot.svg">
48 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small> 48 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small>
49 </div> 49 </div>
50 <div 50 <div
51 class="row mx-4 mb-2 h-32 justify-content-center tab" 51 class="row mx-4 mb-2 h-32 justify-content-center tab"
52 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }" 52 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
53 (click)="selectCategoria(i, categoria.id)" 53 (click)="selectCategoria(i, categoria.id)"
54 *ngFor="let categoria of categorias; let i = index;"> 54 *ngFor="let categoria of categorias; let i = index;">
55 <img 55 <img
56 draggable="false" 56 draggable="false"
57 ondragstart="return false;" 57 ondragstart="return false;"
58 (contextmenu)="false" 58 (contextmenu)="false"
59 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle" 59 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
60 src="{{urlImagenes}}{{categoria.path_imagen}}" 60 src="{{urlImagenes}}{{categoria.path_imagen}}"
61 onerror="this.src='assets/img/image-not-found.jpg'"> 61 onerror="this.src='assets/img/image-not-found.jpg'">
62 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small> 62 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
63 </div> 63 </div>
64 </div> 64 </div>
65 <div class="col-auto btn-effect h-5"> 65 <div class="col-auto btn-effect h-5">
66 <img 66 <img
67 draggable="false" 67 draggable="false"
68 ondragstart="return false;" 68 ondragstart="return false;"
69 (contextmenu)="false" 69 (contextmenu)="false"
70 class="h-100 d-block mx-auto rotate-90" 70 class="h-100 d-block mx-auto rotate-90"
71 src="assets/img/ir-color.svg" 71 src="assets/img/ir-color.svg"
72 (mousedown)="scrollY(templateCategorias, 100)" 72 (mousedown)="scrollY(templateCategorias, 100)"
73 (mouseup)="mouseup()" 73 (mouseup)="mouseup()"
74 (mouseleave)="mouseup()"> 74 (mouseleave)="mouseup()">
75 </div> 75 </div>
76 </div> 76 </div>
77 </div> 77 </div>
78 <!-- LISTA DE ARTICULOS --> 78 <!-- LISTA DE ARTICULOS -->
79 <div 79 <div
80 class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y-visible" 80 class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible"
81 (scroll)="scrollEvent($event)"> 81 (scroll)="scrollEvent($event)">
82 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6"> 82 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
83 <!-- ARTICULO --> 83 <!-- ARTICULO -->
84 <div 84 <div
85 class="col px-2 my-1 my-md-3 h-auto" 85 class="col px-2 my-1 my-md-3 h-auto"
86 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;"> 86 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
87 <div class="swing-in-top-fwd card h-auto"> 87 <div class="swing-in-top-fwd card h-auto">
88 <img 88 <img
89 draggable="false" 89 draggable="false"
90 ondragstart="return false;" 90 ondragstart="return false;"
91 (contextmenu)="false" 91 (contextmenu)="false"
92 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 92 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
93 onerror="this.src='assets/img/image-not-found.jpg'" 93 onerror="this.src='assets/img/image-not-found.jpg'"
94 class="card-img-top h-55 rounded-sm"> 94 class="card-img-top h-55 rounded-sm">
95 <div class="row mx-0 py-1 h-auto justify-content-center"> 95 <div class="row mx-0 py-1 h-auto justify-content-center">
96 <p 96 <p
97 [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}" 97 [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}"
98 class="col-12 px-1 h6 h-auto text-center min-h-60"> 98 class="col-12 px-1 h6 h-auto text-center min-h-60">
99 {{articulo.DetArt}} 99 {{articulo.DetArt}}
100 </p> 100 </p>
101 <p class="col-12 px-1 h-auto text-center line-height-sm min-h-50"> 101 <p class="col-12 px-1 h-auto text-center line-height-sm min-h-50">
102 <small>{{articulo.DET_LAR}}</small> 102 <small>{{articulo.DET_LAR}}</small>
103 </p> 103 </p>
104 <div class="col-12 px-1 align-self-end btn-effect h-auto"> 104 <div class="col-12 px-1 align-self-end btn-effect h-auto">
105 <div 105 <div
106 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}" 106 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}"
107 class="row mx-0 justify-content-between badge-pill" 107 class="row mx-0 justify-content-between badge-pill"
108 (click)="elegirArticulo(articulo)"> 108 (click)="elegirArticulo(articulo)">
109 <div class="col px-0 align-self-center text-white text-right"> 109 <div class="col px-0 align-self-center text-white text-right">
110 {{articulo.PreVen | currency}} 110 {{articulo.PreVen | currency}}
111 </div> 111 </div>
112 <div class="col-5 px-0"> 112 <div class="col-5 px-0">
113 <img 113 <img
114 draggable="false" 114 draggable="false"
115 ondragstart="return false;" 115 ondragstart="return false;"
116 (contextmenu)="false" 116 (contextmenu)="false"
117 class="d-block ml-auto py-1 icon-30" 117 class="d-block ml-auto py-1 icon-30"
118 src="assets/img/ir.svg"> 118 src="assets/img/ir.svg">
119 </div> 119 </div>
120 </div> 120 </div>
121 </div> 121 </div>
122 </div> 122 </div>
123 </div> 123 </div>
124 </div> 124 </div>
125 </div> 125 </div>
126 <!-- BOTON VER MAS --> 126 <!-- BOTON VER MAS -->
127 <div class="row mx-0"> 127 <div class="row mx-0">
128 <div 128 <div
129 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length" 129 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
130 class="col-12 px-0 mb-2"> 130 class="col-12 px-0 mb-2">
131 <button 131 <button
132 (click)="increaseShow()" 132 (click)="increaseShow()"
133 class="btn btn-block btn-outline-primary"> 133 class="btn btn-block btn-outline-primary">
134 Ver Más 134 Ver Más
135 </button> 135 </button>
136 </div> 136 </div>
137 </div> 137 </div>
138 </div> 138 </div>
139 </div> 139 </div>
140 </div> 140 </div>
141 </div> 141 </div>
142 <!-- FOOTER CARRITO DE COMPRAS --> 142 <!-- FOOTER CARRITO DE COMPRAS -->
143 <div class="row w-90 mx-auto h-auto justify-content-center"> 143 <div class="row w-90 mx-auto h-auto justify-content-center">
144 <div class="col-12 h-75 px-0 border border-primary rounded"> 144 <div class="col-12 h-75 px-0 border border-primary rounded">
145 <!-- CABECERA --> 145 <!-- CABECERA -->
146 <div class="row mx-0 h-15 border-bottom border-primary"> 146 <div class="row mx-0 h-15 border-bottom border-primary">
147 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> 147 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
148 </div> 148 </div>
149 <!-- CUERPO --> 149 <!-- CUERPO -->
150 <div class="row h-85 mx-0 justify-content-around"> 150 <div class="row h-85 mx-0 justify-content-around">
151 <!-- BOTON SCROLL IZQUIERDA --> 151 <!-- BOTON SCROLL IZQUIERDA -->
152 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 152 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
153 <img 153 <img
154 draggable="false" 154 draggable="false"
155 ondragstart="return false;" 155 ondragstart="return false;"
156 (contextmenu)="false" 156 (contextmenu)="false"
157 class="icon-30 rotate-180-neg" 157 class="icon-30 rotate-180-neg"
158 src="assets/img/ir-fondo-color.svg" 158 src="assets/img/ir-fondo-color.svg"
159 (mousedown)="scrollX(templateCarrito, -100)" 159 (mousedown)="scrollX(templateCarrito, -100)"
160 (mouseup)="mouseup()" 160 (mouseup)="mouseup()"
161 (mouseleave)="mouseup()"> 161 (mouseleave)="mouseup()">
162 </div> 162 </div>
163 <!-- CARRITO --> 163 <!-- CARRITO -->
164 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100"> 164 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
165 <div 165 <div
166 #templateCarrito 166 #templateCarrito
167 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x" 167 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"
168 (scroll)="scrollEvent($event)"> 168 (scroll)="scrollEvent($event)">
169 <!-- MENSAJE DE ADVERTENCIA --> 169 <!-- MENSAJE DE ADVERTENCIA -->
170 <div *ngIf="!articuloService.carrito.length" class="col h-100"> 170 <div *ngIf="!articuloService.carrito.length" class="col h-100">
171 <p class="text-center py-5">No hay articulos en el carrito</p> 171 <p class="text-center py-5">No hay articulos en el carrito</p>
172 </div> 172 </div>
173 <!-- ARTICULOS --> 173 <!-- ARTICULOS -->
174 <div 174 <div
175 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary" 175 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
176 *ngFor="let articulo of articuloService.carrito; let i = index;"> 176 *ngFor="let articulo of articuloService.carrito; let i = index;">
177 <div class="swing-in-top-fwd"> 177 <div class="swing-in-top-fwd">
178 <img 178 <img
179 draggable="false" 179 draggable="false"
180 ondragstart="return false;" 180 ondragstart="return false;"
181 (contextmenu)="false" 181 (contextmenu)="false"
182 class="d-block img-fluid p-2 mx-auto rounded" 182 class="d-block img-fluid p-2 mx-auto rounded"
183 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 183 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
184 onerror="this.src='assets/img/image-not-found.jpg'"> 184 onerror="this.src='assets/img/image-not-found.jpg'">
185 <p class="d-block mt-auto text-center text-primary text-truncate"> 185 <p class="d-block mt-auto text-center text-primary text-truncate">
186 <small>{{articulo.DetArt}}</small> 186 <small>{{articulo.DetArt}}</small>
187 </p> 187 </p>
188 </div> 188 </div>
189 </div> 189 </div>
190 </div> 190 </div>
191 </div> 191 </div>
192 <!-- BOTON SCROLL DERECHA --> 192 <!-- BOTON SCROLL DERECHA -->
193 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 193 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
194 <img 194 <img
195 draggable="false" 195 draggable="false"
196 ondragstart="return false;" 196 ondragstart="return false;"
197 (contextmenu)="false" 197 (contextmenu)="false"
198 class="icon-30" 198 class="icon-30"
199 src="assets/img/ir-fondo-color.svg" 199 src="assets/img/ir-fondo-color.svg"
200 (mousedown)="scrollX(templateCarrito, 100)" 200 (mousedown)="scrollX(templateCarrito, 100)"
201 (mouseup)="mouseup()" 201 (mouseup)="mouseup()"
202 (mouseleave)="mouseup()"> 202 (mouseleave)="mouseup()">
203 </div> 203 </div>
204 </div> 204 </div>
205 </div> 205 </div>
206 <!-- VER CARRITO Y TOTAL--> 206 <!-- VER CARRITO Y TOTAL-->
207 <div 207 <div
208 class="col-auto p-0 mt-2 ml-auto h-20" 208 class="col-auto p-0 mt-2 ml-auto h-20"
209 *ngIf="articuloService.carrito.length"> 209 *ngIf="articuloService.carrito.length">
210 <div 210 <div
211 class="btn-effect col-auto align-self-center px-0 bg-white" 211 class="btn-effect col-auto align-self-center px-0 bg-white"
212 [routerLink]="['/carrito']"> 212 [routerLink]="['/carrito']">
213 <div class="row justify-content-between mx-0"> 213 <div class="row justify-content-between mx-0">
214 <div class="col-auto align-self-center text-primary">TOTAL</div> 214 <div class="col-auto align-self-center text-primary">TOTAL</div>
215 <div class="col-auto p-0 bg-primary d-none d-sm-block bg-total"> 215 <div class="col-auto p-0 bg-primary d-none d-sm-block bg-total">
216 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p> 216 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
217 </div> 217 </div>
218 <div class="col-auto align-self-center text-primary ml-2 bg-light">VER CARRITO</div> 218 <div class="col-auto align-self-center text-primary ml-2 bg-light">VER CARRITO</div>
219 <div class="col-auto p-0 bg-primary d-none d-sm-block"> 219 <div class="col-auto p-0 bg-primary d-none d-sm-block">
220 <img 220 <img
221 draggable="false" 221 draggable="false"
222 ondragstart="return false;" 222 ondragstart="return false;"
223 (contextmenu)="false" 223 (contextmenu)="false"
224 class="p-2 icon-40" 224 class="p-2 icon-40"
225 src="assets/img/carrito.svg"> 225 src="assets/img/carrito.svg">
226 </div> 226 </div>
227 </div> 227 </div>
228 </div> 228 </div>
229 </div> 229 </div>
230 230
231 </div> 231 </div>
232 </div> 232 </div>
233 233
234 </div> 234 </div>
235 235
src/app/shared/header-publicidad/header-publicidad.component.ts
Diff comments   View file @ db93fd5
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } 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 9
10 @Component({ 10 @Component({
11 selector: 'app-header-publicidad', 11 selector: 'app-header-publicidad',
12 templateUrl: './header-publicidad.component.html', 12 templateUrl: './header-publicidad.component.html',
13 styleUrls: ['./header-publicidad.component.scss'] 13 styleUrls: ['./header-publicidad.component.scss']
14 }) 14 })
15 export class HeaderPublicidadComponent implements OnInit { 15 export class HeaderPublicidadComponent implements OnInit {
16 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 16 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
17 publicidades: IPublicidad[] = []; 17 publicidades: IPublicidad[] = [];
18 modalRef: BsModalRef; 18 modalRef: BsModalRef;
19 19
20 constructor( 20 constructor(
21 private publicidadService: PublicidadService, 21 private publicidadService: PublicidadService,
22 private articuloService: ArticuloService, 22 private articuloService: ArticuloService,
23 private modalService: BsModalService, 23 private modalService: BsModalService,
24 ) { } 24 ) { }
25 25
26 ngOnInit() { 26 ngOnInit() {
27 this.getPublicidades(); 27 this.getPublicidades();
28 } 28 }
29 29
30 getPublicidades() { 30 getPublicidades() {
31 this.publicidadService.getAll() 31 this.publicidadService.getAll()
32 .subscribe((res: IPublicidad[]) => { 32 .subscribe((res: IPublicidad[]) => {
33 this.publicidades = res; 33 this.publicidades = res;
34 }, err => console.error(err)); 34 }, err => console.error(err));
35 } 35 }
36 36
37 elegirArticulo(publicidad: IPublicidad) { 37 elegirArticulo(publicidad: IPublicidad) {
38 if (publicidad.id_articulo) this.getByID(publicidad.id_articulo); 38 if (publicidad.id_articulo) this.getByID(publicidad.id_articulo);
39 } 39 }
40 40
41
42 getByID(id: number) { 41 getByID(id: number) {
43 this.articuloService.getById(id) 42 this.articuloService.getById(id)
44 .subscribe((res: IArticulo) => { 43 .subscribe((res: IArticulo) => {
45 if (res.FPP) { 44 if (res.FPP) {
46 this.openModalPromos(res); 45 this.openModalPromos(res);
47 return; 46 return;
48 } 47 }
49 res.cantidad = 1; 48 res.cantidad = 1;
50 this.articuloService.setArticulo(res); 49 this.articuloService.setArticulo(res);
51 }, err => console.error(err)); 50 }, err => console.error(err));
52 } 51 }
53 52
54 openModalPromos(articulo: IArticulo) { 53 openModalPromos(articulo: IArticulo) {
55 this.modalRef = this.modalService.show(PromocionComponent, 54 this.modalRef = this.modalService.show(PromocionComponent,
56 { 55 {
57 initialState: { 56 initialState: {
58 idArticulo: articulo.id 57 idArticulo: articulo.id
59 }, 58 },
60 class: 'modal-promo modal-dialog-centered' 59 class: 'modal-promo modal-dialog-centered'
61 }); 60 });
62 } 61 }
63 62
64 } 63 }
65 64
src/app/shared/promocion/promocion.component.html
Diff comments   View file @ db93fd5
1 <div class="modal-header px-0 bg-primary rounded-top"> 1 <div class="modal-header bg-primary rounded-top pt-4 px-2">
2 <div class="row mx-0 w-100 justify-content-between" *ngIf="articulosPromo.length"> 2 <div class="row mx-0 w-100 justify-content-between" *ngIf="articulosPromo.length">
3 <div class="col-8"> 3 <div class="col-8">
4 <p class="h3 text-white">{{articulosPromo[0].DetArt}}</p> 4 <p class="h3 text-white">{{articulosPromo[0].DetArt}}</p>
5 </div> 5 </div>
6 <div class="col-4 align-self-center"> 6 <div class="col-4 align-self-center">
7 <div 7 <div
8 class="row mx-0 justify-content-between bg-white badge-pill" 8 class="row mx-0 justify-content-between bg-white badge-pill"
9 (click)="elegirPromo(articulosPromo[0])"> 9 (click)="elegirPromo(articulosPromo[0])">
10 <div class="col px-0 align-self-center text-primary"> 10 <div class="col px-0 align-self-center text-primary">
11 <p class="font-weight-bold">{{articulosPromo[0].PreVen | currency}}</p> 11 <p class="font-weight-bold">{{articulosPromo[0].PreVen | currency}}</p>
12 </div> 12 </div>
13 <div class="col-3 px-0"> 13 <div class="col-3 px-0">
14 <img 14 <img
15 draggable="false" 15 draggable="false"
16 ondragstart="return false;" 16 ondragstart="return false;"
17 (contextmenu)="false" 17 (contextmenu)="false"
18 class="d-block ml-auto py-1 icon-30 mr-2 pt-2" 18 class="d-block ml-auto py-1 icon-30 mr-2 pt-2"
19 src="assets/img/ir-color.svg"> 19 src="assets/img/ir-color.svg">
20 </div> 20 </div>
21 </div> 21 </div>
22 </div> 22 </div>
23 </div> 23 </div>
24 </div> 24 </div>
25 <div class="modal-body px-0 bg-primary rounded-bottom" *ngIf="articulosPromo.length"> 25 <div class="modal-body bg-primary rounded-bottom pb-3 px-2" *ngIf="articulosPromo.length">
26 <div class="row mx-0 w-100"> 26 <div class="row mx-0 w-100">
27 <div class="col-9"> 27 <div class="col-9">
28 <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>
29 <h1 class="text-white mb-4">en un combo?</h1> 29 <h1 class="text-white mb-4">en un combo?</h1>
30 </div> 30 </div>
31 <div class="col-3"> 31 <div class="col-3">
32 <img 32 <img
33 draggable="false" 33 draggable="false"
34 ondragstart="return false;" 34 ondragstart="return false;"
35 (contextmenu)="false" 35 (contextmenu)="false"
36 src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}" 36 src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}"
37 onerror="this.src='assets/img/image-not-found.jpg'" 37 onerror="this.src='assets/img/image-not-found.jpg'"
38 class="card-img-top img-fluid rounded-circle"> 38 class="card-img-top img-fluid rounded-circle">
39 </div> 39 </div>
40 </div> 40 </div>
41 <div 41 <div
42 class="row mx-0 lista-promociones scroll-y-visible" 42 class="row mx-0 lista-promociones scroll-y-visible"
43 (scroll)="scrollEvent($event)"> 43 (scroll)="scrollEvent($event)">
44 <div class="col-12"> 44 <div class="col-12">
45 <div *ngFor="let promo of promociones"> 45 <div *ngFor="let promo of promociones">
46 <div class="mx-0 mb-2 bg-white badge-pill text-primary" (click)="elegirPromo(promo)"> 46 <div class="mx-0 mb-2 bg-white badge-pill text-primary" (click)="elegirPromo(promo)">
47 <div class="d-flex"> 47 <div class="d-flex">
48 <p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p> 48 <p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p>
49 <p class="font-weight-bold my-auto pr-2"> 49 <p class="font-weight-bold my-auto pr-2">
50 <span>{{promo.PreVen | currency}}</span> 50 <span>{{promo.PreVen | currency}}</span>
51 </p> 51 </p>
52 <img 52 <img
53 draggable="false" 53 draggable="false"
54 ondragstart="return false;" 54 ondragstart="return false;"
55 (contextmenu)="false" 55 (contextmenu)="false"
56 class="d-block icon-30 py-1" 56 class="d-block icon-30 py-1"
57 src="assets/img/ir-color.svg"> 57 src="assets/img/ir-color.svg">
58 </div> 58 </div>
59 </div> 59 </div>
60 </div> 60 </div>
61 </div> 61 </div>
62 </div> 62 </div>
63 </div> 63 </div>
64 64