diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 34382a2..7fa1567 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -4,12 +4,20 @@ import { HomeComponent } from './components/home/home.component'; import { InicioComponent } from './components/inicio/inicio.component'; import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component'; import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component'; +import { MasterComponent } from './components/master/master.component'; const routes: Routes = [ + { path: '', component: HomeComponent }, { path: 'home', component: HomeComponent }, - { path: 'inicio', component: InicioComponent }, - { path: 'busqueda-productos', component: BusquedaProductosComponent }, - { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent }, + { + path: '', + component: MasterComponent, + children: [ + { path: 'inicio', component: InicioComponent }, + { path: 'busqueda-productos', component: BusquedaProductosComponent }, + { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent }, + ] + }, { path: '**', redirectTo: '/home', pathMatch: 'full' }, ]; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 29b4bef..f986b61 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -15,6 +15,7 @@ import { HomeComponent } from './components/home/home.component'; import { InicioComponent } from './components/inicio/inicio.component'; import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component'; import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component'; +import { MasterComponent } from './components/master/master.component'; //#endregion @NgModule({ @@ -26,7 +27,8 @@ import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/ HomeComponent, InicioComponent, BusquedaProductosComponent, - ConfirmacionCarritoComponent + ConfirmacionCarritoComponent, + MasterComponent ], imports: [ BrowserModule, diff --git a/src/app/components/busqueda-productos/busqueda-productos.component.html b/src/app/components/busqueda-productos/busqueda-productos.component.html index 7358dfa..a976db4 100644 --- a/src/app/components/busqueda-productos/busqueda-productos.component.html +++ b/src/app/components/busqueda-productos/busqueda-productos.component.html @@ -1,7 +1,5 @@
-
- - +
@@ -95,7 +93,9 @@
-
+

{{producto.DetArt}}

