Martin Macola / autoservicio

Download as
Browse Code »

Commit 6e356f4f62d67acca7a62a24c1dc95942d515350

Authored by Marcelo Puebla
2 parents afa8a33658 e85b0126fd
Exists in master

Merge branch 'master' into 'master' 

Master (Joel Vitelli)

See merge request !14
Showing 6 changed files   Show diff stats
src/app/components/inicio/inicio.component.html
Diff comments   View file @ 6e356f4
1 <div class="row m-0 fade-in"> 1 <div class="row m-0 fade-in">
2 <div class="col-10 p-0"> 2 <div class="col-10 p-0">
3 <!-- TOP HEADER --> 3 <!-- TOP HEADER -->
4 <app-header></app-header> 4 <app-header></app-header>
5 5
6 <!-- NOMBRE DE SECCION --> 6 <!-- NOMBRE DE SECCION -->
7 <div class="row m-0"> 7 <div class="row m-0">
8 <div class="col-12 p-0"> 8 <div class="col-12 p-0">
9 <p class="h5 py-1 bg-light text-muted text-center">Inicio</p> 9 <p class="h5 py-1 bg-light text-muted text-center">Inicio</p>
10 </div> 10 </div>
11 </div> 11 </div>
12 12
13 <div class="row m-4 d-flex align-items-center disable-user-select"> 13 <div class="row m-4 d-flex align-items-center disable-user-select">
14 <div class="col-md-5 d-flex align-items-end flex-column"> 14 <div class="col-md-5 d-flex align-items-end flex-column">
15 15
16 <!-- TOOL TIp -->
17 <div class="popover left bs-example-popover p-4 border-0 shadow rounded mw-100 h-100 mb-auto"
18 *ngIf="tooltip === true">
19 <div class="arrow"></div>
20 <h4 class="popover-title mb-3 mt-1"> Este producto forma parte de Combos y Promociones</h4>
21 <div class="popover-content mw-100 h-100 mb-auto">
22 <div class="d-flex flex-column h-75 text-center">
23 <div class="overflow-auto overflow-scroll mb-2">
24
25 <div class="card bg-white rounded-sm shadow border-0 black-text my-3">
26 <div class="card-body row m-0 p-0 px-1 p-2 shadow rounded">
27 <div class="col-6 p-0 text-left my-auto">
28 <p class="h4 text-left m-0"><strong>Promo 2 x 1</strong></p>
29 <p class="m-0 h5"><small>2 Coca-cola 1.5 lt</small></p>
30 </div>
31 <div class="col-6 p-1 text-center my-auto">
32 <p class="m-0 h1 text-right">{{105 | currency}}</p>
33 </div>
34 </div>
35 </div>
36
37 </div>
38 </div>
39 </div>
40 </div>
41
16 <!-- PROMOCIONES --> 42 <!-- PROMOCIONES -->
17 <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto"> 43 <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
18 <div class="card-body text-left p-4"> 44 <div class="card-body text-left p-4">
19 <p class="h3 card-title">Promociones</p> 45 <p class="h3 card-title">Promociones</p>
20 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p> 46 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
21 </div> 47 </div>
22 <div id="carouselIndicators" class="carousel slide mb-4" data-ride="carousel"> 48 <div id="carouselIndicators" class="carousel slide mb-4" data-ride="carousel">
23 <ol class="carousel-indicators m-0"> 49 <ol class="carousel-indicators m-0">
24 <li data-target="#carouselIndicators" data-slide-to="0" class="bg-dark active"></li> 50 <li data-target="#carouselIndicators" data-slide-to="0" class="bg-dark active"></li>
25 <li data-target="#carouselIndicators" data-slide-to="1" class="bg-dark"></li> 51 <li data-target="#carouselIndicators" data-slide-to="1" class="bg-dark"></li>
26 <li data-target="#carouselIndicators" data-slide-to="2" class="bg-dark"></li> 52 <li data-target="#carouselIndicators" data-slide-to="2" class="bg-dark"></li>
27 </ol> 53 </ol>
28 <div class="carousel-inner"> 54 <div class="carousel-inner">
29 <div class="carousel-item active"> 55 <div class="carousel-item active">
30 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="..."> 56 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
31 </div> 57 </div>
32 <div class="carousel-item"> 58 <div class="carousel-item">
33 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="..."> 59 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
34 </div> 60 </div>
35 <div class="carousel-item"> 61 <div class="carousel-item">
36 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="..."> 62 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
37 </div> 63 </div>
38 </div> 64 </div>
39 </div> 65 </div>
40 </div> 66 </div>
41 67
42 <!-- ORDENAR --> 68 <!-- ORDENAR -->
43 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 69 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
44 <div class="card-body text-left p-4"> 70 <div class="card-body text-left p-4">
45 <p class="h3 card-title">Ordenar</p> 71 <p class="h3 card-title">Ordenar</p>
46 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p> 72 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
47 </div> 73 </div>
48 <img class="card-img-bottom d-block w-50 mx-auto mb-4 rounded" src="../../assets/img/descarga.jpg"> 74 <img class="card-img-bottom d-block w-50 mx-auto mb-4 rounded" src="../../assets/img/descarga.jpg">
49 </div> 75 </div>
50 76
51 </div> 77 </div>
52 78
53 <div class="col-md-7 d-flex align-items-end flex-column"> 79 <div class="col-md-7 d-flex align-items-end flex-column">
54 80
55 <!-- CARGAR PRODUCTOS --> 81 <!-- CARGAR PRODUCTOS -->
56 <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto"> 82 <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
57 <div class="card-body text-left p-4"> 83 <div class="card-body text-left p-4">
58 <p class="h3 card-title">Cargar Productos</p> 84 <p class="h3 card-title">Cargar Productos</p>
59 <p class="h5 card-text text-muted font-weight-light"> 85 <p class="h5 card-text text-muted font-weight-light">
60 Coloque el código de<br> 86 Coloque el código de<br>
61 barras o QR frente al scanner. 87 barras o QR frente al scanner.
62 </p> 88 </p>
63 </div> 89 </div>
64 <div class="card bg-white border-0 w-75 mx-auto mb-4"> 90 <div class="card bg-white border-0 w-75 mx-auto mb-4">
65 <img class="card-img-top d-block w-50 mx-auto rounded" src="../../assets/img/descarga.jpg"> 91 <img class="card-img-top d-block w-50 mx-auto rounded" src="../../assets/img/descarga.jpg">
66 <div class="card-body text-left p-2"> 92 <div class="card-body text-left p-2">
67 <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p> 93 <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p>
68 <p class="m-0 card-text text-muted">COD. 12121222</p> 94 <p class="m-0 card-text text-muted">COD. 12121222</p>
69 </div> 95 </div>
70 </div> 96 </div>
71 </div> 97 </div>
72 98
73 <!-- BUSCAR PRODUCTOS --> 99 <!-- BUSCAR PRODUCTOS -->
74 <div 100 <div (click)="goPage('busqueda-productos')"
75 (click)="goPage('busqueda-productos')"
76 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 101 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
77 <div class="card-body text-left p-4"> 102 <div class="card-body text-left p-4">
78 <p class="h3 card-title">Buscar Productos</p> 103 <p class="h3 card-title">Buscar Productos</p>
79 <p class="h5 card-text text-muted font-weight-light"> 104 <p class="h5 card-text text-muted font-weight-light">
80 Busque aquí los productos<br> 105 Busque aquí los productos<br>
81 que no tienen código 106 que no tienen código
82 </p> 107 </p>
83 </div> 108 </div>
84 </div> 109 </div>
85 110
86 </div> 111 </div>
87 112
88 </div> 113 </div>
89 114
90 </div> 115 </div>
91 116
92 <!-- SIDEBAR --> 117 <!-- SIDEBAR -->
93 <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar> 118 <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 @ 6e356f4
1 .bs-example-popover .popover {
2 position: relative;
3 display: block;
4 float: left;
5 background-color: #2872ae;
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 width: 0;
16 height: 0;
17 border-top: 20px solid transparent;
18 border-bottom: 20px solid transparent;
19 border-left: 20px solid #2872AE;
20 top: 50%;
21 right: -23px;
22 margin-top: -11px;
23
24 }
25
26 .black-text {
27 color: black;
28 }
29
src/app/components/inicio/inicio.component.ts
Diff comments   View file @ 6e356f4
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { Router } from '@angular/router'; 2 import { Router } from '@angular/router';
3 3
4 @Component({ 4 @Component({
5 selector: 'app-inicio', 5 selector: 'app-inicio',
6 templateUrl: './inicio.component.html', 6 templateUrl: './inicio.component.html',
7 styleUrls: ['./inicio.component.scss'] 7 styleUrls: ['./inicio.component.scss']
8 }) 8 })
9 export class InicioComponent implements OnInit { 9 export class InicioComponent implements OnInit {
10 10
11 constructor(private router: Router) { } 11 constructor(private router: Router) { }
12 12
13 tooltip:boolean = false;
14
13 ngOnInit() { 15 ngOnInit() {
14 } 16 }
15 17
16 private goPage(pageUrl) { 18 private goPage(pageUrl) {
17 this.router.navigate([pageUrl]); 19 this.router.navigate([pageUrl]);
18 } 20 }
19 21
20 } 22 }
21 23
src/app/components/sidebar/sidebar.component.html
Diff comments   View file @ 6e356f4
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" routerLink="/confirmacion-carrito"><strong>Finalizar y pagar</strong></button> 39 <button type="button" class="btn btn-light shadow mb-2" routerLink="/confirmacion-carrito"><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 @ 6e356f4
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
src/assets/scss/bootstrap-override.scss
Diff comments   View file @ 6e356f4
1 @import "../../../node_modules/bootstrap/scss/functions"; 1 @import "../../../node_modules/bootstrap/scss/functions";
2 @import "../../../node_modules/bootstrap/scss/variables"; 2 @import "../../../node_modules/bootstrap/scss/variables";
3 3
4 $theme-colors: ( 4 $theme-colors: (
5 primary: #2872ae, 5 primary: #2872ae,
6 light: white 6 light: white
7 ); 7 );
8 8
9 .popover{
10 background-color: #2872AE !important;
11 color: white !important;
12 }
13
9 .list-group-item.active { 14 .list-group-item.active {
10 background-color: #2872ae !important; 15 background-color: #2872ae !important;
11 border-color: #2872ae !important; 16 border-color: #2872ae !important;
12 } 17 }
13 18
14 @import "../../../node_modules/bootstrap/scss/bootstrap.scss"; 19 @import "../../../node_modules/bootstrap/scss/bootstrap.scss";
15 20