Martin Macola / autoservicio

Browse Code »

Commit c2175985791cc73f56220a1d560a639846260eb5

Authored by Eric Fernandez 2019-09-09 16:13:53 -0300

2 parents 33df55f1e3 9b87bac04b

Exists in master

Merge branch 'master' of http://git.focasoftware.com/angular/autoservicio

Showing 5 changed files Show diff stats

src/app/components/comanda/comanda.component.html

Diff comments View file @ c217598

 <div class="container-fluid fade-in p-0">
+  <div class="row m-2">
+    <div class="col-12">
+      <p class="m-0 h2 text-center">Pedidos a elaborar</p>
+    </div>
+  </div>
   <div class="card-columns m-1 fade-in disable-user-select">
     <div
       *ngFor="let comanda of comandas"
       class="card fade-in rounded-xs shadow-sm"
       [ngClass]="{
         'bg-light': comanda.estado === 1,
         'bg-danger': comanda.estado === 2,
         'bg-success swing-out-top-bck': comanda.estado === 3
       }">
       <div class="card-body p-2">
         <p class="h5 card-title text-center mb-1">{{comanda.id.toString().slice(comanda.id.toString().length - 2)}}.</p>
         <!-- TODO: Implementar moment -->
         <p class="h5 card-title text-center mb-1">{{comanda.fechafinelaboracion | date: 'dd-MM-yyyy HH:mm' : '+0000'}}</p>
         <p
           *ngFor="let detalle of comanda.detalles"
           [ngClass]="
           {
             'border-secondary': comanda.estado === 1,
             'border-light': comanda.estado != 1
           }"
           class="card-text border-top pt-2 mb-2">
           <small>
             {{detalle.articulo.DET_LAR}}
           </small>
         </p>
         <button
           *ngIf="comanda.estado === 1"
           class="btn btn-block btn-danger shadow-sm"
           (click)="updateComanda(comanda, 2, 'En elaboracion')">
           Elaborar
         </button>
         <button
           *ngIf="comanda.estado === 2"
           class="btn btn-block btn-success shadow-sm"
           (click)="updateComanda(comanda, 3, 'Terminado')">
           Terminado
         </button>
         <button
           *ngIf="comanda.estado === 2"
           class="btn btn-block btn-light btn-sm shadow-sm p-0"
           (click)="updateComanda(comanda, 1, 'Pagado')">
           <span class="pr-1 h6"><small>En espera</small></span>
           <i class="fa fa-undo text-warning" aria-hidden="true"></i>
         </button>
       </div>
     </div>
   </div>
 </div>

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

