Martin Macola / autoservicio

Download as
Browse Code »

Commit 8182d5cf0a80c456c62535223f19f75824ae511e

Authored by Eric Fernandez
2 parents aa9e329a84 f8ffc98aab
Exists in master

Merge branch 'master' of http://git.focasoftware.com/angular/autoservicio

Showing 9 changed files   Show diff stats
src/app/components/amb-imagenes/amb-imagenes.component.html
Diff comments   View file @ 8182d5c
1 <app-header></app-header> 1 <app-header></app-header>
2 2
3 <div class="container-fluid"> 3 <div class="container-fluid">
4 <div class="row m-3"> 4 <div class="row m-3">
5 <div class="col"> 5 <div class="col">
6 <p class="h2">Configuración imágenes</p> 6 <p class="h2">Configuración imágenes</p>
7 </div> 7 </div>
8 </div> 8 </div>
9 9
10 <div class="row search"> 10 <div class="row search">
11 <div class="col"> 11 <div class="col">
12 <span class="fa fa-search form-control-lg form-control-search pl-3"></span> 12 <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
13 <input 13 <input
14 type="text" 14 type="text"
15 class="form-control form-control-lg shadow-sm rounded-pill px-5" 15 class="form-control form-control-lg shadow-sm rounded-pill px-5"
16 placeholder="Búsqueda productos" 16 placeholder="Búsqueda productos"
17 [(ngModel)]="searchTerm" 17 [(ngModel)]="searchTerm"
18 (ngModelChange)="filterItems()"> 18 (ngModelChange)="filterItems()">
19 </div> 19 </div>
20 </div> 20 </div>
21 21
22 <div class="row m-3 vh-70 overflow-scroll"> 22 <div class="row m-3 vh-70 overflow-scroll">
23 <div class="col"> 23 <div class="col">
24 <h5>Productos</h5> 24 <h5>Productos</h5>
25 <table class="table"> 25 <table class="table">
26 <thead> 26 <thead>
27 <tr class="text-center"> 27 <tr class="text-center">
28 <th>Nombre</th> 28 <th>Nombre</th>
29 <th>Descripción</th> 29 <th>Descripción</th>
30 <th colspan="2">Imagen</th> 30 <th colspan="2">Imagen</th>
31 </tr> 31 </tr>
32 </thead> 32 </thead>
33 <tbody> 33 <tbody>
34 <tr *ngFor="let articulo of auxProductos"> 34 <tr *ngFor="let articulo of auxProductos">
35 <td>{{articulo.DetArt}}</td> 35 <td>{{articulo.DET_LAR}}</td>
36 <td>{{articulo.DET_LAR}}</td> 36 <td>{{articulo.DET_LAR}}</td>
37 <td> 37 <td>
38 <img *ngIf="articulo.imagenes.length" src="{{apiUrl}}/imagenes/{{articulo.imagenes[0].imagen}}"> 38 <img *ngIf="articulo.imagenes.length" src="{{apiUrl}}/imagenes/{{articulo.imagenes[0].imagen}}">
39 <img id="{{articulo.CodSec + articulo.CodArt}}" [hidden]="articulo.imagenes.length"> 39 <img id="{{articulo.CodSec + articulo.CodArt}}" [hidden]="articulo.imagenes.length">
40 </td> 40 </td>
41 <td><input type="file" accept="image/*" (change)="onFileSelected($event, articulo)"></td> 41 <td><input type="file" accept="image/*" (change)="onFileSelected($event, articulo)"></td>
42 </tr> 42 </tr>
43 </tbody> 43 </tbody>
44 </table> 44 </table>
45 </div> 45 </div>
46 </div> 46 </div>
47 47
48 </div> 48 </div>
49 49
src/app/components/amb-imagenes/amb-imagenes.component.ts
Diff comments   View file @ 8182d5c
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 { ProductoService } from 'src/app/services/producto.service'; 3 import { ProductoService } from 'src/app/services/producto.service';
4 import { Producto } from 'src/app/wrappers/producto'; 4 import { Producto } from 'src/app/wrappers/producto';
5 import { HttpClient } from '@angular/common/http'; 5 import { HttpClient } from '@angular/common/http';
6 6
7 @Component({ 7 @Component({
8 selector: 'app-amb-imagenes', 8 selector: 'app-amb-imagenes',
9 templateUrl: './amb-imagenes.component.html', 9 templateUrl: './amb-imagenes.component.html',
10 styleUrls: ['./amb-imagenes.component.scss'] 10 styleUrls: ['./amb-imagenes.component.scss']
11 }) 11 })
12 12
13 export class AmbImagenesComponent implements OnInit { 13 export class AmbImagenesComponent implements OnInit {
14 14
15 apiUrl = appSettings.apiUrl; 15 apiUrl = appSettings.apiUrl;
16 articulos: Producto[] = []; 16 articulos: Producto[] = [];
17 private auxProductos: Producto[] = []; 17 private auxProductos: Producto[] = [];
18 private searchTerm: string = ''; 18 private searchTerm: string = '';
19 19
20 constructor(private productoService: ProductoService, private http: HttpClient) {} 20 constructor(private productoService: ProductoService, private http: HttpClient) {}
21 21
22 ngOnInit() { 22 ngOnInit() {
23 23
24 this.productoService.getAll().subscribe((productos: Producto[]) => { 24 this.productoService.getAll().subscribe((productos: Producto[]) => {
25 this.articulos = productos; 25 this.articulos = productos;
26 this.filterItems(); 26 this.filterItems();
27 }); 27 });
28 } 28 }
29 29
30 onFileSelected(event, articulo) { 30 onFileSelected(event, articulo) {
31 31
32 let file: File = event.target.files[0]; 32 let file: File = event.target.files[0];
33 33
34 this.onLoad(file) 34 this.onLoad(file)
35 .then(result => { 35 .then(result => {
36 36
37 articulo.imagenes = []; 37 articulo.imagenes = [];
38 38
39 document.getElementById(articulo.CodSec + articulo.CodArt)['src'] = result; 39 document.getElementById(articulo.CodSec + articulo.CodArt)['src'] = result;
40 40
41 this.saveInBase({ 41 this.saveInBase({
42 name: file.name, 42 name: file.name,
43 base64: result, 43 base64: result,
44 codigo: articulo.CodArt, 44 codigo: articulo.CodArt,
45 sector: articulo.CodSec 45 sector: articulo.CodSec
46 }); 46 });
47 }); 47 });
48 } 48 }
49 49
50 filterItems() { 50 filterItems() {
51 51
52 this.auxProductos = this.articulos.filter(x => { 52 this.auxProductos = this.articulos.filter(x => {
53 return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()) 53 return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase())
54 }); 54 });
55 } 55 }
56 56
57 57
58 saveInBase(img) { 58 saveInBase(img) {
59 59
60 this.http.post(`${appSettings.apiUrl}/imagenes/guardar`, img) 60 this.http.post(`${appSettings.apiUrl}/imagenes/guardar`, img)
61 .subscribe(data => { 61 .subscribe(data => {
62 console.log(data); 62 console.log(data);
63 }); 63 });
64 } 64 }
65 65
66 onLoad(file) { 66 onLoad(file) {
67 67
68 return new Promise((resolve, reject) => { 68 return new Promise((resolve, reject) => {
69 69
70 var fr = new FileReader(); 70 var fr = new FileReader();
71 71
72 fr.onload = function() { 72 fr.onload = function() {
73 73
74 resolve(fr.result); 74 resolve(fr.result);
75 }; 75 };
76 76
77 fr.readAsDataURL(file); 77 fr.readAsDataURL(file);
78 }); 78 });
79 79
80 } 80 }
81 } 81 }
82 82
src/app/components/busqueda-productos/busqueda-productos.component.html
Diff comments   View file @ 8182d5c
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}" 23 [ngClass]="{active: categoriaActive == 0}"
24 (click)="categoriaActive = 0; filterItems()" 24 (click)="categoriaActive = 0; filterItems()"
25 class="list-group-item list-group-item-action text-center my-1 p-2 h6"> 25 class="list-group-item list-group-item-action text-center my-1 p-2 h6">
26 Todos 26 Todos
27 </li> 27 </li>
28 <li 28 <li
29 *ngFor="let categoria of categorias" 29 *ngFor="let categoria of categorias"
30 [ngClass]="{active: categoriaActive == categoria.id}" 30 [ngClass]="{active: categoriaActive == categoria.id}"
31 (click)="categoriaActive = categoria.id; filterItems()" 31 (click)="categoriaActive = categoria.id; filterItems()"
32 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">
33 {{categoria.detalle}} 33 {{categoria.detalle}}
34 </li> 34 </li>
35 </ul> 35 </ul>
36 </div> 36 </div>
37 37
38 <!-- SEARCH INPUT --> 38 <!-- SEARCH INPUT -->
39 <div *ngIf="productos.length > 0" class="fade-in col"> 39 <div *ngIf="productos.length > 0" class="fade-in col">
40 40
41 <div class="row search"> 41 <div class="row search">
42 <div class="col-sm-10"> 42 <div class="col-sm-10">
43 <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>
44 <input 44 <input
45 [matKeyboard]="'spanish'" 45 [matKeyboard]="'spanish'"
46 type="text" 46 type="text"
47 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"
48 placeholder="Búsqueda productos" 48 placeholder="Búsqueda productos"
49 [(ngModel)]="searchTerm" 49 [(ngModel)]="searchTerm"
50 (ngModelChange)="filterItems()"> 50 (ngModelChange)="filterItems()">
51 </div> 51 </div>
52 <!-- BOTON VOLVER --> 52 <!-- BOTON VOLVER -->
53 <div class="col-sm-2"> 53 <div class="col-sm-2">
54 <button 54 <button
55 type="button" 55 type="button"
56 class="btn btn-light btn-lg shadow-sm" 56 class="btn btn-light btn-lg shadow-sm"
57 [routerLink]="['/inicio']"> 57 [routerLink]="['/inicio']">
58 <span class="font-weight-normal h6 pr-2">Volver</span> 58 <span class="font-weight-normal h6 pr-2">Volver</span>
59 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 59 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
60 </button> 60 </button>
61 </div> 61 </div>
62 <div class="col-sm-12 my-2 h5"> 62 <div class="col-sm-12 my-2 h5">
63 <span class="badge badge-light px-2 text-muted shadow-sm">Más vendidos</span> 63 <span class="badge badge-light px-2 text-muted shadow-sm">Más vendidos</span>
64 </div> 64 </div>
65 </div> 65 </div>
66 <!-- LISTA DE PRODUCTOS --> 66 <!-- LISTA DE PRODUCTOS -->
67 <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">
68 <div 68 <div
69 class="col-4 p-2" 69 class="col-4 p-2"
70 *ngFor="let producto of auxProductos"> 70 *ngFor="let producto of auxProductos">
71 <div 71 <div
72 class="card-effect bg-white rounded-sm shadow border-0" 72 class="card-effect bg-white rounded-sm shadow border-0"
73 (click)="elegirProducto(producto)"> 73 (click)="elegirProducto(producto)">
74 <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">
75 <div class="p-2"> 75 <div class="p-2">
76 <p class="h6 text-left m-0">{{producto.DetArt}}</p> 76 <p class="h6 min-h-40 text-left m-0"><small>{{producto.DET_LAR}}</small></p>
77 <div class="row justify-content-between m-0"> 77 <div class="row m-0">
78 <div class="col-12 p-0">
79 <div class="text-left">
80 <p class="m-0 h6"><small>{{producto.DET_LAR}}</small></p>
81 </div>
82 </div>
83 <div class="col-12 my-auto pt-2 pr-2 p-0"> 78 <div class="col-12 my-auto pt-2 pr-2 p-0">
84 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p> 79 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
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 </div>
92 87
93 <!-- SPINNER --> 88 <!-- SPINNER -->
94 <div 89 <div
95 *ngIf="productos.length === 0 && showSpinner" 90 *ngIf="productos.length === 0 && showSpinner"
96 class="col-sm-10 p-0 align-self-center text-center"> 91 class="col-sm-10 p-0 align-self-center text-center">
97 <div class="spinner-border spinner-lg text-secondary" role="status"></div> 92 <div class="spinner-border spinner-lg text-secondary" role="status"></div>
98 <span class="text-secondary m-2 h5">Cargando información.</span> 93 <span class="text-secondary m-2 h5">Cargando información.</span>
99 </div> 94 </div>
100 95
101 </div> 96 </div>
102 97
103 </div> 98 </div>
104 99
105 </div> 100 </div>
106 101
src/app/components/busqueda-productos/busqueda-productos.component.ts
Diff comments   View file @ 8182d5c
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 35
36 switch (this.queMostrar) { 36 switch (this.queMostrar) {
37 case 'todos': 37 case 'todos':
38 this.categorias = categorias; 38 this.categorias = categorias;
39 this.categoriaActive = 0; 39 this.categoriaActive = 0;
40 break; 40 break;
41 case 'promociones': 41 case 'promociones':
42 this.categorias = categorias; 42 this.categorias = categorias;
43 this.categoriaActive = 1; 43 this.categoriaActive = 1;
44 break; 44 break;
45 case 'ordenar': 45 case 'ordenar':
46 46
47 this.categorias = categorias.filter((categoria: Categoria) => { 47 this.categorias = categorias.filter((categoria: Categoria) => {
48 return categoria.ES_PEDIDO; 48 return categoria.ES_PEDIDO;
49 }); 49 });
50 50
51 this.categoriaActive = 0; 51 this.categoriaActive = 0;
52 52
53 break; 53 break;
54 default: 54 default:
55 break; 55 break;
56 } 56 }
57 57
58 }); 58 });
59 59
60 this.productoService.productoAcargar = undefined; 60 this.productoService.productoAcargar = undefined;
61 this.productoService.getAll() 61 this.productoService.getAll()
62 .subscribe((data: Producto[]) => { 62 .subscribe((data: Producto[]) => {
63 63
64 if (this.queMostrar == 'ordenar') { 64 if (this.queMostrar == 'ordenar') {
65 65
66 this.categorias.forEach((categoria: Categoria) => { 66 this.categorias.forEach((categoria: Categoria) => {
67 67
68 let tempProductos = data.filter((producto: Producto) => { 68 let tempProductos = data.filter((producto: Producto) => {
69 return producto.categoria_selfservice == categoria.id; 69 return producto.categoria_selfservice == categoria.id;
70 }); 70 });
71 71
72 this.productos = this.productos.concat(tempProductos); 72 this.productos = this.productos.concat(tempProductos);
73 73
74 }); 74 });
75 } else { 75 } else {
76 this.productos = data; 76 this.productos = data;
77 } 77 }
78 this.filterItems(); 78 this.filterItems();
79 }, (error) => { 79 }, (error) => {
80 this.showSpinner = false; 80 this.showSpinner = false;
81 console.error(error); 81 console.error(error);
82 }); 82 });
83 } 83 }
84 84
85 filterItems() { 85 filterItems() {
86 86
87 this.auxProductos = this.productos.filter(x => { 87 this.auxProductos = this.productos.filter(x => {
88 if (this.categoriaActive === 0) { 88 if (this.categoriaActive === 0) {
89 return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()); 89 return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase());
90 } 90 }
91 else { 91 else {
92 return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()) && 92 return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase()) &&
93 x.categoria_selfservice === this.categoriaActive; 93 x.categoria_selfservice === this.categoriaActive;
94 } 94 }
95 }); 95 });
96 96
97 } 97 }
98 98
99 agregarAlCarrito(producto: Producto) { 99 agregarAlCarrito(producto: Producto) {
100 100
101 producto.cantidad = 1; 101 producto.cantidad = 1;
102 this.productoService.productos.push(producto); 102 this.productoService.productos.push(producto);
103 } 103 }
104 104
105 lostBlur() { 105 lostBlur() {
106 this.blurFocus.emit(); 106 this.blurFocus.emit();
107 } 107 }
108 108
109 private elegirProducto(producto: Producto) { 109 private elegirProducto(producto: Producto) {
110 110
111 if (producto.PRO) { 111 if (producto.PRO) {
112 112
113 let imagenes = producto.imagenes; 113 let imagenes = producto.imagenes;
114 this.productoService.getPromocionByCodigos(producto.CodSec, producto.CodArt) 114 this.productoService.getPromocionByCodigos(producto.CodSec, producto.CodArt)
115 .subscribe(res => { 115 .subscribe(res => {
116 116
117 this.productoService.productoAcargar = res[0]; 117 this.productoService.productoAcargar = res[0];
118 this.productoService.productoAcargar.imagenes = imagenes; 118 this.productoService.productoAcargar.imagenes = imagenes;
119 this.router.navigate(['inicio']); 119 this.router.navigate(['inicio']);
120 }, 120 },
121 error => { console.error(error); } 121 error => { console.error(error); }
122 ); 122 );
123 } else { 123 } else {
124 124
125 this.productoService.productoAcargar = producto; 125 this.productoService.productoAcargar = producto;
126 this.router.navigate(['inicio']); 126 this.router.navigate(['inicio']);
127 } 127 }
128 128
129 } 129 }
130 } 130 }
131 131
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
Diff comments   View file @ 8182d5c
1 <div 1 <div
2 class="row m-0 fade-in bg-primary-gradient disable-user-select" 2 class="row m-0 fade-in bg-primary-gradient disable-user-select"
3 (click)="reiniciarTimer"> 3 (click)="reiniciarTimer">
4 <div class="col-12 p-0 vh-100"> 4 <div class="col-12 p-0 vh-100">
5 5
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 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 class="row m-0"> 19 <div class="row m-0">
20 <div class="col-12"> 20 <div class="col-12">
21 21
22 <!-- TEXTO DE IZQUIERDA --> 22 <!-- TEXTO DE IZQUIERDA -->
23 <div class="row mx-2 mt-4 text-white"> 23 <div class="row mx-2 mt-4 text-white">
24 <div class="col-sm-auto my-auto"> 24 <div class="col-sm-auto my-auto">
25 <p class="h2">Mi Compra 25 <p class="h2">Mi Compra
26 <i class="fa fa-shopping-cart "></i> 26 <i class="fa fa-shopping-cart "></i>
27 </p> 27 </p>
28 </div> 28 </div>
29 <div class="col-sm-4 my-auto"> 29 <div class="col-sm-7 my-auto">
30 <p class="h3">¿Desea finalizar su compra?</p>
31 <p class="h4">Por favor, controle y confirme su compra.</p> 30 <p class="h4">Por favor, controle y confirme su compra.</p>
32 </div> 31 </div>
33 </div> 32 </div>
34 33
35 <div class="row"> 34 <div class="row">
36 <!-- GRILLA DE PRODUCTOS DE MI COMPRA --> 35 <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
37 <div class="col-sm-7"> 36 <div class="col-sm-7">
38 <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark"> 37 <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark">
39 <div class="col-4 p-2" *ngFor="let producto of productos"> 38 <div class="col-4 p-2" *ngFor="let producto of productos">
40 <div class="bg-white rounded-sm shadow border-0"> 39 <div class="bg-white rounded-sm shadow border-0">
41 <img 40 <img
42 src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}" 41 src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}"
43 class="shadow rounded-sm w-100 m-auto"> 42 class="shadow rounded-sm w-100 m-auto">
44 <div class="p-2"> 43 <div class="p-2">
45 <p class="h6 text-left m-0">{{producto.DetArt}}</p> 44 <p class="h6 min-h-55 text-left m-0">
46 <div class="row justify-content-between m-0"> 45 <small>
47 <div class="col-12 p-0"> 46 {{producto.DET_LAR}}
48 <div class="text-left"> 47 </small>
49 <p class="m-0 h6"><small>{{producto.DET_LAR}}</small></p> 48 </p>
50 </div> 49 <div class="row m-0">
51 </div>
52 <div class="col-12 my-auto pt-2 pr-2 p-0"> 50 <div class="col-12 my-auto pt-2 pr-2 p-0">
53 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p> 51 <p class="text-right m-0 h6">
52 {{producto.PreVen | currency}}
53 </p>
54 </div> 54 </div>
55 </div> 55 </div>
56 </div> 56 </div>
57 </div> 57 </div>
58 </div> 58 </div>
59 </div> 59 </div>
60 </div> 60 </div>
61 61
62 <div class="col-sm-5 pl-0"> 62 <div class="col-sm-5 pl-0">
63 <div class="row ml-3"> 63 <div class="row ml-3">
64 <!-- TICKET --> 64 <!-- TICKET -->
65 <div class="col-sm-7 p-0"> 65 <div class="col-sm-7 p-0">
66 <div class="card rounded-sm shadow"> 66 <div class="card rounded-sm shadow">
67 <div class="card-body"> 67 <div class="card-body">
68 <p class="h5 card-title">Su Ticket</p> 68 <p class="h5 card-title">Su Ticket</p>
69 <div class="row mt-4 m-0"> 69 <div class="row mt-4 m-0">
70 <div class="col-12 p-0 mb-2"> 70 <div class="col-12 p-0 mb-2">
71 <p class="h6 m-0 card-text text-left"> 71 <p class="h6 m-0 card-text text-left">
72 <small class="font-weight-bold">DESCRIPCIÓN</small> 72 <small class="font-weight-bold">DESCRIPCIÓN</small>
73 </p> 73 </p>
74 <p class="h6 m-0 card-text text-left"> 74 <p class="h6 m-0 card-text text-left">
75 <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small> 75 <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small>
76 </p> 76 </p>
77 </div> 77 </div>
78 </div> 78 </div>
79 <div class="row vh-50 px-2 overflow-scroll m-0"> 79 <div class="row vh-50 px-2 overflow-scroll m-0">
80 <div class="col-12 p-0 mb-2" *ngFor="let producto of productos"> 80 <div class="col-12 p-0 mb-2" *ngFor="let producto of productos">
81 <p class="h6 m-0 card-text text-left"> 81 <p class="h6 m-0 card-text text-left">
82 <small>{{producto.DetArt}}</small> 82 <small>{{producto.DET_LAR}}</small>
83 </p> 83 </p>
84 <div class="row d-flex justify-content-between m-0"> 84 <div class="row d-flex justify-content-between m-0">
85 <div class="col p-0"> 85 <div class="col p-0">
86 <p class="h6 m-0 card-text text-left"> 86 <p class="h6 m-0 card-text text-left">
87 <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small> 87 <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small>
88 </p> 88 </p>
89 </div> 89 </div>
90 <div class="col p-0"> 90 <div class="col p-0">
91 <p class="h6 m-0 card-text text-right"> 91 <p class="h6 m-0 card-text text-right">
92 <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small> 92 <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small>
93 </p> 93 </p>
94 </div> 94 </div>
95 </div> 95 </div>
96 </div> 96 </div>
97 </div> 97 </div>
98 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0"> 98 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0">
99 Total {{getTotal() | currency}} 99 Total {{getTotal() | currency}}
100 </p> 100 </p>
101 </div> 101 </div>
102 </div> 102 </div>
103 </div> 103 </div>
104 </div> 104 </div>
105 </div> 105 </div>
106 </div> 106 </div>
107 107
108 <!-- OPCIONES ABAJO DERECHA --> 108 <!-- OPCIONES ABAJO DERECHA -->
109 <div class="row m-0 fixed-bottom"> 109 <div class="row m-0 fixed-bottom">
110 <div class="col-sm-2 offset-sm-10 p-0 mt-auto"> 110 <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
111 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0"> 111 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
112 <div class="card-body row m-0"> 112 <div class="card-body row m-0">
113 <div class="col-12 p-3"> 113 <div class="col-12 p-3">
114 <button 114 <button
115 type="button" 115 type="button"
116 class="btn btn-block btn-light shadow btn-sm shadow" 116 class="btn btn-block btn-light shadow btn-sm shadow"
117 (click)="volverPreviousPage()"> 117 (click)="volverPreviousPage()">
118 <span class="pr-2">Volver</span> 118 <span class="pr-2">Volver</span>
119 <i class="fa fa-undo text-warning"></i> 119 <i class="fa fa-undo text-warning"></i>
120 </button> 120 </button>
121 <button [routerLink]="['/pago']" type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1"> 121 <button [routerLink]="['/pago']" type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1">
122 <span class="font-weight-bold pr-2">Finalizar y Pagar</span> 122 <span class="font-weight-bold pr-2">Finalizar y Pagar</span>
123 <i class="fa fa-check text-success"></i> 123 <i class="fa fa-check text-success"></i>
124 </button> 124 </button>
125 <button 125 <button
126 type="button" 126 type="button"
127 class="btn btn-block btn-light shadow btn-sm shadow" 127 class="btn btn-block btn-light shadow btn-sm shadow"
128 [routerLink]="['/cancelar-compra']"> 128 [routerLink]="['/cancelar-compra']">
129 <span class="pr-2">Cancelar</span> 129 <span class="pr-2">Cancelar</span>
130 <i class="fa fa-times text-danger"></i> 130 <i class="fa fa-times text-danger"></i>
131 </button> 131 </button>
132 </div> 132 </div>
133 </div> 133 </div>
134 </div> 134 </div>
135 </div> 135 </div>
136 </div> 136 </div>
137 137
138 </div> 138 </div>
139 </div> 139 </div>
140 140
141 </div> 141 </div>
142 142
src/app/components/inicio/inicio.component.html
Diff comments   View file @ 8182d5c
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.DET_LAR}}</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.DET_LAR}}</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 152 <button
153 *ngIf="!promoAcargar || sinonimos.length == 0" 153 *ngIf="!promoAcargar || sinonimos.length == 0"
154 type="button" 154 type="button"
155 class="btn btn-primary btn-block shadow-sm" 155 class="btn btn-primary btn-block shadow-sm"
156 (click)="pop.show()"> 156 (click)="pop.show()">
157 <span class="pr-2">Mostrar promociones</span> 157 <span class="pr-2">Mostrar promociones</span>
158 <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>
159 </button> 159 </button>
160 <button 160 <button
161 type="button" 161 type="button"
162 class="btn btn-light btn-block shadow-sm my-3" 162 class="btn btn-light btn-block shadow-sm my-3"
163 (click)="confirmarProducto()"> 163 (click)="confirmarProducto()">
164 <span class="pr-2 font-weight-bold">Confirmar</span> 164 <span class="pr-2 font-weight-bold">Confirmar</span>
165 <i class="fa fa-check text-success" aria-hidden="true"></i> 165 <i class="fa fa-check text-success" aria-hidden="true"></i>
166 </button> 166 </button>
167 <button 167 <button
168 type="button" 168 type="button"
169 class="btn btn-light btn-block shadow-sm" 169 class="btn btn-light btn-block shadow-sm"
170 (click)="deshacerCarga()"> 170 (click)="deshacerCarga()">
171 <span class="pr-2">Deshacer</span> 171 <span class="pr-2">Deshacer</span>
172 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 172 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
173 </button> 173 </button>
174 </div> 174 </div>
175 </div> 175 </div>
176 </div> 176 </div>
177 </div> 177 </div>
178 178
179 <!-- BUSCAR PRODUCTOS --> 179 <!-- BUSCAR PRODUCTOS -->
180 <div (click)="irBusquedaProductos('todos')" 180 <div (click)="irBusquedaProductos('todos')"
181 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">
182 <div class="card-body text-left px-4 py-3"> 182 <div class="card-body text-left px-4 py-3">
183 <div class="row"> 183 <div class="row">
184 <div class="col-auto"> 184 <div class="col-auto">
185 <p class="h3 card-title">Buscar Productos</p> 185 <p class="h3 card-title">Buscar Productos</p>
186 <p class="h5 card-text text-muted font-weight-light"> 186 <p class="h5 card-text text-muted font-weight-light">
187 Busque aquí los productos<br> 187 Busque aquí los productos<br>
188 que no tienen código </p> 188 que no tienen código.</p>
189 </div> 189 </div>
190 <div class="col-auto p-0"> 190 <div class="col-auto p-0">
191 <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">
192 </div> 192 </div>
193 </div> 193 </div>
194 194
195 </div> 195 </div>
196 </div> 196 </div>
197 197
198 </div> 198 </div>
199 199
200 </div> 200 </div>
201 201
202 </div> 202 </div>
203 </div> 203 </div>
204 204
src/app/components/pago/pago.component.html
Diff comments   View file @ 8182d5c
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 5
6 <div class="col-12 p-0 vh-100"> 6 <div class="col-12 p-0 vh-100">
7 7
8 <app-header></app-header> 8 <app-header></app-header>
9 9
10 <!-- NOMBRE DE SECCION --> 10 <!-- NOMBRE DE SECCION -->
11 <div class="row m-0"> 11 <div class="row m-0">
12 <div class="col-12 p-0"> 12 <div class="col-12 p-0">
13 <p class="h5 py-1 bg-gray text-muted text-center m-0"> 13 <p class="h5 py-1 bg-gray text-muted text-center m-0">
14 Pagar 14 Pagar
15 <i class="fa fa-usd"></i> 15 <i class="fa fa-usd"></i>
16 </p> 16 </p>
17 </div> 17 </div>
18 </div> 18 </div>
19 19
20 <div *ngIf="!verQR" class="row mt-4 m-3 d-flex align-items-center"> 20 <div *ngIf="!verQR" class="row mt-4 m-3 d-flex align-items-center">
21 <div class="col-7 text-center"> 21 <div class="col-7 text-center">
22 <p class="text-white h2" *ngIf="!verQR">Elija forma de pago</p> 22 <p class="text-white h2" *ngIf="!verQR">Elija forma de pago</p>
23 </div> 23 </div>
24 </div> 24 </div>
25 25
26 <div *ngIf="!verQR" class="row fade-in mt-3"> 26 <div *ngIf="!verQR" class="row fade-in mt-3">
27 <!-- GRILLA DE PRODUCTOS DE MI COMPRA --> 27 <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
28 <div class="col-sm-7"> 28 <div class="col-sm-7">
29 <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark"> 29 <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark">
30 <div class="col-4 p-2"> 30 <div class="col-4 p-2">
31 <div 31 <div
32 class="bg-white rounded-sm shadow border-0" 32 class="bg-white rounded-sm shadow border-0"
33 (click)="pagoEfectivo()"> 33 (click)="pagoEfectivo()">
34 <img src="{{apiUrl}}/imagenes/efectivo.png" class="rounded-sm w-75 py-2 mx-auto d-block"> 34 <img src="{{apiUrl}}/imagenes/efectivo.png" class="rounded-sm w-75 py-2 mx-auto d-block">
35 <div class="p-2 card-text text-center"> 35 <div class="p-2 card-text text-center">
36 <p class="h6 text-center m-0">Efectivo</p> 36 <p class="h6 text-center m-0">Efectivo</p>
37 </div> 37 </div>
38 </div> 38 </div>
39 </div> 39 </div>
40 <div class="col-4 p-2"> 40 <div class="col-4 p-2">
41 <div class="bg-white rounded-sm shadow border-0"> 41 <div class="bg-white rounded-sm shadow border-0">
42 <img src="{{apiUrl}}/imagenes/tarjeta.png" class="rounded-sm w-75 py-2 mx-auto d-block"> 42 <img src="{{apiUrl}}/imagenes/tarjeta.png" class="rounded-sm w-75 py-2 mx-auto d-block">
43 <div class="p-2 card-text text-center"> 43 <div class="p-2 card-text text-center">
44 <p class="h6 text-center m-0">Tarjeta</p> 44 <p class="h6 text-center m-0">Tarjeta</p>
45 </div> 45 </div>
46 </div> 46 </div>
47 </div> 47 </div>
48 <div class="col-4 p-2"> 48 <div class="col-4 p-2">
49 <div 49 <div
50 class="bg-white rounded-sm shadow border-0" 50 class="bg-white rounded-sm shadow border-0"
51 (click)="pagar()"> 51 (click)="pagar()">
52 <img src="{{apiUrl}}/imagenes/qr.png" class="rounded-sm w-75 py-2 mx-auto d-block"> 52 <img src="{{apiUrl}}/imagenes/qr.png" class="rounded-sm w-75 py-2 mx-auto d-block">
53 <div class="p-2 card-text text-center"> 53 <div class="p-2 card-text text-center">
54 <p class="h6 text-center m-0">Pago Electrónico</p> 54 <p class="h6 text-center m-0">Pago Electrónico</p>
55 </div> 55 </div>
56 </div> 56 </div>
57 </div> 57 </div>
58 </div> 58 </div>
59 </div> 59 </div>
60 60
61 <div class="col-sm-5 pl-0"> 61 <div class="col-sm-5 pl-0">
62 <div class="row ml-3"> 62 <div class="row ml-3">
63 <!-- TICKET --> 63 <!-- TICKET -->
64 <div class="col-sm-7 p-0"> 64 <div class="col-sm-7 p-0">
65 <div class="card rounded-sm shadow"> 65 <div class="card rounded-sm shadow">
66 <div class="card-body"> 66 <div class="card-body">
67 <p class="h5 card-title">Su Ticket</p> 67 <p class="h5 card-title">Su Ticket</p>
68 <div class="row mt-4 m-0"> 68 <div class="row mt-4 m-0">
69 <div class="col-12 p-0 mb-2"> 69 <div class="col-12 p-0 mb-2">
70 <p class="h6 m-0 card-text text-left"> 70 <p class="h6 m-0 card-text text-left">
71 <small class="font-weight-bold">DESCRIPCIÓN</small> 71 <small class="font-weight-bold">DESCRIPCIÓN</small>
72 </p> 72 </p>
73 <p class="h6 m-0 card-text text-left"> 73 <p class="h6 m-0 card-text text-left">
74 <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small> 74 <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small>
75 </p> 75 </p>
76 </div> 76 </div>
77 </div> 77 </div>
78 <div class="row px-2 vh-50 overflow-scroll m-0"> 78 <div class="row px-2 vh-50 overflow-scroll m-0">
79 <div class="col-12 p-0 mb-2" *ngFor="let producto of productos"> 79 <div class="col-12 p-0 mb-2" *ngFor="let producto of productos">
80 <p class="h6 m-0 card-text text-left"> 80 <p class="h6 m-0 card-text text-left">
81 <small>{{producto.DetArt}}</small> 81 <small>{{producto.DET_LAR}}</small>
82 </p> 82 </p>
83 <div class="row d-flex justify-content-between m-0"> 83 <div class="row d-flex justify-content-between m-0">
84 <div class="col p-0"> 84 <div class="col p-0">
85 <p class="h6 m-0 card-text text-left"> 85 <p class="h6 m-0 card-text text-left">
86 <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small> 86 <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small>
87 </p> 87 </p>
88 </div> 88 </div>
89 <div class="col p-0"> 89 <div class="col p-0">
90 <p class="h6 m-0 card-text text-right"> 90 <p class="h6 m-0 card-text text-right">
91 <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small> 91 <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small>
92 </p> 92 </p>
93 </div> 93 </div>
94 </div> 94 </div>
95 </div> 95 </div>
96 </div> 96 </div>
97 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0"> 97 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0">
98 Total {{getTotal() | currency}} 98 Total {{getTotal() | currency}}
99 </p> 99 </p>
100 </div> 100 </div>
101 </div> 101 </div>
102 </div> 102 </div>
103 </div> 103 </div>
104 </div> 104 </div>
105 </div> 105 </div>
106 106
107 <div *ngIf="verQR" class="row fade-in mt-5"> 107 <div *ngIf="verQR" class="row fade-in mt-5">
108 <div class="col-6 offset-3 border-0 mb-auto"> 108 <div class="col-6 offset-3 border-0 mb-auto">
109 <img src="{{apiUrl}}/imagenes/qrmp.jpg" class="w-50 mx-auto d-block shadow rounded-sm"> 109 <img src="{{apiUrl}}/imagenes/qrmp.jpg" class="w-50 mx-auto d-block shadow rounded-sm">
110 </div> 110 </div>
111 </div> 111 </div>
112 112
113 <!-- OPCIONES ABAJO DERECHA --> 113 <!-- OPCIONES ABAJO DERECHA -->
114 <div class="row m-0 fixed-bottom" > 114 <div class="row m-0 fixed-bottom" >
115 <div class="col-sm-2 offset-sm-10 p-0 mt-auto"> 115 <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
116 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0"> 116 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
117 <div class="card-body row m-0"> 117 <div class="card-body row m-0">
118 <div class="col-12 p-3"> 118 <div class="col-12 p-3">
119 <button 119 <button
120 type="button" 120 type="button"
121 class="btn btn-block btn-light shadow btn-sm shadow" 121 class="btn btn-block btn-light shadow btn-sm shadow"
122 (click)="volverPreviousPage()"> 122 (click)="volverPreviousPage()">
123 <span class="pr-2">Volver</span> 123 <span class="pr-2">Volver</span>
124 <i class="fa fa-undo text-warning"></i> 124 <i class="fa fa-undo text-warning"></i>
125 </button> 125 </button>
126 <button 126 <button
127 type="button" 127 type="button"
128 class="btn btn-block btn-light shadow btn-sm shadow" 128 class="btn btn-block btn-light shadow btn-sm shadow"
129 [routerLink]="['/cancelar-compra']"> 129 [routerLink]="['/cancelar-compra']">
130 <span class="pr-2">Cancelar</span> 130 <span class="pr-2">Cancelar</span>
131 <i class="fa fa-times text-danger"></i> 131 <i class="fa fa-times text-danger"></i>
132 </button> 132 </button>
133 </div> 133 </div>
134 </div> 134 </div>
135 </div> 135 </div>
136 </div> 136 </div>
137 </div> 137 </div>
138 138
139 </div> 139 </div>
140 140
141 </div> 141 </div>
142 142
143 <div 143 <div
144 *ngIf="compraConQRfinalizada" 144 *ngIf="compraConQRfinalizada"
145 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100"> 145 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
146 <div class="col-12 text-center text-white my-auto"> 146 <div class="col-12 text-center text-white my-auto">
147 <p class="font-weight-bold display-4"> 147 <p class="font-weight-bold display-4">
148 Su pago fue<br> 148 Su pago fue<br>
149 acreditado 149 acreditado
150 exitosamente 150 exitosamente
151 </p> 151 </p>
152 <p class="font-weight-bold display-4">Recuerde retirar su ticket</p> 152 <p class="font-weight-bold display-4">Recuerde retirar su ticket</p>
153 </div> 153 </div>
154 </div> 154 </div>
155 155
156 <div 156 <div
157 *ngIf="compraConEfectivofinalizada" 157 *ngIf="compraConEfectivofinalizada"
158 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100"> 158 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
159 <div class="col-12 text-center text-white my-auto"> 159 <div class="col-12 text-center text-white my-auto">
160 <p class="font-weight-bold display-4"> 160 <p class="font-weight-bold display-4">
161 Retire su ticket<br> 161 Retire su ticket<br>
162 y diríjase a caja para<br> 162 y diríjase a caja para<br>
163 efectuar el pago. 163 efectuar el pago.
164 </p> 164 </p>
165 </div> 165 </div>
166 </div> 166 </div>
167 167
src/app/components/popover-sinonimos/popover-sinonimos.component.html
Diff comments   View file @ 8182d5c
1 <div class="card-body fade-left"> 1 <div class="card-body fade-left">
2 2
3 <div class="row m-0"> 3 <div class="row m-0">
4 <div class="col text-left"> 4 <div class="col text-left">
5 <p class="h4 card-title"> 5 <p class="h4 card-title">
6 Personalice su pedido 6 Personalice su pedido
7 </p> 7 </p>
8 </div> 8 </div>
9 </div> 9 </div>
10 10
11 <div class="row m-0 overflow-scroll popover-size pr-2 my-2"> 11 <div class="row m-0 pr-2 my-2">
12 <div class="col"> 12 <div class="col">
13 <div class="row mb-2" *ngFor="let sinonimo of popoverContent; let i = index"> 13 <div class="row mb-2" *ngFor="let sinonimo of popoverContent; let i = index">
14 <div class="col"> 14 <div class="col p-0">
15 15
16 <div class="row m-0"> 16 <div class="row m-0">
17 <div class="col text-left"> 17 <div class="col text-left">
18 <p class="h5 card-title"> 18 <p class="h5 card-title">
19 Elija una opción - Cantidad Restante {{cantidadRestanteSinonimos[i]}} 19 Elija opción - Cantidad Restante {{cantidadRestanteSinonimos[i]}}
20 </p> 20 </p>
21 </div> 21 </div>
22 </div> 22 </div>
23 23
24 <div class="row my-3 d-flex justify-content-between" *ngFor="let producto of sinonimo.productos"> 24 <div class="row m-0 popover-size overflow-scroll">
25 <div class="col-7 pl-2 h6 text-right"> 25 <div class="col-12 p-0">
26 <p class="m-0 font-weight-normal"> 26 <div class="row m-0 my-3 d-flex justify-content-between" *ngFor="let producto of sinonimo.productos">
27 {{producto.DetArt}} 27 <div class="col-7 p-0 h6 text-right">
28 </p> 28 <p class="m-0 font-weight-normal">
29 </div> 29 {{producto.DetArt}}
30 <div class="col-5"> 30 </p>
31 <div class="btn-group float-left my-auto" role="group"> 31 </div>
32 <button 32 <div class="col-5 pr-0">
33 type="button" 33 <div class="btn-group float-right my-auto" role="group">
34 class="btn btn-light my-auto border shadow" 34 <button
35 (click)="sumarCantidad(producto, i)"> 35 type="button"
36 <i class="fa fa-plus" aria-hidden="true"></i> 36 class="btn btn-light my-auto border shadow"
37 </button> 37 (click)="sumarCantidad(producto, i)">
38 <div class="bg-white border border-white px-3 py-1 my-auto text-dark h5"> 38 <i class="fa fa-plus" aria-hidden="true"></i>
39 <small 39 </button>
40 [ngClass]="{'font-weight-bold': producto.cantidad > 0}"> 40 <div class="bg-white border border-white px-3 py-1 my-auto text-dark h5">
41 {{producto.cantidad}} 41 <small
42 </small> 42 [ngClass]="{'font-weight-bold': producto.cantidad > 0}">
43 {{producto.cantidad}}
44 </small>
45 </div>
46 <button
47 type="button"
48 class="btn btn-light my-auto border shadow"
49 (click)="restarCantidad(producto, i)">
50 <i class="fa fa-minus" aria-hidden="true"></i>
51 </button>
52 </div>
43 </div> 53 </div>
44 <button
45 type="button"
46 class="btn btn-light my-auto border shadow"
47 (click)="restarCantidad(producto, i)">
48 <i class="fa fa-minus" aria-hidden="true"></i>
49 </button>
50 </div> 54 </div>
51 </div> 55 </div>
52 </div> 56 </div>
53 57
54 </div> 58 </div>
55 </div> 59 </div>
56 </div> 60 </div>
57 </div> 61 </div>
58 62
59 <div class="row mt-3 justify-content-end"> 63 <div class="row mt-3 justify-content-end">
60 <div class="col-auto"> 64 <div class="col-auto">
61 <button 65 <button
62 type="button" 66 type="button"
63 class="btn btn-sm btn-light shadow" 67 class="btn btn-sm btn-light shadow"
64 (click)="continuar()"> 68 (click)="continuar()">
65 <span class="font-weight-bold pr-2">Continuar</span> 69 <span class="font-weight-bold pr-2">Continuar</span>
1 @import "./assets/scss/animation.scss"; 1 @import "./assets/scss/animation.scss";
2 @import "./assets/scss/bootstrap-override.scss"; 2 @import "./assets/scss/bootstrap-override.scss";
3 @import "../node_modules/bootstrap/scss/_variables.scss"; 3 @import "../node_modules/bootstrap/scss/_variables.scss";
4 4
5 html, 5 html,
6 body { 6 body {
7 background-color: #f0f0f0; 7 background-color: #f0f0f0;
8 font-family: bahnschrift; 8 font-family: bahnschrift;
9 overflow: hidden !important; 9 overflow: hidden !important;
10 } 10 }
11 11
12 .blur { 12 .blur {
13 filter: blur(10px); 13 filter: blur(10px);
14 -webkit-filter: blur(10px); 14 -webkit-filter: blur(10px);
15 } 15 }
16 16
17 .disable-user-select { 17 .disable-user-select {
18 -webkit-user-select: none; 18 -webkit-user-select: none;
19 -moz-user-select: none; 19 -moz-user-select: none;
20 -ms-user-select: none; 20 -ms-user-select: none;
21 user-select: none; 21 user-select: none;
22 } 22 }
23 23
24 .blue-gradient { 24 .blue-gradient {
25 background: linear-gradient(0deg, #ffffff00, $white); 25 background: linear-gradient(0deg, #ffffff00, $white);
26 } 26 }
27 27
28 .rounded { 28 .rounded {
29 border-radius: 1.5rem !important; 29 border-radius: 1.5rem !important;
30 } 30 }
31 31
32 .rounded-top-sm { 32 .rounded-top-sm {
33 border-top-left-radius: 0.75rem !important; 33 border-top-left-radius: 0.75rem !important;
34 border-top-right-radius: 0.75rem !important; 34 border-top-right-radius: 0.75rem !important;
35 } 35 }
36 36
37 .rounded-sm { 37 .rounded-sm {
38 border-radius: 0.75rem !important; 38 border-radius: 0.75rem !important;
39 } 39 }
40 40
41 .card-effect { 41 .card-effect {
42 &:active { 42 &:active {
43 background-color: #c9c9c9b3 !important; 43 background-color: #c9c9c9b3 !important;
44 transition: background-color 0.5s; 44 transition: background-color 0.5s;
45 } 45 }
46 &:focus { 46 &:focus {
47 background-color: #c9c9c9b3 !important; 47 background-color: #c9c9c9b3 !important;
48 transition: background-color 0.5s; 48 transition: background-color 0.5s;
49 } 49 }
50 } 50 }
51 51
52 .overflow-scroll { 52 .overflow-scroll {
53 overflow-y: auto !important; 53 overflow-y: auto !important;
54 overflow-x: hidden !important; 54 overflow-x: hidden !important;
55 &::-webkit-scrollbar { 55 &::-webkit-scrollbar {
56 width: 1em; 56 width: 1em;
57 } 57 }
58 &::-webkit-scrollbar-track { 58 &::-webkit-scrollbar-track {
59 border-radius: 10px; 59 border-radius: 10px;
60 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); 60 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
61 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); 61 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
62 background-color: $white; 62 background-color: $white;
63 } 63 }
64 &::-webkit-scrollbar-thumb { 64 &::-webkit-scrollbar-thumb {
65 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7); 65 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
66 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7); 66 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
67 outline: 1px solid slategrey; 67 outline: 1px solid slategrey;
68 border-radius: 10px; 68 border-radius: 10px;
69 height: 12px; 69 height: 12px;
70 &:active { 70 &:active {
71 box-shadow: inset 0 0 8px $primary; 71 box-shadow: inset 0 0 8px $primary;
72 -webkit-box-shadow: inset 0 0 8px $primary; 72 -webkit-box-shadow: inset 0 0 8px $primary;
73 } 73 }
74 } 74 }
75 &::-webkit-scrollbar-corner { 75 &::-webkit-scrollbar-corner {
76 border-radius: 10px; 76 border-radius: 10px;
77 } 77 }
78 } 78 }
79 79
80 .bg-gray { 80 .bg-gray {
81 background-color: #e6e6e6; 81 background-color: #e6e6e6;
82 } 82 }
83 83
84 .bg-primary-gradient { 84 .bg-primary-gradient {
85 background: linear-gradient(135deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%); 85 background: linear-gradient(135deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
86 } 86 }
87 87
88 .bg-primary-gradient-horizontal { 88 .bg-primary-gradient-horizontal {
89 background: linear-gradient(90deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%); 89 background: linear-gradient(90deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
90 } 90 }
91 91
92 .icon-dim { 92 .icon-dim {
93 height: 40px !important; 93 height: 40px !important;
94 width: auto !important; 94 width: auto !important;
95 background-color: white !important; 95 background-color: white !important;
96 } 96 }
97 97
98 .text-purple { 98 .text-purple {
99 color: $purple; 99 color: $purple;
100 } 100 }
101 101
102 .vh-70 { 102 .vh-70 {
103 min-height: auto !important; 103 min-height: auto !important;
104 max-height: 70vh !important; 104 max-height: 70vh !important;
105 } 105 }
106 106
107 .vh-60 { 107 .vh-60 {
108 min-height: auto !important; 108 min-height: auto !important;
109 max-height: 60vh !important; 109 max-height: 60vh !important;
110 } 110 }
111 111
112 .vh-50 { 112 .vh-50 {
113 min-height: auto !important; 113 min-height: auto !important;
114 max-height: 50vh !important; 114 max-height: 50vh !important;
115 } 115 }
116 116
117 .spinner-lg { 117 .spinner-lg {
118 width: 3rem !important; 118 width: 3rem !important;
119 height: 3rem !important; 119 height: 3rem !important;
120 } 120 }
121 121
122 .sidebar { 122 .sidebar {
123 right: 0; 123 right: 0;
124 } 124 }
125 125
126 .background-image { 126 .background-image {
127 background-repeat: no-repeat; 127 background-repeat: no-repeat;
128 background-size: cover; 128 background-size: cover;
129 position: fixed; 129 position: fixed;
130 } 130 }
131 131
132 .rounded-bottom-right { 132 .rounded-bottom-right {
133 border-bottom-right-radius: 10rem; 133 border-bottom-right-radius: 10rem;
134 &:before { 134 &:before {
135 border-radius: 0 40px 40px 0; 135 border-radius: 0 40px 40px 0;
136 background-color: #fff; 136 background-color: #fff;
137 } 137 }
138 } 138 }
139 139
140 .rounded-top-left { 140 .rounded-top-left {
141 border-top-left-radius: 10rem; 141 border-top-left-radius: 10rem;
142 } 142 }
143 143
144 .bg-gray { 144 .bg-gray {
145 background-color: #cccccc; 145 background-color: #cccccc;
146 } 146 }
147 147
148 .cdk-overlay-container { 148 .cdk-overlay-container {
149 position: absolute; 149 position: absolute;
150 top: 65%; 150 top: 65%;
151 width: 100%; 151 width: 100%;
152 } 152 }
153
154 .min-h-40 {
155 min-height: 40px;
156 }
157
158 .min-h-55 {
159 min-height: 55px;
160 }
153 161