Martin Macola / autoservicio

Commit 5b402809cd72d27c81fe2474065341a9c20a8102

Authored by Eric Fernandez 2019-08-22 15:57:25 -0300

Exists in master

Merge branch 'master' into 'master'

Master(mpuebla)

See merge request !53

Showing 9 changed files Show diff stats

src/app/components/busqueda-productos/busqueda-productos.component.html

Diff comments View file @ 5b40280

 <div class="row m-0 fade-in">
   <div class="col-12 p-0">
     <!-- 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">
           Búsqueda
           <i class="fa fa-search"></i>
         </p>
       </div>
     </div>
     <div class="row m-3 disable-user-select">
       <!-- FILTROS -->
       <div *ngIf="verCategorias" class="col-sm-2 p-1">
         <div class="text-center">
           <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p>
         </div>
         <ul class="list-group">
           <li
+            [ngClass]="{active: categoriaActive == 0}"
+            (click)="categoriaActive = 0; filterItems()"
+            class="list-group-item list-group-item-action text-center my-1 p-2 h6">
+            Todos
+          </li>
+          <li
             *ngFor="let categoria of categorias"
             [ngClass]="{active: categoriaActive == categoria.id}"
             (click)="categoriaActive = categoria.id; filterItems()"
             class="list-group-item list-group-item-action text-center my-1 p-2 h6">
             {{categoria.detalle}}
           </li>
         </ul>
       </div>
       <!-- SEARCH INPUT -->
       <div *ngIf="productos.length > 0" class="fade-in col">
         <div class="row search">
           <div class="col-sm-10">
             <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
             <input
               [matKeyboard]="'spanish'"
               type="text"
               class="form-control form-control-lg shadow-sm rounded-pill px-5"
               placeholder="Búsqueda productos"
               [(ngModel)]="searchTerm"
               (ngModelChange)="filterItems()">
           </div>
           <!-- BOTON VOLVER -->
           <div class="col-sm-2">
             <button
               type="button"
               class="btn btn-light btn-lg shadow-sm"
               [routerLink]="['/inicio']">
               <span class="font-weight-normal h6 pr-2">Volver</span>
               <i class="fa fa-undo text-warning" aria-hidden="true"></i>
             </button>
           </div>
-          <div class="col-sm-12 my-2">
+          <div class="col-sm-12 my-2 h5">
-            <span class="badge badge-light px-2">Más vendidos</span>
+            <span class="badge badge-light px-2 text-muted shadow-sm">Más vendidos</span>
           </div>
         </div>
         <!-- LISTA DE PRODUCTOS -->
         <div class="row align-items-start vh-70 overflow-scroll disable-user-select">
           <div
             class="col-4 p-2"
             *ngFor="let producto of auxProductos">
             <div
               class="card-effect bg-white rounded-sm shadow border-0"
               (click)="elegirProducto(producto)">
               <img src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}" class="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>
                     </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>
       <!-- SPINNER -->
       <div
         *ngIf="productos.length === 0 && showSpinner"
         class="col-sm-10 p-0 align-self-center text-center">
         <div class="spinner-border spinner-lg text-secondary" role="status"></div>
         <span class="text-secondary m-2 h5">Cargando información.</span>
       </div>
     </div>
   </div>
 </div>

src/app/components/busqueda-productos/busqueda-productos.component.ts

Diff comments View file @ 5b40280

 import { Component, OnInit, EventEmitter } from '@angular/core';
 import { ProductoService } from 'src/app/services/producto.service';
 import { Producto } from 'src/app/wrappers/producto';
 import { Categoria } from 'src/app/wrappers/categoria';
 import { appSettings } from 'src/etc/AppSettings';
 import { Router } from '@angular/router';
 @Component({
   selector: 'app-busqueda-productos',
   templateUrl: './busqueda-productos.component.html',
   styleUrls: ['./busqueda-productos.component.scss']
 })
 export class BusquedaProductosComponent implements OnInit {
   private productos: Producto[] = [];
   private auxProductos: Producto[] = [];
   private searchTerm: string = '';
   private categoriaActive: number = null;
   private showSpinner: boolean = true;
   private verCategorias: boolean = true;
   private apiUrl: string = appSettings.apiUrl;
   private categorias: Categoria[] = [];
   private blurFocus = new EventEmitter();
   constructor(
     private productoService: ProductoService,
     private router: Router) { }
   ngOnInit() {
     this.verCategorias = this.productoService.verCategoriasProductos;
     this.productoService.getCategorias()
       .subscribe((categorias: Categoria[]) => {
         this.categorias = categorias;
-        this.categoriaActive = this.verCategorias ? 1 : categorias[0].id;
+        this.categoriaActive = this.verCategorias ? 0 : categorias[0].id;
       });
     this.productoService.productoAcargar = undefined;
     this.productoService.getAll()
       .subscribe((data: Producto[]) => {
         this.productos = data;
         this.filterItems();
       }, (error) => {
         this.showSpinner = false;
         console.error(error);
       });
   }
   filterItems() {
     this.auxProductos = this.productos.filter(x => {
-      return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()) &&
+      if (this.categoriaActive === 0) {
-        x.categoria_selfservice == this.categoriaActive;
+        return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase())
+      }
+      else {
+        return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()) &&
+          x.categoria_selfservice === this.categoriaActive;
+      }
     });
   }
   agregarAlCarrito(producto: Producto) {
     producto.cantidad = 1;
     this.productoService.productos.push(producto);
   }
   lostBlur() {
     this.blurFocus.emit();
   }
   private elegirProducto(producto: Producto) {
     if (producto.PRO) {
       let imagenes = producto.imagenes;
       this.productoService.getPromocionByCodigos(producto.CodSec, producto.CodArt)
         .subscribe(res => {
           this.productoService.productoAcargar = res[0];
           this.productoService.productoAcargar.imagenes = imagenes;
           this.router.navigate(['inicio']);
         },
           error => { console.error(error); }
         );
-    }else {
+    } else {
       this.productoService.productoAcargar = producto;
       this.router.navigate(['inicio']);
     }
   }
 }

