Commit 83893139b8ccd117a285a5162f7a2b46fd013bc1
1 parent
b363e367e7
Exists in
master
and in
1 other branch
Cambio en variable apiurl.
Showing
22 changed files
with
50 additions
and
45 deletions
Show diff stats
angular.json
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">×</span> | 59 | <span aria-hidden="true">×</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="‹" | 96 | previousText="‹" |
97 | nextText="›" | 97 | nextText="›" |
98 | firstText="«" | 98 | firstText="«" |
99 | lastText="»" | 99 | lastText="»" |
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 |