Martin Macola / autoservicio

Download as
Browse Code »

Commit 6c30b17918d848c2ca2d35e0396a37e2f98260b0

Authored by Marcelo Puebla
2 parents 8424afdf20 5aee6bac60
Exists in master

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

Showing 9 changed files   Show diff stats
src/app/app-routing.module.ts
Diff comments   View file @ 6c30b17
1 import { NgModule } from '@angular/core'; 1 import { NgModule } from '@angular/core';
2 import { Routes, RouterModule } from '@angular/router'; 2 import { Routes, RouterModule } from '@angular/router';
3 import { HomeComponent } from './components/home/home.component'; 3 import { HomeComponent } from './components/home/home.component';
4 import { InicioComponent } from './components/inicio/inicio.component'; 4 import { InicioComponent } from './components/inicio/inicio.component';
5 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component'; 5 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
6 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
6 7
7 const routes: Routes = [ 8 const routes: Routes = [
8 { path: 'home', component: HomeComponent }, 9 { path: 'home', component: HomeComponent },
9 { path: 'inicio', component: InicioComponent }, 10 { path: 'inicio', component: InicioComponent },
10 { path: 'busqueda-productos', component: BusquedaProductosComponent }, 11 { path: 'busqueda-productos', component: BusquedaProductosComponent },
12 { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
11 { path: '**', redirectTo: '/home', pathMatch: 'full' }, 13 { path: '**', redirectTo: '/home', pathMatch: 'full' },
12 ]; 14 ];
13 15
14 @NgModule({ 16 @NgModule({
15 imports: [RouterModule.forRoot(routes)], 17 imports: [RouterModule.forRoot(routes)],
16 exports: [RouterModule] 18 exports: [RouterModule]
17 }) 19 })
20
18 export class AppRoutingModule { } 21 export class AppRoutingModule { }
19 22
src/app/app.module.ts
Diff comments   View file @ 6c30b17
1 //#region MODULES 1 //#region MODULES
2 import { BrowserModule } from '@angular/platform-browser'; 2 import { BrowserModule } from '@angular/platform-browser';
3 import { NgModule } from '@angular/core'; 3 import { NgModule } from '@angular/core';
4 import { AppRoutingModule } from './app-routing.module'; 4 import { AppRoutingModule } from './app-routing.module';
5 import { HttpClientModule } from '@angular/common/http'; 5 import { HttpClientModule } from '@angular/common/http';
6 import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 6 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
7 //#endregion 7 //#endregion
8 8
9 //#region COMPONENTS 9 //#region COMPONENTS
10 import { AppComponent } from './app.component'; 10 import { AppComponent } from './app.component';
11 import { HeaderComponent } from './components/header/header.component'; 11 import { HeaderComponent } from './components/header/header.component';
12 import { SidebarComponent } from './components/sidebar/sidebar.component'; 12 import { SidebarComponent } from './components/sidebar/sidebar.component';
13 import { CarouselComponent } from './components/carousel/carousel.component'; 13 import { CarouselComponent } from './components/carousel/carousel.component';
14 import { HomeComponent } from './components/home/home.component'; 14 import { HomeComponent } from './components/home/home.component';
15 import { InicioComponent } from './components/inicio/inicio.component'; 15 import { InicioComponent } from './components/inicio/inicio.component';
16 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
16 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component'; 17 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
17 //#endregion 18 //#endregion
18 19
19 @NgModule({ 20 @NgModule({
20 declarations: [ 21 declarations: [
21 AppComponent, 22 AppComponent,
22 HeaderComponent, 23 HeaderComponent,
23 SidebarComponent, 24 SidebarComponent,
24 CarouselComponent, 25 CarouselComponent,
25 HomeComponent, 26 HomeComponent,
26 InicioComponent, 27 InicioComponent,
28 BusquedaProductosComponent,
27 BusquedaProductosComponent 29 ConfirmacionCarritoComponent
28 ], 30 ],
29 imports: [ 31 imports: [
30 BrowserModule, 32 BrowserModule,
31 AppRoutingModule, 33 AppRoutingModule,
32 HttpClientModule, 34 HttpClientModule,
33 FormsModule, 35 FormsModule,
34 ReactiveFormsModule, 36 ReactiveFormsModule,
35 ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }) 37 ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' })
36 ], 38 ],
37 providers: [], 39 providers: [],
38 bootstrap: [AppComponent] 40 bootstrap: [AppComponent]
39 }) 41 })
40 export class AppModule { } 42 export class AppModule { }
41 43
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
Diff comments   View file @ 6c30b17
File was created 1 <app-header></app-header>
2 <div class="row">
3 <div class="col-10">
4
5 <!-- NOMBRE DE SECCION -->
6 <div class="row m-0">
7 <div class="col-12 p-0">
8 <p class="h5 py-1 bg-light text-muted text-center">Pago <i class="fa fa-usd"></i></p>
9 </div>
10 </div>
11
12 <div class="row m-4 d-flex align-items-center">
13 <div class="col-4">
14 <h1>Mi Compra <i class="fa fa-shopping-cart "></i></h1>
15 </div>
16 <div class="col-8">
17 <h2>¿Desea finalizar su compra?</h2>
18 <h3>Por favor, controle y confirme su compra.</h3>
19 </div>
20 <div class="col-sm-7">
21
22 <div class="row pr-3 vh-50 overflow-scroll">
23 <div
24 class="col-4 p-2"
25 *ngFor="let producto of productos">
26 <div class="card card-effect bg-white rounded-sm shadow border-0">
27 <img src="../../../assets/img/descarga.jpg" class="card-img-top w-75 m-auto">
28 <div class="card-body">
29 <p class="h5 text-left m-0">{{producto.variable}}</p>
30 <div class="text-left">
31 <p class="m-0"><small>ASDASDSADASDSA</small></p>
32 <p class="m-0"><small>COD. 1222</small></p>
33 <p class="m-0"><strong>$ 563</strong></p>
34 </div>
35 </div>
36 </div>
37 </div>
38 </div>
39 </div>
40 <div class="col-sm-5">
41 <h3>TOTAL: $553</h3>
42 </div>
43 </div>
44
45 <!-- SIDEBAR -->
46 </div>
47 <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
48 </div>
49
src/app/components/confirmacion-carrito/confirmacion-carrito.component.scss
Diff comments   View file @ 6c30b17
src/app/components/confirmacion-carrito/confirmacion-carrito.component.spec.ts
Diff comments   View file @ 6c30b17
File was created 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3 import { ConfirmacionCarritoComponent } from './confirmacion-carrito.component';
4
5 describe('ConfirmacionCarritoComponent', () => {
6 let component: ConfirmacionCarritoComponent;
7 let fixture: ComponentFixture<ConfirmacionCarritoComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ ConfirmacionCarritoComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(ConfirmacionCarritoComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26
src/app/components/confirmacion-carrito/confirmacion-carrito.component.ts
Diff comments   View file @ 6c30b17
File was created 1 import { Component, OnInit } from '@angular/core';
2
3 @Component({
4 selector: 'app-confirmacion-carrito',
5 templateUrl: './confirmacion-carrito.component.html',
6 styleUrls: ['./confirmacion-carrito.component.scss']
7 })
8 export class ConfirmacionCarritoComponent implements OnInit {
9
10 productos = [{}, {}, {}]
11 constructor() { }
12
13 ngOnInit() {
14 }
15
16 }
17
src/app/components/inicio/inicio.component.html
Diff comments   View file @ 6c30b17
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 <!-- PROMOCIONES --> 16 <!-- PROMOCIONES -->
17 <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto"> 17 <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
18 <div class="card-body text-left p-4"> 18 <div class="card-body text-left p-4">
19 <p class="h3 card-title">Promociones</p> 19 <p class="h3 card-title">Promociones</p>
20 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p> 20 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
21 </div> 21 </div>
22 <div id="carouselIndicators" class="carousel slide mb-4" data-ride="carousel"> 22 <div id="carouselIndicators" class="carousel slide mb-4" data-ride="carousel">
23 <ol class="carousel-indicators m-0"> 23 <ol class="carousel-indicators m-0">
24 <li data-target="#carouselIndicators" data-slide-to="0" class="bg-dark active"></li> 24 <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> 25 <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> 26 <li data-target="#carouselIndicators" data-slide-to="2" class="bg-dark"></li>
27 </ol> 27 </ol>
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="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="..."> 30 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
31 </div> 31 </div>
32 <div class="carousel-item"> 32 <div class="carousel-item">
33 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="..."> 33 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
34 </div> 34 </div>
35 <div class="carousel-item"> 35 <div class="carousel-item">
36 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="..."> 36 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
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 p-4"> 44 <div class="card-body text-left p-4">
45 <p class="h3 card-title">Ordenar</p> 45 <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> 46 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
47 </div> 47 </div>
48 <img class="card-img-bottom d-block w-50 mx-auto mb-4 rounded" src="../../assets/img/descarga.jpg"> 48 <img class="card-img-bottom d-block w-50 mx-auto mb-4 rounded" src="../../assets/img/descarga.jpg">
49 </div> 49 </div>
50 50
51 </div> 51 </div>
52 52
53 <div class="col-md-7 d-flex align-items-end flex-column"> 53 <div class="col-md-7 d-flex align-items-end flex-column">
54 54
55 <!-- CARGAR PRODUCTOS --> 55 <!-- CARGAR PRODUCTOS -->
56 <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto"> 56 <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
57 <div class="card-body text-left p-4"> 57 <div class="card-body text-left p-4">
58 <p class="h3 card-title">Cargar Productos</p> 58 <p class="h3 card-title">Cargar Productos</p>
59 <p class="h5 card-text text-muted font-weight-light"> 59 <p class="h5 card-text text-muted font-weight-light">
60 Coloque el código de<br> 60 Coloque el código de<br>
61 barras o QR frente al scanner. 61 barras o QR frente al scanner.
62 </p> 62 </p>
63 </div> 63 </div>
64 <div class="card bg-white border-0 w-75 mx-auto mb-4"> 64 <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"> 65 <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"> 66 <div class="card-body text-left p-2">
67 <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p> 67 <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> 68 <p class="m-0 card-text text-muted">COD. 12121222</p>
69 </div> 69 </div>
70 </div> 70 </div>
71 </div> 71 </div>
72 72
73 <!-- BUSCAR PRODUCTOS --> 73 <!-- BUSCAR PRODUCTOS -->
74 <div 74 <div
75 (click)="goPage('busqueda-productos')" 75 (click)="goPage('busqueda-productos')"
76 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 76 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
77 <div class="card-body text-left p-4"> 77 <div class="card-body text-left p-4">
78 <p class="h3 card-title">Buscar Productos</p> 78 <p class="h3 card-title">Buscar Productos</p>
79 <p class="h5 card-text text-muted font-weight-light"> 79 <p class="h5 card-text text-muted font-weight-light">
80 Busque aquí los productos<br> 80 Busque aquí los productos<br>
81 que no tienen código 81 que no tienen código
82 </p> 82 </p>
83 </div> 83 </div>
84 </div> 84 </div>
85 85
86 </div> 86 </div>
87 87
88 </div> 88 </div>
89 89
90 </div> 90 </div>
91 91
92 <!-- SIDEBAR --> 92 <!-- SIDEBAR -->
93 <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar> 93 <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
94 </div>
94 </div>
src/app/components/sidebar/sidebar.component.html
Diff comments   View file @ 6c30b17
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 mb-2">
5 <div class="card my-2 bg-primary border-0"> 5 <div class="card my-2 bg-primary border-0" *ngFor="let prod of productos; let i = index">
6 <img src="../../assets/img/descarga.jpg" 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">Galleta oreo x 199 gs Chocolate</p> 9 <p class="m-0 card-description">{{prod.desc}}</p>
10 <p class="m-0 card-description"><small>COD: 1234567</small></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 {{90 | 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">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">X</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">+</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">12</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">-</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">(1) 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 <h3 class="text-secondary">Total</h3> 35 <h3 class="text-secondary">Total</h3>
35 <h3 class="text-dark"><strong>{{5000 | currency}}</strong></h3> 36 <h3 class="text-dark"><strong>{{total | currency}}</strong></h3>
36 </div> 37 </div>
37 <div class="col 12 p-0"> 38 <div class="col 12 p-0">
38 <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" routerLink="/confirmacion-carrito"><strong>Finalizar y pagar</strong></button>
39 <button type="button" class="btn btn-light shadow btn-sm">Cancelar</button> 40 <button type="button" class="btn btn-light shadow btn-sm" (click)="clearCar()">Cancelar</button>
40 </div> 41 </div>
41 </div> 42 </div>
42 </div> 43 </div>
src/app/components/sidebar/sidebar.component.ts
Diff comments   View file @ 6c30b17
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 2
3
3 @Component({ 4 @Component({
4 selector: 'app-sidebar', 5 selector: 'app-sidebar',
5 templateUrl: './sidebar.component.html', 6 templateUrl: './sidebar.component.html',
6 styleUrls: ['./sidebar.component.scss'] 7 styleUrls: ['./sidebar.component.scss']
7 }) 8 })
8 export class SidebarComponent implements OnInit { 9 export class SidebarComponent implements OnInit {
9 10
11 private cont: number = 1;
12 private min: number = 1;
13 private max: number = 50;
14 private total: number = 0;
15
16 private productos = [
17 {
18 "id": 1,
19 "desc": "Galletas Oreo",
20 "cod": 225412,
21 "precio": 15,
22 "img": "./assets/descarga.jpg",
23 "cantidad": 1
24 },
25 {
26 "id": 2,
27 "desc": "Coca cola 500ml",
28 "cod": 512632,
29 "precio": 40,
30 "img": "./assets/descarga.jpg",
31 "cantidad": 1
32 },
33 {
34 "id": 3,
35 "desc": "Pancho grande",
36 "cod": 775987,
37 "precio": 45,
38 "img": "./assets/descarga.jpg",
39 "cantidad": 1
40 }
41 ];
42
10 constructor() { } 43 constructor() { }
11 44
12 ngOnInit() { 45 ngOnInit() {
46
47 this.getCantidadProductos();
48 this.getTotal();
49
50 }
51
52 getCantidadProductos() {
53 var aux = 0;
54 for (let i = 0; i < this.productos.length; i++) {
55 ++aux;
56 }
57 return this.cont = aux;
13 } 58 }
14 59
60 getTotal() {
61
62 let subTotal = 0;
63 for (let i = 0; i < this.productos.length; i++) {
64 subTotal = subTotal + (this.productos[i].precio * this.productos[i].cantidad);
65 }
66 console.log(subTotal);
67 return this.total = subTotal;
68 }
69
70 public aumentarContador(index) {
71
72 ++this.cont;
73 for (let i = 0; i < this.productos.length; i++) {
74 if (i === index) {
75 this.total = this.total + this.productos[i].precio;
76 return (this.productos[i].cantidad === this.max) ?
77 this.productos[i].cantidad : ++this.productos[i].cantidad;
78
79 }
80 }
81 }
82
83 decrementarContador(index) {
84
85 for (let i = 0; i < this.productos.length; i++) {
86 if (i === index && this.productos[i].cantidad > 1) {
87 --this.productos[i].cantidad;
88 --this.cont;
89 break;
90 }
91 }
92
93 this.getTotal()
94 }
95
96 setCantidadItems() {
97
98 this.cont = 0;
99 for (let i = 0; i < this.productos.length; i++) {
100 this.cont += this.productos[i].cantidad;
101 }
102 }
103
104 deleteProducto(index) {
105
106 for (let i = 0; i < this.productos.length; i++) {
107 if (i === index) {
108 this.cont -= this.productos[i].cantidad;
109 //Elimina del total el precio de todo el item
110 this.total = this.total - (this.productos[i].precio * this.productos[i].cantidad);
111 this.productos.splice(i, 1);
112 return;
113 }
114 }
115 }
116
117 clearCar() {
118
119 this.productos = [];
120 this.total = 0;
121 this.cont = 0;
122 }
15 } 123 }
16 124