Martin Macola / autoservicio

Download as
Browse Code »

Commit 69c4cb8cefb97327ef4f55920054aa9b53a0d0af

Authored by Marcelo Puebla
1 parent 704b8da76c
Exists in master

Arreglo en padding de las tarjetas.

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