src/app/components/home/home.component.html

Diff comments View file @ 5b40280

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="{{apiUrl}}/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-content-between flex-wrap 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="{{apiUrl}}/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 h-50 w-100">	19	<div class="row my-auto h-50 w-100">
20	<div class="col-4 offset-2 my-auto">	20	<div class="col-3 col-lg-4 offset-lg-1 h-100 my-auto">
21		21
22	<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">	22	<div id="carouselExampleSlidesOnly" class="carousel slide h-100" data-ride="carousel">
23	<div class="carousel-inner">	23	<div class="carousel-inner h-100">
24	<div class="carousel-item active">	24	<div class="carousel-item active h-100">
25	<img	25	<img
26	src="{{apiUrl}}/imagenes/coca1.jpg"	26	src="{{apiUrl}}/imagenes/coca1.jpg"
27	class="d-block rounded-sm shadow w-75 mx-auto">	27	class="d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto">
28	</div>	28	</div>
29	<div class="carousel-item">	29	<div class="carousel-item h-100">
30	<img	30	<img
31	src="{{apiUrl}}/imagenes/coca2.jpg"	31	src="{{apiUrl}}/imagenes/coca2.jpg"
32	class="d-block rounded-sm shadow w-75 mx-auto">	32	class="d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto">
33	</div>	33	</div>
34	<div class="carousel-item">	34	<div class="carousel-item h-100">
35	<img	35	<img
36	src="{{apiUrl}}/imagenes/coca3.jpg"	36	src="{{apiUrl}}/imagenes/coca3.jpg"
37	class="d-block rounded-sm shadow w-75 mx-auto">	37	class="d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto">
38	</div>	38	</div>
39	</div>	39	</div>
40	</div>	40	</div>
41		41
42	</div>	42	</div>
43	<div class="col-6 text-center text-white my-auto">	43	<div class="col-9 col-lg-7 text-center text-white my-auto">
44	<p class="display-2 font-weight-bold mb-5">¡BIENVENIDO!</p>	44	<p class="display-2 font-weight-bold mb-5">¡BIENVENIDO!</p>
45	<p class="display-3 m-0 font-weight-bold">Toque la pantalla<br>para comenzar</p>	45	<p class="display-3 m-0 font-weight-bold">Toque la pantalla<br>para comenzar</p>
46	</div>	46	</div>
47	</div>	47	</div>
48		48
49	<!-- FOOTER -->	49	<!-- FOOTER -->
50	<div class="row m-0 w-100 bg-gray">	50	<div class="row m-0 w-100 bg-gray">
51	<div class="col-6 bg-white offset-6 p-3 rounded-top-left">	51	<div class="col-6 bg-white offset-6 p-3 rounded-top-left">
52	<img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logodebo.png">	52	<img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logodebo.png">
53	</div>	53	</div>
54	</div>	54	</div>
55		55
56	</div>	56	</div>
57	</div>	57	</div>
58	</div>	58	</div>
59	</div>	59	</div>
60		60

src/app/components/inicio/inicio.component.html

