Martin Macola / autoservicio

Download as
Browse Code »

Commit a0a61a274b6ba4af7d175352b7f75675b28756aa

Authored by Marcelo Puebla
1 parent 00d1fa8442
Exists in master

Agregada logica para mostrar promociones.

Showing 2 changed files with 100 additions and 28 deletions   Show diff stats
src/app/components/inicio/inicio.component.html
Diff comments   View file @ a0a61a2
... ... @@ -8,12 +8,12 @@
8 8 </div>
9 9 </div>
10 10  
11   - <div class="row m-4 d-flex align-items-center disable-user-select">
  11 + <div class="row m-3 d-flex align-items-start disable-user-select">
12 12 <div class="col-md-5 d-flex align-items-end flex-column">
13 13  
14 14 <!-- PROMOCIONES -->
15 15 <div class="card bg-white border-0 shadow rounded w-100 mb-auto">
16   - <div class="card-body text-left p-4">
  16 + <div class="card-body text-left px-4 py-2">
17 17 <div class="row">
18 18 <div class="col-7">
19 19 <p class="h3 card-title">Promociones</p>
... ... @@ -24,21 +24,16 @@
24 24 </div>
25 25 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
26 26 </div>
27   - <div id="carouselIndicators" class="carousel slide mb-4" data-ride="carousel">
28   - <ol class="carousel-indicators m-0">
29   - <li data-target="#carouselIndicators" data-slide-to="0" class="bg-dark active"></li>
30   - <li data-target="#carouselIndicators" data-slide-to="1" class="bg-dark"></li>
31   - <li data-target="#carouselIndicators" data-slide-to="2" class="bg-dark"></li>
32   - </ol>
  27 + <div id="carouselIndicators" class="carousel slide" data-ride="carousel">
33 28 <div class="carousel-inner">
34 29 <div class="carousel-item active">
35   - <img src="{{apiUrl}}/imagenes/descarga.jpg" class="d-block w-50 m-auto rounded">
  30 + <img src="{{apiUrl}}/imagenes/cafe.jpg" class="d-block w-100 m-auto rounded">
36 31 </div>
37 32 <div class="carousel-item">
38   - <img src="{{apiUrl}}/imagenes/descarga.jpg" class="d-block w-50 m-auto rounded">
  33 + <img src="{{apiUrl}}/imagenes/cafe.jpg" class="d-block w-100 m-auto rounded">
39 34 </div>
40 35 <div class="carousel-item">
41   - <img src="{{apiUrl}}/imagenes/descarga.jpg" class="d-block w-50 m-auto rounded">
  36 + <img src="{{apiUrl}}/imagenes/cafe.jpg" class="d-block w-100 m-auto rounded">
42 37 </div>
43 38 </div>
44 39 </div>
... ... @@ -46,7 +41,7 @@
46 41  
47 42 <!-- ORDENAR -->
48 43 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
49   - <div class="card-body text-left p-4">
  44 + <div class="card-body text-left px-4 py-2">
50 45 <div class="row">
51 46 <div class="col-5">
52 47 <p class="h3 card-title">Ordenar</p>
... ... @@ -63,14 +58,14 @@
63 58 </div>
64 59 </div>
65 60  
66   - <div class="col-md-7 d-flex align-items-end flex-column">
  61 + <div class="col-md-7 d-flex align-items-end flex-column mt-4 mt-md-0">
67 62  
68 63 <!-- CARGAR PRODUCTOS -->
69 64 <ng-template #popTemplate>
70 65 <app-popover
71 66 [popover]="popoverDirective"
72   - [popoverContent]="'que onda'"
73   - class="card bg-primary text-white rounded-sm border-0">
  67 + [popoverContent]="popoverContent"
  68 + class="fade-in text-white rounded-sm border-0">
74 69 </app-popover>
75 70 </ng-template>
76 71 <div
... ... @@ -78,10 +73,9 @@
78 73 triggers=""
79 74 [popover]="popTemplate"
80 75 class="w-100"
81   - #pop="bs-popover"
82   - (click)="open()">
  76 + #pop="bs-popover">
83 77 <div class="card bg-white border-0 shadow rounded mb-auto">
84   - <div class="card-body text-left p-4">
  78 + <div class="card-body text-left px-4 py-2">
