Martin Macola / autoservicio

Commit 3a86ac77de103172f68c206b821205c90756b43c

Authored by Eric Fernandez 2019-08-22 16:47:28 -0300

Exists in master

Merge branch 'master' into 'master'

Master(mpuebla)

See merge request !55

Showing 6 changed files Show diff stats

src/app/components/confirmacion-carrito/confirmacion-carrito.component.html

Diff comments View file @ 3a86ac7

-<div class="row m-0 fade-in bg-primary-gradient disable-user-select">
+<div
+  class="row m-0 fade-in bg-primary-gradient disable-user-select"
+  (click)="reiniciarTimer">
   <div class="col-12 p-0 vh-100">
     <!-- TOP HEADER -->
     <app-header></app-header>
     <!-- NOMBRE DE SECCION -->
     <div class="row m-0">
       <div class="col-12 p-0">
         <p class="h5 py-1 bg-gray text-muted text-center m-0">
           Pagar
           <i class="fa fa-usd"></i>
         </p>
       </div>
     </div>
     <div class="row m-0">
       <div class="col-12">
         <!-- TEXTO DE IZQUIERDA -->
         <div class="row mx-2 mt-4 text-white">
-          <div class="col-sm-2 my-auto">
+          <div class="col-sm-auto my-auto">
             <p class="h2">Mi Compra
               <i class="fa fa-shopping-cart "></i>
             </p>
           </div>
           <div class="col-sm-4 my-auto">
             <p class="h3">¿Desea finalizar su compra?</p>
             <p class="h4">Por favor, controle y confirme su compra.</p>
           </div>
         </div>
         <div class="row">
           <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
           <div class="col-sm-7">
             <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark">
               <div class="col-4 p-2" *ngFor="let producto of productos">
                 <div class="bg-white rounded-sm shadow border-0">
-                  <img src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}" class="rounded-sm w-100 m-auto">
+                  <img
+                    src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}"
+                    class="shadow rounded-sm w-100 m-auto">
                   <div class="p-2">
                     <p class="h6 text-left m-0">{{producto.DetArt}}</p>
                     <div class="row justify-content-between m-0">
                       <div class="col-12 p-0">
                         <div class="text-left">
                           <p class="m-0 h6"><small>{{producto.DET_LAR}}</small></p>
-                          <p class="m-0 h6"><small>{{producto.CodSec}}-{{producto.CodArt}}</small></p>
                         </div>
                       </div>
                       <div class="col-12 my-auto pt-2 pr-2 p-0">
                         <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
           <div class="col-sm-5 pl-0">
             <div class="row ml-3">
               <!-- TICKET -->
               <div class="col-sm-7 p-0">
                 <div class="card rounded-sm shadow">
                   <div class="card-body">
                     <p class="h5 card-title">Su Ticket</p>
                     <div class="row mt-4 m-0">
                       <div class="col-12 p-0 mb-2">
                         <p class="h6 m-0 card-text text-left">
                           <small class="font-weight-bold">DESCRIPCIÓN</small>
                         </p>
                         <p class="h6 m-0 card-text text-left">
                           <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small>
                         </p>
                       </div>
                     </div>
                     <div class="row vh-50 px-2 overflow-scroll m-0">
                       <div class="col-12 p-0 mb-2" *ngFor="let producto of productos">
                         <p class="h6 m-0 card-text text-left">
                           <small>{{producto.DetArt}}</small>
                         </p>
                         <div class="row d-flex justify-content-between m-0">
                           <div class="col p-0">
                             <p class="h6 m-0 card-text text-left">
                               <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small>
                             </p>
                           </div>
                           <div class="col p-0">
                             <p class="h6 m-0 card-text text-right">
                               <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small>
                             </p>
                           </div>
                         </div>
                       </div>
                     </div>
                     <p class="h4 font-weight-bold card-text text-right mt-3 mb-0">
                       Total {{getTotal() | currency}}
                     </p>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
         <!-- OPCIONES ABAJO DERECHA -->
         <div class="row m-0 fixed-bottom">
           <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
             <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
               <div class="card-body row m-0">
                 <div class="col-12 p-3">
                   <button
                     type="button"
                     class="btn btn-block btn-light shadow btn-sm shadow"
                     (click)="volverPreviousPage()">
                     <span class="pr-2">Volver</span>
                     <i class="fa fa-undo text-warning"></i>
                   </button>
                   <button [routerLink]="['/pago']" type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1">
                     <span class="font-weight-bold pr-2">Finalizar y Pagar</span>
                     <i class="fa fa-check text-success"></i>
                   </button>
                   <button
                     type="button"
                     class="btn btn-block btn-light shadow btn-sm shadow"
                     [routerLink]="['/cancelar-compra']">
                     <span class="pr-2">Cancelar</span>
                     <i class="fa fa-times text-danger"></i>
                   </button>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>