Diff comments View file @ 5b40280

 <div class="row m-0 fade-in">
   <div class="col-12 p-0">
     <!-- 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">Inicio</p>
       </div>
     </div>
     <div class="row m-3 d-flex align-items-start disable-user-select">
       <div class="col-md-5 d-flex align-items-end flex-column">
         <!-- PROMOCIONES -->
         <div
           (click)="irBusquedaProductos(false)"
           class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
           <div class="card-body text-left px-4 py-3">
             <div class="row">
               <div class="col-auto">
                 <p class="h3 card-title">Promociones</p>
               </div>
               <div class="col-auto p-0">
                 <img src="{{apiUrl}}/imagenes/primario.promociones.png" class="icon-dim m-0">
               </div>
             </div>
             <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
           </div>
           <div id="carouselIndicators" class="carousel slide" data-ride="carousel">
             <div class="carousel-inner">
               <div class="carousel-item active">
                 <img src="{{apiUrl}}/imagenes/beldent.jpg" class="d-block w-75 m-auto rounded">
               </div>
               <div class="carousel-item">
                 <img src="{{apiUrl}}/imagenes/cafe con leche y medialunas.jpg" class="d-block w-75 m-auto rounded">
               </div>
               <div class="carousel-item">
                 <img src="{{apiUrl}}/imagenes/Surtido bagley.jpg" class="d-block w-75 m-auto rounded">
               </div>
               <div class="carousel-item">
                 <img src="{{apiUrl}}/imagenes/yogurisimo.jpg" class="d-block w-75 m-auto rounded">
               </div>
             </div>
           </div>
         </div>
         <!-- ORDENAR -->
         <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
           <div class="card-body text-left px-4 py-3">
             <div class="row">
               <div class="col-auto">
                 <p class="h3 card-title">Ordenar Pedido</p>
               </div>
               <div class="col-auto p-0">
                 <img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim">
               </div>
             </div>
             <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
           </div>
           <img
             class="card-img-bottom d-block w-100 mx-auto rounded"
             src="{{apiUrl}}/imagenes/cafe.jpg">
         </div>
       </div>
       <div class="col-md-7 d-flex align-items-end flex-column mt-4 mt-md-0">
         <!-- CARGAR PRODUCTOS -->
         <ng-template #popTemplate>
           <app-popover-promos
             *ngIf="promociones.length > 0 && sinonimos.length === 0"
             [popover]="popoverDirective"
             [popoverContent]="promociones"
             (promoSeleccionada)="promoSeleccionada($event)"
             class="text-white rounded-sm border-0">
           </app-popover-promos>
           <app-popover-sinonimos
             *ngIf="sinonimos.length > 0"
             [popover]="popoverDirective"
             [popoverContent]="sinonimos"
             (productosPersonalizados)="productosPersonalizados($event)"
             class="text-white rounded-sm border-0">
           </app-popover-sinonimos>
         </ng-template>
         <div
           placement="left"
           triggers=""
           [popover]="popTemplate"
           class="w-100"
           #pop="bs-popover">
           <div class="card bg-white border-0 shadow rounded mb-auto">
             <div class="card-body text-left px-4 py-3">
               <div class="row">
                 <div class="col-auto">
                   <p class="h3 card-title">Cargar Productos</p>
                 </div>
                 <div class="col-auto p-0">
                   <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2">
                 </div>
               </div>
               <p class="h5 card-text text-muted font-weight-light">
                 Coloque un producto frente<br>
                 al lector de códigos o selecciónelo en pantalla
               </p>
             </div>
             <div class="row m-4">
               <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm">
                 <!-- IMAGEN DE ESCANER -->
                 <img
                   *ngIf="!productoAcargar"
                   class="card-img-top d-block w-100 mx-auto rounded-sm"
                   src="{{apiUrl}}/imagenes/escanner.jpg">
                 <!-- PRODUCTO A CARGAR -->
                 <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar">
                   <img
                     class="card-img-top d-block w-75 mx-auto rounded-sm"
                     src="{{apiUrl}}/imagenes/{{productoAcargar.imagenes[0].imagen}}">
                   <div class="row justify-content-between m-3">
                     <div class="col-12 text-left px-1">
                       <p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p>
                     </div>
                     <div class="col-12 text-right mt-2">
                       <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p>
                     </div>
                   </div>
                 </div>
                 <!-- PROMO A CARGAR -->
                 <div class="fade-in m-0" *ngIf="promoAcargar">
                   <img
                     class="card-img-top d-block w-100 mx-auto rounded-sm"
                     src="{{apiUrl}}/imagenes/{{promoAcargar.imagenes[0].imagen}}">
                   <div class="row justify-content-between m-3">
                     <div class="col-12 text-left px-1">
                       <p class="h6 font-weight-bold mb-0">{{promoAcargar.DetArt}}</p>
                     </div>
                     <div class="col-12 text-right mt-2 align-self-end">
                       <p class="h5 font-weight-bold mb-0">{{promoAcargar.PreVen | currency}}</p>
                     </div>
                   </div>
                 </div>
               </div>
               <!-- BOTONES DE CARGAR PRODUCTOS-->
               <div
                 class="col-5 pr-0"
                 *ngIf="promociones.length > 0">
                   <button
