Mauricio Cattafi / autoservicio

Browse Code »

Commit 78c5c6a7ea4fc383b034b23a4334ea23da15fae8

Authored by = 2019-08-08 11:04:16 -0300

1 parent d3c8406c74

Exists in master and in 1 other branch

cambios

Showing 4 changed files with 32 additions and 8 deletions Show diff stats

src/app/components/inicio/inicio.component.html

Diff comments View file @ 78c5c6a

 <div class="row m-0 fade-in">
   <div class="col-10 p-0">
     <!-- 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-light text-muted text-center">Inicio</p>
       </div>
     </div>
     <div class="row m-4 d-flex align-items-center">
       <div class="col-md-5 d-flex align-items-end flex-column">
         <!-- PROMOCIONES -->
         <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
           <div class="card-body text-left p-4">
             <p class="h3 card-title">Promociones</p>
             <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
           </div>
           <div id="carouselIndicators" class="carousel slide mb-4" data-ride="carousel">
             <ol class="carousel-indicators m-0">
               <li data-target="#carouselIndicators" data-slide-to="0" class="bg-dark active"></li>
               <li data-target="#carouselIndicators" data-slide-to="1" class="bg-dark"></li>
               <li data-target="#carouselIndicators" data-slide-to="2" class="bg-dark"></li>
             </ol>
             <div class="carousel-inner">
               <div class="carousel-item active">
                 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
               </div>
               <div class="carousel-item">
                 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
               </div>
               <div class="carousel-item">
                 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
               </div>
             </div>
           </div>
         </div>
+        <!-- TOOL TIp -->
+        <div class="popover left bs-example-popover">
+          <div class="arrow"></div>
+          <h3 class="popover-title">Popover left</h3>
+          <div class="popover-content">
+            <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
+          </div>
+        </div>
         <!-- ORDENAR -->
         <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
           <div class="card-body text-left p-4">
             <p class="h3 card-title">Ordenar</p>
             <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
           </div>
           <img class="card-img-bottom d-block w-50 mx-auto mb-4 rounded" src="../../assets/img/descarga.jpg">
         </div>
       </div>
       <div class="col-md-7 d-flex align-items-end flex-column">
         <!-- CARGAR PRODUCTOS -->
         <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
           <div class="card-body text-left p-4">
             <p class="h3 card-title">Cargar Productos</p>
             <p class="h5 card-text text-muted font-weight-light">
               Coloque el código de<br>
               barras o QR frente al scanner.
             </p>
           </div>
           <div class="card bg-white border-0 w-75 mx-auto mb-4">
             <img class="card-img-top d-block w-50 mx-auto rounded" src="../../assets/img/descarga.jpg">
             <div class="card-body text-left p-2">
               <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p>
               <p class="m-0 card-text text-muted">COD. 12121222</p>
             </div>
           </div>
         </div>
         <!-- BUSCAR PRODUCTOS -->
-        <div
+        <div (click)="goPage('busqueda-productos')"
-          (click)="goPage('busqueda-productos')"
           class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
           <div class="card-body text-left p-4">
             <p class="h3 card-title">Buscar Productos</p>
             <p class="h5 card-text text-muted font-weight-light">
               Busque aquí los productos<br>
               que no tienen código
             </p>
           </div>
         </div>
       </div>
     </div>
   </div>
   <!-- SIDEBAR -->
   <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>

src/app/components/inicio/inicio.component.scss

Diff comments View file @ 78c5c6a

		1	.bs-example-popover .popover {
		2	position: relative;
		3	display: block;
		4	float: left;
		5	margin: 20px;
		6	}
		7
		8	.arrow {
		9	top: 50%;
		10	right: -11px;
		11	margin-top: -11px;
		12	border-left-color: #999;
		13	border-left-color: rgba(0, 0, 0, 0.25);
		14	border-right-width: 0;
		15	}
		16

src/app/components/sidebar/sidebar.component.html

Diff comments View file @ 78c5c6a