85 79 <div class="row">
86 80 <div class="col-6">
87 81 <p class="h3 card-title">Cargar Productos</p>
... ... @@ -95,11 +89,50 @@
95 89 barras o QR frente al scanner.
96 90 </p>
97 91 </div>
98   - <div class="card bg-white border-0 w-75 mx-auto mb-4">
99   - <img class="card-img-top d-block w-50 mx-auto rounded" src="{{apiUrl}}/imagenes/descarga.jpg">
100   - <div class="card-body text-left p-2">
101   - <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p>
102   - <p class="m-0 card-text text-muted">COD. 12121222</p>
  92 + <div class="row m-4">
  93 + <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm">
  94 + <img
  95 + *ngIf="!productoAcargar"
  96 + class="card-img-top d-block w-100 mx-auto rounded-sm"
  97 + src="{{apiUrl}}/imagenes/escanner.jpg">
  98 + <div *ngIf="productoAcargar">
  99 + <img
  100 + class="card-img-top d-block w-100 mx-auto rounded-sm"
  101 + src="{{apiUrl}}/imagenes/cafe.jpg">
  102 +
  103 + <div class="row justify-content-between m-3">
  104 + <div class="col-auto text-left px-1">
  105 + <p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p>
  106 + <p class="h6 mb-0"><small>{{productoAcargar.DetArt}}</small></p>
  107 + </div>
  108 + <div class="col-4 text-right my-auto">
  109 + <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p>
  110 + </div>
  111 + </div>
  112 + </div>
  113 + </div>
  114 + <!-- BOTONES -->
  115 + <div
  116 + class="col-5 pr-0"
  117 + *ngIf="productoAcargar && tienePromo">
  118 + <button
  119 + type="button"
  120 + class="btn btn-light btn-block shadow-sm"
  121 + (click)="pop.show()">
  122 + <span class="pr-2">Personalizar</span>
  123 + <i class="fa fa-hand-o-up text-purple" aria-hidden="true"></i>
  124 + </button>
  125 + <button type="button" class="btn btn-light btn-block shadow-sm my-3">
  126 + <span class="pr-2 font-weight-bold">Confirmar</span>
  127 + <i class="fa fa-check text-success" aria-hidden="true"></i>
  128 + </button>
  129 + <button
  130 + type="button"
  131 + class="btn btn-light btn-block shadow-sm"
  132 + (click)="deshacerCarga()">
  133 + <span class="pr-2">Deshacer</span>
  134 + <i class="fa fa-undo text-warning" aria-hidden="true"></i>
  135 + </button>
103 136 </div>
104 137 </div>
105 138 </div>
... ... @@ -108,7 +141,7 @@
108 141 <!-- BUSCAR PRODUCTOS -->
109 142 <div (click)="goPage('busqueda-productos')"
110 143 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
111   - <div class="card-body text-left p-4">
  144 + <div class="card-body text-left px-4 py-2">
112 145 <div class="row">
113 146 <div class="col-6">
114 147 <p class="h3 card-title">Buscar Productos</p>
src/app/components/inicio/inicio.component.ts
Diff comments   View file @ a0a61a2
1 1 import { Component, OnInit, ViewChild } from '@angular/core';
2   -import { Router } from '@angular/router';
3 2 import { PopoverDirective } from 'ngx-bootstrap';
4 3 import { appSettings } from 'src/etc/AppSettings';
  4 +import { Producto } from 'src/app/wrappers/producto';
  5 +import { ProductoService } from 'src/app/services/producto.service';
  6 +import { Router } from '@angular/router';
  7 +import { Promocion } from 'src/app/wrappers/promocion';
5 8  
6 9  
7 10 @Component({
... ... @@ -12,14 +15,43 @@ import { appSettings } from &#39;src/etc/AppSettings&#39;;
12 15 export class InicioComponent implements OnInit {
13 16  
14 17 @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;
15   - apiUrl : string = appSettings.apiUrl
  18 + private productoAcargar: Producto;
  19 + private tienePromo = false;
  20 +
  21 + popoverContent: Promocion[] = []
  22 + apiUrl: string = appSettings.apiUrl
16 23  
17   - constructor(private router: Router) { }
  24 + constructor(
  25 + private router: Router,
  26 + private productoService: ProductoService) { }
18 27  
19 28 ngOnInit() {
  29 +
  30 + this.productoAcargar = this.productoService.productoAcargar;
  31 + if (this.productoAcargar) {
  32 + var sector = this.productoAcargar.CodSec;
  33 + var codigo = this.productoAcargar.CodArt;
  34 + this.productoService.getPromocion(sector, codigo)
  35 + .subscribe((promociones: Promocion[]) => {
  36 +
  37 + if (promociones.length === 0) {
  38 + //Si no tiene promociones la cargará al carrito despues de un tiempo
  39 + setTimeout(() => {
  40 + this.productoService.productos.push(this.productoAcargar);
  41 + this.productoAcargar = undefined;
  42 + this.tienePromo = false;
  43 + }, 2000)
  44 + } else {
  45 +
  46 + this.popoverContent = promociones;
  47 + this.tienePromo = true;
  48 + this.popoverDirective.show();
  49 + }
  50 + }, error => { console.error(error); })
  51 + }
20 52 }
21 53  
22   - open() {
  54 + showPopover() {
23 55  
24 56 this.popoverDirective.show();
25 57 }
... ... @@ -28,4 +60,11 @@ export class InicioComponent implements OnInit {
28 60 this.router.navigate([pageUrl]);
29 61 }
30 62  
  63 + deshacerCarga() {
  64 +
  65 + this.productoAcargar = undefined;
  66 + this.tienePromo = false;
  67 + this.popoverDirective.hide();
  68 + }
  69 +
31 70 }