Mauricio Cattafi / autoservicio

Browse Code »

Commit 0ac52321f6ec0baaef26b8738d5cda94820013b4

Authored by Mauricio Cattafi 2019-10-29 14:35:47 -0300

1 parent ae69d092e5

Exists in master

se cambia rutas de las API's

Showing 21 changed files with 40 additions and 44 deletions Show diff stats

src/app/components/busqueda-productos/busqueda-productos.component.html

Diff comments View file @ 0ac5232

1	<div class="row m-0 fade-in">	1	<div class="row m-0 fade-in">
2	<div class="col-12 p-0">	2	<div class="col-12 p-0">
3		3
4	<!-- NOMBRE DE SECCION -->	4	<!-- NOMBRE DE SECCION -->
5	<div class="row m-0">	5	<div class="row m-0">
6	<div class="col-12 p-0">	6	<div class="col-12 p-0">
7	<p class="h5 m-0 py-1 bg-gray text-muted text-center">	7	<p class="h5 m-0 py-1 bg-gray text-muted text-center">
8	{{title}}	8	{{title}}
9	<i *ngIf="title === 'Búsqueda'" class="fa fa-search"></i>	9	<i *ngIf="title === 'Búsqueda'" class="fa fa-search"></i>
10	</p>	10	</p>
11	</div>	11	</div>
12	</div>	12	</div>
13		13
14	<div class="container-fluid">	14	<div class="container-fluid">
15	<div class="row m-2 disable-user-select">	15	<div class="row m-2 disable-user-select">
16		16
17	<!-- FILTROS -->	17	<!-- FILTROS -->
18	<div *ngIf="queMostrar != 'promociones'" class="col-sm-2 p-1">	18	<div *ngIf="queMostrar != 'promociones'" class="col-sm-2 p-1">
19	<div class="text-center">	19	<div class="text-center">
20	<p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p>	20	<p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p>
21	</div>	21	</div>
22	<ul class="list-group">	22	<ul class="list-group">
23	<li	23	<li
24	[ngClass]="{active: categoriaActive == 0}"	24	[ngClass]="{active: categoriaActive == 0}"
25	(click)="categoriaActive = 0; filterItems()"	25	(click)="categoriaActive = 0; filterItems()"
26	class="list-group-item list-group-item-action text-center my-1 p-2 h6">	26	class="list-group-item list-group-item-action text-center my-1 p-2 h6">
27	Todos	27	Todos
28	</li>	28	</li>
29	<li	29	<li
30	*ngFor="let categoria of categorias"	30	*ngFor="let categoria of categorias"
31	[ngClass]="{active: categoriaActive == categoria.id}"	31	[ngClass]="{active: categoriaActive == categoria.id}"
32	(click)="categoriaActive = categoria.id; filterItems()"	32	(click)="categoriaActive = categoria.id; filterItems()"
33	class="list-group-item list-group-item-action text-center my-1 p-2 h6">	33	class="list-group-item list-group-item-action text-center my-1 p-2 h6">
34	{{categoria.detalle}}	34	{{categoria.detalle}}
35	</li>	35	</li>
36	</ul>	36	</ul>
37	</div>	37	</div>
38		38
39	<!-- SEARCH INPUT -->	39	<!-- SEARCH INPUT -->
40	<div *ngIf="productos.length > 0" class="fade-in col p-0">	40	<div *ngIf="productos.length > 0" class="fade-in col p-0">
41		41
42	<div class="row m-0 search">	42	<div class="row m-0 search">
43	<!-- BOTON VOLVER -->	43	<!-- BOTON VOLVER -->
44	<div class="col-sm-auto p-2">	44	<div class="col-sm-auto p-2">
45	<button	45	<button
46	type="button"	46	type="button"
47	class="btn btn-light btn-lg shadow-sm"	47	class="btn btn-light btn-lg shadow-sm"
48	[routerLink]="['/inicio']">	48	[routerLink]="['/inicio']">
49	<span class="font-weight-normal h6 pr-2">Volver</span>	49	<span class="font-weight-normal h6 pr-2">Volver</span>
50	<i class="fa fa-undo text-warning" aria-hidden="true"></i>	50	<i class="fa fa-undo text-warning" aria-hidden="true"></i>
51	</button>	51	</button>
52	</div>	52	</div>
53	<div class="col-sm-10 p-2">	53	<div class="col-sm-10 p-2">
54	<span class="fa fa-search form-control-lg form-control-search pl-3"></span>	54	<span class="fa fa-search form-control-lg form-control-search pl-3"></span>
55	<input	55	<input
56	[matKeyboard]="'spanish'"	56	[matKeyboard]="'spanish'"
57	type="text"	57	type="text"
58	class="form-control form-control-lg shadow-sm rounded-pill px-5"	58	class="form-control form-control-lg shadow-sm rounded-pill px-5"
59	placeholder="Búsqueda productos"	59	placeholder="Búsqueda productos"
60	[(ngModel)]="searchTerm"	60	[(ngModel)]="searchTerm"
61	(ngModelChange)="filterItems()">	61	(ngModelChange)="filterItems()">
62	</div>	62	</div>
63	<div class="col-sm-12 m-0 p-2 h5">	63	<div class="col-sm-12 m-0 p-2 h5">
64	<button	64	<button
65	class="btn btn-outline-primary badge badge-light px-2 shadow-sm"	65	class="btn btn-outline-primary badge badge-light px-2 shadow-sm"
66	[ngClass]="{'active': ordenandoByVendidos}"	66	[ngClass]="{'active': ordenandoByVendidos}"
67	(click)="ordenandoByVendidos = !ordenandoByVendidos; filterItems()"	67	(click)="ordenandoByVendidos = !ordenandoByVendidos; filterItems()"
68	>Más vendidos</button>	68	>Más vendidos</button>
69	</div>	69	</div>
70	</div>	70	</div>
71	<!-- LISTA DE PRODUCTOS -->	71	<!-- LISTA DE PRODUCTOS -->
72	<div class="row m-0 align-items-start vh-60 overflow-scroll disable-user-select">	72	<div class="row m-0 align-items-start vh-60 overflow-scroll disable-user-select">
73	<div	73	<div
74	class="col-4 col-lg-3 p-2"	74	class="col-4 col-lg-3 p-2"
75	*ngFor="let producto of auxProductos">	75	*ngFor="let producto of auxProductos">
76	<div	76	<div
77	class="card-effect bg-white rounded-sm shadow border-0"	77	class="card-effect bg-white rounded-sm shadow border-0"
78	(click)="elegirProducto(producto)">	78	(click)="elegirProducto(producto)">
79	<img	79	<img
80	src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}"	80	src="{{apiDeboSuite}}/imagenes/{{producto.imagenes[0].imagen}}"
81	class="rounded-sm shadow w-100 m-auto">	81	class="rounded-sm shadow w-100 m-auto">
82	<div class="p-2">	82	<div class="p-2">
83	<p class="h6 min-h-40 text-left m-0"><small>{{producto.DET_LAR}}</small></p>	83	<p class="h6 min-h-40 text-left m-0"><small>{{producto.DET_LAR}}</small></p>
84	<div class="row m-0">	84	<div class="row m-0">
85	<div class="col-12 my-auto pt-2 pr-2 p-0">	85	<div class="col-12 my-auto pt-2 pr-2 p-0">
86	<p class="text-right m-0 h6">{{producto.PreVen \| currency}}</p>	86	<p class="text-right m-0 h6">{{producto.PreVen \| currency}}</p>
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	</div>	93	</div>
94		94
95	<!-- SPINNER -->	95	<!-- SPINNER -->
96	<div	96	<div
97	*ngIf="productos.length === 0 && showSpinner"	97	*ngIf="productos.length === 0 && showSpinner"
98	class="col-sm-10 p-0 align-self-center text-center">	98	class="col-sm-10 p-0 align-self-center text-center">
99	<div class="spinner-border spinner-lg text-secondary" role="status"></div>	99	<div class="spinner-border spinner-lg text-secondary" role="status"></div>
100	<span class="text-secondary m-2 h5">Cargando información.</span>	100	<span class="text-secondary m-2 h5">Cargando información.</span>
101	</div>	101	</div>
102		102
103	</div>	103	</div>
104	</div>	104	</div>
105		105
106	</div>	106	</div>
107		107
108	</div>	108	</div>
109		109

src/app/components/busqueda-productos/busqueda-productos.component.ts

Diff comments View file @ 0ac5232

1	import { Component, OnInit, EventEmitter } from '@angular/core';	1	import { Component, OnInit, EventEmitter } from '@angular/core';
2	import { ProductoService } from 'src/app/services/producto.service';	2	import { ProductoService } from 'src/app/services/producto.service';
3	import { Producto } from 'src/app/wrappers/producto';	3	import { Producto } from 'src/app/wrappers/producto';
4	import { Categoria } from 'src/app/wrappers/categoria';	4	import { Categoria } from 'src/app/wrappers/categoria';
5	import { APP_SETTINGS } from 'src/etc/AppSettings';	5	import { APP_SETTINGS } from 'src/etc/AppSettings';
6	import { Router } from '@angular/router';	6	import { Router } from '@angular/router';
7		7
8	@Component({	8	@Component({
9	selector: 'app-busqueda-productos',	9	selector: 'app-busqueda-productos',
10	templateUrl: './busqueda-productos.component.html',	10	templateUrl: './busqueda-productos.component.html',
11	styleUrls: ['./busqueda-productos.component.scss']	11	styleUrls: ['./busqueda-productos.component.scss']
12	})	12	})
13	export class BusquedaProductosComponent implements OnInit {	13	export class BusquedaProductosComponent implements OnInit {
14		14
15	private productos: Producto[] = [];	15	private productos: Producto[] = [];
16	private auxProductos: Producto[] = [];	16	private auxProductos: Producto[] = [];
17	private searchTerm: string = '';	17	private searchTerm: string = '';
18	private categoriaActive: number = null;	18	private categoriaActive: number = null;
19	private showSpinner: boolean = true;	19	private showSpinner: boolean = true;
20	private queMostrar: string = 'todos';	20	private queMostrar: string = 'todos';
21	private apiImagenes: string = APP_SETTINGS.apiImagenes;	21	private apiDeboSuite: string = APP_SETTINGS.apiDeboSuite;
22	private categorias: Categoria[] = [];	22	private categorias: Categoria[] = [];
23	private blurFocus = new EventEmitter();	23	private blurFocus = new EventEmitter();
24	private ordenandoByVendidos = true;	24	private ordenandoByVendidos = true;
25	private title: string = 'Búsqueda'	25	private title: string = 'Búsqueda'
26		26
27	constructor(	27	constructor(
28	private productoService: ProductoService,	28	private productoService: ProductoService,
29	private router: Router) { }	29	private router: Router) { }
30		30
31	ngOnInit() {	31	ngOnInit() {
32		32
33	this.queMostrar = this.productoService.mostrar;	33	this.queMostrar = this.productoService.mostrar;
34		34
35	this.productoService.getCategorias()	35	this.productoService.getCategorias()
36	.subscribe((categorias: Categoria[]) => {	36	.subscribe((categorias: Categoria[]) => {
37		37
38	switch (this.queMostrar) {	38	switch (this.queMostrar) {
39	case 'todos':	39	case 'todos':
40	this.categorias = categorias;	40	this.categorias = categorias;
41	this.categoriaActive = 0;	41	this.categoriaActive = 0;
42	this.title = 'Búsqueda';	42	this.title = 'Búsqueda';
43	break;	43	break;
44	case 'promociones':	44	case 'promociones':
45	this.categorias = categorias;	45	this.categorias = categorias;
46	this.categoriaActive = 1;	46	this.categoriaActive = 1;
47	this.title = 'Promociones';	47	this.title = 'Promociones';
48	break;	48	break;
49	case 'ordenar':	49	case 'ordenar':
50	this.categorias = categorias.filter((categoria: Categoria) => {	50	this.categorias = categorias.filter((categoria: Categoria) => {
51	return categoria.ES_PEDIDO;	51	return categoria.ES_PEDIDO;
52	});	52	});
53	this.categoriaActive = 0;	53	this.categoriaActive = 0;
54	this.title = 'Ordenar';	54	this.title = 'Ordenar';
55	break;	55	break;
56	default:	56	default:
57	this.categorias = categorias;	57	this.categorias = categorias;
58	this.categoriaActive = 0;	58	this.categoriaActive = 0;
59	this.title = 'Búsqueda';	59	this.title = 'Búsqueda';
60	break;	60	break;
61	}	61	}
62	});	62	});
63		63
64	this.productoService.productoAcargar = undefined;	64	this.productoService.productoAcargar = undefined;
65	this.productoService.getAll()	65	this.productoService.getAll()
66	.subscribe((data: Producto[]) => {	66	.subscribe((data: Producto[]) => {
67		67
68	this.setProductosSinImagen(data);	68	this.setProductosSinImagen(data);
69		69
70	if (this.queMostrar == 'ordenar') {	70	if (this.queMostrar == 'ordenar') {
71		71
72	this.categorias.forEach((categoria: Categoria) => {	72	this.categorias.forEach((categoria: Categoria) => {
73		73
74	let tempProductos = data.filter((producto: Producto) => {	74	let tempProductos = data.filter((producto: Producto) => {
75	return producto.categoria_selfservice == categoria.id;	75	return producto.categoria_selfservice == categoria.id;
76	});	76	});
77		77
78	this.productos = this.productos.concat(tempProductos);	78	this.productos = this.productos.concat(tempProductos);
79		79
80	});	80	});
81	} else {	81	} else {
82	this.productos = data;	82	this.productos = data;
83	}	83	}
84	this.filterItems();	84	this.filterItems();
85	}, (error) => {	85	}, (error) => {
86	this.showSpinner = false;	86	this.showSpinner = false;
87	console.error(error);	87	console.error(error);
88	});	88	});
89	}	89	}
90		90
91	filterItems() {	91	filterItems() {
92		92
93	this.auxProductos = this.productos.filter(x => {	93	this.auxProductos = this.productos.filter(x => {
94	if (this.categoriaActive === 0) {	94	if (this.categoriaActive === 0) {
95	return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase());	95	return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase());
96	}	96	}
97	else {	97	else {
98	return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase()) &&	98	return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase()) &&
99	x.categoria_selfservice === this.categoriaActive;	99	x.categoria_selfservice === this.categoriaActive;
100	}	100	}
101	});	101	});
102		102
103	this.ordenar();	103	this.ordenar();
104		104
105	}	105	}
106		106
107	agregarAlCarrito(producto: Producto) {	107	agregarAlCarrito(producto: Producto) {
108		108
109	producto.cantidad = 1;	109	producto.cantidad = 1;
110	this.productoService.productos.push(producto);	110	this.productoService.productos.push(producto);
111	}	111	}
112		112
113	ordenar() {	113	ordenar() {
114		114
115	if (this.ordenandoByVendidos) {	115	if (this.ordenandoByVendidos) {
116		116
117	this.auxProductos.sort((a, b) => {	117	this.auxProductos.sort((a, b) => {
118	return b.cantidadVendida - a.cantidadVendida;	118	return b.cantidadVendida - a.cantidadVendida;
119	});	119	});
120	}	120	}
121		121
122	}	122	}
123		123
124	private elegirProducto(producto: Producto) {	124	private elegirProducto(producto: Producto) {
125		125
126	if (producto.PRO) {	126	if (producto.PRO) {
127		127
128	let imagenes = producto.imagenes;	128	let imagenes = producto.imagenes;
129	this.productoService.getPromocionByCodigos(producto.CodSec, producto.CodArt)	129	this.productoService.getPromocionByCodigos(producto.CodSec, producto.CodArt)
130	.subscribe(res => {	130	.subscribe(res => {
131		131
132	this.productoService.productoAcargar = res[0];	132	this.productoService.productoAcargar = res[0];
133	this.productoService.productoAcargar.imagenes = imagenes;	133	this.productoService.productoAcargar.imagenes = imagenes;
134	this.router.navigate(['inicio']);	134	this.router.navigate(['inicio']);
135	},	135	},
136	error => { console.error(error); }	136	error => { console.error(error); }
137	);	137	);
138	} else {	138	} else {
139		139
140	this.productoService.productoAcargar = producto;	140	this.productoService.productoAcargar = producto;
141	this.router.navigate(['inicio']);	141	this.router.navigate(['inicio']);
142	}	142	}
143		143
144	}	144	}
145		145
146	private setProductosSinImagen(productos: Producto[]) {	146	private setProductosSinImagen(productos: Producto[]) {
147		147
148	productos.forEach((producto: Producto) => {	148	productos.forEach((producto: Producto) => {
149	producto.imagenes = producto.imagenes.length == 0 ?	149	producto.imagenes = producto.imagenes.length == 0 ?
150	[{ imagen: 'noImage.jpg' }] : producto.imagenes;	150	[{ imagen: 'noImage.jpg' }] : producto.imagenes;
151	})	151	})
152	}	152	}
153	}	153	}
154		154