1	<div class="d-flex align-items-center flex-column h-100 bg-dark pt-2 text-center">	1	<div class="d-flex align-items-center flex-column h-100 bg-dark pt-2 text-center">
2		2
3	<h4 class="border-bottom border-white"> Mi compra </h4>	3	<h4 class="border-bottom border-white"> Mi compra </h4>
4	<div class="overflow-auto mb-2">	4	<div class="overflow-auto overflow-scroll mb-2">
5	<div class="card my-2 bg-primary border-0" *ngFor="let prod of productos; let i = index">	5	<div class="card my-2 bg-primary border-0" *ngFor="let prod of productos; let i = index">
6	<img src="{{prod.img}}" class="card-img-top" alt="...">	6	<img src="{{prod.img}}" class="card-img-top" alt="...">
7	<div class="card-body row m-0 p-0 px-1 py-1 shadow rounded">	7	<div class="card-body row m-0 p-0 px-1 py-1 shadow rounded">
8	<div class="col-8 p-0 text-left my-auto">	8	<div class="col-8 p-0 text-left my-auto">
9	<p class="m-0 card-description">{{prod.desc}}</p>	9	<p class="m-0 card-description">{{prod.desc}}</p>
10	<p class="m-0 card-description">COD: {{prod.cod}}</p>	10	<p class="m-0 card-description">COD: {{prod.cod}}</p>
11	</div>	11	</div>
12	<div class="col-4 p-1 text-center my-auto">	12	<div class="col-4 p-1 text-center my-auto">
13	{{prod.precio \| currency}}	13	{{prod.precio \| currency}}
14	</div>	14	</div>
15	</div>	15	</div>
16	<div class="row m-0 p-0">	16	<div class="row m-0 p-0">
17	<div class="col p-1 pb-1 mt-2">	17	<div class="col p-1 pb-1 mt-2">
18	<button type="button" class="btn btn-light btn-sm float-left my-auto" (click)="deleteProducto(i)">X</button>	18	<button type="button" class="btn btn-light btn-sm float-left my-auto" (click)="deleteProducto(i)">X</button>
19	<button type="button" class="btn btn-light btn-sm my-auto">Y</button>	19	<button type="button" class="btn btn-light btn-sm my-auto">Y</button>
20	<div class="btn-group-sm btn-group float-right my-auto" role="group" aria-label="Basic example">	20	<div class="btn-group-sm btn-group float-right my-auto" role="group" aria-label="Basic example">
21	<button type="button" class="btn btn-light btn-sm mb-2" (click)="aumentarContador(i)">+</button>	21	<button type="button" class="btn btn-light btn-sm mb-2" (click)="aumentarContador(i)">+</button>
22	<label for="" class="border border.white px-1">{{prod.cantidad}}</label>	22	<label for="" class="border border.white px-1">{{prod.cantidad}}</label>
23	<button type="button" class="btn btn-light btn-sm mb-2" (click)="decrementarContador(i)">-</button>	23	<button type="button" class="btn btn-light btn-sm mb-2" (click)="decrementarContador(i)">-</button>
24	</div>	24	</div>
25	</div>	25	</div>
26	</div>	26	</div>
27	</div>	27	</div>
28	</div>	28	</div>
29		29
30	<div class="card mt-auto blue-gradient border-0">	30	<div class="card mt-auto blue-gradient border-0">
31	<div class="card-body row">	31	<div class="card-body row">
32	<div class="col">	32	<div class="col">
33	<h4 class="border-bottom border-secondary text-secondary" *ngIf="cont === 1">({{cont}}) item</h4>	33	<h4 class="border-bottom border-secondary text-secondary" *ngIf="cont === 1">({{cont}}) item</h4>
34	<h4 class="border-bottom border-secondary text-secondary" *ngIf="cont > 1">({{cont}}) items</h4>	34	<h4 class="border-bottom border-secondary text-secondary" *ngIf="cont > 1">({{cont}}) items</h4>
35	<h3 class="text-secondary">Total</h3>	35	<h3 class="text-secondary">Total</h3>
36	<h3 class="text-dark"><strong>{{total \| currency}}</strong></h3>	36	<h3 class="text-dark"><strong>{{total \| currency}}</strong></h3>
37	</div>	37	</div>
38	<div class="col 12 p-0">	38	<div class="col 12 p-0">
39	<button type="button" class="btn btn-light shadow mb-2"><strong>Finalizar y pagar</strong></button>	39	<button type="button" class="btn btn-light shadow mb-2"><strong>Finalizar y pagar</strong></button>
40	<button type="button" class="btn btn-light shadow btn-sm" (click)="clearCar()">Cancelar</button>	40	<button type="button" class="btn btn-light shadow btn-sm" (click)="clearCar()">Cancelar</button>
41	</div>	41	</div>
42	</div>	42	</div>
43	</div>	43	</div>

src/app/components/sidebar/sidebar.component.ts

Diff comments View file @ 78c5c6a

