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
1 <div class="row m-0 fade-in"> 1 <div class="row m-0 fade-in">
2 <div class="col-12 p-0"> 2 <div class="col-12 p-0">
3 3
4 <!-- NOMBRE DE SECCION --> 4 <!-- NOMBRE DE SECCION -->
5 <div class="row m-0"> 5 <div class="row m-0">
6 <div class="col-12 p-0"> 6 <div class="col-12 p-0">
7 <p class="h5 py-1 bg-gray text-muted text-center">Inicio</p> 7 <p class="h5 py-1 bg-gray text-muted text-center">Inicio</p>
8 </div> 8 </div>
9 </div> 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 <div class="col-md-5 d-flex align-items-end flex-column"> 12 <div class="col-md-5 d-flex align-items-end flex-column">
13 13
14 <!-- PROMOCIONES --> 14 <!-- PROMOCIONES -->
15 <div class="card bg-white border-0 shadow rounded w-100 mb-auto"> 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 <div class="row"> 17 <div class="row">
18 <div class="col-7"> 18 <div class="col-7">
19 <p class="h3 card-title">Promociones</p> 19 <p class="h3 card-title">Promociones</p>
20 </div> 20 </div>
21 <div class="col-5 p-0"> 21 <div class="col-5 p-0">
22 <img src="{{apiUrl}}/imagenes/primario.promociones.png" class="icon-dim m-0"> 22 <img src="{{apiUrl}}/imagenes/primario.promociones.png" class="icon-dim m-0">
23 </div> 23 </div>
24 </div> 24 </div>
25 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p> 25 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
26 </div> 26 </div>
27 <div id="carouselIndicators" class="carousel slide mb-4" data-ride="carousel"> 27 <div id="carouselIndicators" class="carousel slide" 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>
33 <div class="carousel-inner"> 28 <div class="carousel-inner">
34 <div class="carousel-item active"> 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 </div> 31 </div>
37 <div class="carousel-item"> 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 </div> 34 </div>
40 <div class="carousel-item"> 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 </div> 37 </div>
43 </div> 38 </div>
44 </div> 39 </div>
45 </div> 40 </div>
46 41
47 <!-- ORDENAR --> 42 <!-- ORDENAR -->
48 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 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 <div class="row"> 45 <div class="row">
51 <div class="col-5"> 46 <div class="col-5">
52 <p class="h3 card-title">Ordenar</p> 47 <p class="h3 card-title">Ordenar</p>
53 </div> 48 </div>
54 <div class="col-7 p-0"> 49 <div class="col-7 p-0">
55 <img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim"> 50 <img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim">
56 </div> 51 </div>
57 </div> 52 </div>
58 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p> 53 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
59 </div> 54 </div>
60 <img 55 <img
61 class="card-img-bottom d-block w-100 mx-auto rounded" 56 class="card-img-bottom d-block w-100 mx-auto rounded"
62 src="{{apiUrl}}/imagenes/cafe.jpg"> 57 src="{{apiUrl}}/imagenes/cafe.jpg">
63 </div> 58 </div>
64 </div> 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 <!-- CARGAR PRODUCTOS --> 63 <!-- CARGAR PRODUCTOS -->
69 <ng-template #popTemplate> 64 <ng-template #popTemplate>
70 <app-popover 65 <app-popover
71 [popover]="popoverDirective" 66 [popover]="popoverDirective"
72 [popoverContent]="'que onda'" 67 [popoverContent]="popoverContent"
73 class="card bg-primary text-white rounded-sm border-0"> 68 class="fade-in text-white rounded-sm border-0">
74 </app-popover> 69 </app-popover>
75 </ng-template> 70 </ng-template>
76 <div 71 <div
77 placement="left" 72 placement="left"
78 triggers="" 73 triggers=""
79 [popover]="popTemplate" 74 [popover]="popTemplate"
80 class="w-100" 75 class="w-100"
81 #pop="bs-popover" 76 #pop="bs-popover">
82 (click)="open()">
83 <div class="card bg-white border-0 shadow rounded mb-auto"> 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 <div class="row"> 79 <div class="row">
86 <div class="col-6"> 80 <div class="col-6">
87 <p class="h3 card-title">Cargar Productos</p> 81 <p class="h3 card-title">Cargar Productos</p>
88 </div> 82 </div>
89 <div class="col-6 p-0"> 83 <div class="col-6 p-0">
90 <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2"> 84 <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2">
91 </div> 85 </div>
92 </div> 86 </div>
93 <p class="h5 card-text text-muted font-weight-light"> 87 <p class="h5 card-text text-muted font-weight-light">
94 Coloque el código de<br> 88 Coloque el código de<br>
95 barras o QR frente al scanner. 89 barras o QR frente al scanner.
96 </p> 90 </p>
97 </div> 91 </div>
98 <div class="card bg-white border-0 w-75 mx-auto mb-4"> 92 <div class="row m-4">
99 <img class="card-img-top d-block w-50 mx-auto rounded" src="{{apiUrl}}/imagenes/descarga.jpg"> 93 <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm">
100 <div class="card-body text-left p-2"> 94 <img
101 <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p> 95 *ngIf="!productoAcargar"
102 <p class="m-0 card-text text-muted">COD. 12121222</p> 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 </div> 136 </div>
104 </div> 137 </div>
105 </div> 138 </div>
106 </div> 139 </div>
107 140
108 <!-- BUSCAR PRODUCTOS --> 141 <!-- BUSCAR PRODUCTOS -->
109 <div (click)="goPage('busqueda-productos')" 142 <div (click)="goPage('busqueda-productos')"
110 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 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 <div class="row"> 145 <div class="row">
113 <div class="col-6"> 146 <div class="col-6">
114 <p class="h3 card-title">Buscar Productos</p> 147 <p class="h3 card-title">Buscar Productos</p>
115 <p class="h5 card-text text-muted font-weight-light"> 148 <p class="h5 card-text text-muted font-weight-light">
116 Busque aquí los productos<br> 149 Busque aquí los productos<br>
117 que no tienen código </p> 150 que no tienen código </p>
118 </div> 151 </div>
119 <div class="col-6 p-0"> 152 <div class="col-6 p-0">
120 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2"> 153 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2">
121 </div> 154 </div>
122 </div> 155 </div>
123 156
124 </div> 157 </div>
125 </div> 158 </div>
126 159
127 </div> 160 </div>
src/app/components/inicio/inicio.component.ts
Diff comments   View file @ a0a61a2
1 import { Component, OnInit, ViewChild } from '@angular/core'; 1 import { Component, OnInit, ViewChild } from '@angular/core';
2 import { Router } from '@angular/router';
3 import { PopoverDirective } from 'ngx-bootstrap'; 2 import { PopoverDirective } from 'ngx-bootstrap';
4 import { appSettings } from 'src/etc/AppSettings'; 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 @Component({ 10 @Component({
8 selector: 'app-inicio', 11 selector: 'app-inicio',
9 templateUrl: './inicio.component.html', 12 templateUrl: './inicio.component.html',
10 styleUrls: ['./inicio.component.scss'] 13 styleUrls: ['./inicio.component.scss']
11 }) 14 })
12 export class InicioComponent implements OnInit { 15 export class InicioComponent implements OnInit {
13 16
14 @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective; 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 ngOnInit() { 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 this.popoverDirective.show(); 56 this.popoverDirective.show();
25 } 57 }
26 58
27 private goPage(pageUrl) { 59 private goPage(pageUrl) {
28 this.router.navigate([pageUrl]); 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 }