Commit dbc526ecc0e1f36b2057ab8fad3a6b5fae199c2c
Exists in
master
and in
1 other branch
Merge branch 'master' into 'master'
Master(mpuebla) See merge request !51
Showing
3 changed files
Show diff stats
src/app/components/home/home.component.html
1 | <div class="container-fluid p-0"> | 1 | <div class="container-fluid p-0"> |
2 | <img | 2 | <img |
3 | src="{{apiUrl}}/imagenes/homeBackground.jpg" | 3 | src="{{apiUrl}}/imagenes/homeBackground.jpg" |
4 | class="background-image vh-100 w-100"> | 4 | class="background-image vh-100 w-100"> |
5 | <div class="row m-0"> | 5 | <div class="row m-0"> |
6 | <div class="col p-0"> | 6 | <div class="col p-0"> |
7 | <div | 7 | <div |
8 | class="vh-100 fade-in d-flex align-content-between flex-wrap disable-user-select" | 8 | class="vh-100 fade-in d-flex align-content-between flex-wrap disable-user-select" |
9 | [routerLink]="['/inicio']"> | 9 | [routerLink]="['/inicio']"> |
10 | 10 | ||
11 | <!-- HEADER --> | 11 | <!-- HEADER --> |
12 | <div class="row m-0 w-100 bg-primary-gradient-horizontal"> | 12 | <div class="row m-0 w-100 bg-primary-gradient-horizontal"> |
13 | <div class="col-6 bg-white p-3 rounded-bottom-right"> | 13 | <div class="col-6 bg-white p-3 rounded-bottom-right"> |
14 | <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logoempresa.png"> | 14 | <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logoempresa.png"> |
15 | </div> | 15 | </div> |
16 | </div> | 16 | </div> |
17 | 17 | ||
18 | <!-- INFO DE BIENVENIDA --> | 18 | <!-- INFO DE BIENVENIDA --> |
19 | <div class="row w-100"> | 19 | <div class="row h-50 w-100"> |
20 | <div class="col-4 offset-2"> | 20 | <div class="col-4 offset-2 my-auto"> |
21 | 21 | ||
22 | <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> | 22 | <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> |
23 | <div class="carousel-inner"> | 23 | <div class="carousel-inner"> |
24 | <div class="carousel-item active"> | 24 | <div class="carousel-item active"> |
25 | <img | 25 | <img |
26 | src="{{apiUrl}}/imagenes/coca1.jpg" | 26 | src="{{apiUrl}}/imagenes/coca1.jpg" |
27 | class="d-block rounded-sm shadow w-75"> | 27 | class="d-block rounded-sm shadow w-75 mx-auto"> |
28 | </div> | 28 | </div> |
29 | <div class="carousel-item"> | 29 | <div class="carousel-item"> |
30 | <img | 30 | <img |
31 | src="{{apiUrl}}/imagenes/coca2.jpg" | 31 | src="{{apiUrl}}/imagenes/coca2.jpg" |
32 | class="d-block rounded-sm shadow w-75"> | 32 | class="d-block rounded-sm shadow w-75 mx-auto"> |
33 | </div> | 33 | </div> |
34 | <div class="carousel-item"> | 34 | <div class="carousel-item"> |
35 | <img | 35 | <img |
36 | src="{{apiUrl}}/imagenes/coca3.jpg" | 36 | src="{{apiUrl}}/imagenes/coca3.jpg" |
37 | class="d-block rounded-sm shadow w-75"> | 37 | class="d-block rounded-sm shadow w-75 mx-auto"> |
38 | </div> | 38 | </div> |
39 | </div> | 39 | </div> |
40 | </div> | 40 | </div> |
41 | 41 | ||
42 | </div> | 42 | </div> |
43 | <div class="col-6 text-center text-white my-auto"> | 43 | <div class="col-6 text-center text-white my-auto"> |
44 | <p class="display-2 font-weight-bold mb-5">¡BIENVENIDO!</p> | 44 | <p class="display-2 font-weight-bold mb-5">¡BIENVENIDO!</p> |
45 | <p class="display-3 m-0 font-weight-bold">Toque la pantalla<br>para comenzar</p> | 45 | <p class="display-3 m-0 font-weight-bold">Toque la pantalla<br>para comenzar</p> |
46 | </div> | 46 | </div> |
47 | </div> | 47 | </div> |
48 | 48 | ||
49 | <!-- FOOTER --> | 49 | <!-- FOOTER --> |
50 | <div class="row m-0 w-100 bg-gray"> | 50 | <div class="row m-0 w-100 bg-gray"> |
51 | <div class="col-6 bg-white offset-6 p-3 rounded-top-left"> | 51 | <div class="col-6 bg-white offset-6 p-3 rounded-top-left"> |
52 | <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logodebo.png"> | 52 | <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logodebo.png"> |
53 | </div> | 53 | </div> |
54 | </div> | 54 | </div> |
55 | 55 | ||
56 | </div> | 56 | </div> |
57 | </div> | 57 | </div> |
58 | </div> | 58 | </div> |
59 | </div> | 59 | </div> |
60 | 60 |
src/app/components/inicio/inicio.component.ts
1 | import { Component, OnInit, ViewChild, HostListener } from '@angular/core'; | 1 | import { Component, OnInit, ViewChild, HostListener } from '@angular/core'; |
2 | import { PopoverDirective } from 'ngx-bootstrap'; | 2 | import { PopoverDirective } from 'ngx-bootstrap'; |
3 | import { appSettings } from 'src/etc/AppSettings'; | 3 | import { appSettings } from 'src/etc/AppSettings'; |
4 | import { Router } from '@angular/router'; | 4 | import { Router } from '@angular/router'; |
5 | import { ProductoService } from 'src/app/services/producto.service'; | 5 | import { ProductoService } from 'src/app/services/producto.service'; |
6 | import { Producto } from 'src/app/wrappers/producto'; | 6 | import { Producto } from 'src/app/wrappers/producto'; |
7 | import { Sinonimo } from 'src/app/wrappers/sinonimo'; | 7 | import { Sinonimo } from 'src/app/wrappers/sinonimo'; |
8 | 8 | ||
9 | @Component({ | 9 | @Component({ |
10 | selector: 'app-inicio', | 10 | selector: 'app-inicio', |
11 | templateUrl: './inicio.component.html', | 11 | templateUrl: './inicio.component.html', |
12 | styleUrls: ['./inicio.component.scss'] | 12 | styleUrls: ['./inicio.component.scss'] |
13 | }) | 13 | }) |
14 | export class InicioComponent implements OnInit { | 14 | export class InicioComponent implements OnInit { |
15 | 15 | ||
16 | @HostListener('document:keypress', ["$event"]) catchInput(e: KeyboardEvent) { | 16 | @HostListener('document:keypress', ["$event"]) catchInput(e: KeyboardEvent) { |
17 | 17 | ||
18 | if (e.keyCode == 13) { | 18 | if (e.keyCode == 13) { |
19 | this.buscarByCodigoBarras(this.busqueda); | 19 | this.buscarByCodigoBarras(this.busqueda); |
20 | this.busqueda = ''; | 20 | this.busqueda = ''; |
21 | } else { | 21 | } else { |
22 | this.busqueda += e.key; | 22 | this.busqueda += e.key; |
23 | } | 23 | } |
24 | 24 | ||
25 | }; | 25 | }; |
26 | 26 | ||
27 | @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective; | 27 | @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective; |
28 | private tienePromo = false; | 28 | private tienePromo = false; |
29 | private productoEsPromo = false; | 29 | private productoEsPromo = false; |
30 | private busqueda: string = ''; | 30 | private busqueda: string = ''; |
31 | 31 | ||
32 | private productoAcargar: Producto; | 32 | private productoAcargar: Producto; |
33 | private promoAcargar: Producto; | 33 | private promoAcargar: Producto; |
34 | 34 | ||
35 | productos: Producto[] = []; | 35 | productos: Producto[] = []; |
36 | promociones: Producto[] = []; | 36 | promociones: Producto[] = []; |
37 | sinonimos: Sinonimo[] = []; | 37 | sinonimos: Sinonimo[] = []; |
38 | apiUrl: string = appSettings.apiUrl | 38 | apiUrl: string = appSettings.apiUrl |
39 | 39 | ||
40 | constructor( | 40 | constructor( |
41 | private router: Router, | 41 | private router: Router, |
42 | private productoService: ProductoService) { } | 42 | private productoService: ProductoService) { } |
43 | 43 | ||
44 | ngOnInit() { | 44 | ngOnInit() { |
45 | 45 | ||
46 | this.productoAcargar = this.productoService.productoAcargar; | 46 | this.productoAcargar = this.productoService.productoAcargar; |
47 | if (this.productoAcargar) { | 47 | if (this.productoAcargar) { |
48 | if (this.productoAcargar.PRO) { | 48 | if (this.productoAcargar.PRO) { |
49 | this.promociones.push(this.productoAcargar); | 49 | this.promociones.push(this.productoAcargar); |
50 | this.promoSeleccionada(this.productoAcargar); | 50 | this.promoSeleccionada(this.productoAcargar); |
51 | } | 51 | } |
52 | else | 52 | else |
53 | this.getPromociones(); | 53 | this.getPromociones(); |
54 | } | 54 | } |
55 | this.getProductos(); | 55 | this.getProductos(); |
56 | } | 56 | } |
57 | 57 | ||
58 | getPromociones() { | 58 | getPromociones() { |
59 | 59 | ||
60 | var sector = this.productoAcargar.CodSec; | 60 | var sector = this.productoAcargar.CodSec; |
61 | var codigo = this.productoAcargar.CodArt; | 61 | var codigo = this.productoAcargar.CodArt; |
62 | this.productoService.getPromociones(sector, codigo) | 62 | this.productoService.getPromociones(sector, codigo) |
63 | .subscribe((res: Producto[]) => { | 63 | .subscribe((res: Producto[]) => { |
64 | 64 | ||
65 | if (res.length === 0) { | 65 | if (res.length === 0) { |
66 | //Si no tiene promociones la cargará al carrito despues de un tiempo | 66 | //Si no tiene promociones la cargará al carrito despues de un tiempo |
67 | // setTimeout(() => { | 67 | // setTimeout(() => { |
68 | this.productoAcargar.cantidad = 1; | 68 | this.productoAcargar.cantidad = 1; |
69 | this.productoService.productos.push(this.productoAcargar); | 69 | this.productoService.productos.push(this.productoAcargar); |
70 | this.productoAcargar = this.productoService.productoAcargar = undefined; | 70 | this.productoAcargar = this.productoService.productoAcargar = undefined; |
71 | // }, 2000) | 71 | // }, 2000) |
72 | } else { | 72 | } else { |
73 | 73 | ||
74 | this.promociones = res; | 74 | this.promociones = res; |
75 | this.popoverDirective.show(); | 75 | this.popoverDirective.show(); |
76 | } | 76 | } |
77 | }, error => { console.error(error); }) | 77 | }, error => { console.error(error); }) |
78 | } | 78 | } |
79 | 79 | ||
80 | getProductos() { | 80 | getProductos() { |
81 | |||
81 | this.productoService.getAll() | 82 | this.productoService.getAll() |
82 | .subscribe((productos: Producto[]) => { | 83 | .subscribe((productos: Producto[]) => { |
83 | this.productos = productos; | 84 | this.productos = productos; |
84 | }); | 85 | }); |
85 | } | 86 | } |
86 | 87 | ||
87 | irBusquedaProductos(verPromociones) { | 88 | irBusquedaProductos(verPromociones) { |
88 | 89 | ||
89 | this.productoService.verCategoriasProductos = verPromociones; | 90 | this.productoService.verCategoriasProductos = verPromociones; |
90 | this.router.navigate(['busqueda-productos']); | 91 | this.router.navigate(['busqueda-productos']); |
91 | } | 92 | } |
92 | 93 | ||
93 | confirmarProducto() { | 94 | confirmarProducto() { |
94 | var producto = this.promoAcargar ? this.promoAcargar : this.productoAcargar; | 95 | var producto = this.promoAcargar ? this.promoAcargar : this.productoAcargar; |
95 | producto.cantidad = 1; | 96 | producto.cantidad = 1; |
96 | this.productoService.productos.push(producto); | 97 | this.productoService.productos.push(producto); |
97 | this.productoService.productoAcargar = this.promoAcargar = this.productoAcargar = undefined; | 98 | this.productoService.productoAcargar = this.promoAcargar = this.productoAcargar = undefined; |
98 | this.promociones = []; | 99 | this.promociones = []; |
99 | this.popoverDirective.hide(); | 100 | this.popoverDirective.hide(); |
100 | } | 101 | } |
101 | 102 | ||
102 | deshacerCarga() { | 103 | deshacerCarga() { |
103 | 104 | ||
104 | if (this.sinonimos.length > 0) { | 105 | if (this.sinonimos.length > 0) { |
105 | this.sinonimos = []; | 106 | this.sinonimos = []; |
106 | this.popoverDirective.hide(); | 107 | this.popoverDirective.hide(); |
107 | } | 108 | } |
108 | 109 | ||
109 | if (this.promoAcargar) { | 110 | if (this.promoAcargar) { |
110 | this.promoAcargar = undefined; | 111 | this.promoAcargar = undefined; |
111 | if (this.productoAcargar.PRO) { | 112 | if (this.productoAcargar.PRO) { |
112 | this.productoAcargar = undefined; | 113 | this.productoAcargar = undefined; |
113 | this.promociones = []; | 114 | this.promociones = []; |
114 | this.popoverDirective.hide(); | 115 | this.popoverDirective.hide(); |
115 | } else { | 116 | } else { |
116 | this.popoverDirective.show(); | 117 | this.popoverDirective.show(); |
117 | } | 118 | } |
118 | } else { | 119 | } else { |
119 | this.productoAcargar = undefined; | 120 | this.productoAcargar = undefined; |
120 | this.promociones = []; | 121 | this.promociones = []; |
121 | this.popoverDirective.hide(); | 122 | this.popoverDirective.hide(); |
122 | } | 123 | } |
123 | } | 124 | } |
124 | 125 | ||
125 | promoSeleccionada($event: Producto) { | 126 | promoSeleccionada($event: Producto) { |
126 | 127 | ||
127 | if ($event.tieneSinonimos) { | 128 | if ($event.tieneSinonimos) { |
128 | 129 | ||
129 | this.productoService.getProductoById($event.id) | 130 | this.productoService.getProductoById($event.id) |
130 | .subscribe((res : Producto) => { | 131 | .subscribe((res : Producto) => { |
131 | 132 | ||
132 | $event.imagenes = res.imagenes; | 133 | $event.imagenes = res.imagenes; |
133 | this.promoAcargar = $event; | 134 | this.promoAcargar = $event; |
134 | this.getSinonimos(this.promoAcargar.CodSec, this.promoAcargar.CodArt); | 135 | this.getSinonimos(this.promoAcargar.CodSec, this.promoAcargar.CodArt); |
135 | }, | 136 | }, |
136 | error => { console.log(error); }) | 137 | error => { console.log(error); }) |
137 | 138 | ||
138 | 139 | ||
139 | } else if (this.popoverDirective) { | 140 | } else if (this.popoverDirective) { |
140 | this.popoverDirective.hide(); | 141 | this.popoverDirective.hide(); |
141 | } | 142 | } |
142 | } | 143 | } |
143 | 144 | ||
144 | getSinonimos(sector, codigo) { | 145 | getSinonimos(sector, codigo) { |
145 | 146 | ||
146 | this.productoService.getPromocionSinonimos(sector, codigo) | 147 | this.productoService.getPromocionSinonimos(sector, codigo) |
147 | .subscribe((res: Sinonimo[]) => { | 148 | .subscribe((res: Sinonimo[]) => { |
148 | 149 | ||
149 | res.forEach(sinonimo => { | 150 | res.forEach(sinonimo => { |
150 | 151 | ||
151 | sinonimo.productos.forEach(productoSinonimo => { | 152 | sinonimo.productos.forEach(productoSinonimo => { |
152 | 153 | ||
153 | this.promoAcargar.productos.forEach(productoPromo => { | 154 | this.promoAcargar.productos.forEach(productoPromo => { |
154 | 155 | ||
155 | if (productoSinonimo.id === productoPromo.id) { | 156 | if (productoSinonimo.id === productoPromo.id) { |
156 | sinonimo.cantidad = productoPromo.cantidad; | 157 | sinonimo.cantidad = productoPromo.cantidad; |
157 | sinonimo.productoPadre = productoPromo.id; | 158 | sinonimo.productoPadre = productoPromo.id; |
158 | } | 159 | } |
159 | }) | 160 | }) |
160 | }) | 161 | }) |
161 | }) | 162 | }) |
162 | 163 | ||
163 | this.sinonimos = res; | 164 | this.sinonimos = res; |
164 | if (res.length > 0) | 165 | if (res.length > 0) |
165 | this.popoverDirective.show(); | 166 | this.popoverDirective.show(); |
166 | else | 167 | else |
167 | this.popoverDirective.hide(); | 168 | this.popoverDirective.hide(); |
168 | }) | 169 | }) |
169 | } | 170 | } |
170 | 171 | ||
171 | productosPersonalizados($event: Producto[]) { | 172 | productosPersonalizados($event: Producto[]) { |
172 | 173 | ||
173 | var productosPersonalizados = $event; | 174 | var productosPersonalizados = $event; |
174 | 175 | ||
175 | this.promoAcargar.productos.forEach(productoPromo => { | 176 | this.promoAcargar.productos.forEach(productoPromo => { |
176 | 177 | ||
177 | if (!productoPromo.idSinonimo) productosPersonalizados.push(productoPromo); | 178 | if (!productoPromo.idSinonimo) productosPersonalizados.push(productoPromo); |
178 | }) | 179 | }) |
179 | 180 | ||
180 | this.promoAcargar.productos = productosPersonalizados; | 181 | this.promoAcargar.productos = productosPersonalizados; |
181 | this.confirmarProducto(); | 182 | this.confirmarProducto(); |
182 | } | 183 | } |
183 | 184 | ||
184 | buscarByCodigoBarras(busqueda) { | 185 | buscarByCodigoBarras(busqueda) { |
185 | 186 | ||
186 | let producto = this.productos.filter(producto => { | 187 | let producto = this.productos.filter(producto => { |
187 | return producto.codigoBarra == busqueda; | 188 | return producto.codigoBarra == busqueda; |
188 | }); | 189 | }); |
189 | 190 | ||
190 | if (producto.length) { | 191 | if (producto.length) { |
191 | 192 | ||
192 | this.productoAcargar = producto[0]; | 193 | this.productoAcargar = producto[0]; |
193 | this.getPromociones(); | 194 | this.getPromociones(); |
194 | 195 | ||
195 | } else { | 196 | } else { |
196 | alert('No se encuentra el producto'); | 197 | alert('No se encuentra el producto'); |
197 | } | 198 | } |
198 | 199 | ||
199 | } | 200 | } |
200 | 201 | ||
201 | } | 202 | } |
202 | 203 |
src/app/components/pago/pago.component.ts
1 | import { Component, OnInit } from '@angular/core'; | 1 | import { Component, OnInit } from '@angular/core'; |
2 | import { appSettings } from 'src/etc/AppSettings'; | 2 | import { appSettings } from 'src/etc/AppSettings'; |
3 | import { Location } from '@angular/common'; | 3 | import { Location } from '@angular/common'; |
4 | import { ProductoService } from 'src/app/services/producto.service'; | 4 | import { ProductoService } from 'src/app/services/producto.service'; |
5 | import { RouterLink, Router } from '@angular/router'; | 5 | import { RouterLink, Router } from '@angular/router'; |
6 | import { Producto } from 'src/app/wrappers/producto'; | 6 | import { Producto } from 'src/app/wrappers/producto'; |
7 | 7 | ||
8 | @Component({ | 8 | @Component({ |
9 | selector: 'app-pago', | 9 | selector: 'app-pago', |
10 | templateUrl: './pago.component.html', | 10 | templateUrl: './pago.component.html', |
11 | styleUrls: ['./pago.component.scss'] | 11 | styleUrls: ['./pago.component.scss'] |
12 | }) | 12 | }) |
13 | export class PagoComponent implements OnInit { | 13 | export class PagoComponent implements OnInit { |
14 | 14 | ||
15 | private apiUrl: string = appSettings.apiUrl; | 15 | private apiUrl: string = appSettings.apiUrl; |
16 | private verQR: boolean = false; | 16 | private verQR: boolean = false; |
17 | private productos: Producto[] = []; | 17 | private productos: Producto[] = []; |
18 | private total: number = 0; | 18 | private total: number = 0; |
19 | 19 | ||
20 | private compraConQRfinalizada: boolean = false; | 20 | private compraConQRfinalizada: boolean = false; |
21 | private compraConEfectivofinalizada: boolean = false; | 21 | private compraConEfectivofinalizada: boolean = false; |
22 | 22 | ||
23 | constructor( | 23 | constructor( |
24 | private productoService: ProductoService, | 24 | private productoService: ProductoService, |
25 | private location: Location, | 25 | private location: Location, |
26 | private router: Router, | 26 | private router: Router, |
27 | ) { } | 27 | ) { } |
28 | 28 | ||
29 | ngOnInit() { | 29 | ngOnInit() { |
30 | |||
30 | this.productos = this.productoService.productos; | 31 | this.productos = this.productoService.productos; |
31 | } | 32 | } |
32 | 33 | ||
33 | pagar() { | 34 | pagar() { |
34 | 35 | ||
35 | this.verQR = true; | 36 | this.verQR = true; |
36 | alert('Procesando Pago'); | 37 | alert('Procesando Pago'); |
37 | 38 | ||
38 | this.productoService.pagar() | 39 | this.productoService.pagar() |
39 | .subscribe(() => { | 40 | .subscribe(() => { |
41 | |||
40 | // alert('Compra finalizada'); | 42 | // alert('Compra finalizada'); |
41 | this.compraConQRfinalizada = true; | 43 | this.compraConQRfinalizada = true; |
42 | setTimeout(() => { | 44 | setTimeout(() => { |
43 | 45 | ||
44 | this.router.navigate(['mensaje-final']); | 46 | this.router.navigate(['mensaje-final']); |
45 | }, 1000); | 47 | }, 3000); |
46 | }, err => { | 48 | }, err => { |
47 | console.log(err); | 49 | console.log(err); |
48 | alert('algo salió mal'); | 50 | alert('algo salió mal'); |
49 | }) | 51 | }) |
50 | } | 52 | } |
51 | 53 | ||
52 | volverPreviousPage() { | 54 | volverPreviousPage() { |
53 | 55 | ||
54 | if (this.verQR) { | 56 | if (this.verQR) { |
55 | this.verQR = false; | 57 | this.verQR = false; |
56 | return; | 58 | return; |
57 | } | 59 | } |
58 | this.location.back(); | 60 | this.location.back(); |
59 | } | 61 | } |
60 | 62 | ||
61 | getTotal() { | 63 | getTotal() { |
62 | 64 | ||
63 | var subTotal = 0; | 65 | var subTotal = 0; |
64 | this.productos.forEach(producto => { | 66 | this.productos.forEach(producto => { |
65 | 67 | ||
66 | subTotal = subTotal + (producto.PreVen * producto.cantidad); | 68 | subTotal = subTotal + (producto.PreVen * producto.cantidad); |
67 | }); | 69 | }); |
68 | return this.total = subTotal; | 70 | return this.total = subTotal; |
69 | } | 71 | } |
70 | 72 | ||
71 | } | 73 | } |
72 | 74 |