Commit 83893139b8ccd117a285a5162f7a2b46fd013bc1

Authored by Marcelo Puebla
1 parent b363e367e7
Exists in master

Cambio en variable apiurl.

1 { 1 {
2 "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 2 "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 "version": 1, 3 "version": 1,
4 "newProjectRoot": "projects", 4 "newProjectRoot": "projects",
5 "projects": { 5 "projects": {
6 "autoservicio": { 6 "autoservicio": {
7 "projectType": "application", 7 "projectType": "application",
8 "schematics": { 8 "schematics": {
9 "@schematics/angular:component": { 9 "@schematics/angular:component": {
10 "style": "scss" 10 "style": "scss"
11 } 11 }
12 }, 12 },
13 "root": "", 13 "root": "",
14 "sourceRoot": "src", 14 "sourceRoot": "src",
15 "prefix": "app", 15 "prefix": "app",
16 "architect": { 16 "architect": {
17 "build": { 17 "build": {
18 "builder": "@angular-devkit/build-angular:browser", 18 "builder": "@angular-devkit/build-angular:browser",
19 "options": { 19 "options": {
20 "outputPath": "dist/autoservicio", 20 "outputPath": "dist/autoservicio",
21 "index": "src/index.html", 21 "index": "src/index.html",
22 "main": "src/main.ts", 22 "main": "src/main.ts",
23 "polyfills": "src/polyfills.ts", 23 "polyfills": "src/polyfills.ts",
24 "tsConfig": "tsconfig.app.json", 24 "tsConfig": "tsconfig.app.json",
25 "assets": [ 25 "assets": [
26 "src/favicon.ico", 26 "src/favicon.ico",
27 "src/assets" 27 "src/assets"
28 ], 28 ],
29 "styles": [ 29 "styles": [
30 "./node_modules/bootstrap/dist/css/bootstrap.min.css", 30 "./node_modules/bootstrap/dist/css/bootstrap.min.css",
31 "./node_modules/font-awesome/css/font-awesome.min.css", 31 "./node_modules/font-awesome/css/font-awesome.min.css",
32 "src/styles.scss" 32 "src/styles.scss"
33 ], 33 ],
34 "scripts": [ 34 "scripts": [
35 "./node_modules/jquery/dist/jquery.min.js", 35 "./node_modules/jquery/dist/jquery.min.js",
36 "./node_modules/popper.js/dist/umd/popper.min.js", 36 "./node_modules/popper.js/dist/umd/popper.min.js",
37 "./node_modules/bootstrap/dist/js/bootstrap.min.js" 37 "./node_modules/bootstrap/dist/js/bootstrap.min.js"
38 ] 38 ]
39 }, 39 },
40 "configurations": { 40 "configurations": {
41 "production": { 41 "production": {
42 "fileReplacements": [ 42 "fileReplacements": [
43 { 43 {
44 "replace": "src/environments/environment.ts", 44 "replace": "src/environments/environment.ts",
45 "with": "src/environments/environment.prod.ts" 45 "with": "src/environments/environment.prod.ts"
46 } 46 }
47 ], 47 ],
48 "optimization": true, 48 "optimization": true,
49 "outputHashing": "all", 49 "outputHashing": "all",
50 "sourceMap": false, 50 "sourceMap": false,
51 "extractCss": true, 51 "extractCss": true,
52 "namedChunks": false, 52 "namedChunks": false,
53 "aot": true, 53 "aot": true,
54 "extractLicenses": true, 54 "extractLicenses": true,
55 "vendorChunk": false, 55 "vendorChunk": false,
56 "buildOptimizer": true, 56 "buildOptimizer": true,
57 "budgets": [ 57 "budgets": [
58 { 58 {
59 "type": "initial", 59 "type": "initial",
60 "maximumWarning": "2mb", 60 "maximumWarning": "2mb",
61 "maximumError": "5mb" 61 "maximumError": "5mb"
62 } 62 }
63 ] 63 ]
64 } 64 }
65 } 65 }
66 }, 66 },
67 "serve": { 67 "serve": {
68 "builder": "@angular-devkit/build-angular:dev-server", 68 "builder": "@angular-devkit/build-angular:dev-server",
69 "options": { 69 "options": {
70 "browserTarget": "autoservicio:build" 70 "browserTarget": "autoservicio:build"
71 }, 71 },
72 "configurations": { 72 "configurations": {
73 "production": { 73 "production": {
74 "browserTarget": "autoservicio:build:production" 74 "browserTarget": "autoservicio:build:production"
75 } 75 }
76 } 76 }
77 }, 77 },
78 "extract-i18n": { 78 "extract-i18n": {
79 "builder": "@angular-devkit/build-angular:extract-i18n", 79 "builder": "@angular-devkit/build-angular:extract-i18n",
80 "options": { 80 "options": {
81 "browserTarget": "autoservicio:build" 81 "browserTarget": "autoservicio:build"
82 } 82 }
83 }, 83 },
84 "test": { 84 "test": {
85 "builder": "@angular-devkit/build-angular:karma", 85 "builder": "@angular-devkit/build-angular:karma",
86 "options": { 86 "options": {
87 "main": "src/test.ts", 87 "main": "src/test.ts",
88 "polyfills": "src/polyfills.ts", 88 "polyfills": "src/polyfills.ts",
89 "tsConfig": "tsconfig.spec.json", 89 "tsConfig": "tsconfig.spec.json",
90 "karmaConfig": "karma.conf.js", 90 "karmaConfig": "karma.conf.js",
91 "assets": [ 91 "assets": [
92 "src/favicon.ico", 92 "src/favicon.ico",
93 "src/assets" 93 "src/assets"
94 ], 94 ],
95 "styles": [ 95 "styles": [
96 "./node_modules/bootstrap/dist/css/bootstrap.min.css", 96 "./node_modules/bootstrap/dist/css/bootstrap.min.css",
97 "src/styles.scss" 97 "src/styles.scss"
98 ], 98 ],
99 "scripts": [] 99 "scripts": [
100 "node_modules/jquery/dist/jquery.slim.min.js",
101 "node_modules/popper.js/dist/umd/popper.min.js",
102 "node_modules/bootstrap/dist/js/bootstrap.min.js"
103 ]
100 } 104 }
101 }, 105 },
102 "lint": { 106 "lint": {
103 "builder": "@angular-devkit/build-angular:tslint", 107 "builder": "@angular-devkit/build-angular:tslint",
104 "options": { 108 "options": {
105 "tsConfig": [ 109 "tsConfig": [
106 "tsconfig.app.json", 110 "tsconfig.app.json",
107 "tsconfig.spec.json", 111 "tsconfig.spec.json",
108 "e2e/tsconfig.json" 112 "e2e/tsconfig.json"
109 ], 113 ],
110 "exclude": [ 114 "exclude": [
111 "**/node_modules/**" 115 "**/node_modules/**"
112 ] 116 ]
113 } 117 }
114 }, 118 },
115 "e2e": { 119 "e2e": {
116 "builder": "@angular-devkit/build-angular:protractor", 120 "builder": "@angular-devkit/build-angular:protractor",
117 "options": { 121 "options": {
118 "protractorConfig": "e2e/protractor.conf.js", 122 "protractorConfig": "e2e/protractor.conf.js",
119 "devServerTarget": "autoservicio:serve" 123 "devServerTarget": "autoservicio:serve"
120 }, 124 },
121 "configurations": { 125 "configurations": {
122 "production": { 126 "production": {
123 "devServerTarget": "autoservicio:serve:production" 127 "devServerTarget": "autoservicio:serve:production"
124 } 128 }
125 } 129 }
126 } 130 }
127 } 131 }
128 } 132 }
129 }, 133 },
130 "defaultProject": "autoservicio" 134 "defaultProject": "autoservicio"
131 } 135 }
132 136
src/app/components/amb-imagenes/amb-imagenes.component.html
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 de imágenes</p> 6 <p class="h2">Configuración de imágenes</p>
7 </div> 7 </div>
8 </div> 8 </div>
9 9
10 <div class="row mx-3 search"> 10 <div class="row mx-3 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-60 overflow-scroll"> 22 <div class="row m-3 vh-60 overflow-scroll">
23 <div class="col"> 23 <div class="col">
24 <h5>Productos</h5> 24 <h5>Productos</h5>
25 <table class="table table-striped table-hover table-borderless shadow"> 25 <table class="table table-striped table-hover table-borderless shadow">
26 <thead> 26 <thead>
27 <tr class="bg-primary text-center text-white shadow-sm"> 27 <tr class="bg-primary text-center text-white shadow-sm">
28 <th>Nombre</th> 28 <th>Nombre</th>
29 <th colspan="2">Imagen</th> 29 <th colspan="2">Imagen</th>
30 </tr> 30 </tr>
31 </thead> 31 </thead>
32 <tbody> 32 <tbody>
33 <tr class="shadow-sm" *ngFor="let articulo of auxProductos"> 33 <tr class="shadow-sm" *ngFor="let articulo of auxProductos">
34 <td class="align-middle"> 34 <td class="align-middle">
35 <p class="m-0">{{articulo.DET_LAR}}</p> 35 <p class="m-0">{{articulo.DET_LAR}}</p>
36 <p class="m-0"><small>Descripción: {{articulo.DET_LAR}}</small></p> 36 <p class="m-0"><small>Descripción: {{articulo.DET_LAR}}</small></p>
37 <p class="m-0"><small>Sector: {{articulo.CodSec}}</small></p> 37 <p class="m-0"><small>Sector: {{articulo.CodSec}}</small></p>
38 <p class="m-0"><small>Código: {{articulo.CodArt}}</small></p> 38 <p class="m-0"><small>Código: {{articulo.CodArt}}</small></p>
39 </td> 39 </td>
40 <td> 40 <td>
41 <img 41 <img
42 *ngIf="articulo.imagenes.length == 0" 42 *ngIf="articulo.imagenes.length == 0"
43 class="fade-in w-100 mx-auto img-fluid" 43 class="fade-in w-100 mx-auto img-fluid"
44 src="{{apiUrl}}/imagenes/noImage.jpg"> 44 src="{{apiImagenes}}/imagenes/noImage.jpg">
45 <carousel [interval]="false"> 45 <carousel [interval]="false">
46 <slide *ngFor="let item of articulo.imagenes; let index = index"> 46 <slide *ngFor="let item of articulo.imagenes; let index = index">
47 <img 47 <img
48 *ngIf="!item.fromGallery" 48 *ngIf="!item.fromGallery"
49 class="fade-in img-fluid w-100" 49 class="fade-in img-fluid w-100"
50 src="{{apiUrl}}/imagenes/{{item.imagen}}"> 50 src="{{apiImagenes}}/imagenes/{{item.imagen}}">
51 <img 51 <img
52 *ngIf="item.fromGallery" 52 *ngIf="item.fromGallery"
53 class="fade-in img-fluid w-100" 53 class="fade-in img-fluid w-100"
54 src="{{item.base64}}"> 54 src="{{item.base64}}">
55 <button 55 <button
56 (click)="deleteImage(articulo.imagenes, index)" 56 (click)="deleteImage(articulo.imagenes, index)"
57 type="button" 57 type="button"
58 class="btn btn-light btn-delete-image position-absolute close"> 58 class="btn btn-light btn-delete-image position-absolute close">
59 <span aria-hidden="true">&times;</span> 59 <span aria-hidden="true">&times;</span>
60 </button> 60 </button>
61 </slide> 61 </slide>
62 </carousel> 62 </carousel>
63 </td> 63 </td>
64 <td class="align-middle text-center"> 64 <td class="align-middle text-center">
65 <div class="custom-file"> 65 <div class="custom-file">
66 <input 66 <input
67 type="file" 67 type="file"
68 class="custom-file-input" 68 class="custom-file-input"
69 id="customFileLang" 69 id="customFileLang"
70 accept="image/*" 70 accept="image/*"
71 (change)="onFileSelected($event, articulo)" 71 (change)="onFileSelected($event, articulo)"
72 lang="es" 72 lang="es"
73 multiple> 73 multiple>
74 <label class="custom-file-label text-left pr-5" for="customFileLang"> 74 <label class="custom-file-label text-left pr-5" for="customFileLang">
75 <small>Seleccionar archivo</small> 75 <small>Seleccionar archivo</small>
76 </label> 76 </label>
77 </div> 77 </div>
78 </td> 78 </td>
79 </tr> 79 </tr>
80 </tbody> 80 </tbody>
81 </table> 81 </table>
82 </div> 82 </div>
83 </div> 83 </div>
84 84
85 <div class="row" *ngIf="paginationData"> 85 <div class="row" *ngIf="paginationData">
86 <div class="col"> 86 <div class="col">
87 <pagination 87 <pagination
88 [rotate]="false" 88 [rotate]="false"
89 [(ngModel)]="paginationData.page" 89 [(ngModel)]="paginationData.page"
90 [totalItems]="paginationData.rowCount" 90 [totalItems]="paginationData.rowCount"
91 [maxSize]="paginationData.pageCount" 91 [maxSize]="paginationData.pageCount"
92 [itemsPerPage]="paginationData.pageSize" 92 [itemsPerPage]="paginationData.pageSize"
93 (pageChanged)="pageChanged($event)" 93 (pageChanged)="pageChanged($event)"
94 [boundaryLinks]="true" 94 [boundaryLinks]="true"
95 [disabled]="disabledPaginador" 95 [disabled]="disabledPaginador"
96 previousText="&lsaquo;" 96 previousText="&lsaquo;"
97 nextText="&rsaquo;" 97 nextText="&rsaquo;"
98 firstText="&laquo;" 98 firstText="&laquo;"
99 lastText="&raquo;" 99 lastText="&raquo;"
100 ></pagination> 100 ></pagination>
101 </div> 101 </div>
102 </div> 102 </div>
103 103
104 </div> 104 </div>
105 105
src/app/components/amb-imagenes/amb-imagenes.component.ts
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { appSettings } from 'src/etc/AppSettings'; 2 import { appSettings } from 'src/etc/AppSettings';
3 import { 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.apiImagenes;
16 articulos: Producto[] = []; 16 articulos: Producto[] = [];
17 private auxProductos: Producto[] = []; 17 private auxProductos: Producto[] = [];
18 private searchTerm: string = ''; 18 private searchTerm: string = '';
19 private paginationData: any; 19 private paginationData: any;
20 private disabledPaginador: boolean = false; 20 private disabledPaginador: boolean = false;
21 21
22 constructor(private productoService: ProductoService, private http: HttpClient) { } 22 constructor(private productoService: ProductoService, private http: HttpClient) { }
23 23
24 ngOnInit() { 24 ngOnInit() {
25 25
26 this.productoService.getAllWithPaginator() 26 this.productoService.getAllWithPaginator()
27 .subscribe((res) => { 27 .subscribe((res) => {
28 28
29 this.articulos = res.data; 29 this.articulos = res.data;
30 this.paginationData = res.pagination; 30 this.paginationData = res.pagination;
31 this.filterItems(); 31 this.filterItems();
32 }, error => console.error(error)); 32 }, error => console.error(error));
33 } 33 }
34 34
35 onFileSelected(event, articulo: Producto) { 35 onFileSelected(event, articulo: Producto) {
36 36
37 let auxFiles: FileList = event.target.files; 37 let auxFiles: FileList = event.target.files;
38 Array.from(auxFiles).forEach(file => { 38 Array.from(auxFiles).forEach(file => {
39 39
40 this.onLoad(file) 40 this.onLoad(file)
41 .then(result => { 41 .then(result => {
42 // articulo.imagenes.push({ 42 // articulo.imagenes.push({
43 // name: file.name + articulo.CodArt + articulo.CodSec, 43 // name: file.name + articulo.CodArt + articulo.CodSec,
44 // fromGallery: true, 44 // fromGallery: true,
45 // imagen: result, 45 // imagen: result,
46 // id_articulo: articulo.id 46 // id_articulo: articulo.id
47 // }); 47 // });
48 let imagenAguardar = { 48 let imagenAguardar = {
49 imagen: { 49 imagen: {
50 name: `${articulo.CodSec}${articulo.CodArt}${file.name}`, 50 name: `${articulo.CodSec}${articulo.CodArt}${file.name}`,
51 base64: result, 51 base64: result,
52 codigo: articulo.CodArt, 52 codigo: articulo.CodArt,
53 sector: articulo.CodSec, 53 sector: articulo.CodSec,
54 id_articulo: articulo.id 54 id_articulo: articulo.id
55 }, 55 },
56 articulo: articulo 56 articulo: articulo
57 }; 57 };
58 this.saveInBase(imagenAguardar); 58 this.saveInBase(imagenAguardar);
59 }); 59 });
60 }) 60 })
61 } 61 }
62 62
63 filterItems() { 63 filterItems() {
64 64
65 this.auxProductos = this.articulos.filter(x => { 65 this.auxProductos = this.articulos.filter(x => {
66 return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase()) || 66 return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
67 x.CodArt.toString().includes(this.searchTerm.toLowerCase()) || 67 x.CodArt.toString().includes(this.searchTerm.toLowerCase()) ||
68 x.CodSec.toString().includes(this.searchTerm.toLowerCase()); 68 x.CodSec.toString().includes(this.searchTerm.toLowerCase());
69 }); 69 });
70 } 70 }
71 71
72 saveInBase(imagenAguardar) { 72 saveInBase(imagenAguardar) {
73 73
74 this.productoService.saveInBase(imagenAguardar.imagen) 74 this.productoService.saveInBase(imagenAguardar.imagen)
75 .subscribe(res => { 75 .subscribe(res => {
76 imagenAguardar.imagen['id'] = res[0]; 76 imagenAguardar.imagen['id'] = res[0];
77 imagenAguardar.imagen['fromGallery'] = true; 77 imagenAguardar.imagen['fromGallery'] = true;
78 imagenAguardar.articulo.imagenes.push(imagenAguardar.imagen); 78 imagenAguardar.articulo.imagenes.push(imagenAguardar.imagen);
79 }, error => console.error(error)); 79 }, error => console.error(error));
80 } 80 }
81 81
82 onLoad(file) { 82 onLoad(file) {
83 83
84 return new Promise((resolve, reject) => { 84 return new Promise((resolve, reject) => {
85 85
86 var fr = new FileReader(); 86 var fr = new FileReader();
87 87
88 fr.onload = function () { 88 fr.onload = function () {
89 89
90 resolve(fr.result); 90 resolve(fr.result);
91 }; 91 };
92 92
93 fr.readAsDataURL(file); 93 fr.readAsDataURL(file);
94 }); 94 });
95 95
96 } 96 }
97 97
98 deleteImage(imagenes, index: number) { 98 deleteImage(imagenes, index: number) {
99 99
100 if (!imagenes[index].name) { 100 if (!imagenes[index].name) {
101 imagenes[index].name = imagenes[index].imagen; 101 imagenes[index].name = imagenes[index].imagen;
102 } 102 }
103 103
104 this.productoService.deleteImage(imagenes[index]) 104 this.productoService.deleteImage(imagenes[index])
105 .subscribe(res => { 105 .subscribe(res => {
106 106
107 if (res) { 107 if (res) {
108 imagenes.splice(index, 1); 108 imagenes.splice(index, 1);
109 } 109 }
110 }, error => console.error(error)); 110 }, error => console.error(error));
111 } 111 }
112 112
113 pageChanged(event: any): void { 113 pageChanged(event: any): void {
114 this.disabledPaginador = true; 114 this.disabledPaginador = true;
115 this.productoService.getAllWithPaginator(event.page) 115 this.productoService.getAllWithPaginator(event.page)
116 .subscribe((res) => { 116 .subscribe((res) => {
117 this.disabledPaginador = false; 117 this.disabledPaginador = false;
118 this.articulos = res.data; 118 this.articulos = res.data;
119 this.paginationData = res.pagination; 119 this.paginationData = res.pagination;
120 this.filterItems(); 120 this.filterItems();
121 }, error => console.error(error)); 121 }, error => console.error(error));
122 } 122 }
123 123
124 } 124 }
125 125
src/app/components/busqueda-productos/busqueda-productos.component.html
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="{{apiImagenes}}/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 min-h-40 text-left m-0"><small>{{producto.DET_LAR}}</small></p> 76 <p class="h6 min-h-40 text-left m-0"><small>{{producto.DET_LAR}}</small></p>
77 <div class="row m-0"> 77 <div class="row m-0">
78 <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">
79 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p> 79 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
80 </div> 80 </div>
81 </div> 81 </div>
82 </div> 82 </div>
83 </div> 83 </div>
84 </div> 84 </div>
85 </div> 85 </div>
86 </div> 86 </div>
87 87
88 <!-- SPINNER --> 88 <!-- SPINNER -->
89 <div 89 <div
90 *ngIf="productos.length === 0 && showSpinner" 90 *ngIf="productos.length === 0 && showSpinner"
91 class="col-sm-10 p-0 align-self-center text-center"> 91 class="col-sm-10 p-0 align-self-center text-center">
92 <div class="spinner-border spinner-lg text-secondary" role="status"></div> 92 <div class="spinner-border spinner-lg text-secondary" role="status"></div>
93 <span class="text-secondary m-2 h5">Cargando información.</span> 93 <span class="text-secondary m-2 h5">Cargando información.</span>
94 </div> 94 </div>
95 95
96 </div> 96 </div>
97 97
98 </div> 98 </div>
99 99
100 </div> 100 </div>
101 101
src/app/components/busqueda-productos/busqueda-productos.component.ts
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 apiImagenes: string = appSettings.apiImagenes;
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 this.setProductosSinImagen(data); 64 this.setProductosSinImagen(data);
65 65
66 if (this.queMostrar == 'ordenar') { 66 if (this.queMostrar == 'ordenar') {
67 67
68 this.categorias.forEach((categoria: Categoria) => { 68 this.categorias.forEach((categoria: Categoria) => {
69 69
70 let tempProductos = data.filter((producto: Producto) => { 70 let tempProductos = data.filter((producto: Producto) => {
71 return producto.categoria_selfservice == categoria.id; 71 return producto.categoria_selfservice == categoria.id;
72 }); 72 });
73 73
74 this.productos = this.productos.concat(tempProductos); 74 this.productos = this.productos.concat(tempProductos);
75 75
76 }); 76 });
77 } else { 77 } else {
78 this.productos = data; 78 this.productos = data;
79 } 79 }
80 this.filterItems(); 80 this.filterItems();
81 }, (error) => { 81 }, (error) => {
82 this.showSpinner = false; 82 this.showSpinner = false;
83 console.error(error); 83 console.error(error);
84 }); 84 });
85 } 85 }
86 86
87 filterItems() { 87 filterItems() {
88 88
89 this.auxProductos = this.productos.filter(x => { 89 this.auxProductos = this.productos.filter(x => {
90 if (this.categoriaActive === 0) { 90 if (this.categoriaActive === 0) {
91 return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase()); 91 return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase());
92 } 92 }
93 else { 93 else {
94 return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase()) && 94 return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase()) &&
95 x.categoria_selfservice === this.categoriaActive; 95 x.categoria_selfservice === this.categoriaActive;
96 } 96 }
97 }); 97 });
98 98
99 } 99 }
100 100
101 agregarAlCarrito(producto: Producto) { 101 agregarAlCarrito(producto: Producto) {
102 102
103 producto.cantidad = 1; 103 producto.cantidad = 1;
104 this.productoService.productos.push(producto); 104 this.productoService.productos.push(producto);
105 } 105 }
106 106
107 lostBlur() { 107 lostBlur() {
108 this.blurFocus.emit(); 108 this.blurFocus.emit();
109 } 109 }
110 110
111 private elegirProducto(producto: Producto) { 111 private elegirProducto(producto: Producto) {
112 112
113 if (producto.PRO) { 113 if (producto.PRO) {
114 114
115 let imagenes = producto.imagenes; 115 let imagenes = producto.imagenes;
116 this.productoService.getPromocionByCodigos(producto.CodSec, producto.CodArt) 116 this.productoService.getPromocionByCodigos(producto.CodSec, producto.CodArt)
117 .subscribe(res => { 117 .subscribe(res => {
118 118
119 this.productoService.productoAcargar = res[0]; 119 this.productoService.productoAcargar = res[0];
120 this.productoService.productoAcargar.imagenes = imagenes; 120 this.productoService.productoAcargar.imagenes = imagenes;
121 this.router.navigate(['inicio']); 121 this.router.navigate(['inicio']);
122 }, 122 },
123 error => { console.error(error); } 123 error => { console.error(error); }
124 ); 124 );
125 } else { 125 } else {
126 126
127 this.productoService.productoAcargar = producto; 127 this.productoService.productoAcargar = producto;
128 this.router.navigate(['inicio']); 128 this.router.navigate(['inicio']);
129 } 129 }
130 130
131 } 131 }
132 132
133 private setProductosSinImagen(productos: Producto[]) { 133 private setProductosSinImagen(productos: Producto[]) {
134 134
135 productos.forEach((producto: Producto) => { 135 productos.forEach((producto: Producto) => {
136 producto.imagenes = producto.imagenes.length == 0 ? 136 producto.imagenes = producto.imagenes.length == 0 ?
137 [{ imagen: 'noImage.jpg' }] : producto.imagenes; 137 [{ imagen: 'noImage.jpg' }] : producto.imagenes;
138 }) 138 })
139 } 139 }
140 } 140 }
141 141
src/app/components/cancelar-compra/cancelar-compra.component.html
1 <div class="container-fluid fade-in p-0 disable-user-select"> 1 <div class="container-fluid fade-in p-0 disable-user-select">
2 2
3 <!-- INFO --> 3 <!-- INFO -->
4 <div class="row vh-100 py-5 m-0 w-100 bg-primary-gradient-horizontal"> 4 <div class="row vh-100 py-5 m-0 w-100 bg-primary-gradient-horizontal">
5 <div class="col-4 offset-1"> 5 <div class="col-4 offset-1">
6 <div class="row h-100"> 6 <div class="row h-100">
7 <div class="col-12 my-auto"> 7 <div class="col-12 my-auto">
8 <div class="card rounded"> 8 <div class="card rounded">
9 <img src="{{apiUrl}}/imagenes/atencion.svg" class="w-50 mx-auto mt-5 mb-4"> 9 <img src="{{apiImagenes}}/imagenes/atencion.svg" class="w-50 mx-auto mt-5 mb-4">
10 <div class="mb-5 mt-4"> 10 <div class="mb-5 mt-4">
11 <p class="display-3 card-text text-center font-weight-bold"> 11 <p class="display-3 card-text text-center font-weight-bold">
12 Atención 12 Atención
13 </p> 13 </p>
14 </div> 14 </div>
15 </div> 15 </div>
16 </div> 16 </div>
17 </div> 17 </div>
18 </div> 18 </div>
19 <div class="col-6 text-center text-white my-auto"> 19 <div class="col-6 text-center text-white my-auto">
20 <p class="display-3 font-weight-bold mb-5"> 20 <p class="display-3 font-weight-bold mb-5">
21 ¿Desea Cancelar su compra? 21 ¿Desea Cancelar su compra?
22 </p> 22 </p>
23 <div class="d-flex justify-content-center mt-2"> 23 <div class="d-flex justify-content-center mt-2">
24 <button type="button" class="btn btn-lg btn-light shadow mr-4" (click)="volverPreviousPage()"> 24 <button type="button" class="btn btn-lg btn-light shadow mr-4" (click)="volverPreviousPage()">
25 <span class="pr-2">Continuar con mi compra</span> 25 <span class="pr-2">Continuar con mi compra</span>
26 <i class="fa fa-undo text-warning"></i> 26 <i class="fa fa-undo text-warning"></i>
27 </button> 27 </button>
28 <button type="button" class="btn btn-lg btn-light shadow ml-4" (click)="limpiarCarritoYvolver()"> 28 <button type="button" class="btn btn-lg btn-light shadow ml-4" (click)="limpiarCarritoYvolver()">
29 <span class="pr-2">Si, Cancelar</span> 29 <span class="pr-2">Si, Cancelar</span>
30 <i class="fa fa-times text-danger"></i> 30 <i class="fa fa-times text-danger"></i>
31 </button> 31 </button>
32 </div> 32 </div>
33 </div> 33 </div>
34 </div> 34 </div>
35 35
36 </div> 36 </div>
37 37
src/app/components/cancelar-compra/cancelar-compra.component.ts
1 import { Component, OnInit, OnDestroy } from '@angular/core'; 1 import { Component, OnInit, OnDestroy } 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 { Router } from '@angular/router'; 4 import { Router } from '@angular/router';
5 import { ProductoService } from 'src/app/services/producto.service'; 5 import { ProductoService } from 'src/app/services/producto.service';
6 6
7 @Component({ 7 @Component({
8 selector: 'app-cancelar-compra', 8 selector: 'app-cancelar-compra',
9 templateUrl: './cancelar-compra.component.html', 9 templateUrl: './cancelar-compra.component.html',
10 styleUrls: ['./cancelar-compra.component.scss'] 10 styleUrls: ['./cancelar-compra.component.scss']
11 }) 11 })
12 export class CancelarCompraComponent implements OnInit, OnDestroy { 12 export class CancelarCompraComponent implements OnInit, OnDestroy {
13 13
14 private apiUrl: string = appSettings.apiUrl; 14 private apiImagenes: string = appSettings.apiImagenes;
15 private timer: any; 15 private timer: any;
16 16
17 constructor( 17 constructor(
18 private location: Location, 18 private location: Location,
19 private router: Router, 19 private router: Router,
20 private productoService: ProductoService 20 private productoService: ProductoService
21 ) { } 21 ) { }
22 22
23 ngOnInit() { 23 ngOnInit() {
24 24
25 this.timer = setTimeout(() => { 25 this.timer = setTimeout(() => {
26 this.limpiarCarritoYvolver(); 26 this.limpiarCarritoYvolver();
27 }, 30000) 27 }, 30000)
28 } 28 }
29 29
30 ngOnDestroy() { 30 ngOnDestroy() {
31 31
32 clearTimeout(this.timer); 32 clearTimeout(this.timer);
33 } 33 }
34 34
35 volverPreviousPage() { 35 volverPreviousPage() {
36 36
37 this.location.back(); 37 this.location.back();
38 } 38 }
39 39
40 limpiarCarritoYvolver() { 40 limpiarCarritoYvolver() {
41 41
42 this.productoService.productoAcargar = undefined; 42 this.productoService.productoAcargar = undefined;
43 this.productoService.promoAcargar = undefined; 43 this.productoService.promoAcargar = undefined;
44 this.productoService.productos = []; 44 this.productoService.productos = [];
45 this.router.navigate(['/home']); 45 this.router.navigate(['/home']);
46 } 46 }
47 47
48 } 48 }
49 49
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
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-7 my-auto"> 29 <div class="col-sm-7 my-auto">
30 <p class="h4">Por favor, controle y confirme su compra.</p> 30 <p class="h4">Por favor, controle y confirme su compra.</p>
31 </div> 31 </div>
32 </div> 32 </div>
33 33
34 <div class="row"> 34 <div class="row">
35 <!-- GRILLA DE PRODUCTOS DE MI COMPRA --> 35 <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
36 <div class="col-sm-7"> 36 <div class="col-sm-7">
37 <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">
38 <div class="col-4 p-2" *ngFor="let producto of productos"> 38 <div class="col-4 p-2" *ngFor="let producto of productos">
39 <div class="bg-white rounded-sm shadow border-0"> 39 <div class="bg-white rounded-sm shadow border-0">
40 <img 40 <img
41 src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}" 41 src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}"
42 class="shadow rounded-sm w-100 m-auto"> 42 class="shadow rounded-sm w-100 m-auto">
43 <div class="p-2"> 43 <div class="p-2">
44 <p class="h6 min-h-55 text-left m-0"> 44 <p class="h6 min-h-55 text-left m-0">
45 <small> 45 <small>
46 {{producto.DET_LAR}} 46 {{producto.DET_LAR}}
47 </small> 47 </small>
48 </p> 48 </p>
49 <div class="row m-0"> 49 <div class="row m-0">
50 <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">
51 <p class="text-right m-0 h6"> 51 <p class="text-right m-0 h6">
52 {{producto.PreVen | currency}} 52 {{producto.PreVen | currency}}
53 </p> 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.DET_LAR}}</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
143 </div> 143 </div>
144 144
src/app/components/confirmacion-carrito/confirmacion-carrito.component.ts
1 import { Component, OnInit, OnDestroy } from '@angular/core'; 1 import { Component, OnInit, OnDestroy } 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 { Producto } from 'src/app/wrappers/producto'; 5 import { Producto } from 'src/app/wrappers/producto';
6 import { Router } from '@angular/router'; 6 import { Router } from '@angular/router';
7 7
8 @Component({ 8 @Component({
9 selector: 'app-confirmacion-carrito', 9 selector: 'app-confirmacion-carrito',
10 templateUrl: './confirmacion-carrito.component.html', 10 templateUrl: './confirmacion-carrito.component.html',
11 styleUrls: ['./confirmacion-carrito.component.scss'] 11 styleUrls: ['./confirmacion-carrito.component.scss']
12 }) 12 })
13 export class ConfirmacionCarritoComponent implements OnInit, OnDestroy { 13 export class ConfirmacionCarritoComponent implements OnInit, OnDestroy {
14 14
15 private productos: Producto[] = []; 15 private productos: Producto[] = [];
16 private total: number = 0; 16 private total: number = 0;
17 private apiUrl: string = appSettings.apiUrl; 17 private apiImagenes: string = appSettings.apiImagenes;
18 private timerReposo: any; 18 private timerReposo: any;
19 19
20 constructor( 20 constructor(
21 private location: Location, 21 private location: Location,
22 private productoService: ProductoService, 22 private productoService: ProductoService,
23 private router: Router 23 private router: Router
24 ) { } 24 ) { }
25 25
26 ngOnInit() { 26 ngOnInit() {
27 27
28 this.timerReposo = setTimeout(() => { 28 this.timerReposo = setTimeout(() => {
29 29
30 this.router.navigate(['cancelar-compra']); 30 this.router.navigate(['cancelar-compra']);
31 }, 90000) 31 }, 90000)
32 this.productos = this.productoService.productos; 32 this.productos = this.productoService.productos;
33 } 33 }
34 34
35 ngOnDestroy() { 35 ngOnDestroy() {
36 36
37 clearTimeout(this.timerReposo); 37 clearTimeout(this.timerReposo);
38 } 38 }
39 39
40 volverPreviousPage() { 40 volverPreviousPage() {
41 41
42 this.location.back(); 42 this.location.back();
43 } 43 }
44 44
45 getTotal() { 45 getTotal() {
46 46
47 var subTotal = 0; 47 var subTotal = 0;
48 this.productos.forEach(producto => { 48 this.productos.forEach(producto => {
49 49
50 subTotal = subTotal + (producto.PreVen * producto.cantidad); 50 subTotal = subTotal + (producto.PreVen * producto.cantidad);
51 }); 51 });
52 return this.total = subTotal; 52 return this.total = subTotal;
53 } 53 }
54 54
55 reiniciarTimer() { 55 reiniciarTimer() {
56 56
57 clearTimeout(this.timerReposo); 57 clearTimeout(this.timerReposo);
58 this.timerReposo = setTimeout(() => { 58 this.timerReposo = setTimeout(() => {
59 59
60 this.router.navigate(['cancelar-compra']); 60 this.router.navigate(['cancelar-compra']);
61 }, 90000) 61 }, 90000)
62 } 62 }
63 63
64 } 64 }
65 65
src/app/components/header/header.component.html
1 <div class="row m-0 bg-light p-4 justify-content-between"> 1 <div class="row m-0 bg-light p-4 justify-content-between">
2 <div class="col-6"> 2 <div class="col-6">
3 <img class="w-25 float-left" src="{{apiUrl}}/imagenes/logoempresa.png"> 3 <img class="w-25 float-left" src="{{apiImagenes}}/imagenes/logoempresa.png">
4 </div> 4 </div>
5 <div class="col-6"> 5 <div class="col-6">
6 <img class="w-25 float-right" src="{{apiUrl}}/imagenes/logodebo.png"> 6 <img class="w-25 float-right" src="{{apiImagenes}}/imagenes/logodebo.png">
7 </div> 7 </div>
8 </div> 8 </div>
9 9
src/app/components/header/header.component.ts
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { appSettings } from 'src/etc/AppSettings'; 2 import { appSettings } from 'src/etc/AppSettings';
3 3
4 @Component({ 4 @Component({
5 selector: 'app-header', 5 selector: 'app-header',
6 templateUrl: './header.component.html', 6 templateUrl: './header.component.html',
7 styleUrls: ['./header.component.scss'] 7 styleUrls: ['./header.component.scss']
8 }) 8 })
9 export class HeaderComponent implements OnInit { 9 export class HeaderComponent implements OnInit {
10 10
11 private apiUrl : string = appSettings.apiUrl; 11 private apiImagenes : string = appSettings.apiImagenes;
12 12
13 constructor() { } 13 constructor() { }
14 14
15 ngOnInit() { 15 ngOnInit() {
16 } 16 }
17 17
18 } 18 }
19 19
src/app/components/home/home.component.html
1 <div class="container-fluid p-0"> 1 <div class="container-fluid p-0">
2 <img 2 <img
3 src="{{apiUrl}}/imagenes/homeBackground.jpg" 3 src="{{apiImagenes}}/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-items-start flex-column 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="{{apiImagenes}}/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 my-auto h-50 w-100"> 19 <div class="row my-auto h-50 w-100">
20 <div class="col-3 col-lg-4 offset-lg-1 h-100 my-auto"> 20 <div class="col-3 col-lg-4 offset-lg-1 h-100 my-auto">
21 <!-- CAROUSEL --> 21 <!-- CAROUSEL -->
22 <carousel [showIndicators]="false" [interval]="1500"> 22 <carousel [showIndicators]="false" [interval]="1500">
23 <slide class="h-100"> 23 <slide class="h-100">
24 <img 24 <img
25 src="{{apiUrl}}/imagenes/coca1.jpg" 25 src="{{apiImagenes}}/imagenes/coca1.jpg"
26 class="fade-in d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto"> 26 class="fade-in d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto">
27 </slide> 27 </slide>
28 <slide class="h-100"> 28 <slide class="h-100">
29 <img 29 <img
30 src="{{apiUrl}}/imagenes/coca2.jpg" 30 src="{{apiImagenes}}/imagenes/coca2.jpg"
31 class="fade-in d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto"> 31 class="fade-in d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto">
32 </slide> 32 </slide>
33 <slide class="h-100"> 33 <slide class="h-100">
34 <img 34 <img
35 src="{{apiUrl}}/imagenes/coca3.jpg" 35 src="{{apiImagenes}}/imagenes/coca3.jpg"
36 class="fade-in d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto"> 36 class="fade-in d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto">
37 </slide> 37 </slide>
38 </carousel> 38 </carousel>
39 39
40 </div> 40 </div>
41 <div class="col-9 col-lg-7 text-center text-white my-auto"> 41 <div class="col-9 col-lg-7 text-center text-white my-auto">
42 <p class="display-2 font-weight-bold mb-5">¡BIENVENIDO!</p> 42 <p class="display-2 font-weight-bold mb-5">¡BIENVENIDO!</p>
43 <p class="display-3 m-0 font-weight-bold">Toque la pantalla<br>para comenzar</p> 43 <p class="display-3 m-0 font-weight-bold">Toque la pantalla<br>para comenzar</p>
44 </div> 44 </div>
45 </div> 45 </div>
46 46
47 <!-- FOOTER --> 47 <!-- FOOTER -->
48 <div class="row m-0 w-100 bg-gray"> 48 <div class="row m-0 w-100 bg-gray">
49 <div class="col-6 bg-white offset-6 p-3 rounded-top-left"> 49 <div class="col-6 bg-white offset-6 p-3 rounded-top-left">
50 <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logodebo.png"> 50 <img class="w-25 mx-auto d-block" src="{{apiImagenes}}/imagenes/logodebo.png">
51 </div> 51 </div>
52 </div> 52 </div>
53 53
54 </div> 54 </div>
55 </div> 55 </div>
56 </div> 56 </div>
57 </div> 57 </div>
58 58
src/app/components/home/home.component.ts
1 import { Component, OnInit, HostListener } from '@angular/core'; 1 import { Component, OnInit, HostListener } from '@angular/core';
2 import { Router } from '@angular/router'; 2 import { Router } from '@angular/router';
3 import { appSettings } from 'src/etc/AppSettings'; 3 import { appSettings } from 'src/etc/AppSettings';
4 4
5 @Component({ 5 @Component({
6 selector: 'app-home', 6 selector: 'app-home',
7 templateUrl: './home.component.html', 7 templateUrl: './home.component.html',
8 styleUrls: ['./home.component.scss'] 8 styleUrls: ['./home.component.scss']
9 }) 9 })
10 export class HomeComponent implements OnInit { 10 export class HomeComponent implements OnInit {
11 11
12 private apiUrl: string = appSettings.apiUrl; 12 private apiImagenes: string = appSettings.apiImagenes;
13 13
14 constructor() { } 14 constructor() { }
15 15
16 ngOnInit() { 16 ngOnInit() {
17 } 17 }
18 18
19 } 19 }
20 20
src/app/components/inicio/inicio.component.html
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="{{apiImagenes}}/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 <!-- CAROUSEL --> 29 <!-- CAROUSEL -->
30 <carousel [showIndicators]="false" [interval]="1500"> 30 <carousel [showIndicators]="false" [interval]="1500">
31 <slide class="h-100"> 31 <slide class="h-100">
32 <img 32 <img
33 src="{{apiUrl}}/imagenes/beldent.jpg" 33 src="{{apiImagenes}}/imagenes/beldent.jpg"
34 class="fade-in d-block w-75 m-auto rounded"> 34 class="fade-in d-block w-75 m-auto rounded">
35 </slide> 35 </slide>
36 <slide class="h-100"> 36 <slide class="h-100">
37 <img 37 <img
38 src="{{apiUrl}}/imagenes/cafe con leche y medialunas.jpg" 38 src="{{apiImagenes}}/imagenes/cafe con leche y medialunas.jpg"
39 class="fade-in d-block w-75 m-auto rounded"> 39 class="fade-in d-block w-75 m-auto rounded">
40 </slide> 40 </slide>
41 <slide class="h-100"> 41 <slide class="h-100">
42 <img 42 <img
43 src="{{apiUrl}}/imagenes/Surtido bagley.jpg" 43 src="{{apiImagenes}}/imagenes/Surtido bagley.jpg"
44 class="fade-in d-block w-75 m-auto rounded"> 44 class="fade-in d-block w-75 m-auto rounded">
45 </slide> 45 </slide>
46 <slide class="h-100"> 46 <slide class="h-100">
47 <img 47 <img
48 src="{{apiUrl}}/imagenes/yogurisimo.jpg" 48 src="{{apiImagenes}}/imagenes/yogurisimo.jpg"
49 class="fade-in d-block w-75 m-auto rounded"> 49 class="fade-in d-block w-75 m-auto rounded">
50 </slide> 50 </slide>
51 </carousel> 51 </carousel>
52 </div> 52 </div>
53 53
54 <!-- ORDENAR --> 54 <!-- ORDENAR -->
55 <div (click)="irBusquedaProductos('ordenar')" 55 <div (click)="irBusquedaProductos('ordenar')"
56 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 56 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
57 <div class="card-body text-left px-4 py-3"> 57 <div class="card-body text-left px-4 py-3">
58 <div class="row"> 58 <div class="row">
59 <div class="col-auto"> 59 <div class="col-auto">
60 <p class="h3 card-title">Ordenar Pedido</p> 60 <p class="h3 card-title">Ordenar Pedido</p>
61 </div> 61 </div>
62 <div class="col-auto p-0"> 62 <div class="col-auto p-0">
63 <img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim"> 63 <img src="{{apiImagenes}}/imagenes/primario.ordenar.png" class="icon-dim">
64 </div> 64 </div>
65 </div> 65 </div>
66 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p> 66 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
67 </div> 67 </div>
68 <img 68 <img
69 class="card-img-bottom d-block w-100 mx-auto rounded" 69 class="card-img-bottom d-block w-100 mx-auto rounded"
70 src="{{apiUrl}}/imagenes/cafe.jpg"> 70 src="{{apiImagenes}}/imagenes/cafe.jpg">
71 </div> 71 </div>
72 </div> 72 </div>
73 73
74 <div class="col-md-7 d-flex align-items-end flex-column mt-4 mt-md-0"> 74 <div class="col-md-7 d-flex align-items-end flex-column mt-4 mt-md-0">
75 75
76 <!-- CARGAR PRODUCTOS --> 76 <!-- CARGAR PRODUCTOS -->
77 <ng-template #popTemplate> 77 <ng-template #popTemplate>
78 <app-popover-promos 78 <app-popover-promos
79 *ngIf="promociones.length > 0 && sinonimos.length === 0" 79 *ngIf="promociones.length > 0 && sinonimos.length === 0"
80 [popover]="popoverDirective" 80 [popover]="popoverDirective"
81 [popoverContent]="promociones" 81 [popoverContent]="promociones"
82 (promoSeleccionada)="promoSeleccionada($event, false)" 82 (promoSeleccionada)="promoSeleccionada($event, false)"
83 class="text-white rounded-sm border-0"> 83 class="text-white rounded-sm border-0">
84 </app-popover-promos> 84 </app-popover-promos>
85 <app-popover-sinonimos 85 <app-popover-sinonimos
86 *ngIf="sinonimos.length > 0" 86 *ngIf="sinonimos.length > 0"
87 [popover]="popoverDirective" 87 [popover]="popoverDirective"
88 [popoverContent]="sinonimos" 88 [popoverContent]="sinonimos"
89 (productosPersonalizados)="productosPersonalizados($event)" 89 (productosPersonalizados)="productosPersonalizados($event)"
90 class="text-white rounded-sm border-0"> 90 class="text-white rounded-sm border-0">
91 </app-popover-sinonimos> 91 </app-popover-sinonimos>
92 </ng-template> 92 </ng-template>
93 <div 93 <div
94 placement="left" 94 placement="left"
95 triggers="" 95 triggers=""
96 [popover]="popTemplate" 96 [popover]="popTemplate"
97 class="w-100" 97 class="w-100"
98 #pop="bs-popover"> 98 #pop="bs-popover">
99 <div class="card bg-white border-0 shadow rounded mb-auto"> 99 <div class="card bg-white border-0 shadow rounded mb-auto">
100 <div class="card-body text-left px-4 py-3"> 100 <div class="card-body text-left px-4 py-3">
101 <div class="row"> 101 <div class="row">
102 <div class="col-auto"> 102 <div class="col-auto">
103 <p class="h3 card-title">Cargar Productos</p> 103 <p class="h3 card-title">Cargar Productos</p>
104 </div> 104 </div>
105 <div class="col-auto p-0"> 105 <div class="col-auto p-0">
106 <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2"> 106 <img src="{{apiImagenes}}/imagenes/escanear.png" class="icon-dim mb-2">
107 </div> 107 </div>
108 </div> 108 </div>
109 <p class="h5 card-text text-muted font-weight-light"> 109 <p class="h5 card-text text-muted font-weight-light">
110 Coloque un producto frente<br> 110 Coloque un producto frente<br>
111 al lector de códigos o selecciónelo en pantalla. 111 al lector de códigos o selecciónelo en pantalla.
112 </p> 112 </p>
113 </div> 113 </div>
114 <div class="row m-4"> 114 <div class="row m-4">
115 <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm"> 115 <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm">
116 <!-- IMAGEN DE ESCANER --> 116 <!-- IMAGEN DE ESCANER -->
117 <img 117 <img
118 *ngIf="!productoAcargar" 118 *ngIf="!productoAcargar"
119 class="card-img-top d-block w-100 mx-auto rounded-sm" 119 class="card-img-top d-block w-100 mx-auto rounded-sm"
120 src="{{apiUrl}}/imagenes/escanner.jpg"> 120 src="{{apiImagenes}}/imagenes/escanner.jpg">
121 121
122 <!-- PRODUCTO A CARGAR --> 122 <!-- PRODUCTO A CARGAR -->
123 <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar"> 123 <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar">
124 <img 124 <img
125 class="card-img-top d-block w-75 mx-auto rounded-sm" 125 class="card-img-top d-block w-75 mx-auto rounded-sm"
126 src="{{apiUrl}}/imagenes/{{productoAcargar.imagenes[0].imagen}}"> 126 src="{{apiImagenes}}/imagenes/{{productoAcargar.imagenes[0].imagen}}">
127 127
128 <div class="row justify-content-between m-3"> 128 <div class="row justify-content-between m-3">
129 <div class="col-12 text-left px-1"> 129 <div class="col-12 text-left px-1">
130 <p class="h6 font-weight-bold mb-0">{{productoAcargar.DET_LAR}}</p> 130 <p class="h6 font-weight-bold mb-0">{{productoAcargar.DET_LAR}}</p>
131 </div> 131 </div>
132 <div class="col-12 text-right mt-2"> 132 <div class="col-12 text-right mt-2">
133 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p> 133 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p>
134 </div> 134 </div>
135 </div> 135 </div>
136 </div> 136 </div>
137 137
138 <!-- PROMO A CARGAR --> 138 <!-- PROMO A CARGAR -->
139 <div class="fade-in m-0" *ngIf="promoAcargar"> 139 <div class="fade-in m-0" *ngIf="promoAcargar">
140 <img 140 <img
141 class="card-img-top d-block w-100 mx-auto rounded-sm" 141 class="card-img-top d-block w-100 mx-auto rounded-sm"
142 src="{{apiUrl}}/imagenes/{{promoAcargar.imagenes[0].imagen}}"> 142 src="{{apiImagenes}}/imagenes/{{promoAcargar.imagenes[0].imagen}}">
143 143
144 <div class="row justify-content-between m-3"> 144 <div class="row justify-content-between m-3">
145 <div class="col-12 text-left px-1"> 145 <div class="col-12 text-left px-1">
146 <p class="h6 font-weight-bold mb-0">{{promoAcargar.DET_LAR}}</p> 146 <p class="h6 font-weight-bold mb-0">{{promoAcargar.DET_LAR}}</p>
147 </div> 147 </div>
148 <div class="col-12 text-right mt-2 align-self-end"> 148 <div class="col-12 text-right mt-2 align-self-end">
149 <p class="h5 font-weight-bold mb-0">{{promoAcargar.PreVen | currency}}</p> 149 <p class="h5 font-weight-bold mb-0">{{promoAcargar.PreVen | currency}}</p>
150 </div> 150 </div>
151 </div> 151 </div>
152 </div> 152 </div>
153 153
154 </div> 154 </div>
155 <!-- BOTONES DE CARGAR PRODUCTOS--> 155 <!-- BOTONES DE CARGAR PRODUCTOS-->
156 <div 156 <div
157 class="col-5 pr-0" 157 class="col-5 pr-0"
158 *ngIf="promociones.length > 0"> 158 *ngIf="promociones.length > 0">
159 <button 159 <button
160 *ngIf="!promoAcargar || sinonimos.length == 0" 160 *ngIf="!promoAcargar || sinonimos.length == 0"
161 type="button" 161 type="button"
162 class="btn btn-primary btn-block shadow-sm" 162 class="btn btn-primary btn-block shadow-sm"
163 (click)="pop.show()"> 163 (click)="pop.show()">
164 <span class="pr-2">Mostrar promociones</span> 164 <span class="pr-2">Mostrar promociones</span>
165 <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i> 165 <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i>
166 </button> 166 </button>
167 <button 167 <button
168 type="button" 168 type="button"
169 class="btn btn-light btn-block shadow-sm my-3" 169 class="btn btn-light btn-block shadow-sm my-3"
170 (click)="confirmarProducto()"> 170 (click)="confirmarProducto()">
171 <span class="pr-2 font-weight-bold">Confirmar</span> 171 <span class="pr-2 font-weight-bold">Confirmar</span>
172 <i class="fa fa-check text-success" aria-hidden="true"></i> 172 <i class="fa fa-check text-success" aria-hidden="true"></i>
173 </button> 173 </button>
174 <button 174 <button
175 type="button" 175 type="button"
176 class="btn btn-light btn-block shadow-sm" 176 class="btn btn-light btn-block shadow-sm"
177 (click)="deshacerCarga()"> 177 (click)="deshacerCarga()">
178 <span class="pr-2">Deshacer</span> 178 <span class="pr-2">Deshacer</span>
179 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 179 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
180 </button> 180 </button>
181 </div> 181 </div>
182 </div> 182 </div>
183 </div> 183 </div>
184 </div> 184 </div>
185 185
186 <!-- BUSCAR PRODUCTOS --> 186 <!-- BUSCAR PRODUCTOS -->
187 <div (click)="irBusquedaProductos('todos')" 187 <div (click)="irBusquedaProductos('todos')"
188 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 188 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
189 <div class="card-body text-left px-4 py-3"> 189 <div class="card-body text-left px-4 py-3">
190 <div class="row"> 190 <div class="row">
191 <div class="col-auto"> 191 <div class="col-auto">
192 <p class="h3 card-title">Buscar Productos</p> 192 <p class="h3 card-title">Buscar Productos</p>
193 <p class="h5 card-text text-muted font-weight-light"> 193 <p class="h5 card-text text-muted font-weight-light">
194 Busque aquí los productos<br> 194 Busque aquí los productos<br>
195 que no tienen código.</p> 195 que no tienen código.</p>
196 </div> 196 </div>
197 <div class="col-auto p-0"> 197 <div class="col-auto p-0">
198 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2"> 198 <img src="{{apiImagenes}}/imagenes/primario.buscar.png" class="icon-dim mb-2">
199 </div> 199 </div>
200 </div> 200 </div>
201 201
202 </div> 202 </div>
203 </div> 203 </div>
204 204
205 </div> 205 </div>
206 206
207 </div> 207 </div>
208 208
209 </div> 209 </div>
210 </div> 210 </div>
211 211
src/app/components/inicio/inicio.component.ts
1 import { Component, OnInit, ViewChild, HostListener, AfterViewInit } from '@angular/core'; 1 import { Component, OnInit, ViewChild, HostListener, AfterViewInit } from '@angular/core';
2 import { PopoverDirective } from 'ngx-bootstrap'; 2 import { PopoverDirective } from 'ngx-bootstrap';
3 import { appSettings } from 'src/etc/AppSettings'; 3 import { appSettings } from 'src/etc/AppSettings';
4 import { Router } from '@angular/router'; 4 import { Router } from '@angular/router';
5 import { ProductoService } from 'src/app/services/producto.service'; 5 import { ProductoService } from 'src/app/services/producto.service';
6 import { Producto } from 'src/app/wrappers/producto'; 6 import { Producto } from 'src/app/wrappers/producto';
7 import { Sinonimo } from 'src/app/wrappers/sinonimo'; 7 import { Sinonimo } from 'src/app/wrappers/sinonimo';
8 8
9 @Component({ 9 @Component({
10 selector: 'app-inicio', 10 selector: 'app-inicio',
11 templateUrl: './inicio.component.html', 11 templateUrl: './inicio.component.html',
12 styleUrls: ['./inicio.component.scss'] 12 styleUrls: ['./inicio.component.scss']
13 }) 13 })
14 export class InicioComponent implements OnInit, AfterViewInit { 14 export class InicioComponent implements OnInit, AfterViewInit {
15 15
16 private tienePromo = false; 16 private tienePromo = false;
17 private productoEsPromo = false; 17 private productoEsPromo = false;
18 private busqueda: string = ''; 18 private busqueda: string = '';
19 private productoAcargar: Producto; 19 private productoAcargar: Producto;
20 private promoAcargar: Producto; 20 private promoAcargar: Producto;
21 private productos: Producto[] = []; 21 private productos: Producto[] = [];
22 private promociones: Producto[] = []; 22 private promociones: Producto[] = [];
23 private sinonimos: Sinonimo[] = []; 23 private sinonimos: Sinonimo[] = [];
24 private apiUrl: string = appSettings.apiUrl; 24 private apiImagenes: string = appSettings.apiImagenes;
25 25
26 @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective; 26 @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;
27 27
28 @HostListener('document:keypress', ["$event"]) catchInput(e: KeyboardEvent) { 28 @HostListener('document:keypress', ["$event"]) catchInput(e: KeyboardEvent) {
29 29
30 if (e.keyCode == 13) { 30 if (e.keyCode == 13) {
31 this.buscarByCodigoBarras(this.busqueda); 31 this.buscarByCodigoBarras(this.busqueda);
32 this.busqueda = ''; 32 this.busqueda = '';
33 } else { 33 } else {
34 this.busqueda += e.key; 34 this.busqueda += e.key;
35 } 35 }
36 36
37 }; 37 };
38 38
39 constructor( 39 constructor(
40 private router: Router, 40 private router: Router,
41 private productoService: ProductoService 41 private productoService: ProductoService
42 ) { } 42 ) { }
43 43
44 ngOnInit() { 44 ngOnInit() {
45 45
46 this.productoAcargar = this.productoService.productoAcargar; 46 this.productoAcargar = this.productoService.productoAcargar;
47 this.getProductos(); 47 this.getProductos();
48 } 48 }
49 49
50 ngAfterViewInit() { 50 ngAfterViewInit() {
51 51
52 setTimeout(() => { 52 setTimeout(() => {
53 if (!this.productoAcargar) return; 53 if (!this.productoAcargar) return;
54 54
55 if (this.productoAcargar.PRO) { 55 if (this.productoAcargar.PRO) {
56 this.promociones.push(this.productoAcargar); 56 this.promociones.push(this.productoAcargar);
57 this.promoSeleccionada(this.productoAcargar, true); 57 this.promoSeleccionada(this.productoAcargar, true);
58 } 58 }
59 else { 59 else {
60 this.getPromociones(); 60 this.getPromociones();
61 } 61 }
62 }) 62 })
63 } 63 }
64 64
65 getProductos() { 65 getProductos() {
66 66
67 this.productoService.getAll() 67 this.productoService.getAll()
68 .subscribe((productos: Producto[]) => { 68 .subscribe((productos: Producto[]) => {
69 this.productos = productos; 69 this.productos = productos;
70 }); 70 });
71 } 71 }
72 72
73 getPromociones() { 73 getPromociones() {
74 74
75 var sector = this.productoAcargar.CodSec; 75 var sector = this.productoAcargar.CodSec;
76 var codigo = this.productoAcargar.CodArt; 76 var codigo = this.productoAcargar.CodArt;
77 this.productoService.getPromociones(sector, codigo) 77 this.productoService.getPromociones(sector, codigo)
78 .subscribe((res: Producto[]) => { 78 .subscribe((res: Producto[]) => {
79 79
80 if (res.length === 0) { 80 if (res.length === 0) {
81 81
82 this.productoAcargar.cantidad = 1; 82 this.productoAcargar.cantidad = 1;
83 this.productoService.setProductos(this.productoAcargar); 83 this.productoService.setProductos(this.productoAcargar);
84 this.productoAcargar = this.productoService.productoAcargar = undefined; 84 this.productoAcargar = this.productoService.productoAcargar = undefined;
85 } else { 85 } else {
86 86
87 this.promociones = res; 87 this.promociones = res;
88 this.popoverDirective.show(); 88 this.popoverDirective.show();
89 } 89 }
90 }, error => { console.error(error); }) 90 }, error => { console.error(error); })
91 } 91 }
92 92
93 confirmarProducto() { 93 confirmarProducto() {
94 94
95 var producto = this.promoAcargar ? this.promoAcargar : this.productoAcargar; 95 var producto = this.promoAcargar ? this.promoAcargar : this.productoAcargar;
96 producto.cantidad = 1; 96 producto.cantidad = 1;
97 this.productoService.setProductos(producto); 97 this.productoService.setProductos(producto);
98 this.productoService.productoAcargar = this.promoAcargar = this.productoAcargar = undefined; 98 this.productoService.productoAcargar = this.promoAcargar = this.productoAcargar = undefined;
99 this.promociones = []; 99 this.promociones = [];
100 this.popoverDirective.hide(); 100 this.popoverDirective.hide();
101 } 101 }
102 102
103 promoSeleccionada($event: Producto, showPopover: boolean) { 103 promoSeleccionada($event: Producto, showPopover: boolean) {
104 104
105 this.productoService.getProductoById($event.id) 105 this.productoService.getProductoById($event.id)
106 .subscribe((res: Producto) => { 106 .subscribe((res: Producto) => {
107 107
108 $event.imagenes = res.imagenes.length == 0 ? [{ imagen: 'noImage.jpg' }] : res.imagenes; 108 $event.imagenes = res.imagenes.length == 0 ? [{ imagen: 'noImage.jpg' }] : res.imagenes;
109 this.promoAcargar = $event; 109 this.promoAcargar = $event;
110 110
111 if ($event.tieneSinonimos) { 111 if ($event.tieneSinonimos) {
112 this.getSinonimos(this.promoAcargar.CodSec, this.promoAcargar.CodArt); 112 this.getSinonimos(this.promoAcargar.CodSec, this.promoAcargar.CodArt);
113 } else if (showPopover) { 113 } else if (showPopover) {
114 this.popoverDirective.show(); 114 this.popoverDirective.show();
115 } else { 115 } else {
116 this.popoverDirective.hide(); 116 this.popoverDirective.hide();
117 } 117 }
118 118
119 }, 119 },
120 error => { console.log(error); }) 120 error => { console.log(error); })
121 } 121 }
122 122
123 getSinonimos(sector, codigo) { 123 getSinonimos(sector, codigo) {
124 124
125 this.productoService.getPromocionSinonimos(sector, codigo) 125 this.productoService.getPromocionSinonimos(sector, codigo)
126 .subscribe((res: Sinonimo[]) => { 126 .subscribe((res: Sinonimo[]) => {
127 127
128 res.forEach(sinonimo => { 128 res.forEach(sinonimo => {
129 129
130 sinonimo.cantidad = 0; 130 sinonimo.cantidad = 0;
131 this.promoAcargar.productos.forEach(productoPromo => { 131 this.promoAcargar.productos.forEach(productoPromo => {
132 132
133 sinonimo.productos.forEach(productoSinonimo => { 133 sinonimo.productos.forEach(productoSinonimo => {
134 134
135 if (productoSinonimo.id === productoPromo.id) { 135 if (productoSinonimo.id === productoPromo.id) {
136 productoSinonimo.cantidad = productoPromo.cantidad; 136 productoSinonimo.cantidad = productoPromo.cantidad;
137 sinonimo.cantidad += productoPromo.cantidad; 137 sinonimo.cantidad += productoPromo.cantidad;
138 } 138 }
139 }) 139 })
140 }) 140 })
141 }) 141 })
142 this.sinonimos = res; 142 this.sinonimos = res;
143 (this.sinonimos.length > 0) ? this.popoverDirective.show() : this.popoverDirective.hide(); 143 (this.sinonimos.length > 0) ? this.popoverDirective.show() : this.popoverDirective.hide();
144 }) 144 })
145 } 145 }
146 146
147 productosPersonalizados($event: Producto[]) { 147 productosPersonalizados($event: Producto[]) {
148 148
149 var productosPersonalizados = $event; 149 var productosPersonalizados = $event;
150 150
151 this.promoAcargar.productos.forEach(productoPromo => { 151 this.promoAcargar.productos.forEach(productoPromo => {
152 152
153 if (!productoPromo.idSinonimo) productosPersonalizados.push(productoPromo); 153 if (!productoPromo.idSinonimo) productosPersonalizados.push(productoPromo);
154 }) 154 })
155 155
156 this.promoAcargar.productos = productosPersonalizados; 156 this.promoAcargar.productos = productosPersonalizados;
157 this.confirmarProducto(); 157 this.confirmarProducto();
158 } 158 }
159 159
160 buscarByCodigoBarras(busqueda) { 160 buscarByCodigoBarras(busqueda) {
161 161
162 let producto = this.productos.filter(producto => { 162 let producto = this.productos.filter(producto => {
163 return producto.codigoBarra == busqueda; 163 return producto.codigoBarra == busqueda;
164 }); 164 });
165 165
166 if (producto.length) { 166 if (producto.length) {
167 167
168 this.productoAcargar = producto[0]; 168 this.productoAcargar = producto[0];
169 this.getPromociones(); 169 this.getPromociones();
170 170
171 } else { 171 } else {
172 alert('No se encuentra el producto'); 172 alert('No se encuentra el producto');
173 } 173 }
174 174
175 } 175 }
176 176
177 irBusquedaProductos(value) { 177 irBusquedaProductos(value) {
178 178
179 this.productoService.mostrar = value; 179 this.productoService.mostrar = value;
180 this.router.navigate(['busqueda-productos']); 180 this.router.navigate(['busqueda-productos']);
181 } 181 }
182 182
183 deshacerCarga() { 183 deshacerCarga() {
184 184
185 if (this.sinonimos.length > 0) { 185 if (this.sinonimos.length > 0) {
186 this.sinonimos = []; 186 this.sinonimos = [];
187 this.popoverDirective.hide(); 187 this.popoverDirective.hide();
188 } 188 }
189 189
190 if (this.promoAcargar) { 190 if (this.promoAcargar) {
191 this.promoAcargar = undefined; 191 this.promoAcargar = undefined;
192 if (this.productoAcargar.PRO) { 192 if (this.productoAcargar.PRO) {
193 this.productoAcargar = undefined; 193 this.productoAcargar = undefined;
194 this.promociones = []; 194 this.promociones = [];
195 this.popoverDirective.hide(); 195 this.popoverDirective.hide();
196 } else { 196 } else {
197 this.popoverDirective.show(); 197 this.popoverDirective.show();
198 } 198 }
199 } else { 199 } else {
200 this.productoAcargar = undefined; 200 this.productoAcargar = undefined;
201 this.promociones = []; 201 this.promociones = [];
202 this.popoverDirective.hide(); 202 this.popoverDirective.hide();
203 } 203 }
204 } 204 }
205 205
206 } 206 }
207 207
src/app/components/mensaje-final/mensaje-final.component.html
1 <div class="container-fluid fade-in p-0 disable-user-select"> 1 <div class="container-fluid fade-in p-0 disable-user-select">
2 <img src="{{apiUrl}}/imagenes/homeBackground.jpg" class="background-image vh-100 w-100"> 2 <img src="{{apiImagenes}}/imagenes/homeBackground.jpg" class="background-image vh-100 w-100">
3 <div class="row m-0"> 3 <div class="row m-0">
4 <div class="col p-0"> 4 <div class="col p-0">
5 <div class="vh-100 fade-in d-flex align-content-between flex-wrap disable-user-select"> 5 <div class="vh-100 fade-in d-flex align-content-between flex-wrap disable-user-select">
6 6
7 <!-- HEADER --> 7 <!-- HEADER -->
8 <div class="row m-0 w-100 bg-primary-gradient-horizontal"> 8 <div class="row m-0 w-100 bg-primary-gradient-horizontal">
9 <div class="col-6 bg-white p-3 rounded-bottom-right"> 9 <div class="col-6 bg-white p-3 rounded-bottom-right">
10 <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logoempresa.png"> 10 <img class="w-25 mx-auto d-block" src="{{apiImagenes}}/imagenes/logoempresa.png">
11 </div> 11 </div>
12 </div> 12 </div>
13 13
14 <div class="row py-5 m-0 w-100"> 14 <div class="row py-5 m-0 w-100">
15 <div class="col-6 offset-3"> 15 <div class="col-6 offset-3">
16 <div class="row h-100"> 16 <div class="row h-100">
17 <div class="col-12 my-auto"> 17 <div class="col-12 my-auto">
18 <div> 18 <div>
19 <div class="mb-5 mt-4"> 19 <div class="mb-5 mt-4">
20 <p class="display-1 card-text text-center text-white font-weight-bold"> 20 <p class="display-1 card-text text-center text-white font-weight-bold">
21 Gracias 21 Gracias
22 </p> 22 </p>
23 <p class="display-4 card-text text-center text-white font-weight-bold"> 23 <p class="display-4 card-text text-center text-white font-weight-bold">
24 Por su compra 24 Por su compra
25 </p> 25 </p>
26 </div> 26 </div>
27 </div> 27 </div>
28 </div> 28 </div>
29 </div> 29 </div>
30 </div> 30 </div>
31 </div> 31 </div>
32 32
33 <!-- FOOTER --> 33 <!-- FOOTER -->
34 <div class="row m-0 w-100 bg-gray"> 34 <div class="row m-0 w-100 bg-gray">
35 <div class="col-6 bg-white offset-6 p-3 rounded-top-left"> 35 <div class="col-6 bg-white offset-6 p-3 rounded-top-left">
36 <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logodebo.png"> 36 <img class="w-25 mx-auto d-block" src="{{apiImagenes}}/imagenes/logodebo.png">
37 </div> 37 </div>
38 </div> 38 </div>
39 39
40 </div> 40 </div>
41 </div> 41 </div>
42 </div> 42 </div>
43 </div> 43 </div>
44 44
src/app/components/mensaje-final/mensaje-final.component.ts
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 { Router } from '@angular/router'; 4 import { Router } from '@angular/router';
5 5
6 @Component({ 6 @Component({
7 selector: 'app-mensaje-final', 7 selector: 'app-mensaje-final',
8 templateUrl: './mensaje-final.component.html', 8 templateUrl: './mensaje-final.component.html',
9 styleUrls: ['./mensaje-final.component.scss'] 9 styleUrls: ['./mensaje-final.component.scss']
10 }) 10 })
11 export class MensajeFinalComponent implements OnInit { 11 export class MensajeFinalComponent implements OnInit {
12 12
13 private apiUrl: string = appSettings.apiUrl; 13 private apiImagenes: string = appSettings.apiImagenes;
14 private timer: any; 14 private timer: any;
15 15
16 constructor( 16 constructor(
17 private productoService: ProductoService, 17 private productoService: ProductoService,
18 private router: Router 18 private router: Router
19 ) { } 19 ) { }
20 20
21 ngOnInit() { 21 ngOnInit() {
22 22
23 this.timer = setTimeout(() => { 23 this.timer = setTimeout(() => {
24 24
25 this.limpiarCarritoYvolver(); 25 this.limpiarCarritoYvolver();
26 }, 3000) 26 }, 3000)
27 } 27 }
28 28
29 ngOnDestroy() { 29 ngOnDestroy() {
30 30
31 clearTimeout(this.timer); 31 clearTimeout(this.timer);
32 } 32 }
33 33
34 limpiarCarritoYvolver() { 34 limpiarCarritoYvolver() {
35 35
36 this.productoService.productoAcargar = undefined; 36 this.productoService.productoAcargar = undefined;
37 this.productoService.promoAcargar = undefined; 37 this.productoService.promoAcargar = undefined;
38 this.productoService.productos = []; 38 this.productoService.productos = [];
39 this.router.navigate(['/home']); 39 this.router.navigate(['/home']);
40 } 40 }
41 41
42 } 42 }
43 43
src/app/components/pago/pago.component.html
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="{{apiImagenes}}/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="{{apiImagenes}}/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="{{apiImagenes}}/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.DET_LAR}}</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="{{apiImagenes}}/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/pago/pago.component.ts
1 import { Component, OnInit, OnDestroy } from '@angular/core'; 1 import { Component, OnInit, OnDestroy } 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 { Router } from '@angular/router'; 5 import { 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, OnDestroy { 13 export class PagoComponent implements OnInit, OnDestroy {
14 14
15 private apiUrl: string = appSettings.apiUrl; 15 private apiImagenes: string = appSettings.apiImagenes;
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 private timerReposo: any; 22 private timerReposo: any;
23 23
24 constructor( 24 constructor(
25 private productoService: ProductoService, 25 private productoService: ProductoService,
26 private location: Location, 26 private location: Location,
27 private router: Router, 27 private router: Router,
28 ) { } 28 ) { }
29 29
30 ngOnInit() { 30 ngOnInit() {
31 31
32 this.timerReposo = setTimeout(() => { 32 this.timerReposo = setTimeout(() => {
33 33
34 this.router.navigate(['cancelar-compra']); 34 this.router.navigate(['cancelar-compra']);
35 }, 90000) 35 }, 90000)
36 this.productos = this.productoService.productos; 36 this.productos = this.productoService.productos;
37 } 37 }
38 38
39 ngOnDestroy() { 39 ngOnDestroy() {
40 40
41 clearTimeout(this.timerReposo); 41 clearTimeout(this.timerReposo);
42 } 42 }
43 43
44 pagoEfectivo() { 44 pagoEfectivo() {
45 45
46 this.compraConEfectivofinalizada = true; 46 this.compraConEfectivofinalizada = true;
47 clearTimeout(this.timerReposo); 47 clearTimeout(this.timerReposo);
48 setTimeout(() => { 48 setTimeout(() => {
49 49
50 this.router.navigate(['mensaje-final']); 50 this.router.navigate(['mensaje-final']);
51 }, 3000); 51 }, 3000);
52 } 52 }
53 53
54 pagar() { 54 pagar() {
55 55
56 this.verQR = true; 56 this.verQR = true;
57 57
58 this.productoService.pagar() 58 this.productoService.pagar()
59 .subscribe(() => { 59 .subscribe(() => {
60 60
61 clearTimeout(this.timerReposo); 61 clearTimeout(this.timerReposo);
62 this.compraConQRfinalizada = true; 62 this.compraConQRfinalizada = true;
63 setTimeout(() => { 63 setTimeout(() => {
64 64
65 this.router.navigate(['mensaje-final']); 65 this.router.navigate(['mensaje-final']);
66 }, 3000); 66 }, 3000);
67 }, err => { 67 }, err => {
68 console.log(err); 68 console.log(err);
69 alert('algo salió mal'); 69 alert('algo salió mal');
70 }) 70 })
71 } 71 }
72 72
73 volverPreviousPage() { 73 volverPreviousPage() {
74 74
75 if (this.verQR) { 75 if (this.verQR) {
76 this.verQR = false; 76 this.verQR = false;
77 return; 77 return;
78 } 78 }
79 this.location.back(); 79 this.location.back();
80 } 80 }
81 81
82 getTotal() { 82 getTotal() {
83 83
84 var subTotal = 0; 84 var subTotal = 0;
85 this.productos.forEach(producto => { 85 this.productos.forEach(producto => {
86 86
87 subTotal = subTotal + (producto.PreVen * producto.cantidad); 87 subTotal = subTotal + (producto.PreVen * producto.cantidad);
88 }); 88 });
89 return this.total = subTotal; 89 return this.total = subTotal;
90 } 90 }
91 91
92 reiniciarTimer() { 92 reiniciarTimer() {
93 93
94 clearTimeout(this.timerReposo); 94 clearTimeout(this.timerReposo);
95 this.timerReposo = setTimeout(() => { 95 this.timerReposo = setTimeout(() => {
96 96
97 this.router.navigate(['cancelar-compra']); 97 this.router.navigate(['cancelar-compra']);
98 }, 90000) 98 }, 90000)
99 } 99 }
100 100
101 } 101 }
102 102
src/app/components/sidebar/sidebar.component.html
1 <div class="disable-user-select d-flex align-items-center flex-column h-100 pt-2 text-center"> 1 <div class="disable-user-select d-flex align-items-center flex-column h-100 pt-2 text-center">
2 2
3 <!-- ENCABEZADO --> 3 <!-- ENCABEZADO -->
4 <p class="h4 border-bottom border-white text-white mt-4 pb-2"> 4 <p class="h4 border-bottom border-white text-white mt-4 pb-2">
5 Mi compra 5 Mi compra
6 <i class="fa fa-shopping-cart" aria-hidden="true"></i> 6 <i class="fa fa-shopping-cart" aria-hidden="true"></i>
7 </p> 7 </p>
8 8
9 <div class="overflow-auto overflow-scroll mb-2 w-100"> 9 <div class="overflow-auto overflow-scroll mb-2 w-100">
10 <!-- PRODUCTOS CARRITO --> 10 <!-- PRODUCTOS CARRITO -->
11 <div 11 <div
12 class="slide-in-bl my-2 bg-white border-0 rounded-sm" 12 class="slide-in-bl my-2 bg-white border-0 rounded-sm"
13 *ngFor="let producto of productosCarrito.slice().reverse(); let i = index"> 13 *ngFor="let producto of productosCarrito.slice().reverse(); let i = index">
14 <img class="w-100 m-auto rounded-sm shadow" src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}"> 14 <img class="w-100 m-auto rounded-sm shadow" src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}">
15 <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm"> 15 <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm">
16 <div class="col-12 p-0 pt-2 text-left my-auto"> 16 <div class="col-12 p-0 pt-2 text-left my-auto">
17 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p> 17 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
18 </div> 18 </div>
19 <div class="col-12 pr-1 text-right h6 my-auto "> 19 <div class="col-12 pr-1 text-right h6 my-auto ">
20 <p class="m-0">{{producto.PreVen | currency}}</p> 20 <p class="m-0">{{producto.PreVen | currency}}</p>
21 </div> 21 </div>
22 </div> 22 </div>
23 23
24 <!-- BOTONES --> 24 <!-- BOTONES -->
25 <div class="row m-0 d-flex justify-content-between"> 25 <div class="row m-0 d-flex justify-content-between">
26 26
27 <!-- SUMAR - RESTAR CANTIDAD --> 27 <!-- SUMAR - RESTAR CANTIDAD -->
28 <div class="col-auto px-1 my-2"> 28 <div class="col-auto px-1 my-2">
29 <div class="btn-group-sm btn-group float-left my-auto" role="group"> 29 <div class="btn-group-sm btn-group float-left my-auto" role="group">
30 <button 30 <button
31 type="button" 31 type="button"
32 class="btn btn-light btn-sm my-auto border shadow" 32 class="btn btn-light btn-sm my-auto border shadow"
33 (click)="aumentarCantidad(producto)"> 33 (click)="aumentarCantidad(producto)">
34 <i class="fa fa-plus" aria-hidden="true"></i> 34 <i class="fa fa-plus" aria-hidden="true"></i>
35 </button> 35 </button>
36 <div class="bg-white border border-white px-2 my-auto text-dark h5 shadow"> 36 <div class="bg-white border border-white px-2 my-auto text-dark h5 shadow">
37 <small>{{producto.cantidad}}</small> 37 <small>{{producto.cantidad}}</small>
38 </div> 38 </div>
39 <button 39 <button
40 type="button" 40 type="button"
41 class="btn btn-light btn-sm my-auto border shadow" 41 class="btn btn-light btn-sm my-auto border shadow"
42 (click)="restarCantidad(producto)"> 42 (click)="restarCantidad(producto)">
43 <i class="fa fa-minus" aria-hidden="true"></i> 43 <i class="fa fa-minus" aria-hidden="true"></i>
44 </button> 44 </button>
45 </div> 45 </div>
46 </div> 46 </div>
47 47
48 <!-- PERSONALIZAR --> 48 <!-- PERSONALIZAR -->
49 <div class="col-auto px-1 my-2"> 49 <div class="col-auto px-1 my-2">
50 <button 50 <button
51 *ngIf="producto.tieneSinonimos" 51 *ngIf="producto.tieneSinonimos"
52 type="button" 52 type="button"
53 class="btn btn-light btn-sm my-auto float-left border shadow" 53 class="btn btn-light btn-sm my-auto float-left border shadow"
54 (click)="personalizarPromo(producto, i)"> 54 (click)="personalizarPromo(producto, i)">
55 <i class="fa fa-refresh text-purple" aria-hidden="true"></i> 55 <i class="fa fa-refresh text-purple" aria-hidden="true"></i>
56 </button> 56 </button>
57 </div> 57 </div>
58 58
59 <!-- BORRAR --> 59 <!-- BORRAR -->
60 <div class="col-auto px-1 my-2"> 60 <div class="col-auto px-1 my-2">
61 <button 61 <button
62 type="button" 62 type="button"
63 class="btn btn-secondary btn-sm my-auto shadow" 63 class="btn btn-secondary btn-sm my-auto shadow"
64 (click)="deleteProducto(producto, i)"> 64 (click)="deleteProducto(producto, i)">
65 <i class="fa fa-trash" aria-hidden="true"></i> 65 <i class="fa fa-trash" aria-hidden="true"></i>
66 </button> 66 </button>
67 </div> 67 </div>
68 </div> 68 </div>
69 </div> 69 </div>
70 </div> 70 </div>
71 71
72 <!-- TOTAL --> 72 <!-- TOTAL -->
73 <div class="card rounded-top-sm mt-auto blue-gradient border-0"> 73 <div class="card rounded-top-sm mt-auto blue-gradient border-0">
74 <div class="card-body row"> 74 <div class="card-body row">
75 <div class="col-12"> 75 <div class="col-12">
76 <p 76 <p
77 class="h4 border-bottom border-secondary text-secondary pb-2"> 77 class="h4 border-bottom border-secondary text-secondary pb-2">
78 ({{getCantidadProductos()}}) artículos 78 ({{getCantidadProductos()}}) artículos
79 </p> 79 </p>
80 <p class="h3 text-secondary">Total</p> 80 <p class="h3 text-secondary">Total</p>
81 <p class="h3 font-weight-bold">{{getTotal() | currency}}</p> 81 <p class="h3 font-weight-bold">{{getTotal() | currency}}</p>
82 </div> 82 </div>
83 <div class="col-12"> 83 <div class="col-12">
84 <button 84 <button
85 *ngIf="getCantidadProductos() > 0" 85 *ngIf="getCantidadProductos() > 0"
86 type="button" 86 type="button"
87 class="btn btn-block btn-light btn-lg shadow mb-2 p-1" 87 class="btn btn-block btn-light btn-lg shadow mb-2 p-1"
88 routerLink="/confirmacion-carrito"> 88 routerLink="/confirmacion-carrito">
89 <span class="font-weight-bold pr-1">Finalizar y Pagar</span> 89 <span class="font-weight-bold pr-1">Finalizar y Pagar</span>
90 <i class="fa fa-check text-success" aria-hidden="true"></i> 90 <i class="fa fa-check text-success" aria-hidden="true"></i>
91 </button> 91 </button>
92 <button 92 <button
93 type="button" 93 type="button"
94 class="btn btn-block btn-light shadow btn-sm shadow" 94 class="btn btn-block btn-light shadow btn-sm shadow"
95 [routerLink]="['/cancelar-compra']"> 95 [routerLink]="['/cancelar-compra']">
96 <span class="pr-1">Cancelar</span> 96 <span class="pr-1">Cancelar</span>
97 <i class="fa fa-times text-danger" aria-hidden="true"></i> 97 <i class="fa fa-times text-danger" aria-hidden="true"></i>
98 </button> 98 </button>
99 </div> 99 </div>
100 </div> 100 </div>
101 </div> 101 </div>
102 </div> 102 </div>
103 103
src/app/components/sidebar/sidebar.component.ts
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { Producto } from 'src/app/wrappers/producto'; 2 import { Producto } from 'src/app/wrappers/producto';
3 import { appSettings } from 'src/etc/AppSettings'; 3 import { appSettings } from 'src/etc/AppSettings';
4 import { ProductoService } from 'src/app/services/producto.service'; 4 import { ProductoService } from 'src/app/services/producto.service';
5 import { Router } from '@angular/router'; 5 import { Router } from '@angular/router';
6 6
7 @Component({ 7 @Component({
8 selector: 'app-sidebar', 8 selector: 'app-sidebar',
9 templateUrl: './sidebar.component.html', 9 templateUrl: './sidebar.component.html',
10 styleUrls: ['./sidebar.component.scss'], 10 styleUrls: ['./sidebar.component.scss'],
11 }) 11 })
12 export class SidebarComponent implements OnInit { 12 export class SidebarComponent implements OnInit {
13 13
14 private cantTotal: number = 0; 14 private cantTotal: number = 0;
15 private cantMin: number = 1; 15 private cantMin: number = 1;
16 private cantMax: number = 50; 16 private cantMax: number = 50;
17 private total: number = 0; 17 private total: number = 0;
18 private apiUrl: string = appSettings.apiUrl; 18 private apiImagenes: string = appSettings.apiImagenes;
19 19
20 public productosCarrito: Producto[] = []; 20 public productosCarrito: Producto[] = [];
21 21
22 constructor( 22 constructor(
23 private productoService: ProductoService, 23 private productoService: ProductoService,
24 private router: Router) { 24 private router: Router) {
25 this.router.routeReuseStrategy.shouldReuseRoute = function () { 25 this.router.routeReuseStrategy.shouldReuseRoute = function () {
26 return false; 26 return false;
27 } 27 }
28 } 28 }
29 29
30 ngOnInit() { 30 ngOnInit() {
31 31
32 this.productosCarrito = this.productoService.productos; 32 this.productosCarrito = this.productoService.productos;
33 } 33 }
34 34
35 getCantidadProductos() { 35 getCantidadProductos() {
36 36
37 var cantTotalAux = 0; 37 var cantTotalAux = 0;
38 this.productosCarrito.forEach(producto => { 38 this.productosCarrito.forEach(producto => {
39 39
40 cantTotalAux += producto.cantidad; 40 cantTotalAux += producto.cantidad;
41 }); 41 });
42 this.cantTotal = cantTotalAux; 42 this.cantTotal = cantTotalAux;
43 43
44 return this.cantTotal; 44 return this.cantTotal;
45 } 45 }
46 46
47 getTotal() { 47 getTotal() {
48 48
49 var subTotal = 0; 49 var subTotal = 0;
50 for (let i = 0; i < this.productosCarrito.length; i++) { 50 for (let i = 0; i < this.productosCarrito.length; i++) {
51 subTotal = subTotal + (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad); 51 subTotal = subTotal + (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad);
52 } 52 }
53 return this.total = subTotal; 53 return this.total = subTotal;
54 } 54 }
55 55
56 aumentarCantidad(producto: Producto) { 56 aumentarCantidad(producto: Producto) {
57 57
58 if (producto.cantidad < this.cantMax) { 58 if (producto.cantidad < this.cantMax) {
59 producto.cantidad++; 59 producto.cantidad++;
60 this.cantTotal++ 60 this.cantTotal++
61 } 61 }
62 } 62 }
63 63
64 restarCantidad(producto: Producto) { 64 restarCantidad(producto: Producto) {
65 65
66 if (producto.cantidad > this.cantMin) { 66 if (producto.cantidad > this.cantMin) {
67 producto.cantidad--; 67 producto.cantidad--;
68 this.cantTotal--; 68 this.cantTotal--;
69 } 69 }
70 } 70 }
71 71
72 deleteProducto(producto: Producto, index: number) { 72 deleteProducto(producto: Producto, index: number) {
73 73
74 this.cantTotal -= producto.cantidad; 74 this.cantTotal -= producto.cantidad;
75 this.total -= producto.PreVen * producto.cantidad; 75 this.total -= producto.PreVen * producto.cantidad;
76 this.productosCarrito.reverse().splice(index, 1); 76 this.productosCarrito.reverse().splice(index, 1);
77 return; 77 return;
78 } 78 }
79 79
80 personalizarPromo(producto: Producto, index) { 80 personalizarPromo(producto: Producto, index) {
81 81
82 this.productoService.productoAcargar = producto; 82 this.productoService.productoAcargar = producto;
83 this.deleteProducto(producto, index); 83 this.deleteProducto(producto, index);
84 this.router.navigate(['inicio']); 84 this.router.navigate(['inicio']);
85 } 85 }
86 86
87 } 87 }
88 88
src/etc/AppSettings ejemplo.ts
1 export const appSettings = { 1 export const appSettings = {
2 // apiUrl: 'http://10.231.45.117:4705/autoservicio' 2 // apiUrl: 'http://10.231.45.117:4705/autoservicio',
3 // apiImagenes: 'http://10.231.45.117:4513/'
3 }; 4 };
4 5