src/app/components/cancelar-compra/cancelar-compra.component.ts

Diff comments View file @ 0ac5232

1	import { Component, OnInit, OnDestroy } from '@angular/core';	1	import { Component, OnInit, OnDestroy } from '@angular/core';
2	import { APP_SETTINGS } from 'src/etc/AppSettings';	2	import { APP_SETTINGS } from 'src/etc/AppSettings';
3	import { Location } from '@angular/common';	3	import { Location } from '@angular/common';
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		6
7	@Component({	7	@Component({
8	selector: 'app-cancelar-compra',	8	selector: 'app-cancelar-compra',
9	templateUrl: './cancelar-compra.component.html',	9	templateUrl: './cancelar-compra.component.html',
10	styleUrls: ['./cancelar-compra.component.scss']	10	styleUrls: ['./cancelar-compra.component.scss']
11	})	11	})
12	export class CancelarCompraComponent implements OnInit, OnDestroy {	12	export class CancelarCompraComponent implements OnInit, OnDestroy {
13		13
14	private apiImagenes: string = APP_SETTINGS.apiImagenes;	14	private apiDeboSuite: string = APP_SETTINGS.apiDeboSuite;
15	private timer: any;	15	private timer: any;
16		16
17	constructor(	17	constructor(
18	private location: Location,	18	private location: Location,
19	private router: Router,	19	private router: Router,
20	private productoService: ProductoService	20	private productoService: ProductoService
21	) { }	21	) { }
22		22
23	ngOnInit() {	23	ngOnInit() {
24		24
25	this.timer = setTimeout(() => {	25	this.timer = setTimeout(() => {
26	this.limpiarCarritoYvolver();	26	this.limpiarCarritoYvolver();
27	}, 30000)	27	}, 30000)
28	}	28	}
29		29
30	ngOnDestroy() {	30	ngOnDestroy() {
31		31
32	clearTimeout(this.timer);	32	clearTimeout(this.timer);
33	}	33	}
34		34
35	volverPreviousPage() {	35	volverPreviousPage() {
36		36
37	this.location.back();	37	this.location.back();
38	}	38	}
39		39
40	limpiarCarritoYvolver() {	40	limpiarCarritoYvolver() {
41		41
42	this.productoService.productoAcargar = undefined;	42	this.productoService.productoAcargar = undefined;
43	this.productoService.promoAcargar = undefined;	43	this.productoService.promoAcargar = undefined;
44	this.productoService.productos = [];	44	this.productoService.productos = [];
45	this.router.navigate(['/home']);	45	this.router.navigate(['/home']);
46	}	46	}
47		47
48	}	48	}
49		49

src/app/components/confirmacion-carrito/confirmacion-carrito.component.html

Diff comments View file @ 0ac5232

1	<div	1	<div
2	*ngIf="!compraConEfectivofinalizada && !compraConQRfinalizada"	2	*ngIf="!compraConEfectivofinalizada && !compraConQRfinalizada"
3	class="row m-0 fade-in bg-primary-gradient disable-user-select"	3	class="row m-0 fade-in bg-primary-gradient disable-user-select"
4	(click)="reiniciarTimer()">	4	(click)="reiniciarTimer()">
5	<div class="col-12 p-0 vh-100">	5	<div class="col-12 p-0 vh-100">
6	<!-- TOP HEADER -->	6	<!-- TOP HEADER -->
7	<app-header></app-header>	7	<app-header></app-header>
8		8
9	<!-- NOMBRE DE SECCION -->	9	<!-- NOMBRE DE SECCION -->
10	<div class="row m-0">	10	<div class="row m-0">
11	<div class="col-12 p-0">	11	<div class="col-12 p-0">
12	<p class="h5 py-1 bg-gray text-muted text-center m-0">	12	<p class="h5 py-1 bg-gray text-muted text-center m-0">
13		13
14	</p>	14	</p>
15	</div>	15	</div>
16	</div>	16	</div>
17		17
18	<div class="row m-0">	18	<div class="row m-0">
19	<div class="col-10 px-1">	19	<div class="col-10 px-1">
20	<!-- TEXTO DE IZQUIERDA -->	20	<!-- TEXTO DE IZQUIERDA -->
21	<div *ngIf="!verQR" class="row mx-2 mt-4 text-white">	21	<div *ngIf="!verQR" class="row mx-2 mt-4 text-white">
22	<div class="col-sm-auto my-auto">	22	<div class="col-sm-auto my-auto">
23	<p class="h2">Mi Compra	23	<p class="h2">Mi Compra
24	<i class="fa fa-shopping-cart "></i>	24	<i class="fa fa-shopping-cart "></i>
25	</p>	25	</p>
26	</div>	26	</div>
27	<div class="col-sm-9 my-auto">	27	<div class="col-sm-9 my-auto">
28	<p class="h4">Por favor, controle y confirme su compra.</p>	28	<p class="h4">Por favor, controle y confirme su compra.</p>
29	</div>	29	</div>
30	<label for="customLabel" class="col-auto font-weight-bold h4 m-0">	30	<label for="customLabel" class="col-auto font-weight-bold h4 m-0">
31	Pedido a nombre de:	31	Pedido a nombre de:
32	</label>	32	</label>
33	<div class="col-12 col-sm-6 col-md-5 col-lg-5">	33	<div class="col-12 col-sm-6 col-md-5 col-lg-5">
34	<input	34	<input
35	[matKeyboard]="'spanish'"	35	[matKeyboard]="'spanish'"
36	type="text"	36	type="text"
37	class="form-control text-center"	37	class="form-control text-center"
38	id="customLabel"	38	id="customLabel"
39	maxlength="24"	39	maxlength="24"
40	[(ngModel)]="pedidoAnombreDe"	40	[(ngModel)]="pedidoAnombreDe"
41	autofocus	41	autofocus
42	>	42	>
43	</div>	43	</div>
44	</div>	44	</div>
45		45
46	<div [ngClass]="{'mt-5': verQR}" class="row m-0">	46	<div [ngClass]="{'mt-5': verQR}" class="row m-0">
47	<!-- GRILLA DE PRODUCTOS DE MI COMPRA -->	47	<!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
48	<div *ngIf="!verQR" class="col-sm-9 pr-1">	48	<div *ngIf="!verQR" class="col-sm-9 pr-1">
49	<div class="row mx-1 pr-1 vh-70 overflow-scroll text-dark">	49	<div class="row mx-1 pr-1 vh-70 overflow-scroll text-dark">
50	<div class="mh-100 col-4 p-2" *ngFor="let producto of productos">	50	<div class="mh-100 col-4 p-2" *ngFor="let producto of productos">
51	<div class="row m-0 h-100 bg-white rounded-sm shadow border-0">	51	<div class="row m-0 h-100 bg-white rounded-sm shadow border-0">
52	<div class="d-flex align-items-end flex-column">	52	<div class="d-flex align-items-end flex-column">
53	<div class="w-100">	53	<div class="w-100">
54	<img	54	<img
55	src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}"	55	src="{{apiDeboSuite}}/imagenes/{{producto.imagenes[0].imagen}}"
56	class="shadow rounded-sm w-100 m-auto">	56	class="shadow rounded-sm w-100 m-auto">
57	</div>	57	</div>
58	<div class="w-100 pt-2 px-2">	58	<div class="w-100 pt-2 px-2">
59	<p class="h6 text-left">	59	<p class="h6 text-left">
60	<small class="font-weight-bold">	60	<small class="font-weight-bold">
61	{{producto.DET_LAR}}	61	{{producto.DET_LAR}}
62	</small>	62	</small>
63	</p>	63	</p>
64	<div *ngIf="producto.tieneSinonimos">	64	<div *ngIf="producto.tieneSinonimos">
65	<p *ngFor="let p of producto.productos" class="h6 text-left m-0">	65	<p *ngFor="let p of producto.productos" class="h6 text-left m-0">
66	<small>	66	<small>
67	- {{p.cantidad * producto.cantidad}} {{p.DET_LAR}}	67	- {{p.cantidad * producto.cantidad}} {{p.DET_LAR}}
68	</small>	68	</small>
69	</p>	69	</p>
70	</div>	70	</div>
71	</div>	71	</div>
72	<div class="w-100 d-flex justify-content-between mt-auto mb-1 px-2">	72	<div class="w-100 d-flex justify-content-between mt-auto mb-1 px-2">
73	<span class="text-left m-0 px-1 h6">	73	<span class="text-left m-0 px-1 h6">
74	{{producto.cantidad}} x {{producto.PreVen \| currency}}	74	{{producto.cantidad}} x {{producto.PreVen \| currency}}
75	</span>	75	</span>
76	<span class="text-right m-0 px-1 h6">	76	<span class="text-right m-0 px-1 h6">
77	{{producto.cantidad * producto.PreVen \| currency}}	77	{{producto.cantidad * producto.PreVen \| currency}}
78	</span>	78	</span>
79	</div>	79	</div>
80	</div>	80	</div>
81	</div>	81	</div>
82	</div>	82	</div>
83	</div>	83	</div>
84	</div>	84	</div>
85		85
86	<!-- CODIGO QR -->	86	<!-- CODIGO QR -->
87	<div *ngIf="verQR" class="col-sm-9">	87	<div *ngIf="verQR" class="col-sm-9">
88	<div class="col-6 offset-3 border-0 mb-auto">	88	<div class="col-6 offset-3 border-0 mb-auto">
89	<img	89	<img
90	src="../../../assets/img/qrmp.jpg"	90	src="../../../assets/img/qrmp.jpg"
91	class="w-100 mx-auto d-block shadow rounded-sm">	91	class="w-100 mx-auto d-block shadow rounded-sm">
92	</div>	92	</div>
93	</div>	93	</div>
94		94
95	<!-- TICKET -->	95	<!-- TICKET -->
96	<div class="col-sm-3 px-1">	96	<div class="col-sm-3 px-1">
97	<div class="card shadow">	97	<div class="card shadow">
98	<div class="card-body">	98	<div class="card-body">
99	<p class="h5 card-title">Su Ticket</p>	99	<p class="h5 card-title">Su Ticket</p>
100	<div class="row mt-4 m-0">	100	<div class="row mt-4 m-0">
101	<div class="col-12 p-0 mb-2">	101	<div class="col-12 p-0 mb-2">
102	<p class="h6 m-0 card-text text-left">	102	<p class="h6 m-0 card-text text-left">
103	<small class="font-weight-bold">DESCRIPCIÓN</small>	103	<small class="font-weight-bold">DESCRIPCIÓN</small>
104	</p>	104	</p>
105	<p class="h6 m-0 card-text text-left">	105	<p class="h6 m-0 card-text text-left">
106	<small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small>	106	<small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small>
107	</p>	107	</p>
108	</div>	108	</div>
109	</div>	109	</div>
110	<div class="row vh-50 px-2 overflow-scroll m-0">	110	<div class="row vh-50 px-2 overflow-scroll m-0">
111	<div class="col-12 p-0 mb-2" *ngFor="let producto of productos">	111	<div class="col-12 p-0 mb-2" *ngFor="let producto of productos">
112	<p class="h6 m-0 card-text text-left">	112	<p class="h6 m-0 card-text text-left">
113	<small>{{producto.DET_LAR}}</small>	113	<small>{{producto.DET_LAR}}</small>
114	</p>	114	</p>
115	<div class="row d-flex justify-content-between m-0">	115	<div class="row d-flex justify-content-between m-0">
116	<div class="col p-0">	116	<div class="col p-0">
117	<p class="h6 m-0 card-text text-left">	117	<p class="h6 m-0 card-text text-left">
118	<small>{{producto.cantidad}} x {{producto.PreVen \| currency}}</small>	118	<small>{{producto.cantidad}} x {{producto.PreVen \| currency}}</small>
119	</p>	119	</p>
120	</div>	120	</div>
121	<div class="col p-0">	121	<div class="col p-0">
122	<p class="h6 m-0 card-text text-right">	122	<p class="h6 m-0 card-text text-right">
123	<small>{{(producto.PreVen) * (producto.cantidad) \| currency}}</small>	123	<small>{{(producto.PreVen) * (producto.cantidad) \| currency}}</small>
124	</p>	124	</p>
125	</div>	125	</div>
126	</div>	126	</div>
127	</div>	127	</div>
128	</div>	128	</div>
129	<p class="h4 font-weight-bold card-text text-right mt-3 mb-0">	129	<p class="h4 font-weight-bold card-text text-right mt-3 mb-0">
130	Total {{getTotal() \| currency}}	130	Total {{getTotal() \| currency}}
131	</p>	131	</p>
132	</div>	132	</div>
133	</div>	133	</div>
134	</div>	134	</div>
135	</div>	135	</div>
136		136
137	<!-- OPCIONES ABAJO DERECHA -->	137	<!-- OPCIONES ABAJO DERECHA -->
138	<div class="row m-0 fixed-bottom">	138	<div class="row m-0 fixed-bottom">
139	<div class="col-sm-2 offset-sm-10 p-0 mt-auto">	139	<div class="col-sm-2 offset-sm-10 p-0 mt-auto">
140	<div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">	140	<div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
141	<div class="card-body row m-0 p-1">	141	<div class="card-body row m-0 p-1">
142	<div class="col-12 p-3">	142	<div class="col-12 p-3">
143	<button	143	<button
144	type="button"	144	type="button"
145	class="btn btn-block btn-light shadow btn-sm shadow"	145	class="btn btn-block btn-light shadow btn-sm shadow"
146	(click)="volverPreviousPage()">	146	(click)="volverPreviousPage()">
147	<span class="pr-2">Volver</span>	147	<span class="pr-2">Volver</span>
148	<i class="fa fa-undo text-warning"></i>	148	<i class="fa fa-undo text-warning"></i>
149	</button>	149	</button>
150	<button	150	<button
151	type="button"	151	type="button"
152	class="btn btn-block btn-light shadow btn-sm shadow"	152	class="btn btn-block btn-light shadow btn-sm shadow"
153	[routerLink]="['/cancelar-compra']">	153	[routerLink]="['/cancelar-compra']">
154	<span class="pr-2">Cancelar</span>	154	<span class="pr-2">Cancelar</span>
155	<i class="fa fa-times text-danger"></i>	155	<i class="fa fa-times text-danger"></i>
156	</button>	156	</button>
157	</div>	157	</div>
158	</div>	158	</div>
159	</div>	159	</div>
160	</div>	160	</div>
161	</div>	161	</div>
162	</div>	162	</div>
163		163
164	<!-- FORMAS DE PAGO -->	164	<!-- FORMAS DE PAGO -->
165	<div *ngIf="!verQR" class="col-2 px-1">	165	<div *ngIf="!verQR" class="col-2 px-1">
166	<p class="h4 text-white text-center mt-4 mx-2 pb-2 border-bottom border-white">	166	<p class="h4 text-white text-center mt-4 mx-2 pb-2 border-bottom border-white">
167	Forma de pago	167	Forma de pago
168	</p>	168	</p>
169		169
170	<!-- EFECTIVO -->	170	<!-- EFECTIVO -->
171	<div	171	<div
172	class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white"	172	class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white"
173	(click)="pagar(1)">	173	(click)="pagar(1)">
174	<div class="col-7 text-center my-auto px-2">	174	<div class="col-7 text-center my-auto px-2">
175	<span class="h5 font-weight-bold">Efectivo</span>	175	<span class="h5 font-weight-bold">Efectivo</span>
176	</div>	176	</div>
177	<div class="col-5 my-auto p-0">	177	<div class="col-5 my-auto p-0">
178	<img	178	<img
179	src="../../../assets/img/efectivo.png"	179	src="../../../assets/img/efectivo.png"
180	class="w-100 float-right">	180	class="w-100 float-right">
181	</div>	181	</div>
182	</div>	182	</div>
183		183
184	<!-- TARJETA -->	184	<!-- TARJETA -->
185	<div class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white"	185	<div class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white"
186	(click)="abrirPagoConTarjeta()">	186	(click)="abrirPagoConTarjeta()">
187	<div class="col-7 text-center my-auto px-2">	187	<div class="col-7 text-center my-auto px-2">
188	<span class="h5 font-weight-bold">Tarjeta</span>	188	<span class="h5 font-weight-bold">Tarjeta</span>
189	</div>	189	</div>
190	<div class="col-5 my-auto p-0">	190	<div class="col-5 my-auto p-0">
191	<img	191	<img
192	src="../../../assets/img/tarjeta.png"	192	src="../../../assets/img/tarjeta.png"
193	class="w-100 float-right">	193	class="w-100 float-right">
194	</div>	194	</div>
195	</div>	195	</div>
196		196
197	<!-- QR -->	197	<!-- QR -->
198	<div	198	<div
199	class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white"	199	class="row card-effect card-forma-pago mx-1 my-3 rounded-sm shadow-sm bg-white"
200	(click)="pagar(9)">	200	(click)="pagar(9)">
201	<div class="col-7 text-center my-auto px-2">	201	<div class="col-7 text-center my-auto px-2">
202	<span class="h5 font-weight-bold">Pago Electrónico</span>	202	<span class="h5 font-weight-bold">Pago Electrónico</span>
203	</div>	203	</div>
204	<div class="col-5 my-auto p-0">	204	<div class="col-5 my-auto p-0">
205	<img	205	<img
206	src="../../../assets/img/qr.png"	206	src="../../../assets/img/qr.png"
207	class="w-100 float-right">	207	class="w-100 float-right">
208	</div>	208	</div>
209	</div>	209	</div>
210	</div>	210	</div>
211	</div>	211	</div>
212		212
213	</div>	213	</div>
214	</div>	214	</div>
215		215
216	<div	216	<div
217	*ngIf="compraConQRfinalizada"	217	*ngIf="compraConQRfinalizada"
218	[routerLink]="['/mensaje-final']"	218	[routerLink]="['/mensaje-final']"
219	class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">	219	class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
220	<div class="col-12 text-center text-white my-auto">	220	<div class="col-12 text-center text-white my-auto">
221	<p class="font-weight-bold display-4">	221	<p class="font-weight-bold display-4">
222	Su pago fue<br>	222	Su pago fue<br>
223	acreditado	223	acreditado
224	exitosamente	224	exitosamente
225	</p>	225	</p>
226	<p class="font-weight-bold display-4">Recuerde retirar su ticket</p>	226	<p class="font-weight-bold display-4">Recuerde retirar su ticket</p>
227	</div>	227	</div>
228	<div class="row z-index-0 fixed-top m-0 w-100">	228	<div class="row z-index-0 fixed-top m-0 w-100">
229	<div class="col-12 p-3">	229	<div class="col-12 p-3">
230	<img class="w-15 float-right" src="../../../assets/img/debo-gray.png">	230	<img class="w-15 float-right" src="../../../assets/img/debo-gray.png">
231	</div>	231	</div>
232	</div>	232	</div>
233	</div>	233	</div>
234		234
235	<div	235	<div
236	*ngIf="compraConEfectivofinalizada"	236	*ngIf="compraConEfectivofinalizada"
237	[routerLink]="['/mensaje-final']"	237	[routerLink]="['/mensaje-final']"
238	class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">	238	class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
239	<div class="col-12 text-center text-white my-auto">	239	<div class="col-12 text-center text-white my-auto">
240	<p class="font-weight-bold display-4">	240	<p class="font-weight-bold display-4">
241	Retire su ticket<br>	241	Retire su ticket<br>
242	y diríjase a caja para<br>	242	y diríjase a caja para<br>
243	efectuar el pago.	243	efectuar el pago.
244	</p>	244	</p>
245	</div>	245	</div>
246	<div class="row z-index-0 fixed-top m-0 w-100">	246	<div class="row z-index-0 fixed-top m-0 w-100">
247	<div class="col-12 p-3">	247	<div class="col-12 p-3">
248	<img class="w-15 float-right" src="../../../assets/img/debo-gray.png">	248	<img class="w-15 float-right" src="../../../assets/img/debo-gray.png">
249	</div>	249	</div>
250	</div>	250	</div>
251	</div>	251	</div>
252		252