src/app/components/confirmacion-carrito/confirmacion-carrito.component.ts

Diff comments View file @ 3a86ac7

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { appSettings } from 'src/etc/AppSettings';
 import { Location } from '@angular/common';
 import { ProductoService } from 'src/app/services/producto.service';
 import { Producto } from 'src/app/wrappers/producto';
+import { Router } from '@angular/router';
 @Component({
   selector: 'app-confirmacion-carrito',
   templateUrl: './confirmacion-carrito.component.html',
   styleUrls: ['./confirmacion-carrito.component.scss']
 })
-export class ConfirmacionCarritoComponent implements OnInit {
+export class ConfirmacionCarritoComponent implements OnInit, OnDestroy {
-  productos: Producto[] = [];
+  private productos: Producto[] = [];
-  total: number = 0;
+  private total: number = 0;
   private apiUrl: string = appSettings.apiUrl;
+  private timerReposo: any;
   constructor(
     private location: Location,
-    private productoService: ProductoService
+    private productoService: ProductoService,
+    private router: Router
   ) { }
   ngOnInit() {
+    this.timerReposo = setTimeout(() => {
+      this.router.navigate(['cancelar-compra']);
+    }, 90000)
     this.productos = this.productoService.productos;
   }
+  ngOnDestroy() {
+    clearTimeout(this.timerReposo);
+  }
   volverPreviousPage() {
     this.location.back();
   }
   getTotal() {
     var subTotal = 0;
     this.productos.forEach(producto => {
       subTotal = subTotal + (producto.PreVen * producto.cantidad);
     });
     return this.total = subTotal;
   }
+  reiniciarTimer() {
+    clearTimeout(this.timerReposo);
+    this.timerReposo = setTimeout(() => {
+      this.router.navigate(['cancelar-compra']);
+    }, 90000)
+  }
 }

src/app/components/inicio/inicio.component.ts

Diff comments View file @ 3a86ac7

 import { Component, OnInit, ViewChild, HostListener } from '@angular/core';
 import { PopoverDirective } from 'ngx-bootstrap';
 import { appSettings } from 'src/etc/AppSettings';
 import { Router } from '@angular/router';
 import { ProductoService } from 'src/app/services/producto.service';
 import { Producto } from 'src/app/wrappers/producto';
 import { Sinonimo } from 'src/app/wrappers/sinonimo';
 @Component({
   selector: 'app-inicio',
   templateUrl: './inicio.component.html',
   styleUrls: ['./inicio.component.scss']
 })
 export class InicioComponent implements OnInit {
+  private tienePromo = false;
+  private productoEsPromo = false;
+  private busqueda: string = '';
+  private productoAcargar: Producto;
+  private promoAcargar: Producto;
+  private productos: Producto[] = [];
+  private promociones: Producto[] = [];
+  private sinonimos: Sinonimo[] = [];
+  private apiUrl: string = appSettings.apiUrl
+  @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;
   @HostListener('document:keypress', ["$event"]) catchInput(e: KeyboardEvent) {
     if (e.keyCode == 13) {
       this.buscarByCodigoBarras(this.busqueda);
       this.busqueda = '';
     } else {
       this.busqueda += e.key;
     }
   };
-  @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;
-  private tienePromo = false;
-  private productoEsPromo = false;
-  private busqueda: string = '';
-  private productoAcargar: Producto;
-  private promoAcargar: Producto;
-  productos: Producto[] = [];
-  promociones: Producto[] = [];
-  sinonimos: Sinonimo[] = [];
-  apiUrl: string = appSettings.apiUrl
   constructor(
     private router: Router,
     private productoService: ProductoService) { }
   ngOnInit() {
     this.productoAcargar = this.productoService.productoAcargar;
     if (this.productoAcargar) {
       if (this.productoAcargar.PRO) {
         this.promociones.push(this.productoAcargar);
         this.promoSeleccionada(this.productoAcargar);
       }
       else
         this.getPromociones();
     }
     this.getProductos();
   }
   getPromociones() {
     var sector = this.productoAcargar.CodSec;
     var codigo = this.productoAcargar.CodArt;
     this.productoService.getPromociones(sector, codigo)
       .subscribe((res: Producto[]) => {
         if (res.length === 0) {
           //Si no tiene promociones la cargará al carrito despues de un tiempo
           // setTimeout(() => {
           this.productoAcargar.cantidad = 1;
           this.productoService.productos.push(this.productoAcargar);
           this.productoAcargar = this.productoService.productoAcargar = undefined;
           // }, 2000)
         } else {
           this.promociones = res;
           this.popoverDirective.show();
         }
       }, error => { console.error(error); })
   }
   getProductos() {
     this.productoService.getAll()
       .subscribe((productos: Producto[]) => {
         this.productos = productos;
       });
   }
   irBusquedaProductos(value) {
     this.productoService.mostrar = value;
     this.router.navigate(['busqueda-productos']);
   }
   confirmarProducto() {
     var producto = this.promoAcargar ? this.promoAcargar : this.productoAcargar;
     producto.cantidad = 1;
     this.productoService.productos.push(producto);
     this.productoService.productoAcargar = this.promoAcargar = this.productoAcargar = undefined;
     this.promociones = [];
     this.popoverDirective.hide();
   }
   deshacerCarga() {
     if (this.sinonimos.length > 0) {
       this.sinonimos = [];
       this.popoverDirective.hide();
     }
     if (this.promoAcargar) {
       this.promoAcargar = undefined;
       if (this.productoAcargar.PRO) {
         this.productoAcargar = undefined;
         this.promociones = [];
         this.popoverDirective.hide();
       } else {
         this.popoverDirective.show();
       }
     } else {
       this.productoAcargar = undefined;
       this.promociones = [];
       this.popoverDirective.hide();
     }
   }
   promoSeleccionada($event: Producto) {
     if ($event.tieneSinonimos) {
       this.productoService.getProductoById($event.id)
-        .subscribe((res : Producto) => {
+        .subscribe((res: Producto) => {
           $event.imagenes = res.imagenes;
           this.promoAcargar = $event;
           this.getSinonimos(this.promoAcargar.CodSec, this.promoAcargar.CodArt);
         },
           error => { console.log(error); })
     } else if (this.popoverDirective) {
       this.popoverDirective.hide();
     }
   }
   getSinonimos(sector, codigo) {
     this.productoService.getPromocionSinonimos(sector, codigo)
       .subscribe((res: Sinonimo[]) => {
         res.forEach(sinonimo => {
           sinonimo.productos.forEach(productoSinonimo => {
             this.promoAcargar.productos.forEach(productoPromo => {
               if (productoSinonimo.id === productoPromo.id) {
                 sinonimo.cantidad = productoPromo.cantidad;
                 sinonimo.productoPadre = productoPromo.id;
               }
             })
           })
         })
         this.sinonimos = res;
         if (res.length > 0)
           this.popoverDirective.show();
         else
           this.popoverDirective.hide();
       })
   }
   productosPersonalizados($event: Producto[]) {
     var productosPersonalizados = $event;
     this.promoAcargar.productos.forEach(productoPromo => {
       if (!productoPromo.idSinonimo) productosPersonalizados.push(productoPromo);
     })
     this.promoAcargar.productos = productosPersonalizados;
     this.confirmarProducto();
   }
   buscarByCodigoBarras(busqueda) {
     let producto = this.productos.filter(producto => {
       return producto.codigoBarra == busqueda;
     });
     if (producto.length) {

src/app/components/master/master.component.ts

Diff comments View file @ 3a86ac7

1	import { Component, OnInit, OnDestroy } from '@angular/core';	1	import { Component, OnInit, OnDestroy } from '@angular/core';
2	import { Router } from '@angular/router';	2	import { Router } from '@angular/router';
3		3
4	@Component({	4	@Component({
5	selector: 'app-master',	5	selector: 'app-master',
6	templateUrl: './master.component.html',	6	templateUrl: './master.component.html',
7	styleUrls: ['./master.component.scss']	7	styleUrls: ['./master.component.scss']
8	})	8	})
9	export class MasterComponent implements OnInit, OnDestroy {	9	export class MasterComponent implements OnInit, OnDestroy {
10		10
11	private timerReposo: any	11	private timerReposo: any;
12		12
13	constructor(	13	constructor(
14	private router: Router	14	private router: Router
15	) { }	15	) { }
16		16
17	ngOnInit() {	17	ngOnInit() {
18		18
19	this.timerReposo = setTimeout(() => {	19	this.timerReposo = setTimeout(() => {
20		20
21	this.router.navigate(['cancelar-compra']);	21	this.router.navigate(['cancelar-compra']);
22	}, 90000)	22	}, 90000)
23	}	23	}
24		24
25	ngOnDestroy() {	25	ngOnDestroy() {
26		26
27	clearTimeout(this.timerReposo);	27	clearTimeout(this.timerReposo);
28	}	28	}
29		29
30	reiniciarTimer() {	30	reiniciarTimer() {
31		31
32	clearTimeout(this.timerReposo);	32	clearTimeout(this.timerReposo);
33	this.timerReposo = setTimeout(() => {	33	this.timerReposo = setTimeout(() => {
34		34
35	this.router.navigate(['cancelar-compra']);	35	this.router.navigate(['cancelar-compra']);
36	}, 90000)	36	}, 90000)
37
38	}	37	}
39		38
40	}	39	}
41		40

src/app/components/pago/pago.component.html

Diff comments View file @ 3a86ac7

 <div
   *ngIf="!compraConEfectivofinalizada && !compraConQRfinalizada"
-  class="row m-0 fade-in bg-primary-gradient disable-user-select">
+  class="row m-0 fade-in bg-primary-gradient disable-user-select"
+  (click)="reiniciarTimer()">
   <div class="col-12 p-0 vh-100">
     <app-header></app-header>
     <!-- NOMBRE DE SECCION -->
     <div class="row m-0">
       <div class="col-12 p-0">
         <p class="h5 py-1 bg-gray text-muted text-center m-0">
           Pagar
           <i class="fa fa-usd"></i>
         </p>
       </div>
     </div>
     <div *ngIf="!verQR" class="row mt-4 m-3 d-flex align-items-center">
       <div class="col-7 text-center">
         <p class="text-white h2" *ngIf="!verQR">Elija forma de pago</p>
       </div>
     </div>
     <div *ngIf="!verQR" class="row fade-in mt-3">
       <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
       <div class="col-sm-7">
         <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark">
           <div class="col-4 p-2">
             <div
               class="bg-white rounded-sm shadow border-0"
               (click)="pagoEfectivo()">
               <img src="{{apiUrl}}/imagenes/efectivo.png" class="rounded-sm w-75 py-2 mx-auto d-block">
               <div class="p-2 card-text text-center">
                 <p class="h6 text-center m-0">Efectivo</p>
               </div>
             </div>
           </div>
           <div class="col-4 p-2">
             <div class="bg-white rounded-sm shadow border-0">
               <img src="{{apiUrl}}/imagenes/tarjeta.png" class="rounded-sm w-75 py-2 mx-auto d-block">
               <div class="p-2 card-text text-center">
                 <p class="h6 text-center m-0">Tarjeta</p>
               </div>
             </div>
           </div>
           <div class="col-4 p-2">
             <div
               class="bg-white rounded-sm shadow border-0"
               (click)="pagar()">
               <img src="{{apiUrl}}/imagenes/qr.png" class="rounded-sm w-75 py-2 mx-auto d-block">
               <div class="p-2 card-text text-center">
                 <p class="h6 text-center m-0">Pago Electrónico</p>
               </div>
             </div>
           </div>
         </div>
       </div>
       <div class="col-sm-5 pl-0">
         <div class="row ml-3">
           <!-- TICKET -->
           <div class="col-sm-7 p-0">
             <div class="card rounded-sm shadow">
               <div class="card-body">
                 <p class="h5 card-title">Su Ticket</p>
                 <div class="row mt-4 m-0">
                   <div class="col-12 p-0 mb-2">
                     <p class="h6 m-0 card-text text-left">
                       <small class="font-weight-bold">DESCRIPCIÓN</small>
                     </p>
                     <p class="h6 m-0 card-text text-left">
                       <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small>
                     </p>
                   </div>
                 </div>
                 <div class="row px-2 vh-50 overflow-scroll m-0">
                   <div class="col-12 p-0 mb-2" *ngFor="let producto of productos">
                     <p class="h6 m-0 card-text text-left">
                       <small>{{producto.DetArt}}</small>
                     </p>
                     <div class="row d-flex justify-content-between m-0">
                       <div class="col p-0">
                         <p class="h6 m-0 card-text text-left">
                           <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small>
                         </p>
                       </div>
                       <div class="col p-0">
                         <p class="h6 m-0 card-text text-right">
                           <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small>
                         </p>
                       </div>
                     </div>
                   </div>
                 </div>
                 <p class="h4 font-weight-bold card-text text-right mt-3 mb-0">
                   Total {{getTotal() | currency}}
                 </p>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
     <div *ngIf="verQR" class="row fade-in mt-5">
       <div class="col-6 offset-3 border-0 mb-auto">
         <img src="{{apiUrl}}/imagenes/qrmp.jpg" class="w-50 mx-auto d-block shadow rounded-sm">
       </div>
     </div>
     <!-- OPCIONES ABAJO DERECHA -->
     <div class="row m-0 fixed-bottom" >
       <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
         <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
           <div class="card-body row m-0">
             <div class="col-12 p-3">
               <button
                 type="button"
                 class="btn btn-block btn-light shadow btn-sm shadow"
                 (click)="volverPreviousPage()">
                 <span class="pr-2">Volver</span>
                 <i class="fa fa-undo text-warning"></i>
               </button>
               <button
                 type="button"
                 class="btn btn-block btn-light shadow btn-sm shadow"
                 [routerLink]="['/cancelar-compra']">
                 <span class="pr-2">Cancelar</span>
                 <i class="fa fa-times text-danger"></i>
               </button>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
 <div
   *ngIf="compraConQRfinalizada"
   class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
   <div class="col-12 text-center text-white my-auto">
     <p class="font-weight-bold display-4">
       Su pago fue<br>
       acreditado
       exitosamente
     </p>
     <p class="font-weight-bold display-4">Recuerde retirar su ticket</p>
   </div>
 </div>
 <div
   *ngIf="compraConEfectivofinalizada"
   class="row m-0 fade-in bg-primary-gradient disable-user-select vh-100">
   <div class="col-12 text-center text-white my-auto">
     <p class="font-weight-bold display-4">
         Retire su ticket<br>
         y diríjase a caja para<br>
         efectuar el pago.
     </p>
   </div>
 </div>

src/app/components/pago/pago.component.ts

Diff comments View file @ 3a86ac7

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { appSettings } from 'src/etc/AppSettings';
 import { Location } from '@angular/common';
 import { ProductoService } from 'src/app/services/producto.service';
-import { RouterLink, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import { Producto } from 'src/app/wrappers/producto';
 @Component({
   selector: 'app-pago',
   templateUrl: './pago.component.html',
   styleUrls: ['./pago.component.scss']
 })
-export class PagoComponent implements OnInit {
+export class PagoComponent implements OnInit, OnDestroy {
   private apiUrl: string = appSettings.apiUrl;
   private verQR: boolean = false;
   private productos: Producto[] = [];
   private total: number = 0;
   private compraConQRfinalizada: boolean = false;
   private compraConEfectivofinalizada: boolean = false;
+  private timerReposo: any;
   constructor(
     private productoService: ProductoService,
     private location: Location,
     private router: Router,
   ) { }
   ngOnInit() {
+    this.timerReposo = setTimeout(() => {
+      this.router.navigate(['cancelar-compra']);
+    }, 90000)
     this.productos = this.productoService.productos;
   }
+  ngOnDestroy() {
+    clearTimeout(this.timerReposo);
+  }
   pagoEfectivo() {
     this.compraConEfectivofinalizada = true;
+    clearTimeout(this.timerReposo);
     setTimeout(() => {
       this.router.navigate(['mensaje-final']);
     }, 3000);
   }
   pagar() {
     this.verQR = true;
     this.productoService.pagar()
       .subscribe(() => {
-        // alert('Compra finalizada');
+        clearTimeout(this.timerReposo);
         this.compraConQRfinalizada = true;
         setTimeout(() => {
           this.router.navigate(['mensaje-final']);
         }, 3000);
       }, err => {
         console.log(err);
         alert('algo salió mal');
       })
   }
   volverPreviousPage() {
     if (this.verQR) {
       this.verQR = false;
       return;
     }
     this.location.back();
   }
   getTotal() {
     var subTotal = 0;
     this.productos.forEach(producto => {
       subTotal = subTotal + (producto.PreVen * producto.cantidad);
     });
     return this.total = subTotal;
   }
+  reiniciarTimer() {
+    clearTimeout(this.timerReposo);
+    this.timerReposo = setTimeout(() => {
+      this.router.navigate(['cancelar-compra']);
+    }, 90000)
+  }
 }