1	import { Component, OnInit } from '@angular/core';	1	import { Component, OnInit } from '@angular/core';
2		2
3		3
4	@Component({	4	@Component({
5	selector: 'app-sidebar',	5	selector: 'app-sidebar',
6	templateUrl: './sidebar.component.html',	6	templateUrl: './sidebar.component.html',
7	styleUrls: ['./sidebar.component.scss']	7	styleUrls: ['./sidebar.component.scss']
8	})	8	})
9	export class SidebarComponent implements OnInit {	9	export class SidebarComponent implements OnInit {
10		10
11	private cont: number = 1;	11	private cont: number = 1;
12	private min: number = 1;	12	private min: number = 1;
13	private max: number = 50;	13	private max: number = 50;
14	private total: number = 0;	14	private total: number = 0;
15		15
16	private productos = [	16	private productos = [
17	{	17	{
18	"id": 1,	18	"id": 1,
19	"desc": "Galletas Oreo",	19	"desc": "Galletas Oreo",
20	"cod": 225412,	20	"cod": 225412,
21	"precio": 15,	21	"precio": 15,
22	"img": "./assets/descarga.jpg",	22	"img": "./assets/img/descarga.jpg",
23	"cantidad": 1	23	"cantidad": 1
24	},	24	},
25	{	25	{
26	"id": 2,	26	"id": 2,
27	"desc": "Coca cola 500ml",	27	"desc": "Coca cola 500ml",
28	"cod": 512632,	28	"cod": 512632,
29	"precio": 40,	29	"precio": 40,
30	"img": "./assets/descarga.jpg",	30	"img": "./assets/img/descarga.jpg",
31	"cantidad": 1	31	"cantidad": 1
32	},	32	},
33	{	33	{
34	"id": 3,	34	"id": 3,
35	"desc": "Pancho grande",	35	"desc": "Pancho grande",
36	"cod": 775987,	36	"cod": 775987,
37	"precio": 45,	37	"precio": 45,
38	"img": "./assets/descarga.jpg",	38	"img": "./assets/img/descarga.jpg",
39	"cantidad": 1	39	"cantidad": 1
40	}	40	}
41	];	41	];
42		42
43	constructor() { }	43	constructor() { }
44		44
45	ngOnInit() {	45	ngOnInit() {
46		46
47	this.getCantidadProductos();	47	this.getCantidadProductos();
48	this.getTotal();	48	this.getTotal();
49		49
50	}	50	}
51		51
52	getCantidadProductos() {	52	getCantidadProductos() {
53	var aux = 0;	53	var aux = 0;
54	for (let i = 0; i < this.productos.length; i++) {	54	for (let i = 0; i < this.productos.length; i++) {
55	++aux;	55	++aux;
56	}	56	}
57	return this.cont = aux;	57	return this.cont = aux;
58	}	58	}
59		59
60	getTotal() {	60	getTotal() {
61		61
62	let subTotal = 0;	62	let subTotal = 0;
63	for (let i = 0; i < this.productos.length; i++) {	63	for (let i = 0; i < this.productos.length; i++) {
64	subTotal = subTotal + (this.productos[i].precio * this.productos[i].cantidad);	64	subTotal = subTotal + (this.productos[i].precio * this.productos[i].cantidad);
65	}	65	}
66	console.log(subTotal);	66	console.log(subTotal);
67	return this.total = subTotal;	67	return this.total = subTotal;
68	}	68	}
69		69
70	public aumentarContador(index) {	70	public aumentarContador(index) {
71		71
72	++this.cont;	72	++this.cont;
73	for (let i = 0; i < this.productos.length; i++) {	73	for (let i = 0; i < this.productos.length; i++) {
74	if (i === index) {	74	if (i === index) {
75	this.total = this.total + this.productos[i].precio;	75	this.total = this.total + this.productos[i].precio;
76	return (this.productos[i].cantidad === this.max) ?	76	return (this.productos[i].cantidad === this.max) ?
77	this.productos[i].cantidad : ++this.productos[i].cantidad;	77	this.productos[i].cantidad : ++this.productos[i].cantidad;
78		78
79	}	79	}
80	}	80	}
81	}	81	}
82		82
83	decrementarContador(index) {	83	decrementarContador(index) {
84		84
85	for (let i = 0; i < this.productos.length; i++) {	85	for (let i = 0; i < this.productos.length; i++) {
86	if (i === index && this.productos[i].cantidad > 1) {	86	if (i === index && this.productos[i].cantidad > 1) {
87	--this.productos[i].cantidad;	87	--this.productos[i].cantidad;
88	--this.cont;	88	--this.cont;
89	break;	89	break;
90	}	90	}
91	}	91	}
92		92
93	this.getTotal()	93	this.getTotal()
94	}	94	}
95		95
96	setCantidadItems() {	96	setCantidadItems() {
97		97
98	this.cont = 0;	98	this.cont = 0;
99	for (let i = 0; i < this.productos.length; i++) {	99	for (let i = 0; i < this.productos.length; i++) {
100	this.cont += this.productos[i].cantidad;	100	this.cont += this.productos[i].cantidad;
101	}	101	}
102	}	102	}
103		103
104	deleteProducto(index) {	104	deleteProducto(index) {
105		105
106	for (let i = 0; i < this.productos.length; i++) {	106	for (let i = 0; i < this.productos.length; i++) {
107	if (i === index) {	107	if (i === index) {
108	this.cont -= this.productos[i].cantidad;	108	this.cont -= this.productos[i].cantidad;
109	//Elimina del total el precio de todo el item	109	//Elimina del total el precio de todo el item
110	this.total = this.total - (this.productos[i].precio * this.productos[i].cantidad);	110	this.total = this.total - (this.productos[i].precio * this.productos[i].cantidad);
111	this.productos.splice(i, 1);	111	this.productos.splice(i, 1);
112	return;	112	return;
113	}	113	}
114	}	114	}
115	}	115	}
116		116
117	clearCar() {	117	clearCar() {
118		118
119	this.productos = [];	119	this.productos = [];
120	this.total = 0;	120	this.total = 0;
121	this.cont = 0;	121	this.cont = 0;
122	}	122	}
123	}	123	}
124		124