Diff comments View file @ c217598

 <div
   *ngIf="!compraConEfectivofinalizada && !compraConQRfinalizada"
   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">
           &nbsp;
         </p>
       </div>
     </div>
     <div class="row m-0">
       <div class="col-10 px-1">
         <!-- TEXTO DE IZQUIERDA -->
         <div *ngIf="!verQR" class="row mx-2 mt-4 text-white">
           <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-9 my-auto">
             <p class="h4">Por favor, controle y confirme su compra.</p>
           </div>
         </div>
         <div [ngClass]="{'mt-5': verQR}" class="row m-0">
           <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
           <div *ngIf="!verQR" class="col-sm-9 pr-1">
             <div class="row mx-1 pr-1 vh-70 overflow-scroll text-dark">
               <div class="mh-100 col-4 p-2" *ngFor="let producto of productos">
                 <div class="row m-0 h-100 bg-white rounded-sm shadow border-0">
                   <div class="d-flex align-items-end flex-column">
                     <div class="w-100">
                       <img
                         src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}"
                         class="shadow rounded-sm w-100 m-auto">
                     </div>
                     <div class="w-100 pt-2 px-2">
                       <p class="h6 text-left">
                         <small class="font-weight-bold">
                           {{producto.DET_LAR}}
                         </small>
                       </p>
                       <div *ngIf="producto.tieneSinonimos">
                         <p *ngFor="let p of producto.productos" class="h6 text-left m-0">
                           <small>
                             - {{p.cantidad * producto.cantidad}} {{p.DET_LAR}}
                           </small>
                         </p>
                       </div>
                     </div>
                     <div class="w-100 d-flex justify-content-between mt-auto mb-1 px-2">
                       <span class="text-left m-0 px-1 h6">
                         {{producto.cantidad}} x {{producto.PreVen | currency}}
                       </span>
                       <span class="text-right m-0 px-1 h6">
                         {{producto.cantidad * producto.PreVen | currency}}
                       </span>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
           <!-- CODIGO QR -->
           <div *ngIf="verQR" class="col-sm-9">
             <div class="col-6 offset-3 border-0 mb-auto">
               <img
                 src="{{apiImagenes}}/imagenes/qrmp.jpg"
                 class="w-100 mx-auto d-block shadow rounded-sm">
             </div>
           </div>
           <!-- TICKET -->
           <div class="col-sm-3 px-1">
             <div class="card 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.DET_LAR}}</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>
         <!-- 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 p-1">
                 <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>
       <!-- FORMAS DE PAGO -->
       <div *ngIf="!verQR" class="col-2 px-1">
         <p class="h4 text-white text-center mt-4 mx-2 pb-2 border-bottom border-white">
           Forma de pago
         </p>
         <!-- EFECTIVO -->
         <div
           class="row card-effect mx-1 my-3 rounded-sm shadow-sm bg-white"
           (click)="pagar('efectivo')">
           <div class="col-7 text-center my-auto py-3 px-2">
             <span class="h5">Efectivo</span>
           </div>
           <div class="col-5 my-auto p-0">
             <img
               src="{{apiImagenes}}/imagenes/efectivo.png"
               class="w-100 float-right">
           </div>
         </div>
         <!-- TARJETA -->
         <div class="row card-effect mx-1 my-3 rounded-sm shadow-sm bg-white">
           <div class="col-7 text-center my-auto py-3 px-2">
             <span class="h5">Tarjeta</span>
           </div>
           <div class="col-5 my-auto p-0">
             <img
             src="{{apiImagenes}}/imagenes/tarjeta.png"
             class="w-100 float-right">
           </div>
         </div>
         <!-- QR -->
         <div
           class="row card-effect mx-1 my-3 rounded-sm shadow-sm bg-white"
           (click)="pagar('electronico')">
           <div class="col-7 text-center my-auto py-1 px-2">
             <span class="h5">Pago Electrónico</span>
           </div>
           <div class="col-5 my-auto p-0">
             <img
             src="{{apiImagenes}}/imagenes/qr.png"
             class="w-100 float-right">
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
 <div
   *ngIf="compraConQRfinalizada"
+  [routerLink]="['/mensaje-final']"
   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 class="row z-index-0 fixed-top m-0 w-100">
     <div class="col-12 p-3">
       <img class="w-15 float-right" src="../../../assets/img/debo-gray.png">
     </div>
   </div>
 </div>
 <div
   *ngIf="compraConEfectivofinalizada"
+  [routerLink]="['/mensaje-final']"
   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 class="row z-index-0 fixed-top m-0 w-100">
     <div class="col-12 p-3">
       <img class="w-15 float-right" src="../../../assets/img/debo-gray.png">
     </div>
   </div>
 </div>

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

Diff comments View file @ c217598

 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, OnDestroy {
   private productos: Producto[] = [];
   private total: number = 0;
   private apiImagenes: string = appSettings.apiImagenes;
   private timerReposo: any;
   private compraConEfectivofinalizada: boolean = false;
   private compraConQRfinalizada: boolean = false;
   private verQR: boolean = false;
   constructor(
     private location: Location,
     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() {
     if (this.verQR) {
       this.verQR = !this.verQR;
       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)
   }
   //#region METODOS PARA LA FORMA DE PAGO
-  pagoEfectivo() {
-    this.compraConEfectivofinalizada = true;
-    clearTimeout(this.timerReposo);
-    setTimeout(() => {
-      this.router.navigate(['mensaje-final']);
-    }, 3000);
-  }
   pagar(medioPago: string) {
     if (medioPago == 'electronico') {
       this.verQR = true;
     }
     this.productoService.pagar(medioPago)
       .subscribe(() => {
         clearTimeout(this.timerReposo);
         if (medioPago == 'efectivo') {
           this.compraConEfectivofinalizada = true;
         } else if (medioPago == 'electronico') {
           this.compraConQRfinalizada = true;
         }
         setTimeout(() => {
           this.router.navigate(['mensaje-final']);
-        }, 3000);
+        }, 15000);
       }, err => {
         console.log(err);
         alert('algo salió mal');
       })
   }
   //#endregion
 }