@@ -126,6 +126,4 @@
- -
diff --git a/src/app/components/busqueda-productos/busqueda-productos.component.ts b/src/app/components/busqueda-productos/busqueda-productos.component.ts index 9cddb94..266e74c 100644 --- a/src/app/components/busqueda-productos/busqueda-productos.component.ts +++ b/src/app/components/busqueda-productos/busqueda-productos.component.ts @@ -1,7 +1,8 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, Input, ViewChild, AfterViewInit } from '@angular/core'; import { ProductoService } from 'src/app/services/producto.service'; import { Producto } from 'src/app/wrappers/producto'; import { appSettings } from 'src/etc/AppSettings'; +import { SidebarComponent } from '../sidebar/sidebar.component'; @Component({ selector: 'app-busqueda-productos', @@ -15,10 +16,16 @@ export class BusquedaProductosComponent implements OnInit { private searchTerm: string = ''; private showSpinner: boolean = true; private categoria: Categorias = Categorias.todos; - private apiUrl : string = appSettings.apiUrl; + private apiUrl: string = appSettings.apiUrl; + + productosParaCarrito : Producto[] = []; constructor(private productoService: ProductoService) { } + // ngAfterViewInit() { + // this.sideBar.productos = []; + // } + ngOnInit() { this.productoService.getAll() @@ -36,6 +43,11 @@ export class BusquedaProductosComponent implements OnInit { this.auxProductos = this.productos.filter(x => x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase())); } + agregarAlCarrito(producto : Producto){ + producto.cantidad = 1; + this.productosParaCarrito.push(producto); + } + } enum Categorias { diff --git a/src/app/components/confirmacion-carrito/confirmacion-carrito.component.html b/src/app/components/confirmacion-carrito/confirmacion-carrito.component.html index 8b94ca2..698cf3b 100644 --- a/src/app/components/confirmacion-carrito/confirmacion-carrito.component.html +++ b/src/app/components/confirmacion-carrito/confirmacion-carrito.component.html @@ -1,48 +1,42 @@ -
-
+
-
-

Pago

+
+

Pago

+
-
-
-
-

Mi Compra

-
-
-

¿Desea finalizar su compra?

-

Por favor, controle y confirme su compra.

-
-
+
+
+

Mi Compra

+
+
+

¿Desea finalizar su compra?

+

Por favor, controle y confirme su compra.

+
+
-
-
-
- -
-

{{producto.variable}}

-
-

ASDASDSADASDSA

-

COD. 1222

-

$ 563

+
+
+
+ +
+

{{producto.variable}}

+
+

ASDASDSADASDSA

+

COD. 1222

+

$ 563

+
+
+
+

TOTAL: $553

+
-
-

TOTAL: $553

-
-
- - -
-
diff --git a/src/app/components/inicio/inicio.component.html b/src/app/components/inicio/inicio.component.html index a87ba5a..ece77da 100644 --- a/src/app/components/inicio/inicio.component.html +++ b/src/app/components/inicio/inicio.component.html @@ -1,7 +1,5 @@
-
- - +
@@ -15,7 +13,7 @@
+ *ngIf="tooltip === false">

Este producto forma parte de Combos y Promociones

@@ -40,7 +38,7 @@
-
+
@@ -140,7 +138,4 @@
- - - -
\ No newline at end of file +
diff --git a/src/app/components/master/master.component.html b/src/app/components/master/master.component.html new file mode 100644 index 0000000..b34f870 --- /dev/null +++ b/src/app/components/master/master.component.html @@ -0,0 +1,14 @@ +
+
+ + + + + + +
+ + + + +
diff --git a/src/app/components/master/master.component.scss b/src/app/components/master/master.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/master/master.component.spec.ts b/src/app/components/master/master.component.spec.ts new file mode 100644 index 0000000..2a8e6d2 --- /dev/null +++ b/src/app/components/master/master.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MasterComponent } from './master.component'; + +describe('MasterComponent', () => { + let component: MasterComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MasterComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MasterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/master/master.component.ts b/src/app/components/master/master.component.ts new file mode 100644 index 0000000..0fbe076 --- /dev/null +++ b/src/app/components/master/master.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-master', + templateUrl: './master.component.html', + styleUrls: ['./master.component.scss'] +}) +export class MasterComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/components/sidebar/sidebar.component.html b/src/app/components/sidebar/sidebar.component.html index 83bd3c8..aec8de2 100644 --- a/src/app/components/sidebar/sidebar.component.html +++ b/src/app/components/sidebar/sidebar.component.html @@ -1,34 +1,38 @@ -
+
-

Mi compra

+

+ Mi compra + +

-
- + +
+
-

{{prod.desc}}

-

COD: {{prod.cod}}

+

{{producto.DetArt}}

+

COD: {{producto.CodRub}}

-

{{prod.precio | currency}}

+

{{producto.PreVen | currency}}

-
+
- {{prod.cantidad}} + {{producto.cantidad}}
-
+
+
-
-

({{cont}}) item

-

({{cont}}) items

-

Total

-

{{total | currency}}

+
+

({{cont}}) item

+

({{cont}}) items

+

Total

+

{{getTotal() | currency}}

-
- - +
+ +
diff --git a/src/app/components/sidebar/sidebar.component.ts b/src/app/components/sidebar/sidebar.component.ts index 63323ab..5e62865 100644 --- a/src/app/components/sidebar/sidebar.component.ts +++ b/src/app/components/sidebar/sidebar.component.ts @@ -1,11 +1,13 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; import { Producto } from 'src/app/wrappers/producto'; +import { appSettings } from 'src/etc/AppSettings'; @Component({ selector: 'app-sidebar', templateUrl: './sidebar.component.html', - styleUrls: ['./sidebar.component.scss'] + styleUrls: ['./sidebar.component.scss'], + inputs: ['productosCarrito'] }) export class SidebarComponent implements OnInit { @@ -13,69 +15,40 @@ export class SidebarComponent implements OnInit { private min: number = 1; private max: number = 50; private total: number = 0; + private apiUrl: string = appSettings.apiUrl; - private productos = [ - { - "id": 1, - "Detart": "Galletas Oreo", - "cod": 225412, - "precio": 15, - "img": "./assets/img/logodebo.png", - "cantidad": 1 - }, - { - "id": 2, - "desc": "Coca cola 500ml", - "cod": 512632, - "precio": 40, - "img": "./assets/img/logodebo.png", - "cantidad": 1 - }, - { - "id": 3, - "desc": "Pancho grande", - "cod": 775987, - "precio": 45, - "img": "./assets/img/logodebo.png", - "cantidad": 1 - } - ]; + public productosCarrito: Producto[] = []; constructor() { } - ngOnInit() { - - this.getCantidadProductos(); - this.getTotal(); - - } + ngOnInit() { } getCantidadProductos() { - var aux = 0; - for (let i = 0; i < this.productos.length; i++) { - ++aux; + + for (let i = 0; i < this.productosCarrito.length; i++) { + this.productosCarrito[i].cantidad = 1 + this.cont++; } - return this.cont = aux; + return this.cont; } getTotal() { let subTotal = 0; - for (let i = 0; i < this.productos.length; i++) { - subTotal = subTotal + (this.productos[i].precio * this.productos[i].cantidad); + for (let i = 0; i < this.productosCarrito.length; i++) { + subTotal = subTotal + (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad); } - console.log(subTotal); return this.total = subTotal; } public aumentarContador(index) { - ++this.cont; - for (let i = 0; i < this.productos.length; i++) { + this.cont++; + for (let i = 0; i < this.productosCarrito.length; i++) { if (i === index) { - this.total = this.total + this.productos[i].precio; - return (this.productos[i].cantidad === this.max) ? - this.productos[i].cantidad : ++this.productos[i].cantidad; + this.total = this.total + this.productosCarrito[i].PreVen; + return (this.productosCarrito[i].cantidad === this.max) ? + this.productosCarrito[i].cantidad : this.productosCarrito[i].cantidad++; } } @@ -83,10 +56,10 @@ export class SidebarComponent implements OnInit { decrementarContador(index) { - for (let i = 0; i < this.productos.length; i++) { - if (i === index && this.productos[i].cantidad > 1) { - --this.productos[i].cantidad; - --this.cont; + for (let i = 0; i < this.productosCarrito.length; i++) { + if (i === index && this.productosCarrito[i].cantidad > 1) { + this.productosCarrito[i].cantidad--; + this.cont--; break; } } @@ -97,27 +70,27 @@ export class SidebarComponent implements OnInit { setCantidadItems() { this.cont = 0; - for (let i = 0; i < this.productos.length; i++) { - this.cont += this.productos[i].cantidad; + for (let i = 0; i < this.productosCarrito.length; i++) { + this.cont += this.productosCarrito[i].cantidad; } } deleteProducto(index) { - for (let i = 0; i < this.productos.length; i++) { + for (let i = 0; i < this.productosCarrito.length; i++) { if (i === index) { - this.cont -= this.productos[i].cantidad; - //Elimina del total el precio de todo el item - this.total = this.total - (this.productos[i].precio * this.productos[i].cantidad); - this.productos.splice(i, 1); + this.cont -= this.productosCarrito[i].cantidad; + //Elimina del total el PreVen de todo el item + this.total = this.total - (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad); + this.productosCarrito.splice(i, 1); return; } } } - clearCar() { - - this.productos = []; + cleanCarrito() { + + this.productosCarrito = []; this.total = 0; this.cont = 0; }