src/app/components/confirmacion-carrito/confirmacion-carrito.component.ts

Diff comments View file @ 0ac5232

1	import { Component, OnInit, OnDestroy } from '@angular/core';	1	import { Component, OnInit, OnDestroy } from '@angular/core';
2	import { APP_SETTINGS } from 'src/etc/AppSettings';	2	import { APP_SETTINGS } 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 { Producto } from 'src/app/wrappers/producto';	5	import { Producto } from 'src/app/wrappers/producto';
6	import { Router } from '@angular/router';	6	import { Router } from '@angular/router';
7	import { Subscription } from 'rxjs';	7	import { Subscription } from 'rxjs';
8	import { BsModalService } from 'ngx-bootstrap';	8	import { BsModalService } from 'ngx-bootstrap';
9	import { PagoConTarjetaComponent } from '../pago-con-tarjeta/pago-con-tarjeta.component';	9	import { PagoConTarjetaComponent } from '../pago-con-tarjeta/pago-con-tarjeta.component';
10		10
11	@Component({	11	@Component({
12	selector: 'app-confirmacion-carrito',	12	selector: 'app-confirmacion-carrito',
13	templateUrl: './confirmacion-carrito.component.html',	13	templateUrl: './confirmacion-carrito.component.html',
14	styleUrls: ['./confirmacion-carrito.component.scss']	14	styleUrls: ['./confirmacion-carrito.component.scss']
15	})	15	})
16	export class ConfirmacionCarritoComponent implements OnInit, OnDestroy {	16	export class ConfirmacionCarritoComponent implements OnInit, OnDestroy {
17		17
18	private apiImagenes: string = APP_SETTINGS.apiImagenes;	18	private apiDeboSuite: string = APP_SETTINGS.apiDeboSuite;
19	private compraConEfectivofinalizada: boolean = false;	19	private compraConEfectivofinalizada: boolean = false;
20	private compraConQRfinalizada: boolean = false;	20	private compraConQRfinalizada: boolean = false;
21	private productos: Producto[] = [];	21	private productos: Producto[] = [];
22	private total: number = 0;	22	private total: number = 0;
23	private timerReposo: any;	23	private timerReposo: any;
24	private verQR: boolean = false;	24	private verQR: boolean = false;
25	private subscribePago: Subscription;	25	private subscribePago: Subscription;
26	private pedidoAnombreDe: string = '';	26	private pedidoAnombreDe: string = '';
27		27
28	constructor(	28	constructor(
29	private location: Location,	29	private location: Location,
30	private productoService: ProductoService,	30	private productoService: ProductoService,
31	private router: Router,	31	private router: Router,
32	private modalService: BsModalService,	32	private modalService: BsModalService,
33	) { }	33	) { }
34		34
35	ngOnInit() {	35	ngOnInit() {
36		36
37	this.timerReposo = setTimeout(() => {	37	this.timerReposo = setTimeout(() => {
38		38
39	this.router.navigate(['cancelar-compra']);	39	this.router.navigate(['cancelar-compra']);
40	}, 90000)	40	}, 90000)
41	this.productos = this.productoService.productos;	41	this.productos = this.productoService.productos;
42	}	42	}
43		43
44	ngOnDestroy() {	44	ngOnDestroy() {
45		45
46	if (this.subscribePago !== undefined) {	46	if (this.subscribePago !== undefined) {
47	this.subscribePago.unsubscribe();	47	this.subscribePago.unsubscribe();
48	}	48	}
49	clearTimeout(this.timerReposo);	49	clearTimeout(this.timerReposo);
50	}	50	}
51		51
52	volverPreviousPage() {	52	volverPreviousPage() {
53		53
54	if (this.subscribePago !== undefined) {	54	if (this.subscribePago !== undefined) {
55	this.subscribePago.unsubscribe();	55	this.subscribePago.unsubscribe();
56	}	56	}
57		57
58	if (this.verQR) {	58	if (this.verQR) {
59	this.verQR = !this.verQR;	59	this.verQR = !this.verQR;
60	return;	60	return;
61	}	61	}
62		62
63	this.location.back();	63	this.location.back();
64	}	64	}
65		65
66	getTotal() {	66	getTotal() {
67		67
68	var subTotal = 0;	68	var subTotal = 0;
69	this.productos.forEach(producto => {	69	this.productos.forEach(producto => {
70		70
71	subTotal = subTotal + (producto.PreVen * producto.cantidad);	71	subTotal = subTotal + (producto.PreVen * producto.cantidad);
72	});	72	});
73	return this.total = subTotal;	73	return this.total = subTotal;
74	}	74	}
75		75
76	reiniciarTimer() {	76	reiniciarTimer() {
77		77
78	clearTimeout(this.timerReposo);	78	clearTimeout(this.timerReposo);
79	this.timerReposo = setTimeout(() => {	79	this.timerReposo = setTimeout(() => {
80		80
81	this.router.navigate(['cancelar-compra']);	81	this.router.navigate(['cancelar-compra']);
82	}, 90000)	82	}, 90000)
83	}	83	}
84		84
85	//#region METODOS PARA LA FORMA DE PAGO	85	//#region METODOS PARA LA FORMA DE PAGO
86	pagar(medioPago: number) {	86	pagar(medioPago: number) {
87		87
88	this.verQR = medioPago === 9 ? true : false;	88	this.verQR = medioPago === 9 ? true : false;
89	let dataPago = {	89	let dataPago = {
90	medioPago: medioPago,	90	medioPago: medioPago,
91	pedidoAnombreDe: this.pedidoAnombreDe	91	pedidoAnombreDe: this.pedidoAnombreDe
92	}	92	}
93	this.subscribePago = this.productoService.pagar(dataPago)	93	this.subscribePago = this.productoService.pagar(dataPago)
94	.subscribe((res: any) => {	94	.subscribe((res: any) => {
95		95
96	clearTimeout(this.timerReposo);	96	clearTimeout(this.timerReposo);
97		97
98	if (medioPago === 1) {	98	if (medioPago === 1) {
99	this.compraConEfectivofinalizada = true;	99	this.compraConEfectivofinalizada = true;
100	} else if (medioPago === 9) {	100	} else if (medioPago === 9) {
101	this.compraConQRfinalizada = true;	101	this.compraConQRfinalizada = true;
102	}	102	}
103		103
104	setTimeout(() => {	104	setTimeout(() => {
105		105
106	this.router.navigate(['mensaje-final']);	106	this.router.navigate(['mensaje-final']);
107	}, 10000);	107	}, 10000);
108	}, err => {	108	}, err => {
109		109
110	console.error(err);	110	console.error(err);
111	alert('Algo salió mal');	111	alert('Algo salió mal');
112	})	112	})
113	}	113	}
114	//#endregion	114	//#endregion
115		115
116	abrirPagoConTarjeta() {	116	abrirPagoConTarjeta() {
117		117
118	this.modalService.show(PagoConTarjetaComponent, {	118	this.modalService.show(PagoConTarjetaComponent, {
119	class: 'modal-lg',	119	class: 'modal-lg',
120	ignoreBackdropClick: true,	120	ignoreBackdropClick: true,
121	initialState: { importeTotal: this.total },	121	initialState: { importeTotal: this.total },
122	});	122	});
123	}	123	}
124	}	124	}
125		125