src/app/components/popover-promos/popover-promos.component.html

Diff comments View file @ c217598

1	<div class="card-body fade-left">	1	<div class="card-body fade-left">
2	<div class="row">	2	<div class="row">
3	<div class="col text-left">	3	<div class="col text-left">
4	<p class="h5 card-title">	4	<p class="h5 card-title">
5	Este producto forma parte<br>	5	Sugerencias<br>
6	de Combos y Promociones	6	COMBOS Y PROMOCIONES
7	</p>	7	</p>
8	</div>	8	</div>
9	</div>	9	</div>
10		10
11	<div class="overflow-scroll popover-size pr-2">	11	<div class="overflow-scroll popover-size pr-2">
12	<div	12	<div
13	class="row my-2"	13	class="row my-2"
14	*ngFor="let promo of popoverContent">	14	*ngFor="let promo of popoverContent">
15	<div class="col text-dark">	15	<div class="col text-dark">
16	<div	16	<div
17	class="bg-white card-effect rounded-sm p-2 px-3"	17	class="bg-white card-effect rounded-sm p-2 px-3"
18	(click)="seleccionarPromo(promo)">	18	(click)="seleccionarPromo(promo)">
19	<div class="row justify-content-between">	19	<div class="row justify-content-between">
20	<div class="col-12 text-left">	20	<div class="col-12 text-left">
21	<p class="h5 mb-0">	21	<p class="h5 mb-0">
22	<small class="font-weight-bold">{{promo.DetArt}}</small>	22	<small class="font-weight-bold">{{promo.DetArt}}</small>
23	</p>	23	</p>
24	</div>	24	</div>
25	<div class="col-12 text-right mt-2">	25	<div class="col-12 text-right mt-2">
26	<p class="h4 font-weight-bold mb-0">	26	<p class="h4 font-weight-bold mb-0">
27	{{promo.PreVen \| currency}}	27	{{promo.PreVen \| currency}}
28	</p>	28	</p>
29	</div>	29	</div>
30	</div>	30	</div>
31	</div>	31	</div>
32	</div>	32	</div>
33	</div>	33	</div>
34	</div>	34	</div>
35		35
36	<div class="row mt-3 justify-content-end">	36	<div class="row mt-3 justify-content-end">
37	<div class="col-auto">	37	<div class="col-auto">
38	<button	38	<button
39	type="button"	39	type="button"
40	class="btn btn-sm btn-light shadow"	40	class="btn btn-sm btn-light shadow"
41	(click)="hide()">	41	(click)="hide()">
42	<span class="pr-2">No, gracias</span>	42	<span class="pr-2">No, gracias</span>
43	<i class="fa fa-times text-danger" aria-hidden="true"></i>	43	<i class="fa fa-times text-danger" aria-hidden="true"></i>
44	</button>	44	</button>
45	</div>	45	</div>
46	</div>	46	</div>
47		47
48	</div>	48	</div>
49		49

src/assets/scss/bootstrap-override.scss

Diff comments View file @ c217598

