Mauricio Cattafi / autoservicio

Download as
Browse Code »

Commit 87272eae6b7855e0df374de5fd8aaf44f8b012c8

Authored by Marcelo Puebla
1 parent b102d738bf
Exists in master and in 1 other branch validar_pve

Seccion de confirmar carrito y pago unificados

Showing 8 changed files with 156 additions and 343 deletions   Show diff stats
src/app/app-routing.module.ts
Diff comments   View file @ 87272ea
1 import { NgModule } from '@angular/core'; 1 import { NgModule } from '@angular/core';
2 import { Routes, RouterModule } from '@angular/router'; 2 import { Routes, RouterModule } from '@angular/router';
3 import { HomeComponent } from './components/home/home.component'; 3 import { HomeComponent } from './components/home/home.component';
4 import { InicioComponent } from './components/inicio/inicio.component'; 4 import { InicioComponent } from './components/inicio/inicio.component';
5 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component'; 5 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
6 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component'; 6 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
7 import { MasterComponent } from './components/master/master.component'; 7 import { MasterComponent } from './components/master/master.component';
8 import { PagoComponent } from './components/pago/pago.component';
9 import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component'; 8 import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component';
10 import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final.component'; 9 import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final.component';
11 import { ComandaComponent } from './components/comanda/comanda.component'; 10 import { ComandaComponent } from './components/comanda/comanda.component';
12 11
13 const routes: Routes = [ 12 const routes: Routes = [
14 { path: '', component: HomeComponent }, 13 { path: '', component: HomeComponent },
15 { path: 'home', component: HomeComponent }, 14 { path: 'home', component: HomeComponent },
16 { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent }, 15 { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
17 { path: 'pago', component: PagoComponent },
18 { path: 'cancelar-compra', component: CancelarCompraComponent }, 16 { path: 'cancelar-compra', component: CancelarCompraComponent },
19 { path: 'mensaje-final', component: MensajeFinalComponent }, 17 { path: 'mensaje-final', component: MensajeFinalComponent },
20 { path: 'comanda', component: ComandaComponent }, 18 { path: 'comanda', component: ComandaComponent },
21 { 19 {
22 path: '', 20 path: '',
23 component: MasterComponent, 21 component: MasterComponent,
24 children: [ 22 children: [
25 { path: 'inicio', component: InicioComponent }, 23 { path: 'inicio', component: InicioComponent },
26 { path: 'busqueda-productos', component: BusquedaProductosComponent } 24 { path: 'busqueda-productos', component: BusquedaProductosComponent }
27 ] 25 ]
28 }, 26 },
29 { path: '**', redirectTo: '/home', pathMatch: 'full' }, 27 { path: '**', redirectTo: '/home', pathMatch: 'full' },
30 ]; 28 ];
31 29
32 @NgModule({ 30 @NgModule({
33 imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})], 31 imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
34 exports: [RouterModule] 32 exports: [RouterModule]
35 }) 33 })
36 34
37 export class AppRoutingModule { } 35 export class AppRoutingModule { }
38 36
src/app/app.module.ts
Diff comments   View file @ 87272ea
1 //#region MODULES 1 //#region MODULES
2 import { BrowserModule } from '@angular/platform-browser'; 2 import { BrowserModule } from '@angular/platform-browser';
3 import { NgModule } from '@angular/core'; 3 import { NgModule } from '@angular/core';
4 import { AppRoutingModule } from './app-routing.module'; 4 import { AppRoutingModule } from './app-routing.module';
5 import { HttpClientModule } from '@angular/common/http'; 5 import { HttpClientModule } from '@angular/common/http';
6 import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 6 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
7 import { TooltipModule } from 'ngx-bootstrap/tooltip'; 7 import { TooltipModule } from 'ngx-bootstrap/tooltip';
8 import { PopoverModule } from 'ngx-bootstrap/popover'; 8 import { PopoverModule } from 'ngx-bootstrap/popover';
9 import { CarouselModule } from 'ngx-bootstrap/carousel'; 9 import { CarouselModule } from 'ngx-bootstrap/carousel';
10 import { PaginationModule } from 'ngx-bootstrap/pagination'; 10 import { PaginationModule } from 'ngx-bootstrap/pagination';
11 //#endregion 11 //#endregion
12 12
13 //#region Keyboard 13 //#region Keyboard
14 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 14 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
15 import { MatButtonModule } from '@angular/material/button'; 15 import { MatButtonModule } from '@angular/material/button';
16 import { MatKeyboardModule } from '@ngx-material-keyboard/core'; 16 import { MatKeyboardModule } from '@ngx-material-keyboard/core';
17 //#endregion 17 //#endregion
18 18
19 //#region COMPONENTS 19 //#region COMPONENTS
20 import { AppComponent } from './app.component'; 20 import { AppComponent } from './app.component';
21 import { HeaderComponent } from './components/header/header.component'; 21 import { HeaderComponent } from './components/header/header.component';
22 import { SidebarComponent } from './components/sidebar/sidebar.component'; 22 import { SidebarComponent } from './components/sidebar/sidebar.component';
23 import { HomeComponent } from './components/home/home.component'; 23 import { HomeComponent } from './components/home/home.component';
24 import { InicioComponent } from './components/inicio/inicio.component'; 24 import { InicioComponent } from './components/inicio/inicio.component';
25 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component'; 25 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
26 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component'; 26 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
27 import { MasterComponent } from './components/master/master.component'; 27 import { MasterComponent } from './components/master/master.component';
28 import { PopoverPromosComponent } from './components/popover-promos/popover-promos.component'; 28 import { PopoverPromosComponent } from './components/popover-promos/popover-promos.component';
29 import { PopoverSinonimosComponent } from './components/popover-sinonimos/popover-sinonimos.component'; 29 import { PopoverSinonimosComponent } from './components/popover-sinonimos/popover-sinonimos.component';
30 import { PagoComponent } from './components/pago/pago.component';
31 import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component'; 30 import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component';
32 import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final.component'; 31 import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final.component';
33 import { ComandaComponent } from './components/comanda/comanda.component'; 32 import { ComandaComponent } from './components/comanda/comanda.component';
34 //#endregion 33 //#endregion
35 34
36 @NgModule({ 35 @NgModule({
37 declarations: [ 36 declarations: [
38 AppComponent, 37 AppComponent,
39 HeaderComponent, 38 HeaderComponent,
40 SidebarComponent, 39 SidebarComponent,
41 HomeComponent, 40 HomeComponent,
42 InicioComponent, 41 InicioComponent,
43 BusquedaProductosComponent, 42 BusquedaProductosComponent,
44 ConfirmacionCarritoComponent, 43 ConfirmacionCarritoComponent,
45 MasterComponent, 44 MasterComponent,
46 PopoverPromosComponent, 45 PopoverPromosComponent,
47 PopoverSinonimosComponent, 46 PopoverSinonimosComponent,
48 PagoComponent,
49 CancelarCompraComponent, 47 CancelarCompraComponent,
50 MensajeFinalComponent, 48 MensajeFinalComponent,
51 ComandaComponent 49 ComandaComponent
52 ], 50 ],
53 imports: [ 51 imports: [
54 BrowserModule, 52 BrowserModule,
55 AppRoutingModule, 53 AppRoutingModule,
56 HttpClientModule, 54 HttpClientModule,
57 FormsModule, 55 FormsModule,
58 ReactiveFormsModule, 56 ReactiveFormsModule,
59 ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }), 57 ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }),
60 TooltipModule.forRoot(), 58 TooltipModule.forRoot(),
61 PopoverModule.forRoot(), 59 PopoverModule.forRoot(),
62 BrowserAnimationsModule, 60 BrowserAnimationsModule,
63 MatKeyboardModule, 61 MatKeyboardModule,
64 MatButtonModule, 62 MatButtonModule,
65 CarouselModule.forRoot(), 63 CarouselModule.forRoot(),
66 PaginationModule.forRoot() 64 PaginationModule.forRoot()
67 ], 65 ],
68 providers: [], 66 providers: [],
69 bootstrap: [AppComponent] 67 bootstrap: [AppComponent]
70 }) 68 })
71 export class AppModule { } 69 export class AppModule { }
72 70
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
Diff comments   View file @ 87272ea
1 <div 1 <div
2 *ngIf="!compraConEfectivofinalizada && !compraConQRfinalizada"
2 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"
3 (click)="reiniciarTimer"> 4 (click)="reiniciarTimer">
4 <div class="col-12 p-0 vh-100"> 5 <div class="col-12 p-0 vh-100">
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 </p> 14 </p>
15 </div> 15 </div>
16 </div> 16 </div>
17 17
18 <div class="row m-0"> 18 <div class="row m-0">
19 <div class="col-12"> 19 <div class="col-10 px-1">
20
21 <!-- TEXTO DE IZQUIERDA --> 20 <!-- TEXTO DE IZQUIERDA -->
22 <div class="row mx-2 mt-4 text-white"> 21 <div *ngIf="!verQR" class="row mx-2 mt-4 text-white">
23 <div class="col-sm-auto my-auto"> 22 <div class="col-sm-auto my-auto">
24 <p class="h2">Mi Compra 23 <p class="h2">Mi Compra
25 <i class="fa fa-shopping-cart "></i> 24 <i class="fa fa-shopping-cart "></i>
26 </p> 25 </p>
27 </div> 26 </div>
28 <div class="col-sm-7 my-auto"> 27 <div class="col-sm-9 my-auto">
29 <p class="h4">Por favor, controle y confirme su compra.</p> 28 <p class="h4">Por favor, controle y confirme su compra.</p>
30 </div> 29 </div>
31 </div> 30 </div>
32 31
33 <div class="row"> 32 <div [ngClass]="{'mt-5': verQR}" class="row m-0">
34 <!-- GRILLA DE PRODUCTOS DE MI COMPRA --> 33 <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
35 <div class="col-sm-7"> 34 <div *ngIf="!verQR" class="col-sm-9">
36 <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark"> 35 <div class="row mx-1 pr-1 vh-70 overflow-scroll text-dark">
37 <div class="col-4 p-2" *ngFor="let producto of productos"> 36 <div class="col-4 p-2" *ngFor="let producto of productos">
38 <div class="bg-white rounded-sm shadow border-0"> 37 <div class="bg-white rounded-sm shadow border-0">
39 <img 38 <img
40 src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}" 39 src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}"
41 class="shadow rounded-sm w-100 m-auto"> 40 class="shadow rounded-sm w-100 m-auto">
42 <div class="p-2"> 41 <div class="p-2">
43 <p class="h6 min-h-55 text-left m-0"> 42 <p class="h6 min-h-55 text-left m-0">
44 <small> 43 <small>
45 {{producto.DET_LAR}} 44 {{producto.DET_LAR}}
46 </small> 45 </small>
47 </p> 46 </p>
48 <div *ngIf="producto.tieneSinonimos"> 47 <div *ngIf="producto.tieneSinonimos">
49 <p *ngFor="let p of producto.productos" class="h6 text-left m-0"> 48 <p *ngFor="let p of producto.productos" class="h6 text-left m-0">
50 <small> 49 <small>
51 - {{p.cantidad}} {{p.DET_LAR}} 50 - {{p.cantidad * producto.cantidad}} {{p.DET_LAR}}
52 </small> 51 </small>
53 </p> 52 </p>
54 </div> 53 </div>
55 <div class="row m-0"> 54 <div class="row m-0">
56 <div class="col-6 my-auto pt-2 pr-2 p-0"> 55 <div class="col-6 my-auto pt-2 pr-2 p-0">
57 <p class="text-left m-0 h6"> 56 <p class="text-left m-0 h6">
58 {{producto.cantidad}} x {{producto.PreVen | currency}} 57 {{producto.cantidad}} x {{producto.PreVen | currency}}
59 </p> 58 </p>
60 </div> 59 </div>
61 <div class="col-6 my-auto pt-2 pr-2 p-0"> 60 <div class="col-6 my-auto pt-2 pr-2 p-0">
62 <p class="text-right m-0 h6"> 61 <p class="text-right m-0 h6">
63 {{producto.cantidad * producto.PreVen | currency}} 62 {{producto.cantidad * producto.PreVen | currency}}
64 </p> 63 </p>
65 </div> 64 </div>
66 </div> 65 </div>
67 </div> 66 </div>
68 </div> 67 </div>
69 </div> 68 </div>
70 </div> 69 </div>
71 </div> 70 </div>
72 71
73 <div class="col-sm-5 pl-0"> 72 <!-- CODIGO QR -->
74 <div class="row ml-3"> 73 <div *ngIf="verQR" class="col-sm-9">
75 <!-- TICKET --> 74 <div class="col-6 offset-3 border-0 mb-auto">
76 <div class="col-sm-7 p-0"> 75 <img
77 <div class="card rounded-sm shadow"> 76 src="{{apiImagenes}}/imagenes/qrmp.jpg"
78 <div class="card-body"> 77 class="w-100 mx-auto d-block shadow rounded-sm">
79 <p class="h5 card-title">Su Ticket</p> 78 </div>
80 <div class="row mt-4 m-0"> 79 </div>
81 <div class="col-12 p-0 mb-2"> 80
82 <p class="h6 m-0 card-text text-left"> 81 <!-- TICKET -->
83 <small class="font-weight-bold">DESCRIPCIÓN</small> 82 <div class="col-sm-3 px-1">
84 </p> 83 <div class="card rounded-sm shadow">
84 <div class="card-body">
85 <p class="h5 card-title">Su Ticket</p>
86 <div class="row mt-4 m-0">
87 <div class="col-12 p-0 mb-2">
88 <p class="h6 m-0 card-text text-left">
89 <small class="font-weight-bold">DESCRIPCIÓN</small>
90 </p>
91 <p class="h6 m-0 card-text text-left">
92 <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small>
93 </p>
94 </div>
95 </div>
96 <div class="row vh-50 px-2 overflow-scroll m-0">
97 <div class="col-12 p-0 mb-2" *ngFor="let producto of productos">
98 <p class="h6 m-0 card-text text-left">
99 <small>{{producto.DET_LAR}}</small>
100 </p>
101 <div class="row d-flex justify-content-between m-0">
102 <div class="col p-0">
85 <p class="h6 m-0 card-text text-left"> 103 <p class="h6 m-0 card-text text-left">
86 <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small> 104 <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small>
87 </p> 105 </p>
88 </div> 106 </div>
89 </div> 107 <div class="col p-0">
90 <div class="row vh-50 px-2 overflow-scroll m-0"> 108 <p class="h6 m-0 card-text text-right">
91 <div class="col-12 p-0 mb-2" *ngFor="let producto of productos"> 109 <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small>
92 <p class="h6 m-0 card-text text-left">
93 <small>{{producto.DET_LAR}}</small>
94 </p> 110 </p>
95 <div class="row d-flex justify-content-between m-0">
96 <div class="col p-0">
97 <p class="h6 m-0 card-text text-left">
98 <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small>
99 </p>
100 </div>
101 <div class="col p-0">
102 <p class="h6 m-0 card-text text-right">
103 <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small>
104 </p>
105 </div>
106 </div>
107 </div> 111 </div>
108 </div> 112 </div>
109 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0">
110 Total {{getTotal() | currency}}
111 </p>
112 </div> 113 </div>
113 </div> 114 </div>
115 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0">
116 Total {{getTotal() | currency}}
117 </p>
114 </div> 118 </div>
115 </div> 119 </div>
116 </div> 120 </div>
117 </div> 121 </div>
118 122
119 <!-- OPCIONES ABAJO DERECHA --> 123 <!-- OPCIONES ABAJO DERECHA -->
120 <div class="row m-0 fixed-bottom"> 124 <div class="row m-0 fixed-bottom">
121 <div class="col-sm-2 offset-sm-10 p-0 mt-auto"> 125 <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
122 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0"> 126 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
123 <div class="card-body row m-0"> 127 <div class="card-body row m-0 p-1">
124 <div class="col-12 p-3"> 128 <div class="col-12 p-3">
125 <button 129 <button
126 type="button" 130 type="button"
127 class="btn btn-block btn-light shadow btn-sm shadow" 131 class="btn btn-block btn-light shadow btn-sm shadow"
128 (click)="volverPreviousPage()"> 132 (click)="volverPreviousPage()">
129 <span class="pr-2">Volver</span> 133 <span class="pr-2">Volver</span>
130 <i class="fa fa-undo text-warning"></i> 134 <i class="fa fa-undo text-warning"></i>
131 </button> 135 </button>
132 <button [routerLink]="['/pago']" type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1">
133 <span class="font-weight-bold pr-2">Finalizar y Pagar</span>
134 <i class="fa fa-check text-success"></i>
135 </button>
136 <button 136 <button
137 type="button" 137 type="button"
138 class="btn btn-block btn-light shadow btn-sm shadow" 138 class="btn btn-block btn-light shadow btn-sm shadow"
139 [routerLink]="['/cancelar-compra']"> 139 [routerLink]="['/cancelar-compra']">
140 <span class="pr-2">Cancelar</span> 140 <span class="pr-2">Cancelar</span>
141 <i class="fa fa-times text-danger"></i> 141 <i class="fa fa-times text-danger"></i>
142 </button> 142 </button>
143 </div> 143 </div>
144 </div> 144 </div>
145 </div> 145 </div>
146 </div> 146 </div>
147 </div> 147 </div>
148 </div>
148 149
150 <!-- FORMAS DE PAGO -->
151 <div *ngIf="!verQR" class="col-2 px-1">
152 <p class="h4 text-white text-center mt-4 mx-2 pb-2 border-bottom border-white">
153 Forma de pago
154 </p>
155
156 <!-- EFECTIVO -->
157 <div
158 class="row card-effect mx-1 my-3 rounded-sm shadow-sm bg-white"
159 (click)="pagoEfectivo('efectivo')">
160 <div class="col-7 text-center my-auto py-3 px-2">
161 <span class="h5">Efectivo</span>
162 </div>
163 <div class="col-5 my-auto p-0">
164 <img
165 src="{{apiImagenes}}/imagenes/efectivo.png"
166 class="w-50 float-right mr-3">
167 </div>
168 </div>
169
170 <!-- TARJETA -->
171 <div class="row card-effect mx-1 my-3 rounded-sm shadow-sm bg-white">
172 <div class="col-7 text-center my-auto py-3 px-2">
173 <span class="h5">Tarjeta</span>
174 </div>
175 <div class="col-5 my-auto p-0">
176 <img
177 src="{{apiImagenes}}/imagenes/tarjeta.png"
178 class="w-50 float-right mr-3">
179 </div>
180 </div>
181
182 <!-- QR -->
183 <div
184 class="row card-effect mx-1 my-3 rounded-sm shadow-sm bg-white"
185 (click)="pagar('electronico')">
186 <div class="col-7 text-center my-auto py-1 px-2">
187 <span class="h5">Pago Electrónico</span>
188 </div>
189 <div class="col-5 my-auto p-0">
190 <img
191 src="{{apiImagenes}}/imagenes/qr.png"
192 class="w-50 float-right mr-3">
193 </div>
194 </div>
149 </div> 195 </div>
150 </div> 196 </div>
151 197
152 </div> 198 </div>
199 </div>
153 200
201 <div
202 *ngIf="compraConQRfinalizada"
src/app/components/confirmacion-carrito/confirmacion-carrito.component.ts
Diff comments   View file @ 87272ea
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 apiImagenes: string = appSettings.apiImagenes; 17 private apiImagenes: string = appSettings.apiImagenes;
18 private timerReposo: any; 18 private timerReposo: any;
19 private compraConEfectivofinalizada: boolean = false;
20 private compraConQRfinalizada: boolean = false;
21 private verQR: boolean = false;
19 22
20 constructor( 23 constructor(
21 private location: Location, 24 private location: Location,
22 private productoService: ProductoService, 25 private productoService: ProductoService,
23 private router: Router 26 private router: Router
24 ) { } 27 ) { }
25 28
26 ngOnInit() { 29 ngOnInit() {
27 30
28 this.timerReposo = setTimeout(() => { 31 this.timerReposo = setTimeout(() => {
29 32
30 this.router.navigate(['cancelar-compra']); 33 this.router.navigate(['cancelar-compra']);
31 }, 90000) 34 }, 90000)
32 this.productos = this.productoService.productos; 35 this.productos = this.productoService.productos;
33 } 36 }
34 37
35 ngOnDestroy() { 38 ngOnDestroy() {
36 39
37 clearTimeout(this.timerReposo); 40 clearTimeout(this.timerReposo);
38 } 41 }
39 42
40 volverPreviousPage() { 43 volverPreviousPage() {
41 44
45 if (this.verQR) {
46 this.verQR = !this.verQR;
47 return;
48 }
42 this.location.back(); 49 this.location.back();
43 } 50 }
44 51
45 getTotal() { 52 getTotal() {
46 53
47 var subTotal = 0; 54 var subTotal = 0;
48 this.productos.forEach(producto => { 55 this.productos.forEach(producto => {
49 56
50 subTotal = subTotal + (producto.PreVen * producto.cantidad); 57 subTotal = subTotal + (producto.PreVen * producto.cantidad);
51 }); 58 });
52 return this.total = subTotal; 59 return this.total = subTotal;
53 } 60 }
54 61
55 reiniciarTimer() { 62 reiniciarTimer() {
56 63
57 clearTimeout(this.timerReposo); 64 clearTimeout(this.timerReposo);
58 this.timerReposo = setTimeout(() => { 65 this.timerReposo = setTimeout(() => {
59 66
60 this.router.navigate(['cancelar-compra']); 67 this.router.navigate(['cancelar-compra']);
61 }, 90000) 68 }, 90000)
62 } 69 }
63 70
71 //#region METODOS PARA LA FORMA DE PAGO
72 pagoEfectivo() {
73
74 this.compraConEfectivofinalizada = true;
75 clearTimeout(this.timerReposo);
76 setTimeout(() => {
77
78 this.router.navigate(['mensaje-final']);
79 }, 3000);
80 }
81
82 pagar(medioPago: string) {
83
84 this.verQR = true;
85
86 this.productoService.pagar(medioPago)
87 .subscribe(() => {
88
89 clearTimeout(this.timerReposo);
90 this.compraConQRfinalizada = true;
91 setTimeout(() => {
92
93 this.router.navigate(['mensaje-final']);
94 }, 3000);
95 }, err => {
96 console.log(err);
97 alert('algo salió mal');
98 })
99 }
100 //#endregion
101
64 } 102 }
65 103
src/app/components/pago/pago.component.html
View file @ 87272ea
1 <div File was deleted
2 *ngIf="!compraConEfectivofinalizada && !compraConQRfinalizada"
3 class="row m-0 fade-in bg-primary-gradient disable-user-select"
4 (click)="reiniciarTimer()">
5
6 <div class="col-12 p-0 vh-100">
7
8 <app-header></app-header>
9
10 <!-- NOMBRE DE SECCION -->
11 <div class="row m-0">
12 <div class="col-12 p-0">
13 <p class="h5 py-1 bg-gray text-muted text-center m-0">
14 Pagar
15 </p>
16 </div>
17 </div>
18
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>
22 </div>
23 </div>
24
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
31 class="bg-white rounded-sm shadow border-0"
32 (click)="pagoEfectivo('efectivo')">
33 <img src="{{apiImagenes}}/imagenes/efectivo.png" class="rounded-sm w-75 py-2 mx-auto d-block">
34 <div class="p-2 card-text text-center">
35 <p class="h6 text-center m-0">Efectivo</p>
36 </div>
37 </div>
38 </div>
39 <div class="col-4 p-2">
40 <div class="bg-white rounded-sm shadow border-0">
41 <img src="{{apiImagenes}}/imagenes/tarjeta.png" class="rounded-sm w-75 py-2 mx-auto d-block">
42 <div class="p-2 card-text text-center">
43 <p class="h6 text-center m-0">Tarjeta</p>
44 </div>
45 </div>
46 </div>
47 <div class="col-4 p-2">
48 <div
49 class="bg-white rounded-sm shadow border-0"
50 (click)="pagar('electronico')">
51 <img src="{{apiImagenes}}/imagenes/qr.png" class="rounded-sm w-75 py-2 mx-auto d-block">
52 <div class="p-2 card-text text-center">
53 <p class="h6 text-center m-0">Pago Electrónico</p>
54 </div>
55 </div>
56 </div>
57 </div>
58 </div>
59
60 <div class="col-sm-5 pl-0">
61 <div class="row ml-3">
62 <!-- TICKET -->
63 <div class="col-sm-7 p-0">
64 <div class="card rounded-sm shadow">
65 <div class="card-body">
66 <p class="h5 card-title">Su Ticket</p>
67 <div class="row mt-4 m-0">
68 <div class="col-12 p-0 mb-2">
69 <p class="h6 m-0 card-text text-left">
70 <small class="font-weight-bold">DESCRIPCIÓN</small>
71 </p>
72 <p class="h6 m-0 card-text text-left">
73 <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small>
74 </p>
75 </div>
76 </div>
77 <div class="row px-2 vh-50 overflow-scroll m-0">
78 <div class="col-12 p-0 mb-2" *ngFor="let producto of productos">
79 <p class="h6 m-0 card-text text-left">
80 <small>{{producto.DET_LAR}}</small>
81 </p>
82 <div class="row d-flex justify-content-between m-0">
83 <div class="col p-0">
84 <p class="h6 m-0 card-text text-left">
85 <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small>
86 </p>
87 </div>
88 <div class="col p-0">
89 <p class="h6 m-0 card-text text-right">
90 <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small>
91 </p>
92 </div>
93 </div>
94 </div>
95 </div>
96 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0">
97 Total {{getTotal() | currency}}
98 </p>
99 </div>
100 </div>
101 </div>
102 </div>
103 </div>
104 </div>
105
106 <div *ngIf="verQR" class="row fade-in mt-5">
107 <div class="col-6 offset-3 border-0 mb-auto">
108 <img src="{{apiImagenes}}/imagenes/qrmp.jpg" class="w-50 mx-auto d-block shadow rounded-sm">
109 </div>
110 </div>
111
112 <!-- OPCIONES ABAJO DERECHA -->
113 <div class="row m-0 fixed-bottom" >
114 <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
115 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
116 <div class="card-body row m-0">
117 <div class="col-12 p-3">
118 <button
119 type="button"
120 class="btn btn-block btn-light shadow btn-sm shadow"
121 (click)="volverPreviousPage()">
122 <span class="pr-2">Volver</span>
123 <i class="fa fa-undo text-warning"></i>
124 </button>
125 <button
126 type="button"
127 class="btn btn-block btn-light shadow btn-sm shadow"
128 [routerLink]="['/cancelar-compra']">
129 <span class="pr-2">Cancelar</span>
130 <i class="fa fa-times text-danger"></i>
131 </button>
132 </div>
133 </div>
134 </div>
135 </div>
136 </div>
137
138 </div>
139
140 </div>
141
142 <div
143 *ngIf="compraConQRfinalizada"
144 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
145 <div class="col-12 text-center text-white my-auto">
146 <p class="font-weight-bold display-4">
147 Su pago fue<br>
148 acreditado
149 exitosamente
150 </p>
151 <p class="font-weight-bold display-4">Recuerde retirar su ticket</p>
152 </div>
153 </div>
154
155 <div
156 *ngIf="compraConEfectivofinalizada"
157 class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
158 <div class="col-12 text-center text-white my-auto">
159 <p class="font-weight-bold display-4">
160 Retire su ticket<br>
161 y diríjase a caja para<br>
162 efectuar el pago.
163 </p>
164 </div>
165 </div>
166 1 <div
src/app/components/pago/pago.component.scss
View file @ 87272ea
src/app/components/pago/pago.component.spec.ts
View file @ 87272ea
1 import { async, ComponentFixture, TestBed } from '@angular/core/testing'; File was deleted
2
3 import { PagoComponent } from './pago.component';
4
5 describe('PagoComponent', () => {
6 let component: PagoComponent;
7 let fixture: ComponentFixture<PagoComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ PagoComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(PagoComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
src/app/components/pago/pago.component.ts
View file @ 87272ea
1 import { Component, OnInit, OnDestroy } from '@angular/core'; File was deleted
2 import { appSettings } from 'src/etc/AppSettings';
3 import { Location } from '@angular/common';
4 import { ProductoService } from 'src/app/services/producto.service';
5 import { Router } from '@angular/router';
6 import { Producto } from 'src/app/wrappers/producto';
7
8 @Component({
9 selector: 'app-pago',
10 templateUrl: './pago.component.html',
11 styleUrls: ['./pago.component.scss']
12 })
13 export class PagoComponent implements OnInit, OnDestroy {
14
15 private apiImagenes: string = appSettings.apiImagenes;
16 private verQR: boolean = false;
17 private productos: Producto[] = [];
18 private total: number = 0;
19
20 private compraConQRfinalizada: boolean = false;
21 private compraConEfectivofinalizada: boolean = false;
22 private timerReposo: any;
23
24 constructor(
25 private productoService: ProductoService,
26 private location: Location,
27 private router: Router,
28 ) { }
29
30 ngOnInit() {
31
32 this.timerReposo = setTimeout(() => {
33
34 this.router.navigate(['cancelar-compra']);
35 }, 90000)
36 this.productos = this.productoService.productos;
37 }
38
39 ngOnDestroy() {
40
41 clearTimeout(this.timerReposo);
42 }
43
44 pagoEfectivo() {
45
46 this.compraConEfectivofinalizada = true;
47 clearTimeout(this.timerReposo);
48 setTimeout(() => {
49
50 this.router.navigate(['mensaje-final']);
51 }, 3000);
52 }
53
54 pagar(medioPago: string) {
55
56 this.verQR = true;
57
58 this.productoService.pagar(medioPago)
59 .subscribe(() => {
60
61 clearTimeout(this.timerReposo);
62 this.compraConQRfinalizada = true;
63 setTimeout(() => {
64
65 this.router.navigate(['mensaje-final']);
66 }, 3000);
67 }, err => {
68 console.log(err);
69 alert('algo salió mal');
70 })
71 }
72
73 volverPreviousPage() {
74
75 if (this.verQR) {
76 this.verQR = false;
77 return;
78 }
79 this.location.back();
80 }
81
82 getTotal() {
83
84 var subTotal = 0;
85 this.productos.forEach(producto => {
86
87 subTotal = subTotal + (producto.PreVen * producto.cantidad);
88 });
89 return this.total = subTotal;
90 }
91
92 reiniciarTimer() {
93
94 clearTimeout(this.timerReposo);
95 this.timerReposo = setTimeout(() => {
96
97 this.router.navigate(['cancelar-compra']);
98 }, 90000)
99 }
100
101 }
102 1 import { Component, OnInit, OnDestroy } from '@angular/core';