src/app/components/header/header.component.html

Diff comments View file @ 0ac5232

1	<div class="row m-0 bg-light p-3 justify-content-between">	1	<div class="row m-0 bg-light p-3 justify-content-between">
2	<div class="col-6">	2	<div class="col-6">
3	<img	3	<img
4	draggable="false"	4	draggable="false"
5	ondragstart="return false;"	5	ondragstart="return false;"
6	(contextmenu)="false"	6	(contextmenu)="false"
7	(press)="openConfigurationScreen()"	7	(press)="openConfigurationScreen()"
8	class="w-25 float-left"	8	class="w-25 float-left"
9	src="{{apiImagenes}}/imagenes/logoempresa.png">	9	src="{{apiDeboSuite}}/imagenes/logoempresa.png">
10	</div>	10	</div>
11	<div class="col-6">	11	<div class="col-6">
12	<img class="w-25 float-right" src="../../../assets/img/logodebo.png">	12	<img class="w-25 float-right" src="../../../assets/img/logodebo.png">
13	</div>	13	</div>
14	</div>	14	</div>
15		15

src/app/components/header/header.component.ts

Diff comments View file @ 0ac5232

1	import { Component, OnInit, HostListener } from '@angular/core';	1	import { Component, OnInit, HostListener } from '@angular/core';
2	import { APP_SETTINGS } from 'src/etc/AppSettings';	2	import { APP_SETTINGS } from 'src/etc/AppSettings';
3	import { BsModalService } from 'ngx-bootstrap';	3	import { BsModalService } from 'ngx-bootstrap';
4	import { ConfiguracionComponent } from '../configuracion/configuracion.component';	4	import { ConfiguracionComponent } from '../configuracion/configuracion.component';
5		5
6	@Component({	6	@Component({
7	selector: 'app-header',	7	selector: 'app-header',
8	templateUrl: './header.component.html',	8	templateUrl: './header.component.html',
9	styleUrls: ['./header.component.scss']	9	styleUrls: ['./header.component.scss']
10	})	10	})
11	export class HeaderComponent implements OnInit {	11	export class HeaderComponent implements OnInit {
12		12
13	private apiImagenes : string = APP_SETTINGS.apiImagenes;	13	private apiDeboSuite : string = APP_SETTINGS.apiDeboSuite;
14	timer: any;	14	timer: any;
15	isShowModalConfiguration = false;	15	isShowModalConfiguration = false;
16		16
17	constructor(	17	constructor(
18	private modalService: BsModalService,	18	private modalService: BsModalService,
19	) { }	19	) { }
20		20
21	ngOnInit() {	21	ngOnInit() {
22	}	22	}
23		23
24	@HostListener('document:keydown.Control.Shift.A', ['$event'])	24	@HostListener('document:keydown.Control.Shift.A', ['$event'])
25	openConfigurationScreen(delay: number = 3000) {	25	openConfigurationScreen(delay: number = 3000) {
26		26
27	if (this.isShowModalConfiguration) return;	27	if (this.isShowModalConfiguration) return;
28		28
29	this.modalService.onHide	29	this.modalService.onHide
30	.subscribe(() => this.isShowModalConfiguration = false);	30	.subscribe(() => this.isShowModalConfiguration = false);
31		31
32	this.timer = setTimeout(() => {	32	this.timer = setTimeout(() => {
33		33
34	this.isShowModalConfiguration = true;	34	this.isShowModalConfiguration = true;
35	this.modalService.show(ConfiguracionComponent, {	35	this.modalService.show(ConfiguracionComponent, {
36	class: 'modal-md',	36	class: 'modal-md',
37	ignoreBackdropClick: true,	37	ignoreBackdropClick: true,
38	});	38	});
39	}, delay);	39	}, delay);
40	}	40	}
41		41
42	resetCountDown() {	42	resetCountDown() {
43		43
44	clearTimeout(this.timer);	44	clearTimeout(this.timer);
45	}	45	}
46		46
47	}	47	}
48		48

src/app/components/home/home.component.html

Diff comments View file @ 0ac5232

1	<div class="container-fluid p-0">	1	<div class="container-fluid p-0">
2	<img	2	<img
3	src="../../../assets/img/homeBackground.jpg"	3	src="../../../assets/img/homeBackground.jpg"
4	class="background-image vh-100 w-100">	4	class="background-image vh-100 w-100">
5	<div	5	<div
6	class="fade-in vh-100 d-flex align-content-between flex-wrap disable-user-select"	6	class="fade-in vh-100 d-flex align-content-between flex-wrap disable-user-select"
7	[routerLink]="['/inicio']">	7	[routerLink]="['/inicio']">
8		8
9	<!-- HEADER -->	9	<!-- HEADER -->
10	<div class="vh-15 row m-0 flex-row w-100 bg-primary-gradient-horizontal">	10	<div class="vh-15 row m-0 flex-row w-100 bg-primary-gradient-horizontal">
11	<div class="h-100 w-50 bg-white rounded-bottom-right">	11	<div class="h-100 w-50 bg-white rounded-bottom-right">
12	<img class="h-100 p-2 m-auto d-block" src="{{apiImagenes}}/imagenes/logoempresa.png">	12	<img class="h-100 p-2 m-auto d-block" src="{{apiDeboSuite}}/imagenes/logoempresa.png">
13	</div>	13	</div>
14	</div>	14	</div>
15		15
16	<!-- INFO DE BIENVENIDA -->	16	<!-- INFO DE BIENVENIDA -->
17	<div class="h-50 row flex-row justify-content-around align-items-center w-100 m-3">	17	<div class="h-50 row flex-row justify-content-around align-items-center w-100 m-3">
18	<iframe	18	<iframe
19	class="w-50 h-100 border-0 rounded fade-in"	19	class="w-50 h-100 border-0 rounded fade-in"
20	src="https://www.youtube.com/embed/vb8ZcalBDyw?&autoplay=1&loop=1&playlist=vb8ZcalBDyw&controls=0&showinfo=0&mute=1">	20	src="https://www.youtube.com/embed/vb8ZcalBDyw?&autoplay=1&loop=1&playlist=vb8ZcalBDyw&controls=0&showinfo=0&mute=1">
21	</iframe>	21	</iframe>
22	<div class="w-auto text-center text-white">	22	<div class="w-auto text-center text-white">
23	<p class="display-4 font-weight-bold m-0">¡BIENVENIDO!</p>	23	<p class="display-4 font-weight-bold m-0">¡BIENVENIDO!</p>
24	<p class="display-4 m-0 font-weight-bold">Toque la pantalla<br>para comenzar</p>	24	<p class="display-4 m-0 font-weight-bold">Toque la pantalla<br>para comenzar</p>
25	</div>	25	</div>
26	</div>	26	</div>
27		27
28	<!-- FOOTER -->	28	<!-- FOOTER -->
29	<div class="vh-15 row m-0 flex-row-reverse w-100 bg-gray">	29	<div class="vh-15 row m-0 flex-row-reverse w-100 bg-gray">
30	<div class="h-100 w-50 bg-white rounded-top-left">	30	<div class="h-100 w-50 bg-white rounded-top-left">
31	<img class="h-100 p-2 m-auto d-block" src="../../../assets/img/logodebo.png">	31	<img class="h-100 p-2 m-auto d-block" src="../../../assets/img/logodebo.png">
32	</div>	32	</div>
33	</div>	33	</div>
34		34
35	</div>	35	</div>
36	</div>	36	</div>
37		37

src/app/components/home/home.component.ts

Diff comments View file @ 0ac5232

1	import { Component, OnInit, HostListener } from '@angular/core';	1	import { Component, OnInit, HostListener } from '@angular/core';
2	import { Router } from '@angular/router';	2	import { Router } from '@angular/router';
3	import { APP_SETTINGS } from 'src/etc/AppSettings';	3	import { APP_SETTINGS } from 'src/etc/AppSettings';
4		4
5	@Component({	5	@Component({
6	selector: 'app-home',	6	selector: 'app-home',
7	templateUrl: './home.component.html',	7	templateUrl: './home.component.html',
8	styleUrls: ['./home.component.scss']	8	styleUrls: ['./home.component.scss']
9	})	9	})
10	export class HomeComponent implements OnInit {	10	export class HomeComponent implements OnInit {
11		11
12	private apiImagenes: string = APP_SETTINGS.apiImagenes;	12	private apiDeboSuite: string = APP_SETTINGS.apiDeboSuite;
13		13
14	constructor() { }	14	constructor() { }
15		15
16	ngOnInit() {	16	ngOnInit() {
17	}	17	}
18		18
19	}	19	}
20		20

src/app/components/inicio/inicio.component.html

Diff comments View file @ 0ac5232