1	@import "../../../node_modules/bootstrap/scss/functions";	1	@import "../../../node_modules/bootstrap/scss/functions";
2	@import "../../../node_modules/bootstrap/scss/variables";	2	@import "../../../node_modules/bootstrap/scss/variables";
3	@import "../../../node_modules/bootstrap/scss/mixins";	3	@import "../../../node_modules/bootstrap/scss/mixins";
4		4
5	$primary: #2872ae;	5	$primary: #2872ae;
6		6
7	$theme-colors: (	7	$theme-colors: (
8	primary: $primary,	8	primary: $primary,
9	light: white	9	light: white
10	);	10	);
11		11
12	.popover {	12	.popover {
13	transform: translate3d(-425px, 0, -34px) !important;	13	transform: translate3d(-100%, 0, -34px) !important;
14	min-width: 350px !important;	14	min-width: 350px !important;
15	max-width: 425px !important;	15	max-width: 65% !important;
16	border: none !important;	16	border: none !important;
17	border-radius: 1.5rem !important;	17	border-radius: 1.5rem !important;
18	padding: 0 !important;	18	padding: 0 !important;
19	background-color: $primary !important;	19	background-color: $primary !important;
20	.popover-body {	20	.popover-body {
21	padding: 0 !important;	21	padding: 0 !important;
22	}	22	}
23	}	23	}
24		24
25	.bs-popover-left .arrow::after,	25	.bs-popover-left .arrow::after,
26	.bs-popover-auto[x-placement^="left"] .arrow::after {	26	.bs-popover-auto[x-placement^="left"] .arrow::after {
27	border-left-color: $primary !important;	27	border-left-color: $primary !important;
28	}	28	}
29		29
30	.bs-popover-right .arrow::after,	30	.bs-popover-right .arrow::after,
31	.bs-popover-auto[x-placement^="right"] .arrow::after {	31	.bs-popover-auto[x-placement^="right"] .arrow::after {
32	border-right-color: $primary !important;	32	border-right-color: $primary !important;
33	}	33	}
34		34
35	.bs-popover-top .arrow::after,	35	.bs-popover-top .arrow::after,
36	.bs-popover-auto[x-placement^="top"] .arrow::after {	36	.bs-popover-auto[x-placement^="top"] .arrow::after {
37	border-top-color: $primary !important;	37	border-top-color: $primary !important;
38	}	38	}
39		39
40	.bs-popover-bottom .arrow::after,	40	.bs-popover-bottom .arrow::after,
41	.bs-popover-auto[x-placement^="bottom"] .arrow::after {	41	.bs-popover-auto[x-placement^="bottom"] .arrow::after {
42	border-bottom-color: $primary !important;	42	border-bottom-color: $primary !important;
43	}	43	}
44		44
45	.list-group-item.active {	45	.list-group-item.active {
46	background-color: $primary !important;	46	background-color: $primary !important;
47	border-color: $primary !important;	47	border-color: $primary !important;
48	}	48	}
49		49
50	.custom-radio .custom-control-label::before {	50	.custom-radio .custom-control-label::before {
51	background-color: $primary !important;	51	background-color: $primary !important;
52	border-color: $white !important;	52	border-color: $white !important;
53	border-width: 2px !important;	53	border-width: 2px !important;
54	}	54	}
55		55
56	.custom-control-input {	56	.custom-control-input {
57	border-color: $white !important;	57	border-color: $white !important;
58	background-color: $primary !important;	58	background-color: $primary !important;
59	color: $primary !important;	59	color: $primary !important;
60	&:checked ~ .custom-control-label::before {	60	&:checked ~ .custom-control-label::before {
61	border-color: $white !important;	61	border-color: $white !important;
62	color: #fff !important;	62	color: #fff !important;
63	background-color: $primary !important;	63	background-color: $primary !important;
64	}	64	}
65	&:focus ~ .custom-control-label::before {	65	&:focus ~ .custom-control-label::before {
66	border-color: $white !important;	66	border-color: $white !important;
67	box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.7) !important;	67	box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.7) !important;
68	}	68	}
69	}	69	}
70		70
71	.carousel-control {	71	.carousel-control {
72	visibility: hidden !important;	72	visibility: hidden !important;
73	}	73	}
74		74
75	.carousel, .carousel-inner, .item {	75	.carousel, .carousel-inner, .item {
76	height: 100% !important;	76	height: 100% !important;
77	&:focus{	77	&:focus{
78	outline: none !important;	78	outline: none !important;
79	}	79	}
80	}	80	}
81		81
82	@import "../../../node_modules/bootstrap/scss/bootstrap";	82	@import "../../../node_modules/bootstrap/scss/bootstrap";
83		83