diff --git a/Angular-UrbanBazaar/src/app/components/cart/cart.component.css b/Angular-UrbanBazaar/src/app/components/cart/cart.component.css index e69de29..cb78379 100644 --- a/Angular-UrbanBazaar/src/app/components/cart/cart.component.css +++ b/Angular-UrbanBazaar/src/app/components/cart/cart.component.css @@ -0,0 +1,39 @@ +.card +{ + height: 60vh; + margin: 25px; + padding: 25px; +} + +.center{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + text-align: center; +} +h4,h6{ + font-weight: 400; +} +.shopNow{ + padding: 5%; + background-color: rgb(79 79 243); + color: aliceblue; + border-radius: 15px; + border-color: white; +} +.card-table{ + position: relative; + display: flex; + flex-direction: column; + align-items: center; + +} +/* .center .btn{ + font-size: 14px !important; + margin-top: 20px !important; + font-weight: 400; + padding: 12px 72px; + border-radius: 3px !important; + +} */ diff --git a/Angular-UrbanBazaar/src/app/components/cart/cart.component.html b/Angular-UrbanBazaar/src/app/components/cart/cart.component.html index 67f870f..b5224d4 100644 --- a/Angular-UrbanBazaar/src/app/components/cart/cart.component.html +++ b/Angular-UrbanBazaar/src/app/components/cart/cart.component.html @@ -1,32 +1,52 @@ - - - - - - - - Document - - - - - - - - - - - - - - - - + +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
My Cart
+
- - -
productidproductnameproductpriceproductweight
{{c.productname}}{{c.productprice}}{{c.productweight}}
S.NoProductNameProductPriceAction
{{i+1}}{{c.productname}}{{c.productprice}} + +
Grand Total : Rs.{{grandTotal}}
- - - +
+ +

Your cart is empty!

+
Add item to it now
+ +
+ + \ No newline at end of file diff --git a/Angular-UrbanBazaar/src/app/components/cart/cart.component.ts b/Angular-UrbanBazaar/src/app/components/cart/cart.component.ts index 9e5e39f..ea192af 100644 --- a/Angular-UrbanBazaar/src/app/components/cart/cart.component.ts +++ b/Angular-UrbanBazaar/src/app/components/cart/cart.component.ts @@ -10,13 +10,27 @@ import { CartService } from 'src/app/services/cart.service'; }) export class CartComponent implements OnInit { - cartdetails:Observable + public cartdetails:any =[]; + public grandTotal!: number; constructor(private cartservice:CartService) { - this.cartdetails = this.cartservice.showAllOrder(); + // this.cartdetails = this.cartservice.showAllOrder(); } ngOnInit(): void { + this.cartservice.getProducts() + .subscribe(res=>{ + this.cartdetails = res; + this.grandTotal = this.cartservice.getTotalPrice(); + }) + } + removeItem(item:any){ + this.cartservice.removeCartItem(item); + } + + emptyCart() + { + this.cartservice.removeAllCart(); } } diff --git a/Angular-UrbanBazaar/src/app/components/home/home.component.html b/Angular-UrbanBazaar/src/app/components/home/home.component.html index e6872bb..b2847e3 100644 --- a/Angular-UrbanBazaar/src/app/components/home/home.component.html +++ b/Angular-UrbanBazaar/src/app/components/home/home.component.html @@ -1,32 +1,16 @@ - - - - - - - - - Document -
- +
-
+
{{i.productname}}

Rs.{{i.productprice}}

Weight {{i.productweight}}

-

+

-
- - - - - - \ No newline at end of file +
\ No newline at end of file diff --git a/Angular-UrbanBazaar/src/app/components/home/home.component.ts b/Angular-UrbanBazaar/src/app/components/home/home.component.ts index afa1368..efac311 100644 --- a/Angular-UrbanBazaar/src/app/components/home/home.component.ts +++ b/Angular-UrbanBazaar/src/app/components/home/home.component.ts @@ -12,22 +12,33 @@ import { Cart } from 'src/app/models/cart'; styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { + + showButton(){ // this.router.navigate(['/showCart']); this.router.navigateByUrl('/showCart'); } - addCart(){ - alert("added to cart") + addCart(item:any){ + this.cartservice.addtoCart(item); } - products:Observable - constructor(private productservice: ProductService,private router: Router ) { - this.products = this.productservice.showAllProduct(); + public products:any + constructor(private productservice: ProductService,private router: Router , private cartservice:CartService ) { + } ngOnInit(): void { + this.productservice.showAllProduct().subscribe(res=>{ + this.products=res; + + this.products.forEach((a:any) => { + Object.assign(a,{quantity:1,total:a.productprice}) + }); + + + }) } } diff --git a/Angular-UrbanBazaar/src/app/services/cart.service.ts b/Angular-UrbanBazaar/src/app/services/cart.service.ts index c4e0d78..9c57534 100644 --- a/Angular-UrbanBazaar/src/app/services/cart.service.ts +++ b/Angular-UrbanBazaar/src/app/services/cart.service.ts @@ -1,6 +1,7 @@ import { HttpClient } from '@angular/common/http'; +import { THIS_EXPR } from '@angular/compiler/src/output/output_ast'; import { Injectable } from '@angular/core'; -import { Observable } from 'rxjs'; +import { BehaviorSubject, Observable } from 'rxjs'; import { Cart } from '../models/cart'; @Injectable({ @@ -11,10 +12,67 @@ export class CartService { private _url : String = "http://localhost:9000"; constructor(private _http : HttpClient) { } - public showAllOrder():Observable + // public showAllOrder():Observable + // { + // return this._http.get(this._url+"/showCart"); + // } + + public cartListItem: any=[] + public productList = new BehaviorSubject([]) + // public addOrder(cart:Cart) + // { + // this._http.post(this._url+"/addCart",cart) + // } + + getProducts() + { + return this.productList.asObservable(); + } + + setProduct(product:any) + { + this.cartListItem.push(...product); + this.productList.next(product); + } + + addtoCart(product:any) + { + this.cartListItem.push(product); + this.productList.next(this.cartListItem) + this.getTotalPrice(); + // console.log(this.cartListItem); + } + + getTotalPrice():number{ + let grandTotal=0; + this.cartListItem.map((a:any)=>{ + grandTotal+=a.productprice; + }) + return grandTotal; + } + + removeCartItem(product:any) + { + this.cartListItem.map((a:any,index:any)=>{ + if(product.productid === a.productid) + { + this.cartListItem.splice(index,1); + } + }) + this.productList.next(this.cartListItem); + } + + removeAllCart() { - return this._http.get(this._url+"/showCart"); + this.cartListItem=[] + this.productList.next(this.cartListItem); } + + + } + + + diff --git a/Angular-UrbanBazaar/src/app/services/product.service.ts b/Angular-UrbanBazaar/src/app/services/product.service.ts index 65db8a6..074c61a 100644 --- a/Angular-UrbanBazaar/src/app/services/product.service.ts +++ b/Angular-UrbanBazaar/src/app/services/product.service.ts @@ -2,6 +2,7 @@ import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { Product } from '../models/product'; +import {map} from 'rxjs/operators'; @Injectable({ providedIn: 'root' @@ -11,8 +12,11 @@ export class ProductService { constructor(private _http : HttpClient) { } - public showAllProduct() : Observable { - return this._http.get(this._url+"/showAllProducts"); + public showAllProduct(){ + return this._http.get(this._url+"/showAllProducts") + .pipe(map((res:any)=>{ + return res; + })) } public searchProduct(name : string) : Observable {