1	<div class="row m-0 fade-in" [hidden]="!mostrarPantalla">	1	<div class="row m-0 fade-in" [hidden]="!mostrarPantalla">
2	<div class="col-12 p-0">	2	<div class="col-12 p-0">
3		3
4	<!-- NOMBRE DE SECCION -->	4	<!-- NOMBRE DE SECCION -->
5	<div class="row m-0">	5	<div class="row m-0">
6	<div class="col-12 p-0">	6	<div class="col-12 p-0">
7	<p class="h5 m-0 py-1 bg-gray text-muted text-center">Inicio</p>	7	<p class="h5 m-0 py-1 bg-gray text-muted text-center">Inicio</p>
8	</div>	8	</div>
9	</div>	9	</div>
10		10
11	<div class="row m-0 d-flex align-items-start disable-user-select">	11	<div class="row m-0 d-flex align-items-start disable-user-select">
12	<div class="col-md-5 py-3 pr-0 d-flex align-items-end flex-column">	12	<div class="col-md-5 py-3 pr-0 d-flex align-items-end flex-column">
13		13
14	<!-- PROMOCIONES -->	14	<!-- PROMOCIONES -->
15	<div	15	<div
16	(click)="irBusquedaProductos('promociones')"	16	(click)="irBusquedaProductos('promociones')"
17	class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">	17	class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
18	<div class="card-body text-left px-4 py-3">	18	<div class="card-body text-left px-4 py-3">
19	<div class="row">	19	<div class="row">
20	<div class="col-auto">	20	<div class="col-auto">
21	<p class="m-0 h3 card-title">Promociones</p>	21	<p class="m-0 h3 card-title">Promociones</p>
22	</div>	22	</div>
23	<div class="col-auto p-0">	23	<div class="col-auto p-0">
24	<img src="{{apiImagenes}}/imagenes/primario.promociones.png" class="w-15 m-0">	24	<img src="{{apiDeboSuite}}/imagenes/primario.promociones.png" class="w-15 m-0">
25	</div>	25	</div>
26	</div>	26	</div>
27	<p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>	27	<p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
28	</div>	28	</div>
29	<!-- CAROUSEL -->	29	<!-- CAROUSEL -->
30	<carousel [showIndicators]="false" [interval]="1500">	30	<carousel [showIndicators]="false" [interval]="1500">
31	<slide class="h-100">	31	<slide class="h-100">
32	<img	32	<img
33	src="{{apiImagenes}}/imagenes/beldent.jpg"	33	src="{{apiDeboSuite}}/imagenes/beldent.jpg"
34	class="fade-in d-block w-75 m-auto rounded">	34	class="fade-in d-block w-75 m-auto rounded">
35	</slide>	35	</slide>
36	<slide class="h-100">	36	<slide class="h-100">
37	<img	37	<img
38	src="{{apiImagenes}}/imagenes/cafe con leche y medialunas.jpg"	38	src="{{apiDeboSuite}}/imagenes/cafe con leche y medialunas.jpg"
39	class="fade-in d-block w-75 m-auto rounded">	39	class="fade-in d-block w-75 m-auto rounded">
40	</slide>	40	</slide>
41	<slide class="h-100">	41	<slide class="h-100">
42	<img	42	<img
43	src="{{apiImagenes}}/imagenes/Surtido bagley.jpg"	43	src="{{apiDeboSuite}}/imagenes/Surtido bagley.jpg"
44	class="fade-in d-block w-75 m-auto rounded">	44	class="fade-in d-block w-75 m-auto rounded">
45	</slide>	45	</slide>
46	<slide class="h-100">	46	<slide class="h-100">
47	<img	47	<img
48	src="{{apiImagenes}}/imagenes/yogurisimo.jpg"	48	src="{{apiDeboSuite}}/imagenes/yogurisimo.jpg"
49	class="fade-in d-block w-75 m-auto rounded">	49	class="fade-in d-block w-75 m-auto rounded">
50	</slide>	50	</slide>
51	</carousel>	51	</carousel>
52	</div>	52	</div>
53		53
54	<!-- ORDENAR -->	54	<!-- ORDENAR -->
55	<div (click)="irBusquedaProductos('ordenar')"	55	<div (click)="irBusquedaProductos('ordenar')"
56	class="card card-effect bg-white border-0 shadow rounded w-100 mt-3">	56	class="card card-effect bg-white border-0 shadow rounded w-100 mt-3">
57	<div class="card-body text-left px-4 py-3">	57	<div class="card-body text-left px-4 py-3">
58	<div class="row">	58	<div class="row">
59	<div class="col-auto">	59	<div class="col-auto">
60	<p class="m-0 h3 card-title">Ordenar Pedido</p>	60	<p class="m-0 h3 card-title">Ordenar Pedido</p>
61	</div>	61	</div>
62	<div class="col-auto p-0">	62	<div class="col-auto p-0">
63	<img src="{{apiImagenes}}/imagenes/primario.ordenar.png" class="w-15">	63	<img src="{{apiDeboSuite}}/imagenes/primario.ordenar.png" class="w-15">
64	</div>	64	</div>
65	</div>	65	</div>
66	<p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>	66	<p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
67	</div>	67	</div>
68	<img	68	<img
69	class="card-img-bottom d-block w-100 mx-auto rounded"	69	class="card-img-bottom d-block w-100 mx-auto rounded"
70	src="{{apiImagenes}}/imagenes/cafe.jpg">	70	src="{{apiDeboSuite}}/imagenes/cafe.jpg">
71	</div>	71	</div>
72	</div>	72	</div>
73		73
74	<div class="col-md-7 py-3 d-flex align-items-end flex-column mt-4 mt-md-0">	74	<div class="col-md-7 py-3 d-flex align-items-end flex-column mt-4 mt-md-0">
75		75
76	<!-- CARGAR PRODUCTOS -->	76	<!-- CARGAR PRODUCTOS -->
77	<ng-template #popTemplate>	77	<ng-template #popTemplate>
78	<app-popover-promos	78	<app-popover-promos
79	*ngIf="promociones.length > 0 && sinonimos.length === 0"	79	*ngIf="promociones.length > 0 && sinonimos.length === 0"
80	[popover]="popoverDirective"	80	[popover]="popoverDirective"
81	[popoverContent]="promociones"	81	[popoverContent]="promociones"
82	(promoSeleccionada)="promoSeleccionada($event, false)"	82	(promoSeleccionada)="promoSeleccionada($event, false)"
83	class="text-white rounded-sm border-0">	83	class="text-white rounded-sm border-0">
84	</app-popover-promos>	84	</app-popover-promos>
85	<app-popover-sinonimos	85	<app-popover-sinonimos
86	*ngIf="sinonimos.length > 0"	86	*ngIf="sinonimos.length > 0"
87	[popover]="popoverDirective"	87	[popover]="popoverDirective"
88	[popoverContent]="sinonimos"	88	[popoverContent]="sinonimos"
89	(productosPersonalizados)="productosPersonalizados($event)"	89	(productosPersonalizados)="productosPersonalizados($event)"
90	class="text-white rounded-sm border-0">	90	class="text-white rounded-sm border-0">
91	</app-popover-sinonimos>	91	</app-popover-sinonimos>
92	</ng-template>	92	</ng-template>
93	<div	93	<div
94	placement="left"	94	placement="left"
95	triggers=""	95	triggers=""
96	[popover]="popTemplate"	96	[popover]="popTemplate"
97	class="w-100"	97	class="w-100"
98	#pop="bs-popover">	98	#pop="bs-popover">
99	<div class="card bg-white border-0 shadow rounded mb-auto">	99	<div class="card bg-white border-0 shadow rounded mb-auto">
100	<div class="card-body text-left px-4 py-3">	100	<div class="card-body text-left px-4 py-3">
101	<div class="row">	101	<div class="row">
102	<div class="col-auto">	102	<div class="col-auto">
103	<p class="m-0 h3 card-title">Cargar Productos</p>	103	<p class="m-0 h3 card-title">Cargar Productos</p>
104	</div>	104	</div>
105	<div class="col-auto p-0">	105	<div class="col-auto p-0">
106	<img src="../../../assets/img/escanear.png" class="w-15">	106	<img src="../../../assets/img/escanear.png" class="w-15">
107	</div>	107	</div>
108	</div>	108	</div>
109	<p class="h5 card-text text-muted font-weight-light">	109	<p class="h5 card-text text-muted font-weight-light">
110	Coloque un producto frente<br>	110	Coloque un producto frente<br>
111	al lector de códigos o selecciónelo en pantalla.	111	al lector de códigos o selecciónelo en pantalla.
112	</p>	112	</p>
113	</div>	113	</div>
114	<div class="row mx-3 mb-3">	114	<div class="row mx-3 mb-3">
115	<div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm">	115	<div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm">
116	<!-- IMAGEN DE ESCANER -->	116	<!-- IMAGEN DE ESCANER -->
117	<img	117	<img
118	*ngIf="!productoAcargar"	118	*ngIf="!productoAcargar"
119	class="card-img-top d-block w-100 mx-auto rounded-sm"	119	class="card-img-top d-block w-100 mx-auto rounded-sm"
120	src="../../../assets/img/escanner.jpg">	120	src="../../../assets/img/escanner.jpg">
121		121
122	<!-- PRODUCTO A CARGAR -->	122	<!-- PRODUCTO A CARGAR -->
123	<div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar">	123	<div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar">
124	<img	124	<img
125	class="card-img-top d-block w-75 shadow mx-auto rounded-sm"	125	class="card-img-top d-block w-75 shadow mx-auto rounded-sm"
126	src="{{apiImagenes}}/imagenes/{{productoAcargar.imagenes[0].imagen}}">	126	src="{{apiDeboSuite}}/imagenes/{{productoAcargar.imagenes[0].imagen}}">
127		127
128	<div class="row justify-content-between m-3">	128	<div class="row justify-content-between m-3">
129	<div class="col-12 text-left px-1">	129	<div class="col-12 text-left px-1">
130	<p class="h6 font-weight-bold mb-0">{{productoAcargar.DET_LAR}}</p>	130	<p class="h6 font-weight-bold mb-0">{{productoAcargar.DET_LAR}}</p>
131	</div>	131	</div>
132	<div class="col-12 text-right mt-2">	132	<div class="col-12 text-right mt-2">
133	<p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen \| currency}}</p>	133	<p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen \| currency}}</p>
134	</div>	134	</div>
135	</div>	135	</div>
136	</div>	136	</div>
137		137
138	<!-- PROMO A CARGAR -->	138	<!-- PROMO A CARGAR -->
139	<div class="fade-in m-0" *ngIf="promoAcargar">	139	<div class="fade-in m-0" *ngIf="promoAcargar">
140	<img	140	<img
141	class="card-img-top d-block w-100 mx-auto rounded-sm"	141	class="card-img-top d-block w-100 mx-auto rounded-sm"
142	src="{{apiImagenes}}/imagenes/{{promoAcargar.imagenes[0].imagen}}">	142	src="{{apiDeboSuite}}/imagenes/{{promoAcargar.imagenes[0].imagen}}">
143		143
144	<div class="row justify-content-between m-3">	144	<div class="row justify-content-between m-3">
145	<div class="col-12 text-left px-1">	145	<div class="col-12 text-left px-1">
146	<p class="h6 font-weight-bold mb-0">{{promoAcargar.DET_LAR}}</p>	146	<p class="h6 font-weight-bold mb-0">{{promoAcargar.DET_LAR}}</p>
147	</div>	147	</div>
148	<div class="col-12 text-right mt-2 align-self-end">	148	<div class="col-12 text-right mt-2 align-self-end">
149	<p class="h5 font-weight-bold mb-0">{{promoAcargar.PreVen \| currency}}</p>	149	<p class="h5 font-weight-bold mb-0">{{promoAcargar.PreVen \| currency}}</p>
150	</div>	150	</div>
151	</div>	151	</div>
152	</div>	152	</div>
153		153
154	</div>	154	</div>
155	<!-- BOTONES DE CARGAR PRODUCTOS-->	155	<!-- BOTONES DE CARGAR PRODUCTOS-->
156	<div	156	<div
157	class="col-5 pr-0"	157	class="col-5 pr-0"
158	*ngIf="promociones.length > 0">	158	*ngIf="promociones.length > 0">
159	<button	159	<button
160	*ngIf="!promoAcargar \|\| sinonimos.length == 0"	160	*ngIf="!promoAcargar \|\| sinonimos.length == 0"
161	type="button"	161	type="button"
162	class="btn btn-primary btn-block shadow-sm"	162	class="btn btn-primary btn-block shadow-sm"
163	(click)="pop.show()">	163	(click)="pop.show()">
164	<span class="pr-2">Mostrar promociones</span>	164	<span class="pr-2">Mostrar promociones</span>
165	<i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i>	165	<i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i>
166	</button>	166	</button>
167	<button	167	<button
168	*ngIf="sinonimos.length == 0"	168	*ngIf="sinonimos.length == 0"
169	type="button"	169	type="button"
170	class="btn btn-light btn-block shadow-sm my-3"	170	class="btn btn-light btn-block shadow-sm my-3"
171	(click)="confirmarProducto()">	171	(click)="confirmarProducto()">
172	<span class="pr-2 font-weight-bold">Confirmar</span>	172	<span class="pr-2 font-weight-bold">Confirmar</span>
173	<i class="fa fa-check text-success" aria-hidden="true"></i>	173	<i class="fa fa-check text-success" aria-hidden="true"></i>
174	</button>	174	</button>
175	<button	175	<button
176	type="button"	176	type="button"
177	class="btn btn-light btn-block shadow-sm"	177	class="btn btn-light btn-block shadow-sm"
178	(click)="deshacerCarga()">	178	(click)="deshacerCarga()">
179	<span class="pr-2">Deshacer</span>	179	<span class="pr-2">Deshacer</span>
180	<i class="fa fa-undo text-warning" aria-hidden="true"></i>	180	<i class="fa fa-undo text-warning" aria-hidden="true"></i>
181	</button>	181	</button>
182	</div>	182	</div>
183	</div>	183	</div>
184	</div>	184	</div>
185	</div>	185	</div>
186		186
187	<!-- BUSCAR PRODUCTOS -->	187	<!-- BUSCAR PRODUCTOS -->
188	<div (click)="irBusquedaProductos('todos')"	188	<div (click)="irBusquedaProductos('todos')"
189	class="card card-effect bg-white border-0 shadow rounded w-100 mt-3">	189	class="card card-effect bg-white border-0 shadow rounded w-100 mt-3">
190	<div class="card-body text-left px-4 py-3">	190	<div class="card-body text-left px-4 py-3">
191	<div class="row">	191	<div class="row">
192	<div class="col-auto">	192	<div class="col-auto">
193	<p class="m-0 h3 card-title">Buscar Productos</p>	193	<p class="m-0 h3 card-title">Buscar Productos</p>
194	<p class="h5 card-text text-muted font-weight-light">	194	<p class="h5 card-text text-muted font-weight-light">
195	Busque aquí los productos<br>	195	Busque aquí los productos<br>
196	que no tienen código.</p>	196	que no tienen código.</p>
197	</div>	197	</div>
198	<div class="col-auto p-0">	198	<div class="col-auto p-0">
199	<img src="../../../assets/img/primario.buscar.png" class="w-15">	199	<img src="../../../assets/img/primario.buscar.png" class="w-15">
200	</div>	200	</div>
201	</div>	201	</div>
202		202
203	</div>	203	</div>
204	</div>	204	</div>
205		205
206	</div>	206	</div>
207		207
208	</div>	208	</div>
209		209
210	</div>	210	</div>
211	</div>	211	</div>
212		212
213	<div class="row m-0 fade-in" [hidden]="mostrarPantalla">	213	<div class="row m-0 fade-in" [hidden]="mostrarPantalla">
214	<p class="w-100 text-center">No está configurado el punto de venta</p>	214	<p class="w-100 text-center">No está configurado el punto de venta</p>
215	</div>	215	</div>
216		216

src/app/components/inicio/inicio.component.ts

Diff comments View file @ 0ac5232