-                    *ngIf="sinonimos.length > 0"
-                    type="button"
-                    class="btn btn-light btn-block shadow-sm"
-                    (click)="pop.show()">
-                    <span class="pr-2">Personalizar</span>
-                    <i class="fa fa-hand-o-up text-purple" aria-hidden="true"></i>
-                  </button>
-                  <button
                     *ngIf="!promoAcargar || sinonimos.length == 0"
                     type="button"
                     class="btn btn-primary btn-block shadow-sm"
                     (click)="pop.show()">
                     <span class="pr-2">Mostrar promociones</span>
                     <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i>
                   </button>
                   <button
                     type="button"
                     class="btn btn-light btn-block shadow-sm my-3"
                     (click)="confirmarProducto()">
                     <span class="pr-2 font-weight-bold">Confirmar</span>
                     <i class="fa fa-check text-success" aria-hidden="true"></i>
                   </button>
                   <button
                     type="button"
                     class="btn btn-light btn-block shadow-sm"
                     (click)="deshacerCarga()">
                     <span class="pr-2">Deshacer</span>
                     <i class="fa fa-undo text-warning" aria-hidden="true"></i>
                   </button>
               </div>
             </div>
           </div>
         </div>
         <!-- BUSCAR PRODUCTOS -->
         <div (click)="irBusquedaProductos(true)"
           class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
           <div class="card-body text-left px-4 py-3">
             <div class="row">
               <div class="col-auto">
                 <p class="h3 card-title">Buscar Productos</p>
                 <p class="h5 card-text text-muted font-weight-light">
                   Busque aquí los productos<br>
                   que no tienen código </p>
               </div>
               <div class="col-auto p-0">
                 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2">
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>

src/app/components/master/master.component.html

Diff comments View file @ 5b40280

-<div class="row m-0 fade-in">
+<div
+  class="row m-0 fade-in"
+  (click)="reiniciarTimer">
   <div class="col-10 p-0 vh-100">
     <!-- TOP HEADER -->
     <app-header></app-header>
     <router-outlet></router-outlet>
   </div>
   <!-- SIDEBAR -->
   <app-sidebar class="sidebar position-fixed float-right col-2 col-md-2 vh-100 bg-primary-gradient p-2">
   </app-sidebar>
 </div>

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

Diff comments View file @ 5b40280

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

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

Diff comments View file @ 5b40280

 <div
   *ngIf="!compraConEfectivofinalizada && !compraConQRfinalizada"
   class="row m-0 fade-in bg-primary-gradient disable-user-select">
   <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">
+            <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 @ 5b40280

 import { Component, OnInit } 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 { Producto } from 'src/app/wrappers/producto';
 @Component({
   selector: 'app-pago',
   templateUrl: './pago.component.html',
   styleUrls: ['./pago.component.scss']
 })
 export class PagoComponent implements OnInit {
   private apiUrl: string = appSettings.apiUrl;
   private verQR: boolean = false;
   private productos: Producto[] = [];
   private total: number = 0;
   private compraConQRfinalizada: boolean = false;
   private compraConEfectivofinalizada: boolean = false;
   constructor(
     private productoService: ProductoService,
     private location: Location,
     private router: Router,
   ) { }
   ngOnInit() {
     this.productos = this.productoService.productos;
   }
+  pagoEfectivo() {
+    this.compraConEfectivofinalizada = true;
+    setTimeout(() => {
+      this.router.navigate(['mensaje-final']);
+    }, 3000);
+  }
   pagar() {
     this.verQR = true;
     this.productoService.pagar()
       .subscribe(() => {
         // alert('Compra finalizada');
         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;
   }
 }

src/index.html

Diff comments View file @ 5b40280

1	<!doctype html>	1	<!doctype html>
2	<html lang="en">	2	<html lang="en">
		3
3	<head>	4	<head>
4	<meta charset="utf-8">	5	<meta charset="utf-8">
5	<title>Autoservicio</title>	6	<title>Autoservicio</title>
6	<base href="/">	7	<base href="/">
7		8
8	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">	9	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
9	<meta name="viewport" content="width=device-width, initial-scale=1">	10	<meta name="viewport" content="width=device-width, initial-scale=1">
10	<link rel="icon" type="image/x-icon" href="favicon.ico">	11	<link rel="icon" type="image/x-icon" href="favicon.ico">
11	</head>	12	</head>
12	<body>	13
		14	<body oncontextmenu="return false">
13	<app-root></app-root>	15	<app-root></app-root>
14	</body>	16	</body>
		17
15	</html>	18	</html>
16		19