Martin Macola / autoservicio

Download as
Browse Code »

Commit 986aef12649f095ea0768390337c707ce7772645

Authored by Eric Fernandez
2 parents ca54b5e448 5b402809cd
Exists in master

conflicts

Showing 9 changed files   Show diff stats
src/app/components/busqueda-productos/busqueda-productos.component.html
Diff comments   View file @ 986aef1
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 py-1 bg-gray text-muted text-center"> 7 <p class="h5 py-1 bg-gray text-muted text-center">
8 Búsqueda 8 Búsqueda
9 <i class="fa fa-search"></i> 9 <i class="fa fa-search"></i>
10 </p> 10 </p>
11 </div> 11 </div>
12 </div> 12 </div>
13 13
14 <div class="row m-3 disable-user-select"> 14 <div class="row m-3 disable-user-select">
15 15
16 <!-- FILTROS --> 16 <!-- FILTROS -->
17 <div *ngIf="queMostrar != 'promociones'" class="col-sm-2 p-1"> 17 <div *ngIf="queMostrar != 'promociones'" class="col-sm-2 p-1">
18 <div class="text-center"> 18 <div class="text-center">
19 <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p> 19 <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p>
20 </div> 20 </div>
21 <ul class="list-group"> 21 <ul class="list-group">
22 <li 22 <li
23 [ngClass]="{active: categoriaActive == 0}"
24 (click)="categoriaActive = 0; filterItems()"
25 class="list-group-item list-group-item-action text-center my-1 p-2 h6">
26 Todos
27 </li>
28 <li
23 *ngFor="let categoria of categorias" 29 *ngFor="let categoria of categorias"
24 [ngClass]="{active: categoriaActive == categoria.id}" 30 [ngClass]="{active: categoriaActive == categoria.id}"
25 (click)="categoriaActive = categoria.id; filterItems()" 31 (click)="categoriaActive = categoria.id; filterItems()"
26 class="list-group-item list-group-item-action text-center my-1 p-2 h6"> 32 class="list-group-item list-group-item-action text-center my-1 p-2 h6">
27 {{categoria.detalle}} 33 {{categoria.detalle}}
28 </li> 34 </li>
29 </ul> 35 </ul>
30 </div> 36 </div>
31 37
32 <!-- SEARCH INPUT --> 38 <!-- SEARCH INPUT -->
33 <div *ngIf="productos.length > 0" class="fade-in col"> 39 <div *ngIf="productos.length > 0" class="fade-in col">
34 40
35 <div class="row search"> 41 <div class="row search">
36 <div class="col-sm-10"> 42 <div class="col-sm-10">
37 <span class="fa fa-search form-control-lg form-control-search pl-3"></span> 43 <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
38 <input 44 <input
39 [matKeyboard]="'spanish'" 45 [matKeyboard]="'spanish'"
40 type="text" 46 type="text"
41 class="form-control form-control-lg shadow-sm rounded-pill px-5" 47 class="form-control form-control-lg shadow-sm rounded-pill px-5"
42 placeholder="Búsqueda productos" 48 placeholder="Búsqueda productos"
43 [(ngModel)]="searchTerm" 49 [(ngModel)]="searchTerm"
44 (ngModelChange)="filterItems()"> 50 (ngModelChange)="filterItems()">
45 </div> 51 </div>
46 <!-- BOTON VOLVER --> 52 <!-- BOTON VOLVER -->
47 <div class="col-sm-2"> 53 <div class="col-sm-2">
48 <button 54 <button
49 type="button" 55 type="button"
50 class="btn btn-light btn-lg shadow-sm" 56 class="btn btn-light btn-lg shadow-sm"
51 [routerLink]="['/inicio']"> 57 [routerLink]="['/inicio']">
52 <span class="font-weight-normal h6 pr-2">Volver</span> 58 <span class="font-weight-normal h6 pr-2">Volver</span>
53 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 59 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
54 </button> 60 </button>
55 </div> 61 </div>
56 <div class="col-sm-12 my-2"> 62 <div class="col-sm-12 my-2 h5">
57 <span class="badge badge-light px-2">Más vendidos</span> 63 <span class="badge badge-light px-2 text-muted shadow-sm">Más vendidos</span>
58 </div> 64 </div>
59 </div> 65 </div>
60 <!-- LISTA DE PRODUCTOS --> 66 <!-- LISTA DE PRODUCTOS -->
61 <div class="row align-items-start vh-70 overflow-scroll disable-user-select"> 67 <div class="row align-items-start vh-70 overflow-scroll disable-user-select">
62 <div 68 <div
63 class="col-4 p-2" 69 class="col-4 p-2"
64 *ngFor="let producto of auxProductos"> 70 *ngFor="let producto of auxProductos">
65 <div 71 <div
66 class="card-effect bg-white rounded-sm shadow border-0" 72 class="card-effect bg-white rounded-sm shadow border-0"
67 (click)="elegirProducto(producto)"> 73 (click)="elegirProducto(producto)">
68 <img src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}" class="rounded-sm w-100 m-auto"> 74 <img src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}" class="rounded-sm w-100 m-auto">
69 <div class="p-2"> 75 <div class="p-2">
70 <p class="h6 text-left m-0">{{producto.DetArt}}</p> 76 <p class="h6 text-left m-0">{{producto.DetArt}}</p>
71 <div class="row justify-content-between m-0"> 77 <div class="row justify-content-between m-0">
72 <div class="col-12 p-0"> 78 <div class="col-12 p-0">
73 <div class="text-left"> 79 <div class="text-left">
74 <p class="m-0 h6"><small>{{producto.DET_LAR}}</small></p> 80 <p class="m-0 h6"><small>{{producto.DET_LAR}}</small></p>
75 </div> 81 </div>
76 </div> 82 </div>
77 <div class="col-12 my-auto pt-2 pr-2 p-0"> 83 <div class="col-12 my-auto pt-2 pr-2 p-0">
78 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p> 84 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
79 </div> 85 </div>
80 </div> 86 </div>
81 </div> 87 </div>
82 </div> 88 </div>
83 </div> 89 </div>
84 </div> 90 </div>
85 </div> 91 </div>
86 92
87 <!-- SPINNER --> 93 <!-- SPINNER -->
88 <div 94 <div
89 *ngIf="productos.length === 0 && showSpinner" 95 *ngIf="productos.length === 0 && showSpinner"
90 class="col-sm-10 p-0 align-self-center text-center"> 96 class="col-sm-10 p-0 align-self-center text-center">
91 <div class="spinner-border spinner-lg text-secondary" role="status"></div> 97 <div class="spinner-border spinner-lg text-secondary" role="status"></div>
92 <span class="text-secondary m-2 h5">Cargando información.</span> 98 <span class="text-secondary m-2 h5">Cargando información.</span>
93 </div> 99 </div>
94 100
95 </div> 101 </div>
96 102
97 </div> 103 </div>
98 104
99 </div> 105 </div>
100 106
src/app/components/busqueda-productos/busqueda-productos.component.ts
Diff comments   View file @ 986aef1
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 { appSettings } from 'src/etc/AppSettings'; 5 import { appSettings } 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 = 'todo'; 20 private queMostrar: string = 'todo';
21 private apiUrl: string = appSettings.apiUrl; 21 private apiUrl: string = appSettings.apiUrl;
22 private categorias: Categoria[] = []; 22 private categorias: Categoria[] = [];
23 private blurFocus = new EventEmitter(); 23 private blurFocus = new EventEmitter();
24 24
25 constructor( 25 constructor(
26 private productoService: ProductoService, 26 private productoService: ProductoService,
27 private router: Router) { } 27 private router: Router) { }
28 28
29 ngOnInit() { 29 ngOnInit() {
30 30
31 this.queMostrar = this.productoService.mostrar; 31 this.queMostrar = this.productoService.mostrar;
32 32
33 this.productoService.getCategorias() 33 this.productoService.getCategorias()
34 .subscribe((categorias: Categoria[]) => { 34 .subscribe((categorias: Categoria[]) => {
35 this.categorias = categorias; 35 this.categorias = categorias;
36 36
37 switch (this.queMostrar) { 37 switch (this.queMostrar) {
38 case 'todos': 38 case 'todos':
39 this.categoriaActive = 1; 39 this.categoriaActive = 1;
40 break; 40 break;
41 case 'promociones': 41 case 'promociones':
42 this.categoriaActive = 1; 42 this.categoriaActive = 1;
43 break; 43 break;
44 case 'ordenar': 44 case 'ordenar':
45 45
46 this.categorias = this.categorias.filter((categoria: Categoria) => { 46 this.categorias = this.categorias.filter((categoria: Categoria) => {
47 return categoria.ES_PEDIDO; 47 return categoria.ES_PEDIDO;
48 }); 48 });
49 49
50 this.categoriaActive = this.categorias[0].id; 50 this.categoriaActive = this.categorias[0].id;
51 51
52 break; 52 break;
53 default: 53 default:
54 break; 54 break;
55 } 55 }
56
57 });
58
59 this.productoService.productoAcargar = undefined;
60 this.productoService.getAll()
56 61 .subscribe((data: Producto[]) => {
57 }); 62
58 63 this.productos = data;
59 this.productoService.productoAcargar = undefined; 64 this.filterItems();
60 this.productoService.getAll() 65 }, (error) => {
61 .subscribe((data: Producto[]) => { 66 this.showSpinner = false;
62 67 console.error(error);
63 this.productos = data; 68 });
64 this.filterItems(); 69 }
65 }, (error) => { 70
66 this.showSpinner = false; 71 filterItems() {
67 console.error(error); 72
68 }); 73 this.auxProductos = this.productos.filter(x => {
69 } 74 if (this.categoriaActive === 0) {
70 75 return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase())
71 filterItems() { 76 }
72 77 else {
73 this.auxProductos = this.productos.filter(x => { 78 return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()) &&
74 return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()) && 79 x.categoria_selfservice === this.categoriaActive;
75 x.categoria_selfservice == this.categoriaActive; 80 }
76 }); 81 });
77 } 82 }
78 83
79 agregarAlCarrito(producto: Producto) { 84 agregarAlCarrito(producto: Producto) {
80 85
81 producto.cantidad = 1; 86 producto.cantidad = 1;
82 this.productoService.productos.push(producto); 87 this.productoService.productos.push(producto);
83 } 88 }
84 89
85 lostBlur() { 90 lostBlur() {
86 this.blurFocus.emit(); 91 this.blurFocus.emit();
87 } 92 }
88 93
89 private elegirProducto(producto: Producto) { 94 private elegirProducto(producto: Producto) {
90 95
91 if (producto.PRO) { 96 if (producto.PRO) {
92 97
93 let imagenes = producto.imagenes; 98 let imagenes = producto.imagenes;
94 this.productoService.getPromocionByCodigos(producto.CodSec, producto.CodArt) 99 this.productoService.getPromocionByCodigos(producto.CodSec, producto.CodArt)
95 .subscribe(res => { 100 .subscribe(res => {
96 101
97 this.productoService.productoAcargar = res[0]; 102 this.productoService.productoAcargar = res[0];
98 this.productoService.productoAcargar.imagenes = imagenes; 103 this.productoService.productoAcargar.imagenes = imagenes;
99 this.router.navigate(['inicio']); 104 this.router.navigate(['inicio']);
100 }, 105 },
101 error => { console.error(error); } 106 error => { console.error(error); }
102 ); 107 );
103 }else { 108 } else {
104 109
105 this.productoService.productoAcargar = producto; 110 this.productoService.productoAcargar = producto;
106 this.router.navigate(['inicio']); 111 this.router.navigate(['inicio']);
107 } 112 }
108 113
109 } 114 }
110 } 115 }
111 116
src/app/components/home/home.component.html
Diff comments   View file @ 986aef1
1 <div class="container-fluid p-0"> 1 <div class="container-fluid p-0">
2 <img 2 <img
3 src="{{apiUrl}}/imagenes/homeBackground.jpg" 3 src="{{apiUrl}}/imagenes/homeBackground.jpg"
4 class="background-image vh-100 w-100"> 4 class="background-image vh-100 w-100">
5 <div class="row m-0"> 5 <div class="row m-0">
6 <div class="col p-0"> 6 <div class="col p-0">
7 <div 7 <div
8 class="vh-100 fade-in d-flex align-content-between flex-wrap disable-user-select" 8 class="vh-100 fade-in d-flex align-items-start flex-column disable-user-select"
9 [routerLink]="['/inicio']"> 9 [routerLink]="['/inicio']">
10 10
11 <!-- HEADER --> 11 <!-- HEADER -->
12 <div class="row m-0 w-100 bg-primary-gradient-horizontal"> 12 <div class="row m-0 w-100 bg-primary-gradient-horizontal">
13 <div class="col-6 bg-white p-3 rounded-bottom-right"> 13 <div class="col-6 bg-white p-3 rounded-bottom-right">
14 <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logoempresa.png"> 14 <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logoempresa.png">
15 </div> 15 </div>
16 </div> 16 </div>
17 17
18 <!-- INFO DE BIENVENIDA --> 18 <!-- INFO DE BIENVENIDA -->
19 <div class="row h-50 w-100"> 19 <div class="row my-auto h-50 w-100">
20 <div class="col-4 offset-2 my-auto"> 20 <div class="col-3 col-lg-4 offset-lg-1 h-100 my-auto">
21 21
22 <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> 22 <div id="carouselExampleSlidesOnly" class="carousel slide h-100" data-ride="carousel">
23 <div class="carousel-inner"> 23 <div class="carousel-inner h-100">
24 <div class="carousel-item active"> 24 <div class="carousel-item active h-100">
25 <img 25 <img
26 src="{{apiUrl}}/imagenes/coca1.jpg" 26 src="{{apiUrl}}/imagenes/coca1.jpg"
27 class="d-block rounded-sm shadow w-75 mx-auto"> 27 class="d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto">
28 </div> 28 </div>
29 <div class="carousel-item"> 29 <div class="carousel-item h-100">
30 <img 30 <img
31 src="{{apiUrl}}/imagenes/coca2.jpg" 31 src="{{apiUrl}}/imagenes/coca2.jpg"
32 class="d-block rounded-sm shadow w-75 mx-auto"> 32 class="d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto">
33 </div> 33 </div>
34 <div class="carousel-item"> 34 <div class="carousel-item h-100">
35 <img 35 <img
36 src="{{apiUrl}}/imagenes/coca3.jpg" 36 src="{{apiUrl}}/imagenes/coca3.jpg"
37 class="d-block rounded-sm shadow w-75 mx-auto"> 37 class="d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto">
38 </div> 38 </div>
39 </div> 39 </div>
40 </div> 40 </div>
41 41
42 </div> 42 </div>
43 <div class="col-6 text-center text-white my-auto"> 43 <div class="col-9 col-lg-7 text-center text-white my-auto">
44 <p class="display-2 font-weight-bold mb-5">¡BIENVENIDO!</p> 44 <p class="display-2 font-weight-bold mb-5">¡BIENVENIDO!</p>
45 <p class="display-3 m-0 font-weight-bold">Toque la pantalla<br>para comenzar</p> 45 <p class="display-3 m-0 font-weight-bold">Toque la pantalla<br>para comenzar</p>
46 </div> 46 </div>
47 </div> 47 </div>
48 48
49 <!-- FOOTER --> 49 <!-- FOOTER -->
50 <div class="row m-0 w-100 bg-gray"> 50 <div class="row m-0 w-100 bg-gray">
51 <div class="col-6 bg-white offset-6 p-3 rounded-top-left"> 51 <div class="col-6 bg-white offset-6 p-3 rounded-top-left">
52 <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logodebo.png"> 52 <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logodebo.png">
53 </div> 53 </div>
54 </div> 54 </div>
55 55
56 </div> 56 </div>
57 </div> 57 </div>
58 </div> 58 </div>
59 </div> 59 </div>
60 60
src/app/components/inicio/inicio.component.html
Diff comments   View file @ 986aef1
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 py-1 bg-gray text-muted text-center">Inicio</p> 7 <p class="h5 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-3 d-flex align-items-start disable-user-select"> 11 <div class="row m-3 d-flex align-items-start disable-user-select">
12 <div class="col-md-5 d-flex align-items-end flex-column"> 12 <div class="col-md-5 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="h3 card-title">Promociones</p> 21 <p class="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="{{apiUrl}}/imagenes/primario.promociones.png" class="icon-dim m-0"> 24 <img src="{{apiUrl}}/imagenes/primario.promociones.png" class="icon-dim 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 <div id="carouselIndicators" class="carousel slide" data-ride="carousel"> 29 <div id="carouselIndicators" class="carousel slide" data-ride="carousel">
30 <div class="carousel-inner"> 30 <div class="carousel-inner">
31 <div class="carousel-item active"> 31 <div class="carousel-item active">
32 <img src="{{apiUrl}}/imagenes/beldent.jpg" class="d-block w-75 m-auto rounded"> 32 <img src="{{apiUrl}}/imagenes/beldent.jpg" class="d-block w-75 m-auto rounded">
33 </div> 33 </div>
34 <div class="carousel-item"> 34 <div class="carousel-item">
35 <img src="{{apiUrl}}/imagenes/cafe con leche y medialunas.jpg" class="d-block w-75 m-auto rounded"> 35 <img src="{{apiUrl}}/imagenes/cafe con leche y medialunas.jpg" class="d-block w-75 m-auto rounded">
36 </div> 36 </div>
37 <div class="carousel-item"> 37 <div class="carousel-item">
38 <img src="{{apiUrl}}/imagenes/Surtido bagley.jpg" class="d-block w-75 m-auto rounded"> 38 <img src="{{apiUrl}}/imagenes/Surtido bagley.jpg" class="d-block w-75 m-auto rounded">
39 </div> 39 </div>
40 <div class="carousel-item"> 40 <div class="carousel-item">
41 <img src="{{apiUrl}}/imagenes/yogurisimo.jpg" class="d-block w-75 m-auto rounded"> 41 <img src="{{apiUrl}}/imagenes/yogurisimo.jpg" class="d-block w-75 m-auto rounded">
42 </div> 42 </div>
43 </div> 43 </div>
44 </div> 44 </div>
45 </div> 45 </div>
46 46
47 <!-- ORDENAR --> 47 <!-- ORDENAR -->
48 <div (click)="irBusquedaProductos('ordenar')" 48 <div (click)="irBusquedaProductos('ordenar')"
49 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 49 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
50 <div class="card-body text-left px-4 py-3"> 50 <div class="card-body text-left px-4 py-3">
51 <div class="row"> 51 <div class="row">
52 <div class="col-auto"> 52 <div class="col-auto">
53 <p class="h3 card-title">Ordenar Pedido</p> 53 <p class="h3 card-title">Ordenar Pedido</p>
54 </div> 54 </div>
55 <div class="col-auto p-0"> 55 <div class="col-auto p-0">
56 <img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim"> 56 <img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim">
57 </div> 57 </div>
58 </div> 58 </div>
59 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p> 59 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
60 </div> 60 </div>
61 <img 61 <img
62 class="card-img-bottom d-block w-100 mx-auto rounded" 62 class="card-img-bottom d-block w-100 mx-auto rounded"
63 src="{{apiUrl}}/imagenes/cafe.jpg"> 63 src="{{apiUrl}}/imagenes/cafe.jpg">
64 </div> 64 </div>
65 </div> 65 </div>
66 66
67 <div class="col-md-7 d-flex align-items-end flex-column mt-4 mt-md-0"> 67 <div class="col-md-7 d-flex align-items-end flex-column mt-4 mt-md-0">
68 68
69 <!-- CARGAR PRODUCTOS --> 69 <!-- CARGAR PRODUCTOS -->
70 <ng-template #popTemplate> 70 <ng-template #popTemplate>
71 <app-popover-promos 71 <app-popover-promos
72 *ngIf="promociones.length > 0 && sinonimos.length === 0" 72 *ngIf="promociones.length > 0 && sinonimos.length === 0"
73 [popover]="popoverDirective" 73 [popover]="popoverDirective"
74 [popoverContent]="promociones" 74 [popoverContent]="promociones"
75 (promoSeleccionada)="promoSeleccionada($event)" 75 (promoSeleccionada)="promoSeleccionada($event)"
76 class="text-white rounded-sm border-0"> 76 class="text-white rounded-sm border-0">
77 </app-popover-promos> 77 </app-popover-promos>
78 <app-popover-sinonimos 78 <app-popover-sinonimos
79 *ngIf="sinonimos.length > 0" 79 *ngIf="sinonimos.length > 0"
80 [popover]="popoverDirective" 80 [popover]="popoverDirective"
81 [popoverContent]="sinonimos" 81 [popoverContent]="sinonimos"
82 (productosPersonalizados)="productosPersonalizados($event)" 82 (productosPersonalizados)="productosPersonalizados($event)"
83 class="text-white rounded-sm border-0"> 83 class="text-white rounded-sm border-0">
84 </app-popover-sinonimos> 84 </app-popover-sinonimos>
85 </ng-template> 85 </ng-template>
86 <div 86 <div
87 placement="left" 87 placement="left"
88 triggers="" 88 triggers=""
89 [popover]="popTemplate" 89 [popover]="popTemplate"
90 class="w-100" 90 class="w-100"
91 #pop="bs-popover"> 91 #pop="bs-popover">
92 <div class="card bg-white border-0 shadow rounded mb-auto"> 92 <div class="card bg-white border-0 shadow rounded mb-auto">
93 <div class="card-body text-left px-4 py-3"> 93 <div class="card-body text-left px-4 py-3">
94 <div class="row"> 94 <div class="row">
95 <div class="col-auto"> 95 <div class="col-auto">
96 <p class="h3 card-title">Cargar Productos</p> 96 <p class="h3 card-title">Cargar Productos</p>
97 </div> 97 </div>
98 <div class="col-auto p-0"> 98 <div class="col-auto p-0">
99 <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2"> 99 <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2">
100 </div> 100 </div>
101 </div> 101 </div>
102 <p class="h5 card-text text-muted font-weight-light"> 102 <p class="h5 card-text text-muted font-weight-light">
103 Coloque un producto frente<br> 103 Coloque un producto frente<br>
104 al lector de códigos o selecciónelo en pantalla 104 al lector de códigos o selecciónelo en pantalla
105 </p> 105 </p>
106 </div> 106 </div>
107 <div class="row m-4"> 107 <div class="row m-4">
108 <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm"> 108 <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm">
109 <!-- IMAGEN DE ESCANER --> 109 <!-- IMAGEN DE ESCANER -->
110 <img 110 <img
111 *ngIf="!productoAcargar" 111 *ngIf="!productoAcargar"
112 class="card-img-top d-block w-100 mx-auto rounded-sm" 112 class="card-img-top d-block w-100 mx-auto rounded-sm"
113 src="{{apiUrl}}/imagenes/escanner.jpg"> 113 src="{{apiUrl}}/imagenes/escanner.jpg">
114 114
115 <!-- PRODUCTO A CARGAR --> 115 <!-- PRODUCTO A CARGAR -->
116 <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar"> 116 <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar">
117 <img 117 <img
118 class="card-img-top d-block w-75 mx-auto rounded-sm" 118 class="card-img-top d-block w-75 mx-auto rounded-sm"
119 src="{{apiUrl}}/imagenes/{{productoAcargar.imagenes[0].imagen}}"> 119 src="{{apiUrl}}/imagenes/{{productoAcargar.imagenes[0].imagen}}">
120 120
121 <div class="row justify-content-between m-3"> 121 <div class="row justify-content-between m-3">
122 <div class="col-12 text-left px-1"> 122 <div class="col-12 text-left px-1">
123 <p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p> 123 <p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p>
124 </div> 124 </div>
125 <div class="col-12 text-right mt-2"> 125 <div class="col-12 text-right mt-2">
126 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p> 126 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p>
127 </div> 127 </div>
128 </div> 128 </div>
129 </div> 129 </div>
130 130
131 <!-- PROMO A CARGAR --> 131 <!-- PROMO A CARGAR -->
132 <div class="fade-in m-0" *ngIf="promoAcargar"> 132 <div class="fade-in m-0" *ngIf="promoAcargar">
133 <img 133 <img
134 class="card-img-top d-block w-100 mx-auto rounded-sm" 134 class="card-img-top d-block w-100 mx-auto rounded-sm"
135 src="{{apiUrl}}/imagenes/{{promoAcargar.imagenes[0].imagen}}"> 135 src="{{apiUrl}}/imagenes/{{promoAcargar.imagenes[0].imagen}}">
136 136
137 <div class="row justify-content-between m-3"> 137 <div class="row justify-content-between m-3">
138 <div class="col-12 text-left px-1"> 138 <div class="col-12 text-left px-1">
139 <p class="h6 font-weight-bold mb-0">{{promoAcargar.DetArt}}</p> 139 <p class="h6 font-weight-bold mb-0">{{promoAcargar.DetArt}}</p>
140 </div> 140 </div>
141 <div class="col-12 text-right mt-2 align-self-end"> 141 <div class="col-12 text-right mt-2 align-self-end">
142 <p class="h5 font-weight-bold mb-0">{{promoAcargar.PreVen | currency}}</p> 142 <p class="h5 font-weight-bold mb-0">{{promoAcargar.PreVen | currency}}</p>
143 </div> 143 </div>
144 </div> 144 </div>
145 </div> 145 </div>
146 146
147 </div> 147 </div>
148 <!-- BOTONES DE CARGAR PRODUCTOS--> 148 <!-- BOTONES DE CARGAR PRODUCTOS-->
149 <div 149 <div
150 class="col-5 pr-0" 150 class="col-5 pr-0"
151 *ngIf="promociones.length > 0"> 151 *ngIf="promociones.length > 0">
152 <button
153 *ngIf="sinonimos.length > 0"
154 type="button"
155 class="btn btn-light btn-block shadow-sm"
156 (click)="pop.show()">
157 <span class="pr-2">Personalizar</span>
158 <i class="fa fa-hand-o-up text-purple" aria-hidden="true"></i>
159 </button>
160 <button 152 <button
161 *ngIf="!promoAcargar || sinonimos.length == 0" 153 *ngIf="!promoAcargar || sinonimos.length == 0"
162 type="button" 154 type="button"
163 class="btn btn-primary btn-block shadow-sm" 155 class="btn btn-primary btn-block shadow-sm"
164 (click)="pop.show()"> 156 (click)="pop.show()">
165 <span class="pr-2">Mostrar promociones</span> 157 <span class="pr-2">Mostrar promociones</span>
166 <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i> 158 <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i>
167 </button> 159 </button>
168 <button 160 <button
169 type="button" 161 type="button"
170 class="btn btn-light btn-block shadow-sm my-3" 162 class="btn btn-light btn-block shadow-sm my-3"
171 (click)="confirmarProducto()"> 163 (click)="confirmarProducto()">
172 <span class="pr-2 font-weight-bold">Confirmar</span> 164 <span class="pr-2 font-weight-bold">Confirmar</span>
173 <i class="fa fa-check text-success" aria-hidden="true"></i> 165 <i class="fa fa-check text-success" aria-hidden="true"></i>
174 </button> 166 </button>
175 <button 167 <button
176 type="button" 168 type="button"
177 class="btn btn-light btn-block shadow-sm" 169 class="btn btn-light btn-block shadow-sm"
178 (click)="deshacerCarga()"> 170 (click)="deshacerCarga()">
179 <span class="pr-2">Deshacer</span> 171 <span class="pr-2">Deshacer</span>
180 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 172 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
181 </button> 173 </button>
182 </div> 174 </div>
183 </div> 175 </div>
184 </div> 176 </div>
185 </div> 177 </div>
186 178
187 <!-- BUSCAR PRODUCTOS --> 179 <!-- BUSCAR PRODUCTOS -->
188 <div (click)="irBusquedaProductos('todos')" 180 <div (click)="irBusquedaProductos('todos')"
189 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 181 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
190 <div class="card-body text-left px-4 py-3"> 182 <div class="card-body text-left px-4 py-3">
191 <div class="row"> 183 <div class="row">
192 <div class="col-auto"> 184 <div class="col-auto">
193 <p class="h3 card-title">Buscar Productos</p> 185 <p class="h3 card-title">Buscar Productos</p>
194 <p class="h5 card-text text-muted font-weight-light"> 186 <p class="h5 card-text text-muted font-weight-light">
195 Busque aquí los productos<br> 187 Busque aquí los productos<br>
196 que no tienen código </p> 188 que no tienen código </p>
197 </div> 189 </div>
198 <div class="col-auto p-0"> 190 <div class="col-auto p-0">
199 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2"> 191 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2">
200 </div> 192 </div>
201 </div> 193 </div>
202 194
203 </div> 195 </div>
204 </div> 196 </div>
205 197
206 </div> 198 </div>
207 199
208 </div> 200 </div>
209 201
210 </div> 202 </div>
211 </div> 203 </div>
212 204
src/app/components/master/master.component.html
Diff comments   View file @ 986aef1
1 <div class="row m-0 fade-in"> 1 <div
2 class="row m-0 fade-in"
3 (click)="reiniciarTimer">
2 <div class="col-10 p-0 vh-100"> 4 <div class="col-10 p-0 vh-100">
3 5
4 <!-- TOP HEADER --> 6 <!-- TOP HEADER -->
5 <app-header></app-header> 7 <app-header></app-header>
6 8
7 <router-outlet></router-outlet> 9 <router-outlet></router-outlet>
8 10
9 </div> 11 </div>
10 12
11 <!-- SIDEBAR --> 13 <!-- SIDEBAR -->
12 <app-sidebar class="sidebar position-fixed float-right col-2 col-md-2 vh-100 bg-primary-gradient p-2"> 14 <app-sidebar class="sidebar position-fixed float-right col-2 col-md-2 vh-100 bg-primary-gradient p-2">
13 </app-sidebar> 15 </app-sidebar>
14 16
15 </div> 17 </div>
16 18
src/app/components/master/master.component.ts
Diff comments   View file @ 986aef1
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit, OnDestroy } from '@angular/core';
2 import { Router } from '@angular/router';
2 3
3 @Component({ 4 @Component({
4 selector: 'app-master', 5 selector: 'app-master',
5 templateUrl: './master.component.html', 6 templateUrl: './master.component.html',
6 styleUrls: ['./master.component.scss'] 7 styleUrls: ['./master.component.scss']
7 }) 8 })
8 export class MasterComponent implements OnInit { 9 export class MasterComponent implements OnInit, OnDestroy {
9 10
10 constructor() { } 11 private timerReposo: any
12
13 constructor(
14 private router: Router
15 ) { }
11 16
12 ngOnInit() { 17 ngOnInit() {
18
19 this.timerReposo = setTimeout(() => {
20
21 this.router.navigate(['cancelar-compra']);
22 }, 90000)
23 }
24
25 ngOnDestroy() {
26
27 clearTimeout(this.timerReposo);
28 }
29
30 reiniciarTimer() {
31
32 clearTimeout(this.timerReposo);
33 this.timerReposo = setTimeout(() => {
34
35 this.router.navigate(['cancelar-compra']);
36 }, 90000)
37
13 } 38 }
14 39
15 } 40 }
16 41
src/app/components/pago/pago.component.html
Diff comments   View file @ 986aef1
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 4
5 <div class="col-12 p-0 vh-100"> 5 <div class="col-12 p-0 vh-100">
6 6
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 Pagar 13 Pagar
14 <i class="fa fa-usd"></i> 14 <i class="fa fa-usd"></i>
15 </p> 15 </p>
16 </div> 16 </div>
17 </div> 17 </div>
18 18
19 <div *ngIf="!verQR" class="row mt-4 m-3 d-flex align-items-center"> 19 <div *ngIf="!verQR" class="row mt-4 m-3 d-flex align-items-center">
20 <div class="col-7 text-center"> 20 <div class="col-7 text-center">
21 <p class="text-white h2" *ngIf="!verQR">Elija forma de pago</p> 21 <p class="text-white h2" *ngIf="!verQR">Elija forma de pago</p>
22 </div> 22 </div>
23 </div> 23 </div>
24 24
25 <div *ngIf="!verQR" class="row fade-in mt-3"> 25 <div *ngIf="!verQR" class="row fade-in mt-3">
26 <!-- GRILLA DE PRODUCTOS DE MI COMPRA --> 26 <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
27 <div class="col-sm-7"> 27 <div class="col-sm-7">
28 <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark"> 28 <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark">
29 <div class="col-4 p-2"> 29 <div class="col-4 p-2">
30 <div class="bg-white rounded-sm shadow border-0"> 30 <div
31 class="bg-white rounded-sm shadow border-0"
32 (click)="pagoEfectivo()">
31 <img src="{{apiUrl}}/imagenes/efectivo.png" class="rounded-sm w-75 py-2 mx-auto d-block"> 33 <img src="{{apiUrl}}/imagenes/efectivo.png" class="rounded-sm w-75 py-2 mx-auto d-block">
32 <div class="p-2 card-text text-center"> 34 <div class="p-2 card-text text-center">
33 <p class="h6 text-center m-0">Efectivo</p> 35 <p class="h6 text-center m-0">Efectivo</p>
34 </div> 36 </div>
35 </div> 37 </div>
36 </div> 38 </div>
37 <div class="col-4 p-2"> 39 <div class="col-4 p-2">
38 <div class="bg-white rounded-sm shadow border-0"> 40 <div class="bg-white rounded-sm shadow border-0">
39 <img src="{{apiUrl}}/imagenes/tarjeta.png" class="rounded-sm w-75 py-2 mx-auto d-block"> 41 <img src="{{apiUrl}}/imagenes/tarjeta.png" class="rounded-sm w-75 py-2 mx-auto d-block">
40 <div class="p-2 card-text text-center"> 42 <div class="p-2 card-text text-center">
41 <p class="h6 text-center m-0">Tarjeta</p> 43 <p class="h6 text-center m-0">Tarjeta</p>
42 </div> 44 </div>
43 </div> 45 </div>
44 </div> 46 </div>
45 <div class="col-4 p-2"> 47 <div class="col-4 p-2">
46 <div 48 <div
47 class="bg-white rounded-sm shadow border-0" 49 class="bg-white rounded-sm shadow border-0"
48 (click)="pagar()"> 50 (click)="pagar()">
49 <img src="{{apiUrl}}/imagenes/qr.png" class="rounded-sm w-75 py-2 mx-auto d-block"> 51 <img src="{{apiUrl}}/imagenes/qr.png" class="rounded-sm w-75 py-2 mx-auto d-block">
50 <div class="p-2 card-text text-center"> 52 <div class="p-2 card-text text-center">
51 <p class="h6 text-center m-0">Pago Electrónico</p> 53 <p class="h6 text-center m-0">Pago Electrónico</p>
52 </div> 54 </div>
53 </div> 55 </div>
54 </div> 56 </div>
55 </div> 57 </div>
56 </div> 58 </div>
57 59
58 <div class="col-sm-5 pl-0"> 60 <div class="col-sm-5 pl-0">
59 <div class="row ml-3"> 61 <div class="row ml-3">
60 <!-- TICKET --> 62 <!-- TICKET -->
61 <div class="col-sm-7 p-0"> 63 <div class="col-sm-7 p-0">
62 <div class="card rounded-sm shadow"> 64 <div class="card rounded-sm shadow">
63 <div class="card-body"> 65 <div class="card-body">
64 <p class="h5 card-title">Su Ticket</p> 66 <p class="h5 card-title">Su Ticket</p>
65 <div class="row mt-4 m-0"> 67 <div class="row mt-4 m-0">
66 <div class="col-12 p-0 mb-2"> 68 <div class="col-12 p-0 mb-2">
67 <p class="h6 m-0 card-text text-left"> 69 <p class="h6 m-0 card-text text-left">
68 <small class="font-weight-bold">DESCRIPCIÓN</small> 70 <small class="font-weight-bold">DESCRIPCIÓN</small>
69 </p> 71 </p>
70 <p class="h6 m-0 card-text text-left"> 72 <p class="h6 m-0 card-text text-left">
71 <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small> 73 <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small>
72 </p> 74 </p>
73 </div> 75 </div>
74 </div> 76 </div>
75 <div class="row px-2 vh-50 overflow-scroll m-0"> 77 <div class="row px-2 vh-50 overflow-scroll m-0">
76 <div class="col-12 p-0 mb-2" *ngFor="let producto of productos"> 78 <div class="col-12 p-0 mb-2" *ngFor="let producto of productos">
77 <p class="h6 m-0 card-text text-left"> 79 <p class="h6 m-0 card-text text-left">
78 <small>{{producto.DetArt}}</small> 80 <small>{{producto.DetArt}}</small>
79 </p> 81 </p>
80 <div class="row d-flex justify-content-between m-0"> 82 <div class="row d-flex justify-content-between m-0">
81 <div class="col p-0"> 83 <div class="col p-0">
82 <p class="h6 m-0 card-text text-left"> 84 <p class="h6 m-0 card-text text-left">
83 <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small> 85 <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small>
84 </p> 86 </p>
85 </div> 87 </div>
86 <div class="col p-0"> 88 <div class="col p-0">
87 <p class="h6 m-0 card-text text-right"> 89 <p class="h6 m-0 card-text text-right">
88 <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small> 90 <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small>
89 </p> 91 </p>
90 </div> 92 </div>
91 </div> 93 </div>
92 </div> 94 </div>
93 </div> 95 </div>
94 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0"> 96 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0">
95 Total {{getTotal() | currency}} 97 Total {{getTotal() | currency}}
96 </p> 98 </p>
97 </div> 99 </div>
98 </div> 100 </div>
99 </div> 101 </div>
100 </div> 102 </div>
101 </div> 103 </div>
102 </div> 104 </div>
103 105
104 <div *ngIf="verQR" class="row fade-in mt-5"> 106 <div *ngIf="verQR" class="row fade-in mt-5">
105 <div class="col-6 offset-3 border-0 mb-auto"> 107 <div class="col-6 offset-3 border-0 mb-auto">
106 <img src="{{apiUrl}}/imagenes/qrmp.jpg" class="w-50 mx-auto d-block shadow rounded-sm"> 108 <img src="{{apiUrl}}/imagenes/qrmp.jpg" class="w-50 mx-auto d-block shadow rounded-sm">
107 </div> 109 </div>
108 </div> 110 </div>
109 111
110 <!-- OPCIONES ABAJO DERECHA --> 112 <!-- OPCIONES ABAJO DERECHA -->
111 <div class="row m-0 fixed-bottom" > 113 <div class="row m-0 fixed-bottom" >
112 <div class="col-sm-2 offset-sm-10 p-0 mt-auto"> 114 <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
113 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0"> 115 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
114 <div class="card-body row m-0"> 116 <div class="card-body row m-0">
115 <div class="col-12 p-3"> 117 <div class="col-12 p-3">
116 <button 118 <button
117 type="button" 119 type="button"
118 class="btn btn-block btn-light shadow btn-sm shadow" 120 class="btn btn-block btn-light shadow btn-sm shadow"
119 (click)="volverPreviousPage()"> 121 (click)="volverPreviousPage()">
120 <span class="pr-2">Volver</span> 122 <span class="pr-2">Volver</span>
121 <i class="fa fa-undo text-warning"></i> 123 <i class="fa fa-undo text-warning"></i>
122 </button> 124 </button>
123 <button 125 <button
124 type="button" 126 type="button"
125 class="btn btn-block btn-light shadow btn-sm shadow" 127 class="btn btn-block btn-light shadow btn-sm shadow"
126 [routerLink]="['/cancelar-compra']"> 128 [routerLink]="['/cancelar-compra']">
127 <span class="pr-2">Cancelar</span> 129 <span class="pr-2">Cancelar</span>
128 <i class="fa fa-times text-danger"></i> 130 <i class="fa fa-times text-danger"></i>
129 </button> 131 </button>
130 </div> 132 </div>
131 </div> 133 </div>
132 </div> 134 </div>
133 </div> 135 </div>
134 </div> 136 </div>
135 137
136 </div> 138 </div>
137 139
138 </div> 140 </div>
139 141
140 <div 142 <div
141 *ngIf="compraConQRfinalizada" 143 *ngIf="compraConQRfinalizada"
142 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100"> 144 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
143 <div class="col-12 text-center text-white my-auto"> 145 <div class="col-12 text-center text-white my-auto">
144 <p class="font-weight-bold display-4"> 146 <p class="font-weight-bold display-4">
145 Su pago fue<br> 147 Su pago fue<br>
146 acreditado 148 acreditado
147 exitosamente 149 exitosamente
148 </p> 150 </p>
149 <p class="font-weight-bold display-4">Recuerde retirar su ticket</p> 151 <p class="font-weight-bold display-4">Recuerde retirar su ticket</p>
150 </div> 152 </div>
151 </div> 153 </div>
152 154
153 <div 155 <div
154 *ngIf="compraConEfectivofinalizada" 156 *ngIf="compraConEfectivofinalizada"
155 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100"> 157 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
156 <div class="col-12 text-center text-white my-auto"> 158 <div class="col-12 text-center text-white my-auto">
157 <p class="font-weight-bold display-4"> 159 <p class="font-weight-bold display-4">
158 Retire su ticket<br> 160 Retire su ticket<br>
159 y diríjase a caja para<br> 161 y diríjase a caja para<br>
160 efectuar el pago. 162 efectuar el pago.
161 </p> 163 </p>
162 </div> 164 </div>
163 </div> 165 </div>
164 166
src/app/components/pago/pago.component.ts
Diff comments   View file @ 986aef1
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { appSettings } from 'src/etc/AppSettings'; 2 import { appSettings } from 'src/etc/AppSettings';
3 import { Location } from '@angular/common'; 3 import { Location } from '@angular/common';
4 import { ProductoService } from 'src/app/services/producto.service'; 4 import { ProductoService } from 'src/app/services/producto.service';
5 import { RouterLink, Router } from '@angular/router'; 5 import { RouterLink, Router } from '@angular/router';
6 import { Producto } from 'src/app/wrappers/producto'; 6 import { Producto } from 'src/app/wrappers/producto';
7 7
8 @Component({ 8 @Component({
9 selector: 'app-pago', 9 selector: 'app-pago',
10 templateUrl: './pago.component.html', 10 templateUrl: './pago.component.html',
11 styleUrls: ['./pago.component.scss'] 11 styleUrls: ['./pago.component.scss']
12 }) 12 })
13 export class PagoComponent implements OnInit { 13 export class PagoComponent implements OnInit {
14 14
15 private apiUrl: string = appSettings.apiUrl; 15 private apiUrl: string = appSettings.apiUrl;
16 private verQR: boolean = false; 16 private verQR: boolean = false;
17 private productos: Producto[] = []; 17 private productos: Producto[] = [];
18 private total: number = 0; 18 private total: number = 0;
19 19
20 private compraConQRfinalizada: boolean = false; 20 private compraConQRfinalizada: boolean = false;
21 private compraConEfectivofinalizada: boolean = false; 21 private compraConEfectivofinalizada: boolean = false;
22 22
23 constructor( 23 constructor(
24 private productoService: ProductoService, 24 private productoService: ProductoService,
25 private location: Location, 25 private location: Location,
26 private router: Router, 26 private router: Router,
27 ) { } 27 ) { }
28 28
29 ngOnInit() { 29 ngOnInit() {
30 30
31 this.productos = this.productoService.productos; 31 this.productos = this.productoService.productos;
32 } 32 }
33 33
34 pagoEfectivo() {
35
36 this.compraConEfectivofinalizada = true;
37 setTimeout(() => {
38
39 this.router.navigate(['mensaje-final']);
40 }, 3000);
41 }
42
34 pagar() { 43 pagar() {
35 44
36 this.verQR = true; 45 this.verQR = true;
37 46
38 this.productoService.pagar() 47 this.productoService.pagar()
39 .subscribe(() => { 48 .subscribe(() => {
40 49
41 // alert('Compra finalizada'); 50 // alert('Compra finalizada');
42 this.compraConQRfinalizada = true; 51 this.compraConQRfinalizada = true;
43 setTimeout(() => { 52 setTimeout(() => {
44 53
45 this.router.navigate(['mensaje-final']); 54 this.router.navigate(['mensaje-final']);
46 }, 3000); 55 }, 3000);
47 }, err => { 56 }, err => {
48 console.log(err); 57 console.log(err);
49 alert('algo salió mal'); 58 alert('algo salió mal');
50 }) 59 })
51 } 60 }
52 61
53 volverPreviousPage() { 62 volverPreviousPage() {
54 63
55 if (this.verQR) { 64 if (this.verQR) {
56 this.verQR = false; 65 this.verQR = false;
57 return; 66 return;
58 } 67 }
59 this.location.back(); 68 this.location.back();
60 } 69 }
61 70
62 getTotal() { 71 getTotal() {
63 72
64 var subTotal = 0; 73 var subTotal = 0;
65 this.productos.forEach(producto => { 74 this.productos.forEach(producto => {
66 75
67 subTotal = subTotal + (producto.PreVen * producto.cantidad); 76 subTotal = subTotal + (producto.PreVen * producto.cantidad);
68 }); 77 });
69 return this.total = subTotal; 78 return this.total = subTotal;
70 } 79 }
71 80
72 } 81 }
73 82
1 <!doctype html> 1 <!doctype html>
2 <html lang="en"> 2 <html lang="en">
3
3 <head> 4 <head>
4 <meta charset="utf-8"> 5 <meta charset="utf-8">
5 <title>Autoservicio</title> 6 <title>Autoservicio</title>
6 <base href="/"> 7 <base href="/">
7 8
8 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 9 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
9 <meta name="viewport" content="width=device-width, initial-scale=1"> 10 <meta name="viewport" content="width=device-width, initial-scale=1">
10 <link rel="icon" type="image/x-icon" href="favicon.ico"> 11 <link rel="icon" type="image/x-icon" href="favicon.ico">
11 </head> 12 </head>
12 <body> 13
14 <body oncontextmenu="return false">
13 <app-root></app-root> 15 <app-root></app-root>
14 </body> 16 </body>
17
15 </html> 18 </html>
16 19