1	import { Component, OnInit, ViewChild, HostListener, AfterViewInit } from '@angular/core';	1	import { Component, OnInit, ViewChild, HostListener, AfterViewInit } from '@angular/core';
2	import { PopoverDirective } from 'ngx-bootstrap';	2	import { PopoverDirective } from 'ngx-bootstrap';
3	import { APP_SETTINGS } from 'src/etc/AppSettings';	3	import { APP_SETTINGS } 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, AfterViewInit {	14	export class InicioComponent implements OnInit, AfterViewInit {
15		15
16	private tienePromo = false;	16	private tienePromo = false;
17	private productoEsPromo = false;	17	private productoEsPromo = false;
18	private busqueda: string = '';	18	private busqueda: string = '';
19	private productoAcargar: Producto;	19	private productoAcargar: Producto;
20	private promoAcargar: Producto;	20	private promoAcargar: Producto;
21	private productos: Producto[] = [];	21	private productos: Producto[] = [];
22	private promociones: Producto[] = [];	22	private promociones: Producto[] = [];
23	private sinonimos: Sinonimo[] = [];	23	private sinonimos: Sinonimo[] = [];
24	private apiImagenes: string = APP_SETTINGS.apiImagenes;	24	private apiDeboSuite: string = APP_SETTINGS.apiDeboSuite;
25	private mostrarPantalla : boolean = false;	25	private mostrarPantalla : boolean = false;
26		26
27	@ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;	27	@ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;
28		28
29	@HostListener('document:keypress', ["$event"]) catchInput(e: KeyboardEvent) {	29	@HostListener('document:keypress', ["$event"]) catchInput(e: KeyboardEvent) {
30		30
31	if (e.keyCode == 13) {	31	if (e.keyCode == 13) {
32	this.buscarByCodigoBarras(this.busqueda);	32	this.buscarByCodigoBarras(this.busqueda);
33	this.busqueda = '';	33	this.busqueda = '';
34	} else {	34	} else {
35	this.busqueda += e.key;	35	this.busqueda += e.key;
36	}	36	}
37	};	37	};
38		38
39	constructor(	39	constructor(
40	private router: Router,	40	private router: Router,
41	private productoService: ProductoService	41	private productoService: ProductoService
42	) { }	42	) { }
43		43
44	ngOnInit() {	44	ngOnInit() {
45		45
46	this.productoAcargar = this.productoService.productoAcargar;	46	this.productoAcargar = this.productoService.productoAcargar;
47	this.getProductos();	47	this.getProductos();
48	this.mostrarPantalla = localStorage.getItem('impresoraPVE') ? true : false;	48	this.mostrarPantalla = localStorage.getItem('impresoraPVE') ? true : false;
49	}	49	}
50		50
51	ngAfterViewInit() {	51	ngAfterViewInit() {
52		52
53	setTimeout(() => {	53	setTimeout(() => {
54	if (!this.productoAcargar) return;	54	if (!this.productoAcargar) return;
55		55
56	if (this.productoAcargar.PRO) {	56	if (this.productoAcargar.PRO) {
57	this.promociones.push(this.productoAcargar);	57	this.promociones.push(this.productoAcargar);
58	this.promoSeleccionada(this.productoAcargar, true);	58	this.promoSeleccionada(this.productoAcargar, true);
59	}	59	}
60	else {	60	else {
61	this.getPromociones();	61	this.getPromociones();
62	}	62	}
63	})	63	})
64	}	64	}
65		65
66	getProductos() {	66	getProductos() {
67		67
68	this.productoService.getAll()	68	this.productoService.getAll()
69	.subscribe((productos: Producto[]) => {	69	.subscribe((productos: Producto[]) => {
70	this.productos = productos;	70	this.productos = productos;
71	});	71	});
72	}	72	}
73		73
74	getPromociones() {	74	getPromociones() {
75		75
76	var sector = this.productoAcargar.CodSec;	76	var sector = this.productoAcargar.CodSec;
77	var codigo = this.productoAcargar.CodArt;	77	var codigo = this.productoAcargar.CodArt;
78	this.productoService.getPromociones(sector, codigo)	78	this.productoService.getPromociones(sector, codigo)
79	.subscribe((res: Producto[]) => {	79	.subscribe((res: Producto[]) => {
80		80
81	if (res.length === 0) {	81	if (res.length === 0) {
82		82
83	this.productoAcargar.cantidad ? false : this.productoAcargar.cantidad = 1;	83	this.productoAcargar.cantidad ? false : this.productoAcargar.cantidad = 1;
84	this.productoService.setProductos(this.productoAcargar);	84	this.productoService.setProductos(this.productoAcargar);
85	this.productoAcargar = this.productoService.productoAcargar = undefined;	85	this.productoAcargar = this.productoService.productoAcargar = undefined;
86	} else {	86	} else {
87		87
88	this.promociones = res;	88	this.promociones = res;
89	this.popoverDirective.show();	89	this.popoverDirective.show();
90	}	90	}
91	}, error => { console.error(error); })	91	}, error => { console.error(error); })
92	}	92	}
93		93
94	confirmarProducto() {	94	confirmarProducto() {
95		95
96	let producto = this.promoAcargar ? this.promoAcargar : this.productoAcargar;	96	let producto = this.promoAcargar ? this.promoAcargar : this.productoAcargar;
97		97
98	producto.cantidad = producto.cantidad ? producto.cantidad : 1;	98	producto.cantidad = producto.cantidad ? producto.cantidad : 1;
99		99
100	this.productoService.setProductos(producto);	100	this.productoService.setProductos(producto);
101	this.productoService.productoAcargar = this.promoAcargar = this.productoAcargar = undefined;	101	this.productoService.productoAcargar = this.promoAcargar = this.productoAcargar = undefined;
102	this.productoService.esPromoPersonalizada = false;	102	this.productoService.esPromoPersonalizada = false;
103	this.promociones = [];	103	this.promociones = [];
104	this.popoverDirective.hide();	104	this.popoverDirective.hide();
105	}	105	}
106		106
107	promoSeleccionada($event: Producto, showPopover: boolean) {	107	promoSeleccionada($event: Producto, showPopover: boolean) {
108		108
109	this.productoService.getProductoById($event.id)	109	this.productoService.getProductoById($event.id)
110	.subscribe((res: Producto) => {	110	.subscribe((res: Producto) => {
111		111
112	$event.imagenes = res.imagenes.length == 0 ? [{ imagen: 'noImage.jpg' }] : res.imagenes;	112	$event.imagenes = res.imagenes.length == 0 ? [{ imagen: 'noImage.jpg' }] : res.imagenes;
113	this.promoAcargar = $event;	113	this.promoAcargar = $event;
114		114
115	if ($event.tieneSinonimos) {	115	if ($event.tieneSinonimos) {
116	this.getSinonimos(this.promoAcargar.CodSec, this.promoAcargar.CodArt);	116	this.getSinonimos(this.promoAcargar.CodSec, this.promoAcargar.CodArt);
117	} else if (showPopover) {	117	} else if (showPopover) {
118	this.popoverDirective.show();	118	this.popoverDirective.show();
119	} else {	119	} else {
120	this.popoverDirective.hide();	120	this.popoverDirective.hide();
121	}	121	}
122		122
123	},	123	},
124	error => { console.log(error); })	124	error => { console.log(error); })
125	}	125	}
126		126
127	getSinonimos(sector, codigo) {	127	getSinonimos(sector, codigo) {
128		128
129	this.productoService.getPromocionSinonimos(sector, codigo)	129	this.productoService.getPromocionSinonimos(sector, codigo)
130	.subscribe((res: Sinonimo[]) => {	130	.subscribe((res: Sinonimo[]) => {
131		131
132	res.forEach(sinonimo => {	132	res.forEach(sinonimo => {
133		133
134	sinonimo.cantidad = 0;	134	sinonimo.cantidad = 0;
135	this.promoAcargar.productos.forEach(productoPromo => {	135	this.promoAcargar.productos.forEach(productoPromo => {
136		136
137	sinonimo.productos.forEach(productoSinonimo => {	137	sinonimo.productos.forEach(productoSinonimo => {
138		138
139	if (productoSinonimo.id === productoPromo.id) {	139	if (productoSinonimo.id === productoPromo.id) {
140	productoSinonimo.cantidad = productoPromo.cantidad;	140	productoSinonimo.cantidad = productoPromo.cantidad;
141	sinonimo.cantidad += productoPromo.cantidad;	141	sinonimo.cantidad += productoPromo.cantidad;
142	}	142	}
143	})	143	})
144	})	144	})
145	})	145	})
146	this.sinonimos = res;	146	this.sinonimos = res;
147	(this.sinonimos.length > 0) ? this.popoverDirective.show() : this.popoverDirective.hide();	147	(this.sinonimos.length > 0) ? this.popoverDirective.show() : this.popoverDirective.hide();
148	})	148	})
149	}	149	}
150		150
151	productosPersonalizados($event: Producto[]) {	151	productosPersonalizados($event: Producto[]) {
152		152
153	let productosPersonalizados = $event;	153	let productosPersonalizados = $event;
154		154
155	productosPersonalizados.forEach(productoElegido => {	155	productosPersonalizados.forEach(productoElegido => {
156		156
157	this.promoAcargar.productos = this.promoAcargar.productos.filter(productoPromo => {	157	this.promoAcargar.productos = this.promoAcargar.productos.filter(productoPromo => {
158	return productoPromo.idSinonimo != productoElegido.idSinonimo;	158	return productoPromo.idSinonimo != productoElegido.idSinonimo;
159	});	159	});
160	});	160	});
161		161
162	this.promoAcargar.productos = this.promoAcargar.productos.concat(productosPersonalizados);	162	this.promoAcargar.productos = this.promoAcargar.productos.concat(productosPersonalizados);
163		163
164	this.confirmarProducto();	164	this.confirmarProducto();
165	}	165	}
166		166
167	buscarByCodigoBarras(busqueda) {	167	buscarByCodigoBarras(busqueda) {
168		168
169	let producto = this.productos.filter(producto => {	169	let producto = this.productos.filter(producto => {
170	return producto.codigoBarra == busqueda;	170	return producto.codigoBarra == busqueda;
171	});	171	});
172		172
173	if (producto.length) {	173	if (producto.length) {
174		174
175	this.productoAcargar = producto[0];	175	this.productoAcargar = producto[0];
176	this.getPromociones();	176	this.getPromociones();
177		177
178	} else {	178	} else {
179	alert('No se encuentra el producto');	179	alert('No se encuentra el producto');
180	}	180	}
181		181
182	}	182	}
183		183
184	irBusquedaProductos(value) {	184	irBusquedaProductos(value) {
185		185
186	this.productoService.mostrar = value;	186	this.productoService.mostrar = value;
187	this.router.navigate(['busqueda-productos']);	187	this.router.navigate(['busqueda-productos']);
188	}	188	}
189		189
190	deshacerCarga() {	190	deshacerCarga() {
191		191
192	if (this.sinonimos.length > 0) {	192	if (this.sinonimos.length > 0) {
193	this.sinonimos = [];	193	this.sinonimos = [];
194	this.productoService.esPromoPersonalizada = false;	194	this.productoService.esPromoPersonalizada = false;
195	this.popoverDirective.hide();	195	this.popoverDirective.hide();
196	}	196	}
197		197
198	if (this.promoAcargar) {	198	if (this.promoAcargar) {
199	this.promoAcargar = undefined;	199	this.promoAcargar = undefined;
200	if (this.productoAcargar.PRO) {	200	if (this.productoAcargar.PRO) {
201	this.productoAcargar = undefined;	201	this.productoAcargar = undefined;
202	this.promociones = [];	202	this.promociones = [];
203	this.popoverDirective.hide();	203	this.popoverDirective.hide();
204	} else {	204	} else {
205	this.popoverDirective.show();	205	this.popoverDirective.show();
206	}	206	}
207	} else {	207	} else {
208	this.productoAcargar = undefined;	208	this.productoAcargar = undefined;
209	this.promociones = [];	209	this.promociones = [];
210	this.popoverDirective.hide();	210	this.popoverDirective.hide();
211	}	211	}
212	}	212	}
213		213
214	}	214	}
215		215

src/app/components/mensaje-final/mensaje-final.component.html

Diff comments View file @ 0ac5232

1	<div class="container-fluid fade-in p-0 disable-user-select">	1	<div class="container-fluid fade-in p-0 disable-user-select">
2	<img src="../../../assets/img/homeBackground.jpg" class="background-image vh-100 w-100">	2	<img src="../../../assets/img/homeBackground.jpg" class="background-image vh-100 w-100">
3	<div class="row m-0">	3	<div class="row m-0">
4	<div class="col p-0">	4	<div class="col p-0">
5	<div class="vh-100 fade-in d-flex align-content-between flex-wrap disable-user-select">	5	<div class="vh-100 fade-in d-flex align-content-between flex-wrap disable-user-select">
6		6
7	<!-- HEADER -->	7	<!-- HEADER -->
8	<div class="row m-0 w-100 bg-primary-gradient-horizontal">	8	<div class="row m-0 w-100 bg-primary-gradient-horizontal">
9	<div class="col-6 bg-white p-3 rounded-bottom-right">	9	<div class="col-6 bg-white p-3 rounded-bottom-right">
10	<img class="w-25 mx-auto d-block" src="{{apiImagenes}}/imagenes/logoempresa.png">	10	<img class="w-25 mx-auto d-block" src="{{apiDeboSuite}}/imagenes/logoempresa.png">
11	</div>	11	</div>
12	</div>	12	</div>
13		13
14	<div class="row py-5 m-0 w-100">	14	<div class="row py-5 m-0 w-100">
15	<div class="col-6 offset-3">	15	<div class="col-6 offset-3">
16	<div class="row h-100">	16	<div class="row h-100">
17	<div class="col-12 my-auto">	17	<div class="col-12 my-auto">
18	<div>	18	<div>
19	<div class="mb-5 mt-4">	19	<div class="mb-5 mt-4">
20	<p class="display-1 card-text text-center text-white font-weight-bold">	20	<p class="display-1 card-text text-center text-white font-weight-bold">
21	Gracias	21	Gracias
22	</p>	22	</p>
23	<p class="display-4 card-text text-center text-white font-weight-bold">	23	<p class="display-4 card-text text-center text-white font-weight-bold">
24	Por su compra	24	Por su compra
25	</p>	25	</p>
26	</div>	26	</div>
27	</div>	27	</div>
28	</div>	28	</div>
29	</div>	29	</div>
30	</div>	30	</div>
31	</div>	31	</div>
32		32
33	<!-- FOOTER -->	33	<!-- FOOTER -->
34	<div class="row m-0 w-100 bg-gray">	34	<div class="row m-0 w-100 bg-gray">
35	<div class="col-6 bg-white offset-6 p-3 rounded-top-left">	35	<div class="col-6 bg-white offset-6 p-3 rounded-top-left">
36	<img class="w-25 mx-auto d-block" src="../../../assets/img/logodebo.png">	36	<img class="w-25 mx-auto d-block" src="../../../assets/img/logodebo.png">
37	</div>	37	</div>
38	</div>	38	</div>
39		39
40	</div>	40	</div>
41	</div>	41	</div>
42	</div>	42	</div>
43	</div>	43	</div>
44		44

src/app/components/mensaje-final/mensaje-final.component.ts

Diff comments View file @ 0ac5232

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 { ProductoService } from 'src/app/services/producto.service';	3	import { ProductoService } from 'src/app/services/producto.service';
4	import { Router } from '@angular/router';	4	import { Router } from '@angular/router';
5		5
6	@Component({	6	@Component({
7	selector: 'app-mensaje-final',	7	selector: 'app-mensaje-final',
8	templateUrl: './mensaje-final.component.html',	8	templateUrl: './mensaje-final.component.html',
9	styleUrls: ['./mensaje-final.component.scss']	9	styleUrls: ['./mensaje-final.component.scss']
10	})	10	})
11	export class MensajeFinalComponent implements OnInit {	11	export class MensajeFinalComponent implements OnInit {
12		12
13	private apiImagenes: string = APP_SETTINGS.apiImagenes;	13	private apiDeboSuite: string = APP_SETTINGS.apiDeboSuite;
14	private timer: any;	14	private timer: any;
15		15
16	constructor(	16	constructor(
17	private productoService: ProductoService,	17	private productoService: ProductoService,
18	private router: Router	18	private router: Router
19	) { }	19	) { }
20		20
21	ngOnInit() {	21	ngOnInit() {
22		22
23	this.timer = setTimeout(() => {	23	this.timer = setTimeout(() => {
24		24
25	this.limpiarCarritoYvolver();	25	this.limpiarCarritoYvolver();
26	}, 3000)	26	}, 3000)
27	}	27	}
28		28
29	ngOnDestroy() {	29	ngOnDestroy() {
30		30
31	clearTimeout(this.timer);	31	clearTimeout(this.timer);
32	}	32	}
33		33
34	limpiarCarritoYvolver() {	34	limpiarCarritoYvolver() {
35		35
36	this.productoService.productoAcargar = undefined;	36	this.productoService.productoAcargar = undefined;
37	this.productoService.promoAcargar = undefined;	37	this.productoService.promoAcargar = undefined;
38	this.productoService.productos = [];	38	this.productoService.productos = [];
39	this.router.navigate(['/home']);	39	this.router.navigate(['/home']);
40	}	40	}
41		41
42	}	42	}
43		43

