Commit 5a8d8acb7489f08282472f959205b6462de9251c
Exists in
master
Merge branch 'master' of http://git.focasoftware.com/angular/autoservicio
Showing
16 changed files
Show diff stats
src/app/app-routing.module.ts
... | ... | @@ -8,6 +8,7 @@ import { MasterComponent } from './components/master/master.component'; |
8 | 8 | import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component'; |
9 | 9 | import { PagoComponent } from './components/pago/pago.component'; |
10 | 10 | import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component'; |
11 | +import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final.component'; | |
11 | 12 | |
12 | 13 | const routes: Routes = [ |
13 | 14 | { path: '', component: HomeComponent }, |
... | ... | @@ -16,6 +17,7 @@ const routes: Routes = [ |
16 | 17 | { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent }, |
17 | 18 | { path: 'pago', component: PagoComponent }, |
18 | 19 | { path: 'cancelar-compra', component: CancelarCompraComponent }, |
20 | + { path: 'mensaje-final', component: MensajeFinalComponent }, | |
19 | 21 | { |
20 | 22 | path: '', |
21 | 23 | component: MasterComponent, |
src/app/app.module.ts
... | ... | @@ -22,6 +22,7 @@ import { PopoverSinonimosComponent } from './components/popover-sinonimos/popove |
22 | 22 | import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component'; |
23 | 23 | import { PagoComponent } from './components/pago/pago.component'; |
24 | 24 | import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component'; |
25 | +import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final.component'; | |
25 | 26 | //#endregion |
26 | 27 | |
27 | 28 | @NgModule({ |
... | ... | @@ -38,7 +39,8 @@ import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-c |
38 | 39 | PopoverSinonimosComponent, |
39 | 40 | AmbImagenesComponent, |
40 | 41 | PagoComponent, |
41 | - CancelarCompraComponent | |
42 | + CancelarCompraComponent, | |
43 | + MensajeFinalComponent | |
42 | 44 | ], |
43 | 45 | imports: [ |
44 | 46 | BrowserModule, |
src/app/components/cancelar-compra/cancelar-compra.component.ts
1 | -import { Component, OnInit } from '@angular/core'; | |
1 | +import { Component, OnInit, OnDestroy } from '@angular/core'; | |
2 | 2 | import { appSettings } from 'src/etc/AppSettings'; |
3 | 3 | import { Location } from '@angular/common'; |
4 | 4 | import { Router } from '@angular/router'; |
... | ... | @@ -9,29 +9,35 @@ import { ProductoService } from 'src/app/services/producto.service'; |
9 | 9 | templateUrl: './cancelar-compra.component.html', |
10 | 10 | styleUrls: ['./cancelar-compra.component.scss'] |
11 | 11 | }) |
12 | -export class CancelarCompraComponent implements OnInit { | |
12 | +export class CancelarCompraComponent implements OnInit, OnDestroy { | |
13 | 13 | |
14 | 14 | private apiUrl: string = appSettings.apiUrl; |
15 | + private timer: any; | |
15 | 16 | |
16 | 17 | constructor( |
17 | 18 | private location: Location, |
18 | 19 | private router: Router, |
19 | - private productoService : ProductoService | |
20 | - ) { } | |
20 | + private productoService: ProductoService | |
21 | + ) { } | |
21 | 22 | |
22 | 23 | ngOnInit() { |
23 | 24 | |
24 | - setTimeout(() => { | |
25 | + this.timer = setTimeout(() => { | |
25 | 26 | this.limpiarCarritoYvolver(); |
26 | 27 | }, 30000) |
27 | 28 | } |
28 | 29 | |
30 | + ngOnDestroy() { | |
31 | + | |
32 | + clearTimeout(this.timer); | |
33 | + } | |
34 | + | |
29 | 35 | volverPreviousPage() { |
30 | 36 | |
31 | 37 | this.location.back(); |
32 | 38 | } |
33 | 39 | |
34 | - limpiarCarritoYvolver(){ | |
40 | + limpiarCarritoYvolver() { | |
35 | 41 | |
36 | 42 | this.productoService.productoAcargar = undefined; |
37 | 43 | this.productoService.promoAcargar = undefined; |
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
... | ... | @@ -56,18 +56,44 @@ |
56 | 56 | </div> |
57 | 57 | </div> |
58 | 58 | |
59 | - <div class="col-sm-5"> | |
59 | + <div class="col-sm-5 pl-0"> | |
60 | 60 | <div class="row ml-3"> |
61 | 61 | <!-- TICKET --> |
62 | - <div class="col-sm-7"> | |
62 | + <div class="col-sm-7 p-0"> | |
63 | 63 | <div class="card rounded-sm shadow"> |
64 | 64 | <div class="card-body"> |
65 | 65 | <p class="h5 card-title">Su Ticket</p> |
66 | - <p class="h6 card-text text-left mt-4 pr-2 vh-60 overflow-scroll"> | |
67 | - Ticket detalle. | |
68 | - </p> | |
69 | - <p class="h4 card-text text-right mt-3 mb-0"> | |
70 | - Total {{230 | currency}} | |
66 | + <div class="row mt-4 m-0"> | |
67 | + <div class="col-12 p-0 mb-2"> | |
68 | + <p class="h6 m-0 card-text text-left"> | |
69 | + <small class="font-weight-bold">DESCRIPCIÓN</small> | |
70 | + </p> | |
71 | + <p class="h6 m-0 card-text text-left"> | |
72 | + <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small> | |
73 | + </p> | |
74 | + </div> | |
75 | + </div> | |
76 | + <div class="row vh-50 px-2 overflow-scroll m-0"> | |
77 | + <div class="col-12 p-0 mb-2" *ngFor="let producto of productos"> | |
78 | + <p class="h6 m-0 card-text text-left"> | |
79 | + <small>{{producto.DetArt}}</small> | |
80 | + </p> | |
81 | + <div class="row d-flex justify-content-between m-0"> | |
82 | + <div class="col p-0"> | |
83 | + <p class="h6 m-0 card-text text-left"> | |
84 | + <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small> | |
85 | + </p> | |
86 | + </div> | |
87 | + <div class="col p-0"> | |
88 | + <p class="h6 m-0 card-text text-right"> | |
89 | + <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small> | |
90 | + </p> | |
91 | + </div> | |
92 | + </div> | |
93 | + </div> | |
94 | + </div> | |
95 | + <p class="h4 font-weight-bold card-text text-right mt-3 mb-0"> | |
96 | + Total {{getTotal() | currency}} | |
71 | 97 | </p> |
72 | 98 | </div> |
73 | 99 | </div> |
src/app/components/confirmacion-carrito/confirmacion-carrito.component.ts
... | ... | @@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core'; |
2 | 2 | import { appSettings } from 'src/etc/AppSettings'; |
3 | 3 | import { Location } from '@angular/common'; |
4 | 4 | import { ProductoService } from 'src/app/services/producto.service'; |
5 | +import { Producto } from 'src/app/wrappers/producto'; | |
5 | 6 | |
6 | 7 | @Component({ |
7 | 8 | selector: 'app-confirmacion-carrito', |
... | ... | @@ -10,17 +11,33 @@ import { ProductoService } from 'src/app/services/producto.service'; |
10 | 11 | }) |
11 | 12 | export class ConfirmacionCarritoComponent implements OnInit { |
12 | 13 | |
13 | - productos = []; | |
14 | + productos: Producto[] = []; | |
15 | + total: number = 0; | |
14 | 16 | private apiUrl: string = appSettings.apiUrl; |
15 | 17 | |
16 | - constructor(private location: Location, private productoService: ProductoService) { } | |
18 | + constructor( | |
19 | + private location: Location, | |
20 | + private productoService: ProductoService | |
21 | + ) { } | |
17 | 22 | |
18 | 23 | ngOnInit() { |
24 | + | |
19 | 25 | this.productos = this.productoService.productos; |
20 | 26 | } |
21 | 27 | |
22 | 28 | volverPreviousPage() { |
29 | + | |
23 | 30 | this.location.back(); |
24 | 31 | } |
25 | 32 | |
33 | + getTotal() { | |
34 | + | |
35 | + var subTotal = 0; | |
36 | + this.productos.forEach(producto => { | |
37 | + | |
38 | + subTotal = subTotal + (producto.PreVen * producto.cantidad); | |
39 | + }); | |
40 | + return this.total = subTotal; | |
41 | + } | |
42 | + | |
26 | 43 | } |
src/app/components/header/header.component.html
1 | 1 | <div class="row m-0 bg-light p-4 justify-content-between"> |
2 | - <div class="col-auto"> | |
3 | - <img src="{{apiUrl}}/imagenes/logoaxion.png"> | |
2 | + <div class="col-6"> | |
3 | + <img class="w-25 float-left" src="{{apiUrl}}/imagenes/logoempresa.png"> | |
4 | 4 | </div> |
5 | - <div class="col-auto"> | |
6 | - <img src="{{apiUrl}}/imagenes/logodebo.png"> | |
5 | + <div class="col-6"> | |
6 | + <img class="w-25 float-right" src="{{apiUrl}}/imagenes/logodebo.png"> | |
7 | 7 | </div> |
8 | 8 | </div> |
src/app/components/home/home.component.html
1 | 1 | <div class="container-fluid p-0"> |
2 | - <img src="{{apiUrl}}/imagenes/homeBackground.jpg" class="background-image vh-100 w-100"> | |
2 | + <img | |
3 | + src="{{apiUrl}}/imagenes/homeBackground.jpg" | |
4 | + class="background-image vh-100 w-100"> | |
3 | 5 | <div class="row m-0"> |
4 | 6 | <div class="col p-0"> |
5 | 7 | <div |
... | ... | @@ -9,14 +11,34 @@ |
9 | 11 | <!-- HEADER --> |
10 | 12 | <div class="row m-0 w-100 bg-primary-gradient-horizontal"> |
11 | 13 | <div class="col-6 bg-white p-3 rounded-bottom-right"> |
12 | - <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logoaxion.png"> | |
14 | + <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logoempresa.png"> | |
13 | 15 | </div> |
14 | 16 | </div> |
15 | 17 | |
16 | 18 | <!-- INFO DE BIENVENIDA --> |
17 | 19 | <div class="row w-100"> |
18 | 20 | <div class="col-4 offset-2"> |
19 | - <img src="{{apiUrl}}/imagenes/accesoPLAYA.png" class="w-100"> | |
21 | + | |
22 | + <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> | |
23 | + <div class="carousel-inner"> | |
24 | + <div class="carousel-item active"> | |
25 | + <img | |
26 | + src="{{apiUrl}}/imagenes/coca1.jpg" | |
27 | + class="d-block rounded-sm shadow w-100"> | |
28 | + </div> | |
29 | + <div class="carousel-item"> | |
30 | + <img | |
31 | + src="{{apiUrl}}/imagenes/coca2.jpg" | |
32 | + class="d-block rounded-sm shadow w-100"> | |
33 | + </div> | |
34 | + <div class="carousel-item"> | |
35 | + <img | |
36 | + src="{{apiUrl}}/imagenes/coca3.jpg" | |
37 | + class="d-block rounded-sm shadow w-100"> | |
38 | + </div> | |
39 | + </div> | |
40 | + </div> | |
41 | + | |
20 | 42 | </div> |
21 | 43 | <div class="col-6 text-center text-white my-auto"> |
22 | 44 | <p class="display-2 font-weight-bold mb-5">¡BIENVENIDO!</p> |
src/app/components/mensaje-final/mensaje-final.component.html
... | ... | @@ -0,0 +1,43 @@ |
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"> | |
3 | + <div class="row m-0"> | |
4 | + <div class="col p-0"> | |
5 | + <div class="vh-100 fade-in d-flex align-content-between flex-wrap disable-user-select"> | |
6 | + | |
7 | + <!-- HEADER --> | |
8 | + <div class="row m-0 w-100 bg-primary-gradient-horizontal"> | |
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"> | |
11 | + </div> | |
12 | + </div> | |
13 | + | |
14 | + <div class="row py-5 m-0 w-100"> | |
15 | + <div class="col-6 offset-3"> | |
16 | + <div class="row h-100"> | |
17 | + <div class="col-12 my-auto"> | |
18 | + <div> | |
19 | + <div class="mb-5 mt-4"> | |
20 | + <p class="display-1 card-text text-center text-white font-weight-bold"> | |
21 | + Gracias | |
22 | + </p> | |
23 | + <p class="display-4 card-text text-center text-white font-weight-bold"> | |
24 | + Por su compra | |
25 | + </p> | |
26 | + </div> | |
27 | + </div> | |
28 | + </div> | |
29 | + </div> | |
30 | + </div> | |
31 | + </div> | |
32 | + | |
33 | + <!-- FOOTER --> | |
34 | + <div class="row m-0 w-100 bg-gray"> | |
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"> | |
37 | + </div> | |
38 | + </div> | |
39 | + | |
40 | + </div> | |
41 | + </div> | |
42 | + </div> | |
43 | +</div> |
src/app/components/mensaje-final/mensaje-final.component.scss
src/app/components/mensaje-final/mensaje-final.component.spec.ts
... | ... | @@ -0,0 +1,25 @@ |
1 | +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | |
2 | + | |
3 | +import { MensajeFinalComponent } from './mensaje-final.component'; | |
4 | + | |
5 | +describe('MensajeFinalComponent', () => { | |
6 | + let component: MensajeFinalComponent; | |
7 | + let fixture: ComponentFixture<MensajeFinalComponent>; | |
8 | + | |
9 | + beforeEach(async(() => { | |
10 | + TestBed.configureTestingModule({ | |
11 | + declarations: [ MensajeFinalComponent ] | |
12 | + }) | |
13 | + .compileComponents(); | |
14 | + })); | |
15 | + | |
16 | + beforeEach(() => { | |
17 | + fixture = TestBed.createComponent(MensajeFinalComponent); | |
18 | + component = fixture.componentInstance; | |
19 | + fixture.detectChanges(); | |
20 | + }); | |
21 | + | |
22 | + it('should create', () => { | |
23 | + expect(component).toBeTruthy(); | |
24 | + }); | |
25 | +}); |
src/app/components/mensaje-final/mensaje-final.component.ts
... | ... | @@ -0,0 +1,42 @@ |
1 | +import { Component, OnInit } from '@angular/core'; | |
2 | +import { appSettings } from 'src/etc/AppSettings'; | |
3 | +import { ProductoService } from 'src/app/services/producto.service'; | |
4 | +import { Router } from '@angular/router'; | |
5 | + | |
6 | +@Component({ | |
7 | + selector: 'app-mensaje-final', | |
8 | + templateUrl: './mensaje-final.component.html', | |
9 | + styleUrls: ['./mensaje-final.component.scss'] | |
10 | +}) | |
11 | +export class MensajeFinalComponent implements OnInit { | |
12 | + | |
13 | + private apiUrl: string = appSettings.apiUrl; | |
14 | + private timer: any; | |
15 | + | |
16 | + constructor( | |
17 | + private productoService: ProductoService, | |
18 | + private router: Router | |
19 | + ) { } | |
20 | + | |
21 | + ngOnInit() { | |
22 | + | |
23 | + this.timer = setTimeout(() => { | |
24 | + | |
25 | + this.limpiarCarritoYvolver(); | |
26 | + }, 3000) | |
27 | + } | |
28 | + | |
29 | + ngOnDestroy() { | |
30 | + | |
31 | + clearTimeout(this.timer); | |
32 | + } | |
33 | + | |
34 | + limpiarCarritoYvolver() { | |
35 | + | |
36 | + this.productoService.productoAcargar = undefined; | |
37 | + this.productoService.promoAcargar = undefined; | |
38 | + this.productoService.productos = []; | |
39 | + this.router.navigate(['/home']); | |
40 | + } | |
41 | + | |
42 | +} |
src/app/components/pago/pago.component.html
1 | -<div class="row"> | |
1 | +<div | |
2 | + *ngIf="!compraConEfectivofinalizada && !compraConQRfinalizada" | |
3 | + class="row m-0 fade-in bg-primary-gradient disable-user-select"> | |
4 | + | |
5 | + <div class="col-12 p-0 vh-100"> | |
2 | 6 | |
3 | - <app-header></app-header> | |
4 | - | |
5 | - <div class="col-12"> | |
7 | + <app-header></app-header> | |
6 | 8 | |
7 | 9 | <!-- NOMBRE DE SECCION --> |
8 | 10 | <div class="row m-0"> |
9 | 11 | <div class="col-12 p-0"> |
10 | - <p class="h5 py-1 bg-gray text-muted text-center">Pago <i class="fa fa-usd"></i></p> | |
12 | + <p class="h5 py-1 bg-gray text-muted text-center m-0"> | |
13 | + Pagar | |
14 | + <i class="fa fa-usd"></i> | |
15 | + </p> | |
11 | 16 | </div> |
12 | 17 | </div> |
13 | 18 | |
14 | - <div class="row m-3 d-flex align-items-center"> | |
15 | - <div class="col-4"> | |
16 | - <h1>Mi Compra <i class="fa fa-shopping-cart"></i></h1> | |
17 | - </div> | |
18 | - <div class="col-8"> | |
19 | - <h2 *ngIf="!verQR">Seleccione medio de pago</h2> | |
20 | - <h2 *ngIf="verQR">Escane QR</h2> | |
19 | + <div *ngIf="!verQR" class="row mt-4 m-3 d-flex align-items-center"> | |
20 | + <div class="col-7 text-center"> | |
21 | + <p class="text-white h2" *ngIf="!verQR">Elija forma de pago</p> | |
21 | 22 | </div> |
22 | 23 | </div> |
23 | 24 | |
24 | - </div> | |
25 | + <div *ngIf="!verQR" class="row fade-in mt-3"> | |
26 | + <!-- GRILLA DE PRODUCTOS DE MI COMPRA --> | |
27 | + <div class="col-sm-7"> | |
28 | + <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark"> | |
29 | + <div class="col-4 p-2"> | |
30 | + <div class="bg-white rounded-sm shadow border-0"> | |
31 | + <img src="{{apiUrl}}/imagenes/efectivo.png" class="rounded-sm w-75 py-2 mx-auto d-block"> | |
32 | + <div class="p-2 card-text text-center"> | |
33 | + <p class="h6 text-center m-0">Efectivo</p> | |
34 | + </div> | |
35 | + </div> | |
36 | + </div> | |
37 | + <div class="col-4 p-2"> | |
38 | + <div class="bg-white rounded-sm shadow border-0"> | |
39 | + <img src="{{apiUrl}}/imagenes/tarjeta.png" class="rounded-sm w-75 py-2 mx-auto d-block"> | |
40 | + <div class="p-2 card-text text-center"> | |
41 | + <p class="h6 text-center m-0">Tarjeta</p> | |
42 | + </div> | |
43 | + </div> | |
44 | + </div> | |
45 | + <div class="col-4 p-2"> | |
46 | + <div | |
47 | + class="bg-white rounded-sm shadow border-0" | |
48 | + (click)="pagar()"> | |
49 | + <img src="{{apiUrl}}/imagenes/qr.png" class="rounded-sm w-75 py-2 mx-auto d-block"> | |
50 | + <div class="p-2 card-text text-center"> | |
51 | + <p class="h6 text-center m-0">Pago Electrónico</p> | |
52 | + </div> | |
53 | + </div> | |
54 | + </div> | |
55 | + </div> | |
56 | + </div> | |
25 | 57 | |
26 | - <div *ngIf="!verQR" class="col-6 card bg-white border-0 shadow rounded mb-auto"> | |
27 | - <input type="radio"> | |
28 | - <label>Mercado Pago</label> | |
29 | - </div> | |
58 | + <div class="col-sm-5 pl-0"> | |
59 | + <div class="row ml-3"> | |
60 | + <!-- TICKET --> | |
61 | + <div class="col-sm-7 p-0"> | |
62 | + <div class="card rounded-sm shadow"> | |
63 | + <div class="card-body"> | |
64 | + <p class="h5 card-title">Su Ticket</p> | |
65 | + <div class="row mt-4 m-0"> | |
66 | + <div class="col-12 p-0 mb-2"> | |
67 | + <p class="h6 m-0 card-text text-left"> | |
68 | + <small class="font-weight-bold">DESCRIPCIÓN</small> | |
69 | + </p> | |
70 | + <p class="h6 m-0 card-text text-left"> | |
71 | + <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small> | |
72 | + </p> | |
73 | + </div> | |
74 | + </div> | |
75 | + <div class="row px-2 vh-50 overflow-scroll m-0"> | |
76 | + <div class="col-12 p-0 mb-2" *ngFor="let producto of productos"> | |
77 | + <p class="h6 m-0 card-text text-left"> | |
78 | + <small>{{producto.DetArt}}</small> | |
79 | + </p> | |
80 | + <div class="row d-flex justify-content-between m-0"> | |
81 | + <div class="col p-0"> | |
82 | + <p class="h6 m-0 card-text text-left"> | |
83 | + <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small> | |
84 | + </p> | |
85 | + </div> | |
86 | + <div class="col p-0"> | |
87 | + <p class="h6 m-0 card-text text-right"> | |
88 | + <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small> | |
89 | + </p> | |
90 | + </div> | |
91 | + </div> | |
92 | + </div> | |
93 | + </div> | |
94 | + <p class="h4 font-weight-bold card-text text-right mt-3 mb-0"> | |
95 | + Total {{getTotal() | currency}} | |
96 | + </p> | |
97 | + </div> | |
98 | + </div> | |
99 | + </div> | |
100 | + </div> | |
101 | + </div> | |
102 | + </div> | |
30 | 103 | |
31 | - <div *ngIf="verQR" class="col-6 card bg-white border-0 shadow rounded mb-auto"> | |
32 | - <h3>Pago con QR mercado pago</h3> | |
33 | - <div class="card-body"> | |
34 | - <img src="{{apiUrl}}/imagenes/qrmp.jpg" alt=""> | |
104 | + <div *ngIf="verQR" class="row fade-in mt-5"> | |
105 | + <div class="col-6 offset-3 border-0 mb-auto"> | |
106 | + <img src="{{apiUrl}}/imagenes/qrmp.jpg" class="w-50 mx-auto d-block shadow rounded-sm"> | |
107 | + </div> | |
35 | 108 | </div> |
36 | - </div> | |
37 | 109 | |
38 | - <!-- OPCIONES ABAJO DERECHA --> | |
39 | - <div class="row m-0 fixed-bottom" > | |
40 | - <div class="col-sm-2 offset-sm-10 p-0 mt-auto"> | |
41 | - <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0"> | |
42 | - <div class="card-body row m-0"> | |
43 | - <div class="col-12 p-3"> | |
44 | - <button | |
45 | - type="button" | |
46 | - class="btn btn-block btn-light shadow btn-sm shadow" | |
47 | - (click)="volverPreviousPage()"> | |
48 | - <span class="pr-2">Volver</span> | |
49 | - <i class="fa fa-undo text-warning"></i> | |
50 | - </button> | |
51 | - <button *ngIf="!verQR" (click)="pagar()" type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1"> | |
52 | - <span class="font-weight-bold pr-2">Finalizar y Pagar</span> | |
53 | - <i class="fa fa-check text-success"></i> | |
54 | - </button> | |
55 | - <button *ngIf="!verQR" | |
56 | - type="button" | |
57 | - class="btn btn-block btn-light shadow btn-sm shadow" | |
58 | - [routerLink]="['/cancelar-compra']"> | |
59 | - <span class="pr-2">Cancelar</span> | |
60 | - <i class="fa fa-times text-danger"></i> | |
61 | - </button> | |
110 | + <!-- OPCIONES ABAJO DERECHA --> | |
111 | + <div class="row m-0 fixed-bottom" > | |
112 | + <div class="col-sm-2 offset-sm-10 p-0 mt-auto"> | |
113 | + <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0"> | |
114 | + <div class="card-body row m-0"> | |
115 | + <div class="col-12 p-3"> | |
116 | + <button | |
117 | + type="button" | |
118 | + class="btn btn-block btn-light shadow btn-sm shadow" | |
119 | + (click)="volverPreviousPage()"> | |
120 | + <span class="pr-2">Volver</span> | |
121 | + <i class="fa fa-undo text-warning"></i> | |
122 | + </button> | |
123 | + <button | |
124 | + type="button" | |
125 | + class="btn btn-block btn-light shadow btn-sm shadow" | |
126 | + [routerLink]="['/cancelar-compra']"> | |
127 | + <span class="pr-2">Cancelar</span> | |
128 | + <i class="fa fa-times text-danger"></i> | |
129 | + </button> | |
130 | + </div> | |
62 | 131 | </div> |
63 | 132 | </div> |
64 | 133 | </div> |
65 | 134 | </div> |
135 | + | |
66 | 136 | </div> |
67 | 137 | |
68 | 138 | </div> |
139 | + | |
140 | +<div | |
141 | + *ngIf="compraConQRfinalizada" | |
142 | + class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100"> | |
143 | + <div class="col-12 text-center text-white my-auto"> | |
144 | + <p class="font-weight-bold display-4"> | |
145 | + Su pago fue<br> | |
146 | + acreditado | |
147 | + exitosamente | |
148 | + </p> | |
149 | + <p class="font-weight-bold display-4">Recuerde retirar su ticket</p> | |
150 | + </div> | |
151 | +</div> | |
152 | + | |
153 | +<div | |
154 | + *ngIf="compraConEfectivofinalizada" | |
155 | + class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100"> | |
156 | + <div class="col-12 text-center text-white my-auto"> | |
157 | + <p class="font-weight-bold display-4"> | |
158 | + Retire su ticket<br> | |
159 | + y diríjase a caja para<br> | |
160 | + efectuar el pago. | |
161 | + </p> | |
162 | + </div> | |
163 | +</div> |
src/app/components/pago/pago.component.ts
1 | 1 | import { Component, OnInit } from '@angular/core'; |
2 | 2 | import { appSettings } from 'src/etc/AppSettings'; |
3 | +import { Location } from '@angular/common'; | |
3 | 4 | import { ProductoService } from 'src/app/services/producto.service'; |
4 | -import { RouterLink } from '@angular/router'; | |
5 | +import { RouterLink, Router } from '@angular/router'; | |
6 | +import { Producto } from 'src/app/wrappers/producto'; | |
5 | 7 | |
6 | 8 | @Component({ |
7 | 9 | selector: 'app-pago', |
... | ... | @@ -12,10 +14,20 @@ export class PagoComponent implements OnInit { |
12 | 14 | |
13 | 15 | private apiUrl: string = appSettings.apiUrl; |
14 | 16 | private verQR: boolean = false; |
17 | + private productos: Producto[] = []; | |
18 | + private total: number = 0; | |
15 | 19 | |
16 | - constructor(private productoService: ProductoService) { } | |
20 | + private compraConQRfinalizada: boolean = false; | |
21 | + private compraConEfectivofinalizada: boolean = false; | |
22 | + | |
23 | + constructor( | |
24 | + private productoService: ProductoService, | |
25 | + private location: Location, | |
26 | + private router: Router, | |
27 | + ) { } | |
17 | 28 | |
18 | 29 | ngOnInit() { |
30 | + this.productos = this.productoService.productos; | |
19 | 31 | } |
20 | 32 | |
21 | 33 | pagar() { |
... | ... | @@ -25,11 +37,35 @@ export class PagoComponent implements OnInit { |
25 | 37 | |
26 | 38 | this.productoService.pagar() |
27 | 39 | .subscribe(() => { |
28 | - alert('Compra finalizada'); | |
40 | + // alert('Compra finalizada'); | |
41 | + this.compraConQRfinalizada = true; | |
42 | + setTimeout(() => { | |
43 | + | |
44 | + this.router.navigate(['mensaje-final']); | |
45 | + }, 1000); | |
29 | 46 | }, err => { |
30 | 47 | console.log(err); |
31 | 48 | alert('algo salió mal'); |
32 | 49 | }) |
33 | 50 | } |
34 | 51 | |
52 | + volverPreviousPage() { | |
53 | + | |
54 | + if (this.verQR) { | |
55 | + this.verQR = false; | |
56 | + return; | |
57 | + } | |
58 | + this.location.back(); | |
59 | + } | |
60 | + | |
61 | + getTotal() { | |
62 | + | |
63 | + var subTotal = 0; | |
64 | + this.productos.forEach(producto => { | |
65 | + | |
66 | + subTotal = subTotal + (producto.PreVen * producto.cantidad); | |
67 | + }); | |
68 | + return this.total = subTotal; | |
69 | + } | |
70 | + | |
35 | 71 | } |
src/app/components/sidebar/sidebar.component.html
... | ... | @@ -15,7 +15,6 @@ |
15 | 15 | <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm"> |
16 | 16 | <div class="col-12 p-0 pt-2 text-left my-auto"> |
17 | 17 | <p class="m-0 h6"><small>{{producto.DetArt}}</small></p> |
18 | - <p class="m-0 h6"><small>COD: {{producto.CodRub}}</small></p> | |
19 | 18 | </div> |
20 | 19 | <div class="col-12 pr-1 text-right h6 my-auto "> |
21 | 20 | <p class="m-0">{{producto.PreVen | currency}}</p> |
... | ... | @@ -49,7 +48,7 @@ |
49 | 48 | <!-- PERSONALIZAR --> |
50 | 49 | <div class="col-auto px-1 my-2"> |
51 | 50 | <button |
52 | - *ngIf="esPersonalizable(producto)" | |
51 | + *ngIf="producto.tieneSinonimos" | |
53 | 52 | type="button" |
54 | 53 | class="btn btn-light btn-sm my-auto float-left border shadow" |
55 | 54 | (click)="personalizarPromo(producto, i)"> |
src/app/components/sidebar/sidebar.component.ts
... | ... | @@ -77,15 +77,6 @@ export class SidebarComponent implements OnInit { |
77 | 77 | return; |
78 | 78 | } |
79 | 79 | |
80 | - esPersonalizable(producto: Producto) { | |
81 | - | |
82 | - var esPersonalizable: boolean = false; | |
83 | - if (producto.tieneSinonimos) | |
84 | - esPersonalizable = true; | |
85 | - | |
86 | - return esPersonalizable; | |
87 | - } | |
88 | - | |
89 | 80 | personalizarPromo(producto: Producto, index) { |
90 | 81 | |
91 | 82 | this.productoService.productoAcargar = producto; |
src/styles.scss