Martin Macola / autoservicio

Download as
Browse Code »

Commit 626f06442a7be9a2adc183fad1c04c3d7b2acd77

Authored by Eric Fernandez
2 parents e2365a2626 3ba3722646
Exists in master

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

Showing 4 changed files   Show diff stats
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
Diff comments   View file @ 626f064
1 <div class="row m-0 fade-in bg-primary-gradient disable-user-select"> 1 <div class="row m-0 fade-in bg-primary-gradient disable-user-select">
2 <div class="col-12 p-0 vh-100"> 2 <div class="col-12 p-0 vh-100">
3 3
4 <!-- TOP HEADER --> 4 <!-- TOP HEADER -->
5 <app-header></app-header> 5 <app-header></app-header>
6 6
7 <!-- NOMBRE DE SECCION --> 7 <!-- NOMBRE DE SECCION -->
8 <div class="row m-0"> 8 <div class="row m-0">
9 <div class="col-12 p-0"> 9 <div class="col-12 p-0">
10 <p class="h5 py-1 bg-gray text-muted text-center m-0"> 10 <p class="h5 py-1 bg-gray text-muted text-center m-0">
11 Pagar 11 Pagar
12 <i class="fa fa-usd"></i> 12 <i class="fa fa-usd"></i>
13 </p> 13 </p>
14 </div> 14 </div>
15 </div> 15 </div>
16 16
17 <div class="row m-0"> 17 <div class="row m-0">
18 <div class="col-12"> 18 <div class="col-12">
19 19
20 <!-- TEXTO DE IZQUIERDA --> 20 <!-- TEXTO DE IZQUIERDA -->
21 <div class="row mx-2 mt-4 text-white"> 21 <div class="row mx-2 mt-4 text-white">
22 <div class="col-sm-2 my-auto"> 22 <div class="col-sm-2 my-auto">
23 <p class="h2">Mi Compra 23 <p class="h2">Mi Compra
24 <i class="fa fa-shopping-cart "></i> 24 <i class="fa fa-shopping-cart "></i>
25 </p> 25 </p>
26 </div> 26 </div>
27 <div class="col-sm-4 my-auto"> 27 <div class="col-sm-4 my-auto">
28 <p class="h3">¿Desea finalizar su compra?</p> 28 <p class="h3">¿Desea finalizar su compra?</p>
29 <p class="h4">Por favor, controle y confirme su compra.</p> 29 <p class="h4">Por favor, controle y confirme su compra.</p>
30 </div> 30 </div>
31 </div> 31 </div>
32 32
33 <div class="row"> 33 <div class="row">
34 <!-- GRILLA DE PRODUCTOS DE MI COMPRA --> 34 <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
35 <div class="col-sm-7"> 35 <div class="col-sm-7">
36 <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark"> 36 <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark">
37 <div class="col-4 p-2" *ngFor="let producto of productos"> 37 <div class="col-4 p-2" *ngFor="let producto of productos">
38 <div class="bg-white rounded-sm shadow border-0"> 38 <div class="bg-white rounded-sm shadow border-0">
39 <img src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}" class="rounded-sm w-100 m-auto"> 39 <img src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}" class="rounded-sm w-100 m-auto">
40 <div class="p-2"> 40 <div class="p-2">
41 <p class="h6 text-left m-0">{{producto.DetArt}}</p> 41 <p class="h6 text-left m-0">{{producto.DetArt}}</p>
42 <div class="row justify-content-between m-0"> 42 <div class="row justify-content-between m-0">
43 <div class="col-12 p-0"> 43 <div class="col-12 p-0">
44 <div class="text-left"> 44 <div class="text-left">
45 <p class="m-0 h6"><small>{{producto.DET_LAR}}</small></p> 45 <p class="m-0 h6"><small>{{producto.DET_LAR}}</small></p>
46 <p class="m-0 h6"><small>{{producto.CodSec}}-{{producto.CodArt}}</small></p> 46 <p class="m-0 h6"><small>{{producto.CodSec}}-{{producto.CodArt}}</small></p>
47 </div> 47 </div>
48 </div> 48 </div>
49 <div class="col-12 my-auto pt-2 pr-2 p-0"> 49 <div class="col-12 my-auto pt-2 pr-2 p-0">
50 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p> 50 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
51 </div> 51 </div>
52 </div> 52 </div>
53 </div> 53 </div>
54 </div> 54 </div>
55 </div> 55 </div>
56 </div> 56 </div>
57 </div> 57 </div>
58 58
59 <div class="col-sm-5"> 59 <div class="col-sm-5">
60 <div class="row ml-3"> 60 <div class="row ml-3">
61 <!-- TICKET --> 61 <!-- TICKET -->
62 <div class="col-sm-7"> 62 <div class="col-sm-7">
63 <div class="card rounded-sm shadow"> 63 <div class="card rounded-sm shadow">
64 <div class="card-body"> 64 <div class="card-body">
65 <p class="h5 card-title">Su Ticket</p> 65 <p class="h5 card-title">Su Ticket</p>
66 <p class="h6 card-text text-left mt-4 pr-2 vh-60 overflow-scroll"> 66 <p class="h6 card-text text-left mt-4 pr-2 vh-60 overflow-scroll">
67 Ticket detalle. 67 Ticket detalle.
68 </p> 68 </p>
69 <p class="h4 card-text text-right mt-3 mb-0"> 69 <p class="h4 card-text text-right mt-3 mb-0">
70 Total {{230 | currency}} 70 Total {{230 | currency}}
71 </p> 71 </p>
72 </div> 72 </div>
73 </div> 73 </div>
74 </div> 74 </div>
75 </div> 75 </div>
76 </div> 76 </div>
77 </div> 77 </div>
78 78
79 <!-- OPCIONES ABAJO DERECHA --> 79 <!-- OPCIONES ABAJO DERECHA -->
80 <div class="row m-0 fixed-bottom"> 80 <div class="row m-0 fixed-bottom">
81 <div class="col-sm-2 offset-sm-10 p-0 mt-auto"> 81 <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
82 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0"> 82 <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
83 <div class="card-body row m-0"> 83 <div class="card-body row m-0">
84 <div class="col-12 p-3"> 84 <div class="col-12 p-3">
85 <button 85 <button
86 type="button" 86 type="button"
87 class="btn btn-block btn-light shadow btn-sm shadow" 87 class="btn btn-block btn-light shadow btn-sm shadow"
88 (click)="volverPreviousPage()"> 88 (click)="volverPreviousPage()">
89 <span class="pr-2">Volver</span> 89 <span class="pr-2">Volver</span>
90 <i class="fa fa-undo text-warning"></i> 90 <i class="fa fa-undo text-warning"></i>
91 </button> 91 </button>
92 <button [routerLink]="['/pago']" type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1"> 92 <button [routerLink]="['/pago']" type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1">
93 <span class="font-weight-bold pr-2">Finalizar y Pagar</span> 93 <span class="font-weight-bold pr-2">Finalizar y Pagar</span>
94 <i class="fa fa-check text-success"></i> 94 <i class="fa fa-check text-success"></i>
95 </button> 95 </button>
96 <button 96 <button
97 type="button" 97 type="button"
98 class="btn btn-block btn-light shadow btn-sm shadow" 98 class="btn btn-block btn-light shadow btn-sm shadow"
99 [routerLink]="['/cancelar-compra']"> 99 [routerLink]="['/cancelar-compra']">
100 <span class="pr-2">Cancelar</span> 100 <span class="pr-2">Cancelar</span>
101 <i class="fa fa-times text-danger"></i> 101 <i class="fa fa-times text-danger"></i>
102 </button> 102 </button>
103 </div> 103 </div>
104 </div> 104 </div>
105 </div> 105 </div>
106 </div> 106 </div>
107 </div> 107 </div>
108 108
109 </div> 109 </div>
110 </div> 110 </div>
111 111
112 </div> 112 </div>
113 113
114 </div> 114 </div>
115 115
src/app/components/confirmacion-carrito/confirmacion-carrito.component.ts
Diff comments   View file @ 626f064
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { appSettings } from 'src/etc/AppSettings'; 2 import { appSettings } from 'src/etc/AppSettings';
3 import { Location } from '@angular/common'; 3 import { Location } from '@angular/common';
4 import { ProductoService } from 'src/app/services/producto.service';
4 import { ProductoService } from 'src/app/services/producto.service'; 5
5 6 @Component({
6 @Component({ 7 selector: 'app-confirmacion-carrito',
7 selector: 'app-confirmacion-carrito', 8 templateUrl: './confirmacion-carrito.component.html',
8 templateUrl: './confirmacion-carrito.component.html', 9 styleUrls: ['./confirmacion-carrito.component.scss']
9 styleUrls: ['./confirmacion-carrito.component.scss'] 10 })
10 }) 11 export class ConfirmacionCarritoComponent implements OnInit {
11 export class ConfirmacionCarritoComponent implements OnInit { 12
12 13 productos = [];
13 productos = []; 14 private apiUrl: string = appSettings.apiUrl;
14 private apiUrl: string = appSettings.apiUrl; 15
15 16 constructor(private location: Location, private productoService: ProductoService) { }
16 constructor(private location: Location, private productoService: ProductoService) { } 17
17 18 ngOnInit() {
19 this.productos = this.productoService.productos;
18 ngOnInit() { 20 }
19 this.productos = this.productoService.productos; 21
20 } 22 volverPreviousPage() {
21 23 this.location.back();
22 volverPreviousPage() { 24 }
23 this.location.back(); 25
24 } 26 }
25 27
src/app/components/sidebar/sidebar.component.html
Diff comments   View file @ 626f064
1 <div class="disable-user-select d-flex align-items-center flex-column h-100 pt-2 text-center"> 1 <div class="disable-user-select d-flex align-items-center flex-column h-100 pt-2 text-center">
2 2
3 <!-- ENCABEZADO --> 3 <!-- ENCABEZADO -->
4 <p class="h4 border-bottom border-white text-white mt-4 pb-2"> 4 <p class="h4 border-bottom border-white text-white mt-4 pb-2">
5 Mi compra 5 Mi compra
6 <i class="fa fa-shopping-cart" aria-hidden="true"></i> 6 <i class="fa fa-shopping-cart" aria-hidden="true"></i>
7 </p> 7 </p>
8 8
9 <div class="overflow-auto overflow-scroll mb-2 w-100"> 9 <div class="overflow-auto overflow-scroll mb-2 w-100">
10 <!-- PRODUCTOS CARRITO --> 10 <!-- PRODUCTOS CARRITO -->
11 <div 11 <div
12 class="slide-in-bl my-2 bg-white border-0 rounded-sm" 12 class="slide-in-bl my-2 bg-white border-0 rounded-sm"
13 *ngFor="let producto of productosCarrito.slice().reverse(); let i = index"> 13 *ngFor="let producto of productosCarrito.slice().reverse(); let i = index">
14 <img class="w-100 m-auto rounded-sm shadow" src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}"> 14 <img class="w-100 m-auto rounded-sm shadow" src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}">
15 <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm"> 15 <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm">
16 <div class="col-12 p-0 pt-2 text-left my-auto"> 16 <div class="col-12 p-0 pt-2 text-left my-auto">
17 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p> 17 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
18 <p class="m-0 h6"><small>COD: {{producto.CodRub}}</small></p> 18 <p class="m-0 h6"><small>COD: {{producto.CodRub}}</small></p>
19 </div> 19 </div>
20 <div class="col-12 pr-1 text-right h6 my-auto "> 20 <div class="col-12 pr-1 text-right h6 my-auto ">
21 <p class="m-0">{{producto.PreVen | currency}}</p> 21 <p class="m-0">{{producto.PreVen | currency}}</p>
22 </div> 22 </div>
23 </div> 23 </div>
24 24
25 <!-- BOTONES --> 25 <!-- BOTONES -->
26 <div class="row m-0 d-flex justify-content-between"> 26 <div class="row m-0 d-flex justify-content-between">
27 27
28 <!-- SUMAR - RESTAR CANTIDAD --> 28 <!-- SUMAR - RESTAR CANTIDAD -->
29 <div class="col-auto px-1 my-2"> 29 <div class="col-auto px-1 my-2">
30 <div class="btn-group-sm btn-group float-left my-auto" role="group"> 30 <div class="btn-group-sm btn-group float-left my-auto" role="group">
31 <button 31 <button
32 type="button" 32 type="button"
33 class="btn btn-light btn-sm my-auto border shadow" 33 class="btn btn-light btn-sm my-auto border shadow"
34 (click)="aumentarCantidad(producto)"> 34 (click)="aumentarCantidad(producto)">
35 <i class="fa fa-plus" aria-hidden="true"></i> 35 <i class="fa fa-plus" aria-hidden="true"></i>
36 </button> 36 </button>
37 <div class="bg-white border border-white px-3 my-auto text-dark h5 shadow"> 37 <div class="bg-white border border-white px-3 my-auto text-dark h5 shadow">
38 <small>{{producto.cantidad}}</small> 38 <small>{{producto.cantidad}}</small>
39 </div> 39 </div>
40 <button 40 <button
41 type="button" 41 type="button"
42 class="btn btn-light btn-sm my-auto border shadow" 42 class="btn btn-light btn-sm my-auto border shadow"
43 (click)="restarCantidad(producto)"> 43 (click)="restarCantidad(producto)">
44 <i class="fa fa-minus" aria-hidden="true"></i> 44 <i class="fa fa-minus" aria-hidden="true"></i>
45 </button> 45 </button>
46 </div> 46 </div>
47 </div> 47 </div>
48 48
49 <!-- PERSONALIZAR --> 49 <!-- PERSONALIZAR -->
50 <div class="col-auto px-1 my-2"> 50 <div class="col-auto px-1 my-2">
51 <button 51 <button
52 *ngIf="esPersonalizable(producto)" 52 *ngIf="producto.tieneSinonimos"
53 type="button" 53 type="button"
54 class="btn btn-light btn-sm my-auto float-left border shadow" 54 class="btn btn-light btn-sm my-auto float-left border shadow"
55 (click)="personalizarPromo(producto, i)"> 55 (click)="personalizarPromo(producto, i)">
56 <i class="fa fa-refresh text-purple" aria-hidden="true"></i> 56 <i class="fa fa-refresh text-purple" aria-hidden="true"></i>
57 </button> 57 </button>
58 </div> 58 </div>
59 59
60 <!-- BORRAR --> 60 <!-- BORRAR -->
61 <div class="col-auto px-1 my-2"> 61 <div class="col-auto px-1 my-2">
62 <button 62 <button
63 type="button" 63 type="button"
64 class="btn btn-secondary btn-sm my-auto shadow" 64 class="btn btn-secondary btn-sm my-auto shadow"
65 (click)="deleteProducto(producto, i)"> 65 (click)="deleteProducto(producto, i)">
66 <i class="fa fa-trash" aria-hidden="true"></i> 66 <i class="fa fa-trash" aria-hidden="true"></i>
67 </button> 67 </button>
68 </div> 68 </div>
69 </div> 69 </div>
70 </div> 70 </div>
71 </div> 71 </div>
72 72
73 <!-- TOTAL --> 73 <!-- TOTAL -->
74 <div class="card rounded-top-sm mt-auto blue-gradient border-0"> 74 <div class="card rounded-top-sm mt-auto blue-gradient border-0">
75 <div class="card-body row"> 75 <div class="card-body row">
76 <div class="col-12"> 76 <div class="col-12">
77 <p 77 <p
78 class="h4 border-bottom border-secondary text-secondary pb-2"> 78 class="h4 border-bottom border-secondary text-secondary pb-2">
79 ({{getCantidadProductos()}}) artículos 79 ({{getCantidadProductos()}}) artículos
80 </p> 80 </p>
81 <p class="h3 text-secondary">Total</p> 81 <p class="h3 text-secondary">Total</p>
82 <p class="h3 font-weight-bold">{{getTotal() | currency}}</p> 82 <p class="h3 font-weight-bold">{{getTotal() | currency}}</p>
83 </div> 83 </div>
84 <div class="col-12"> 84 <div class="col-12">
85 <button 85 <button
86 *ngIf="getCantidadProductos() > 0" 86 *ngIf="getCantidadProductos() > 0"
87 type="button" 87 type="button"
88 class="btn btn-block btn-light btn-lg shadow mb-2 p-1" 88 class="btn btn-block btn-light btn-lg shadow mb-2 p-1"
89 routerLink="/confirmacion-carrito"> 89 routerLink="/confirmacion-carrito">
90 <span class="font-weight-bold pr-1">Finalizar y Pagar</span> 90 <span class="font-weight-bold pr-1">Finalizar y Pagar</span>
91 <i class="fa fa-check text-success" aria-hidden="true"></i> 91 <i class="fa fa-check text-success" aria-hidden="true"></i>
92 </button> 92 </button>
93 <button 93 <button
94 type="button" 94 type="button"
95 class="btn btn-block btn-light shadow btn-sm shadow" 95 class="btn btn-block btn-light shadow btn-sm shadow"
96 [routerLink]="['/cancelar-compra']"> 96 [routerLink]="['/cancelar-compra']">
97 <span class="pr-1">Cancelar</span> 97 <span class="pr-1">Cancelar</span>
98 <i class="fa fa-times text-danger" aria-hidden="true"></i> 98 <i class="fa fa-times text-danger" aria-hidden="true"></i>
99 </button> 99 </button>
100 </div> 100 </div>
101 </div> 101 </div>
102 </div> 102 </div>
103 </div> 103 </div>
104 104
src/app/components/sidebar/sidebar.component.ts
Diff comments   View file @ 626f064
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { Producto } from 'src/app/wrappers/producto'; 2 import { Producto } from 'src/app/wrappers/producto';
3 import { appSettings } from 'src/etc/AppSettings'; 3 import { appSettings } from 'src/etc/AppSettings';
4 import { ProductoService } from 'src/app/services/producto.service'; 4 import { ProductoService } from 'src/app/services/producto.service';
5 import { Router } from '@angular/router'; 5 import { Router } from '@angular/router';
6 6
7 @Component({ 7 @Component({
8 selector: 'app-sidebar', 8 selector: 'app-sidebar',
9 templateUrl: './sidebar.component.html', 9 templateUrl: './sidebar.component.html',
10 styleUrls: ['./sidebar.component.scss'], 10 styleUrls: ['./sidebar.component.scss'],
11 }) 11 })
12 export class SidebarComponent implements OnInit { 12 export class SidebarComponent implements OnInit {
13 13
14 private cantTotal: number = 0; 14 private cantTotal: number = 0;
15 private cantMin: number = 1; 15 private cantMin: number = 1;
16 private cantMax: number = 50; 16 private cantMax: number = 50;
17 private total: number = 0; 17 private total: number = 0;
18 private apiUrl: string = appSettings.apiUrl; 18 private apiUrl: string = appSettings.apiUrl;
19 19
20 public productosCarrito: Producto[] = []; 20 public productosCarrito: Producto[] = [];
21 21
22 constructor( 22 constructor(
23 private productoService: ProductoService, 23 private productoService: ProductoService,
24 private router: Router) { 24 private router: Router) {
25 this.router.routeReuseStrategy.shouldReuseRoute = function () { 25 this.router.routeReuseStrategy.shouldReuseRoute = function () {
26 return false; 26 return false;
27 } 27 }
28 } 28 }
29 29
30 ngOnInit() { 30 ngOnInit() {
31 31
32 this.productosCarrito = this.productoService.productos; 32 this.productosCarrito = this.productoService.productos;
33 } 33 }
34 34
35 getCantidadProductos() { 35 getCantidadProductos() {
36 36
37 var cantTotalAux = 0; 37 var cantTotalAux = 0;
38 this.productosCarrito.forEach(producto => { 38 this.productosCarrito.forEach(producto => {
39 39
40 cantTotalAux += producto.cantidad; 40 cantTotalAux += producto.cantidad;
41 }); 41 });
42 this.cantTotal = cantTotalAux; 42 this.cantTotal = cantTotalAux;
43 43
44 return this.cantTotal; 44 return this.cantTotal;
45 } 45 }
46 46
47 getTotal() { 47 getTotal() {
48 48
49 var subTotal = 0; 49 var subTotal = 0;
50 for (let i = 0; i < this.productosCarrito.length; i++) { 50 for (let i = 0; i < this.productosCarrito.length; i++) {
51 subTotal = subTotal + (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad); 51 subTotal = subTotal + (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad);
52 } 52 }
53 return this.total = subTotal; 53 return this.total = subTotal;
54 } 54 }
55 55
56 aumentarCantidad(producto: Producto) { 56 aumentarCantidad(producto: Producto) {
57 57
58 if (producto.cantidad < this.cantMax) { 58 if (producto.cantidad < this.cantMax) {
59 producto.cantidad++; 59 producto.cantidad++;
60 this.cantTotal++ 60 this.cantTotal++
61 } 61 }
62 } 62 }
63 63
64 restarCantidad(producto: Producto) { 64 restarCantidad(producto: Producto) {
65 65
66 if (producto.cantidad > this.cantMin) { 66 if (producto.cantidad > this.cantMin) {
67 producto.cantidad--; 67 producto.cantidad--;
68 this.cantTotal--; 68 this.cantTotal--;
69 } 69 }
70 } 70 }
71 71
72 deleteProducto(producto: Producto, index: number) { 72 deleteProducto(producto: Producto, index: number) {
73 73
74 this.cantTotal -= producto.cantidad; 74 this.cantTotal -= producto.cantidad;
75 this.total -= producto.PreVen * producto.cantidad; 75 this.total -= producto.PreVen * producto.cantidad;
76 this.productosCarrito.reverse().splice(index, 1); 76 this.productosCarrito.reverse().splice(index, 1);
77 return; 77 return;
78 } 78 }
79 79
80 esPersonalizable(producto: Producto) { 80 personalizarPromo(producto: Producto, index) {
81
82 var esPersonalizable: boolean = false;
83 if (producto.tieneSinonimos)
84 esPersonalizable = true;
85
86 return esPersonalizable;
87 }
88
89 personalizarPromo(producto: Producto, index) {
90 81
91 this.productoService.productoAcargar = producto; 82 this.productoService.productoAcargar = producto;
92 this.deleteProducto(producto, index); 83 this.deleteProducto(producto, index);
93 this.router.navigate(['inicio']); 84 this.router.navigate(['inicio']);
94 } 85 }
95 86
96 } 87 }
97 88