src/app/components/sidebar/sidebar.component.html

Diff comments View file @ 0ac5232

1	<div class="disable-user-select d-flex align-items-center flex-column h-100 text-center">	1	<div class="disable-user-select d-flex align-items-center flex-column h-100 text-center">
2		2
3	<!-- ENCABEZADO -->	3	<!-- ENCABEZADO -->
4	<p class="h4 border-bottom border-white text-white pb-2">	4	<p class="h4 border-bottom border-white text-white pb-2">
5	Mi compra	5	Mi compra
6	<i class="fa fa-shopping-cart" aria-hidden="true"></i>	6	<i class="fa fa-shopping-cart" aria-hidden="true"></i>
7	</p>	7	</p>
8		8
9	<div class="overflow-scroll px-1 mb-1 w-100">	9	<div class="overflow-scroll px-1 mb-1 w-100">
10	<!-- PRODUCTOS CARRITO -->	10	<!-- PRODUCTOS CARRITO -->
11	<div class="row m-0"	11	<div class="row m-0"
12	*ngFor="let producto of productosCarrito; let i = index"	12	*ngFor="let producto of productosCarrito; let i = index"
13	[@EnterLeave]="flyIn">	13	[@EnterLeave]="flyIn">
14	<div class="col p-0 my-1 bg-white border-0 rounded-sm">	14	<div class="col p-0 my-1 bg-white border-0 rounded-sm">
15	<div class="row m-0">	15	<div class="row m-0">
16	<div class="col-6 pl-1 pr-0 my-auto">	16	<div class="col-6 pl-1 pr-0 my-auto">
17	<img	17	<img
18	class="w-100 float-left rounded-sm shadow"	18	class="w-100 float-left rounded-sm shadow"
19	src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}">	19	src="{{apiDeboSuite}}/imagenes/{{producto.imagenes[0].imagen}}">
20	</div>	20	</div>
21	<div class="col-6 px-1">	21	<div class="col-6 px-1">
22	<!-- BOTONES -->	22	<!-- BOTONES -->
23	<div class="row m-0 d-flex justify-content-between">	23	<div class="row m-0 d-flex justify-content-between">
24		24
25	<!-- SUMAR - RESTAR CANTIDAD -->	25	<!-- SUMAR - RESTAR CANTIDAD -->
26	<div class="col p-1">	26	<div class="col p-1">
27	<div class="btn-group-sm btn-group float-left" role="group">	27	<div class="btn-group-sm btn-group float-left" role="group">
28	<button	28	<button
29	type="button"	29	type="button"
30	class="btn btn-light btn-sm border shadow"	30	class="btn btn-light btn-sm border shadow"
31	(click)="aumentarCantidad(producto)">	31	(click)="aumentarCantidad(producto)">
32	<i class="fa fa-plus" aria-hidden="true"></i>	32	<i class="fa fa-plus" aria-hidden="true"></i>
33	</button>	33	</button>
34	<div class="bg-white border border-white my-auto px-2 text-dark h5 shadow">	34	<div class="bg-white border border-white my-auto px-2 text-dark h5 shadow">
35	<small>{{producto.cantidad}}</small>	35	<small>{{producto.cantidad}}</small>
36	</div>	36	</div>
37	<button	37	<button
38	type="button"	38	type="button"
39	class="btn btn-light btn-sm border shadow"	39	class="btn btn-light btn-sm border shadow"
40	(click)="restarCantidad(producto)">	40	(click)="restarCantidad(producto)">
41	<i class="fa fa-minus" aria-hidden="true"></i>	41	<i class="fa fa-minus" aria-hidden="true"></i>
42	</button>	42	</button>
43	</div>	43	</div>
44	</div>	44	</div>
45		45
46	<!-- PERSONALIZAR -->	46	<!-- PERSONALIZAR -->
47	<div class="col p-1">	47	<div class="col p-1">
48	<button	48	<button
49	*ngIf="producto.tieneSinonimos"	49	*ngIf="producto.tieneSinonimos"
50	type="button"	50	type="button"
51	class="btn btn-light btn-sm float-left border shadow"	51	class="btn btn-light btn-sm float-left border shadow"
52	(click)="personalizarPromo(producto, i)">	52	(click)="personalizarPromo(producto, i)">
53	<i class="fa fa-refresh text-purple" aria-hidden="true"></i>	53	<i class="fa fa-refresh text-purple" aria-hidden="true"></i>
54	</button>	54	</button>
55	</div>	55	</div>
56		56
57	<!-- BORRAR -->	57	<!-- BORRAR -->
58	<div class="col p-1">	58	<div class="col p-1">
59	<button	59	<button
60	type="button"	60	type="button"
61	class="btn btn-secondary btn-sm float-right shadow"	61	class="btn btn-secondary btn-sm float-right shadow"
62	(click)="deleteProducto(producto, i)">	62	(click)="deleteProducto(producto, i)">
63	<i class="fa fa-trash" aria-hidden="true"></i>	63	<i class="fa fa-trash" aria-hidden="true"></i>
64	</button>	64	</button>
65	</div>	65	</div>
66	</div>	66	</div>
67	</div>	67	</div>
68	</div>	68	</div>
69	<div class="row m-0 shadow rounded-sm">	69	<div class="row m-0 shadow rounded-sm">
70	<div class="col px-2">	70	<div class="col px-2">
71	<p class="m-0 text-left h6"><small>{{producto.DetArt}}</small></p>	71	<p class="m-0 text-left h6"><small>{{producto.DetArt}}</small></p>
72	<p class="m-0 text-right font-weight-bold h6">{{producto.PreVen \| currency}}</p>	72	<p class="m-0 text-right font-weight-bold h6">{{producto.PreVen \| currency}}</p>
73	</div>	73	</div>
74	</div>	74	</div>
75	</div>	75	</div>
76	</div>	76	</div>
77	</div>	77	</div>
78		78
79	<!-- TOTAL -->	79	<!-- TOTAL -->
80	<div class="card rounded-top-sm mx-2 mt-auto blue-gradient border-0">	80	<div class="card rounded-top-sm mx-2 mt-auto blue-gradient border-0">
81	<div class="card-body p-2 pt-3 row m-0">	81	<div class="card-body p-2 pt-3 row m-0">
82	<div class="col-12 p-0">	82	<div class="col-12 p-0">
83	<p	83	<p
84	class="h4 border-bottom border-secondary text-secondary pb-2">	84	class="h4 border-bottom border-secondary text-secondary pb-2">
85	({{getCantidadProductos()}}) artículos	85	({{getCantidadProductos()}}) artículos
86	</p>	86	</p>
87	<p class="h4 text-secondary">Total</p>	87	<p class="h4 text-secondary">Total</p>
88	<p class="h2 font-weight-bold">{{getTotal() \| currency}}</p>	88	<p class="h2 font-weight-bold">{{getTotal() \| currency}}</p>
89	</div>	89	</div>
90	<div class="col-12 p-0">	90	<div class="col-12 p-0">
91	<button	91	<button
92	*ngIf="getCantidadProductos() > 0"	92	*ngIf="getCantidadProductos() > 0"
93	type="button"	93	type="button"
94	class="btn btn-block btn-light btn-lg shadow mb-2 p-1"	94	class="btn btn-block btn-light btn-lg shadow mb-2 p-1"
95	routerLink="/confirmacion-carrito">	95	routerLink="/confirmacion-carrito">
96	<span class="font-weight-bold pr-1">Pagar</span>	96	<span class="font-weight-bold pr-1">Pagar</span>
97	<i class="fa fa-check text-success" aria-hidden="true"></i>	97	<i class="fa fa-check text-success" aria-hidden="true"></i>
98	</button>	98	</button>
99	<button	99	<button
100	type="button"	100	type="button"
101	class="btn btn-block btn-light shadow btn-sm shadow"	101	class="btn btn-block btn-light shadow btn-sm shadow"
102	[routerLink]="['/cancelar-compra']">	102	[routerLink]="['/cancelar-compra']">
103	<span class="pr-1">Cancelar</span>	103	<span class="pr-1">Cancelar</span>
104	<i class="fa fa-times text-danger" aria-hidden="true"></i>	104	<i class="fa fa-times text-danger" aria-hidden="true"></i>
105	</button>	105	</button>
106	</div>	106	</div>
107	</div>	107	</div>
108	</div>	108	</div>
109	</div>	109	</div>
110		110

src/app/components/sidebar/sidebar.component.ts

Diff comments View file @ 0ac5232

1	import { Component, OnInit } from '@angular/core';	1	import { Component, OnInit } from '@angular/core';
2	import { Producto } from 'src/app/wrappers/producto';	2	import { Producto } from 'src/app/wrappers/producto';
3	import { APP_SETTINGS } from 'src/etc/AppSettings';	3	import { APP_SETTINGS } from 'src/etc/AppSettings';
4	import { ProductoService } from 'src/app/services/producto.service';	4	import { ProductoService } from 'src/app/services/producto.service';
5	import { Router } from '@angular/router';	5	import { Router } from '@angular/router';
6	import { trigger, state, style, transition, animate } from '@angular/animations';	6	import { trigger, state, style, transition, animate } from '@angular/animations';
7		7
8	@Component({	8	@Component({
9	selector: 'app-sidebar',	9	selector: 'app-sidebar',
10	templateUrl: './sidebar.component.html',	10	templateUrl: './sidebar.component.html',
11	styleUrls: ['./sidebar.component.scss'],	11	styleUrls: ['./sidebar.component.scss'],
12	animations: [	12	animations: [
13	trigger('EnterLeave', [	13	trigger('EnterLeave', [
14	state('flyIn', style({ transform: 'translateX(0)' })),	14	state('flyIn', style({ transform: 'translateX(0)' })),
15	transition(':enter', [	15	transition(':enter', [
16	style({ transform: 'translateX(-100%)' }),	16	style({ transform: 'translateX(-100%)' }),
17	animate('0.3s ease-in')	17	animate('0.3s ease-in')
18	]),	18	]),
19	transition(':leave', [	19	transition(':leave', [
20	animate('0.3s ease-out', style({ transform: 'translateX(-100%)' }))	20	animate('0.3s ease-out', style({ transform: 'translateX(-100%)' }))
21	])	21	])
22	])	22	])
23	]	23	]
24	})	24	})
25	export class SidebarComponent implements OnInit {	25	export class SidebarComponent implements OnInit {
26		26
27	private cantTotal: number = 0;	27	private cantTotal: number = 0;
28	private cantMin: number = 1;	28	private cantMin: number = 1;
29	private cantMax: number = 50;	29	private cantMax: number = 50;
30	private total: number = 0;	30	private total: number = 0;
31	private apiImagenes: string = APP_SETTINGS.apiImagenes;	31	private apiDeboSuite: string = APP_SETTINGS.apiDeboSuite;
32		32
33	public productosCarrito: Producto[] = [];	33	public productosCarrito: Producto[] = [];
34		34
35	constructor(	35	constructor(
36	private productoService: ProductoService,	36	private productoService: ProductoService,
37	private router: Router) {	37	private router: Router) {
38	this.router.routeReuseStrategy.shouldReuseRoute = function () {	38	this.router.routeReuseStrategy.shouldReuseRoute = function () {
39	return false;	39	return false;
40	}	40	}
41	}	41	}
42		42
43	ngOnInit() {	43	ngOnInit() {
44		44
45	this.productosCarrito = this.productoService.productos;	45	this.productosCarrito = this.productoService.productos;
46	}	46	}
47		47
48	getCantidadProductos() {	48	getCantidadProductos() {
49		49
50	var cantTotalAux = 0;	50	var cantTotalAux = 0;
51	this.productosCarrito.forEach(producto => {	51	this.productosCarrito.forEach(producto => {
52		52
53	cantTotalAux += producto.cantidad;	53	cantTotalAux += producto.cantidad;
54	});	54	});
55	this.cantTotal = cantTotalAux;	55	this.cantTotal = cantTotalAux;
56		56
57	return this.cantTotal;	57	return this.cantTotal;
58	}	58	}
59		59
60	getTotal() {	60	getTotal() {
61		61
62	var subTotal = 0;	62	var subTotal = 0;
63	for (let i = 0; i < this.productosCarrito.length; i++) {	63	for (let i = 0; i < this.productosCarrito.length; i++) {
64	subTotal = subTotal + (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad);	64	subTotal = subTotal + (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad);
65	}	65	}
66	return this.total = subTotal;	66	return this.total = subTotal;
67	}	67	}
68		68
69	aumentarCantidad(producto: Producto) {	69	aumentarCantidad(producto: Producto) {
70		70
71	if (producto.cantidad < this.cantMax) {	71	if (producto.cantidad < this.cantMax) {
72	producto.cantidad++;	72	producto.cantidad++;
73	this.cantTotal++	73	this.cantTotal++
74	}	74	}
75	}	75	}
76		76
77	restarCantidad(producto: Producto) {	77	restarCantidad(producto: Producto) {
78		78
79	if (producto.cantidad > this.cantMin) {	79	if (producto.cantidad > this.cantMin) {
80	producto.cantidad--;	80	producto.cantidad--;
81	this.cantTotal--;	81	this.cantTotal--;
82	}	82	}
83	}	83	}
84		84
85	deleteProducto(producto: Producto, index: number) {	85	deleteProducto(producto: Producto, index: number) {
86		86
87	this.cantTotal -= producto.cantidad;	87	this.cantTotal -= producto.cantidad;
88	this.total -= producto.PreVen * producto.cantidad;	88	this.total -= producto.PreVen * producto.cantidad;
89	delete producto.cantidad;	89	delete producto.cantidad;
90	this.productosCarrito.splice(index, 1);	90	this.productosCarrito.splice(index, 1);
91	}	91	}
92		92
93	personalizarPromo(producto: Producto, index) {	93	personalizarPromo(producto: Producto, index) {
94		94
95	this.productoService.productoAcargar = producto;	95	this.productoService.productoAcargar = producto;
96	this.productoService.esPromoPersonalizada = true;	96	this.productoService.esPromoPersonalizada = true;
97	this.deleteProducto(producto, index);	97	this.deleteProducto(producto, index);
98	this.router.navigate(['inicio']);	98	this.router.navigate(['inicio']);
99	}	99	}
100		100
101	}	101	}
102		102

src/app/services/cliente.service.ts

Diff comments View file @ 0ac5232

1	import { Injectable } from '@angular/core';	1	import { Injectable } from '@angular/core';
2	import { HttpClient } from '@angular/common/http';	2	import { HttpClient } from '@angular/common/http';
3	import { APP_SETTINGS } from "src/etc/AppSettings";	3	import { APP_SETTINGS } from "src/etc/AppSettings";
4		4
5	@Injectable({	5	@Injectable({
6	providedIn: 'root'	6	providedIn: 'root'
7	})	7	})
8	export class ClienteService {	8	export class ClienteService {
9		9
10	private urlCliente = APP_SETTINGS.apiClientes;	10	private urlCliente = APP_SETTINGS.apiDeboSuite;
11		11
12	constructor(private http: HttpClient) { }	12	constructor(private http: HttpClient) { }
13		13
14	getClienteById(id: number) {	14	getClienteById(id: number) {
15	return this.http.get(`${this.urlCliente}/get/${id}`);	15	return this.http.get(`${this.urlCliente}/clientes/get/${id}`);
16	}	16	}
17	}	17	}
18		18

src/app/services/comanda.service.ts

Diff comments View file @ 0ac5232

1	import { Injectable } from "@angular/core";	1	import { Injectable } from "@angular/core";
2	import { HttpClient } from "@angular/common/http";	2	import { HttpClient } from "@angular/common/http";
3	import { APP_SETTINGS } from "src/etc/AppSettings";	3	import { APP_SETTINGS } from "src/etc/AppSettings";
4	import { Observable } from "rxjs";	4	import { Observable } from "rxjs";
5		5
6	@Injectable({	6	@Injectable({
7	providedIn: "root"	7	providedIn: "root"
8	})	8	})
9	export class ComandaService {	9	export class ComandaService {
10	private urlAutoservicio: string = APP_SETTINGS.apiAutoservicio;	10	private urlDeboSuite: string = APP_SETTINGS.apiDeboSuite;
11		11
12	constructor(private http: HttpClient) { }	12	constructor(private http: HttpClient) { }
13		13
14	getAll(): Observable<any> {	14	getAll(): Observable<any> {
15		15
16	return this.http.get(`${this.urlAutoservicio}/comandas`);	16	return this.http.get(`${this.urlDeboSuite}/comandas`);
17	}	17	}
18		18
19	updateComanda(id: number, estado: number, observacion: string): Observable<any> {	19	updateComanda(id: number, estado: number, observacion: string): Observable<any> {
20		20
21	return this.http.get(`${this.urlAutoservicio}/comandas/update/${id}/${estado}/${observacion}`);	21	return this.http.get(`${this.urlDeboSuite}/comandas/update/${id}/${estado}/${observacion}`);
22	}	22	}
23		23
24	getPendientesEntrega() {	24	getPendientesEntrega() {
25		25
26	return this.http.get(`${this.urlAutoservicio}/comandas/pendientes-entrega`);	26	return this.http.get(`${this.urlDeboSuite}/comandas/pendientes-entrega`);
27	}	27	}
28	}	28	}
29		29

src/app/services/producto.service.ts

Diff comments View file @ 0ac5232

1	import { Injectable } from '@angular/core';	1	import { Injectable } from '@angular/core';
2	import { HttpClient } from '@angular/common/http';	2	import { HttpClient } from '@angular/common/http';
3	import { Observable } from 'rxjs';	3	import { Observable } from 'rxjs';
4	import { APP_SETTINGS } from 'src/etc/AppSettings';	4	import { APP_SETTINGS } from 'src/etc/AppSettings';
5	import { Producto } from '../wrappers/producto';	5	import { Producto } from '../wrappers/producto';
6	import { ClienteService } from './cliente.service';	6	import { ClienteService } from './cliente.service';
7		7
8	@Injectable({	8	@Injectable({
9	providedIn: 'root'	9	providedIn: 'root'
10	})	10	})
11	export class ProductoService {	11	export class ProductoService {
12		12
13	productos: Producto[] = [];	13	productos: Producto[] = [];
14	productoAcargar: Producto;	14	productoAcargar: Producto;
15	promoAcargar: Producto;	15	promoAcargar: Producto;
16	mostrar: string;	16	mostrar: string;
17	esPromoPersonalizada: boolean = false;	17	esPromoPersonalizada: boolean = false;
18		18
19	constructor(private http: HttpClient, private clienteService: ClienteService) { }	19	constructor(private http: HttpClient, private clienteService: ClienteService) { }
20		20
21	getProductoById(id): Observable<any> {	21	getProductoById(id): Observable<any> {
22		22
23	return this.http.get(`${APP_SETTINGS.apiAutoservicio}/articulos/${id}`);	23	return this.http.get(`${APP_SETTINGS.apiDeboSuite}/articulos/${id}`);
24	}	24	}
25		25
26	getAll(): Observable<any> {	26	getAll(): Observable<any> {
27		27
28	return this.http.get(`${APP_SETTINGS.apiAutoservicio}/articulos/`);	28	return this.http.get(`${APP_SETTINGS.apiDeboSuite}/articulos/`);
29	}	29	}
30		30
31	getAllWithPaginator(page: number = 1): Observable<any> {	31	getAllWithPaginator(page: number = 1): Observable<any> {
32		32
33	return this.http.get(`${APP_SETTINGS.apiAutoservicio}/articulos/${page}`);	33	return this.http.get(`${APP_SETTINGS.apiDeboSuite}/articulos/${page}`);
34	}	34	}
35		35
36	setProductos(producto: Producto) {	36	setProductos(producto: Producto) {
37		37
38	for (let i = 0; i < this.productos.length; i++) {	38	for (let i = 0; i < this.productos.length; i++) {
39		39
40	if (this.productos[i].id === producto.id) {	40	if (this.productos[i].id === producto.id) {
41		41
42	if (producto.PRO) {	42	if (producto.PRO) {
43	if (this.promosIdenticas(this.productos[i], producto)) {	43	if (this.promosIdenticas(this.productos[i], producto)) {
44	this.productos[i].cantidad++;	44	this.productos[i].cantidad++;
45	return;	45	return;
46	} else {	46	} else {
47	break;	47	break;
48	}	48	}
49	}	49	}
50	this.productos[i].cantidad++;	50	this.productos[i].cantidad++;
51	return;	51	return;
52	}	52	}
53	}	53	}
54		54
55	this.productos.unshift(producto);	55	this.productos.unshift(producto);
56	}	56	}
57		57
58	getPromocionByCodigos(sector, codigo): Observable<any> {	58	getPromocionByCodigos(sector, codigo): Observable<any> {
59		59
60	var url = `${APP_SETTINGS.apiAutoservicio}/promociones/by-codigos/${sector}/${codigo}`;	60	var url = `${APP_SETTINGS.apiDeboSuite}/promociones/by-codigos/${sector}/${codigo}`;
61	// var url = `${appSettings.apiUrl}/promociones/by-codigos/${2}/${7}`;	61	// var url = `${appSettings.apiUrl}/promociones/by-codigos/${2}/${7}`;
62	return this.http.get(url);	62	return this.http.get(url);
63	}	63	}
64		64
65	getPromociones(sector, codigo): Observable<any> {	65	getPromociones(sector, codigo): Observable<any> {
66		66
67	var url = `${APP_SETTINGS.apiAutoservicio}/promociones/incluir-articulo/${sector}/${codigo}`;	67	var url = `${APP_SETTINGS.apiDeboSuite}/promociones/incluir-articulo/${sector}/${codigo}`;
68	// var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${2}/${1306}`;	68	// var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${2}/${1306}`;
69	return this.http.get(url);	69	return this.http.get(url);
70	}	70	}
71		71
72	getPromocionSinonimos(sector, codigo): Observable<any> {	72	getPromocionSinonimos(sector, codigo): Observable<any> {
73		73
74	var url = `${APP_SETTINGS.apiAutoservicio}/sinonimos/promo/${sector}/${codigo}`;	74	var url = `${APP_SETTINGS.apiDeboSuite}/sinonimos/promo/${sector}/${codigo}`;
75	// var url = `${appSettings.apiUrl}/sinonimos/promo/${2}/${7}`;	75	// var url = `${appSettings.apiUrl}/sinonimos/promo/${2}/${7}`;
76	return this.http.get(url);	76	return this.http.get(url);
77	}	77	}
78		78
79	getCategorias() {	79	getCategorias() {
80		80
81	return this.http.get(`${APP_SETTINGS.apiAutoservicio}/categorias`);	81	return this.http.get(`${APP_SETTINGS.apiDeboSuite}/categorias`);
82	}	82	}
83		83
84	pagar(dataPago: any) {	84	pagar(dataPago: any) {
85		85
86	return new Observable((observer) => {	86	return new Observable((observer) => {
87		87
88	this.clienteService.getClienteById(-1).subscribe(cliente => {	88	this.clienteService.getClienteById(-1).subscribe(cliente => {
89		89
90	let puntoVenta = parseInt(localStorage.getItem('impresoraPVE'));	90	let puntoVenta = parseInt(localStorage.getItem('impresoraPVE'));
91	this.http.post(`${APP_SETTINGS.apiAutoservicio}/comprobante/guardar/${dataPago.medioPago}`, {	91	this.http.post(`${APP_SETTINGS.apiDeboSuite}/comprobante/guardar/${dataPago.medioPago}`, {
92	productos: this.productos,	92	productos: this.productos,
93	cliente: cliente,	93	cliente: cliente,
94	origen: 'autoservicio',	94	origen: 'autoservicio',
95	codigoVendedor: 5,	95	codigoVendedor: 5,
96	puntoVenta: dataPago.medioPago === 9 ? -1 * puntoVenta : puntoVenta,	96	puntoVenta: dataPago.medioPago === 9 ? -1 * puntoVenta : puntoVenta,
97	pedidoAnombreDe: dataPago.pedidoAnombreDe,	97	pedidoAnombreDe: dataPago.pedidoAnombreDe,
98	}).subscribe((data) => {	98	}).subscribe((data) => {
99		99
100	observer.next(data);	100	observer.next(data);
101	observer.complete();	101	observer.complete();
102	});	102	});
103	});	103	});
104	});	104	});
105	}	105	}
106		106
107	private promosIdenticas(promoEnCarrito: Producto, promo: Producto) {	107	private promosIdenticas(promoEnCarrito: Producto, promo: Producto) {
108		108
109	var sonIdenticas = true;	109	var sonIdenticas = true;
110	var productosPromoCarrito = promoEnCarrito.productos;	110	var productosPromoCarrito = promoEnCarrito.productos;
111	var productosPromoAcargar = promo.productos;	111	var productosPromoAcargar = promo.productos;
112		112
113	if (productosPromoCarrito.length !== productosPromoAcargar.length) {	113	if (productosPromoCarrito.length !== productosPromoAcargar.length) {
114	return false;	114	return false;
115	}	115	}
116		116
117	for (let i = 0; i < productosPromoCarrito.length; i++) {	117	for (let i = 0; i < productosPromoCarrito.length; i++) {
118		118
119	if (productosPromoCarrito[i].id !== productosPromoAcargar[i].id) {	119	if (productosPromoCarrito[i].id !== productosPromoAcargar[i].id) {
120	return false;	120	return false;
121	}	121	}
122	}	122	}
123		123
124	return sonIdenticas;	124	return sonIdenticas;
125	}	125	}
126		126
127	}	127	}
128		128

src/app/services/punto-venta.service.ts

Diff comments View file @ 0ac5232

 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { APP_SETTINGS } from 'src/etc/AppSettings';
 import { HttpClient } from '@angular/common/http';
 @Injectable({
   providedIn: 'root'
 })
 export class PuntoVentaService {
-  private apiAutoservico = APP_SETTINGS.apiAutoservicio;
   private apiDeboSuite = APP_SETTINGS.apiDeboSuite;
   constructor(
     private http: HttpClient
   ) { }
   getAll(): Observable<any> {
-    return this.http.get(`${this.apiAutoservico}/get/puntos-venta`);
+    return this.http.get(`${this.apiDeboSuite}/get/puntos-venta`);
   }
   getByID(id: number): Observable<any> {
-    return this.http.get(`${this.apiAutoservico}/get/punto-venta/${id}`);
+    return this.http.get(`${this.apiDeboSuite}/get/punto-venta/${id}`);
   }
   getVendedor(filter: any = {}): Observable<any> {
     return this.http.get(`${this.apiDeboSuite}/get/vendedor/${JSON.stringify(filter)}`);
   }
 }

src/app/services/tarjetas.service.ts

Diff comments View file @ 0ac5232

1	import { Injectable } from '@angular/core';	1	import { Injectable } from '@angular/core';
2	import { HttpClient } from '@angular/common/http';	2	import { HttpClient } from '@angular/common/http';
3	import { Observable } from 'rxjs';	3	import { Observable } from 'rxjs';
4	import { APP_SETTINGS } from 'src/etc/AppSettings';	4	import { APP_SETTINGS } from 'src/etc/AppSettings';
5		5
6	@Injectable({	6	@Injectable({
7	providedIn: 'root'	7	providedIn: 'root'
8	})	8	})
9	export class TarjetasService {	9	export class TarjetasService {
10		10
11	constructor(private http: HttpClient) { }	11	constructor(private http: HttpClient) { }
12		12
13	getTarjetas(): Observable<any> {	13	getTarjetas(): Observable<any> {
14		14
15	return this.http.get(`${APP_SETTINGS.apiAutoservicio}/tarjetas`);	15	return this.http.get(`${APP_SETTINGS.apiDeboSuite}/tarjetas`);
16	}	16	}
17	}	17	}
18		18

src/etc/AppSettings ejemplo.ts

Diff comments View file @ 0ac5232

1	export const APP_SETTINGS = {	1	export const APP_SETTINGS = {
2	// apiAutoservicio: 'http://10.231.45.117:4705/autoservicio',
3	// apiDeboSuite: 'http://10.231.45.117:9900',	2	// apiDeboSuite: 'http://10.231.45.117:9900',
4	// apiImagenes: 'http://10.231.45.117:4513/',
5	// apiClientes: 'http://localhost:1515/clientes'
6	};	3	};
7		4