diff --git a/Angular-UrbanBazaar/proxy.config.json b/Angular-UrbanBazaar/proxy.config.json index deccd64..1a87c9c 100644 --- a/Angular-UrbanBazaar/proxy.config.json +++ b/Angular-UrbanBazaar/proxy.config.json @@ -1,19 +1,21 @@ { - "/products":{ - "target":"http://10.3.117.7:8007", - "secure":false + "/user": { + "target": "http://localhost:8500", + "secure": false }, - "/user":{ - "target":"http://10.3.117.7:8008", - "secure":false + + "/products": { + "target": "http://10.3.117.7:8501", + "secure": false }, - "/orders":{ - "target":"http://10.3.117.7:8009", - "secure":false + + "/orders": { + "target": "http://10.3.117.7:8009", + "secure": false }, - "/cart":{ - "target":"http://10.3.117.7:8010", - "secure":false + "/cart": { + "target": "http://10.3.117.7:8504", + "secure": false } } \ No newline at end of file diff --git a/Angular-UrbanBazaar/src/app/app-routing.module.ts b/Angular-UrbanBazaar/src/app/app-routing.module.ts index 72e214b..f8944c5 100644 --- a/Angular-UrbanBazaar/src/app/app-routing.module.ts +++ b/Angular-UrbanBazaar/src/app/app-routing.module.ts @@ -6,20 +6,22 @@ import { CartComponent } from './components/cart/cart.component'; import { HomeComponent } from './components/home/home.component'; import { MemberlistComponent } from './components/memberlist/memberlist.component'; import { UserProfileDetailsComponent } from './components/user-profile-details/user-profile-details.component'; +import { UserprofileComponent } from './components/userprofile/userprofile.component'; const routes: Routes = [ { path: '', component: LoginComponent}, { path: 'login', component: LoginComponent}, { path: 'signup', component: SignUpComponent}, + { path: 'home', component: HomeComponent, + // children: [ + // { path: 'userprofile', component: UserProfileDetailsComponent, outlet: 'user'}, + // { path: 'memberlist', component: MemberlistComponent, outlet: 'member'} + // ] + }, { path: 'user-profile-details', component: UserProfileDetailsComponent}, + { path: 'userprofile', component: UserprofileComponent}, { path: 'memberlist', component: MemberlistComponent}, { path: 'showCart', component: CartComponent}, - { path: 'home', component: HomeComponent, - children: [ - { path: 'user-profile-details', component: UserProfileDetailsComponent, outlet: 'user'}, - { path: 'memberlist', component: MemberlistComponent, outlet: 'member'} - ] - } ]; @NgModule({ diff --git a/Angular-UrbanBazaar/src/app/app.module.ts b/Angular-UrbanBazaar/src/app/app.module.ts index ac81ea0..fd5d930 100644 --- a/Angular-UrbanBazaar/src/app/app.module.ts +++ b/Angular-UrbanBazaar/src/app/app.module.ts @@ -18,6 +18,7 @@ import { FlexLayoutModule } from '@angular/flex-layout'; import { LoginComponent } from './auth/login/login.component'; import { SignUpComponent } from './auth/sign-up/sign-up.component'; import { MemberlistComponent } from './components/memberlist/memberlist.component'; +import { UserprofileComponent } from './components/userprofile/userprofile.component'; @NgModule({ declarations: [ @@ -29,6 +30,7 @@ import { MemberlistComponent } from './components/memberlist/memberlist.componen LoginComponent, SignUpComponent, MemberlistComponent, + UserprofileComponent, ], imports: [ BrowserModule, diff --git a/Angular-UrbanBazaar/src/app/auth/login/login.component.ts b/Angular-UrbanBazaar/src/app/auth/login/login.component.ts index 15838b1..e2d3eb8 100644 --- a/Angular-UrbanBazaar/src/app/auth/login/login.component.ts +++ b/Angular-UrbanBazaar/src/app/auth/login/login.component.ts @@ -34,6 +34,12 @@ export class LoginComponent implements OnInit { this.temp.subscribe((v) => { if (v.userpassword == this.password.value) { this.temp.subscribe((v) => (this._userService.currentUser = v)); + + window.sessionStorage.setItem("username", v.userfirstname); + window.sessionStorage.setItem("user_id", String(v.userid)); + window.sessionStorage.setItem("authcode", btoa(v.userfirstname + ":" + v.userpassword)); + window.sessionStorage.setItem("isLoggedIn", "true"); + this.router.navigateByUrl('/home'); alert('Login Successfull !!'); } else { diff --git a/Angular-UrbanBazaar/src/app/components/cart/cart.component.html b/Angular-UrbanBazaar/src/app/components/cart/cart.component.html index a9bd096..a93fe44 100644 --- a/Angular-UrbanBazaar/src/app/components/cart/cart.component.html +++ b/Angular-UrbanBazaar/src/app/components/cart/cart.component.html @@ -1,4 +1,4 @@ - +
@@ -8,25 +8,26 @@ S.No ProductName ProductPrice - + Action - + {{i+1}} - {{c.productname}} - {{c.productprice}} + {{c.product.productname}} + {{c.product.productprice}} + {{c.quantity}} - + - + - Grand Total : Rs.{{grandTotal}} + Grand Total : Rs.{{totalPrice}}
@@ -35,15 +36,14 @@
- +
My Cart
- +

Your cart is empty!

Add item to it now
diff --git a/Angular-UrbanBazaar/src/app/components/cart/cart.component.ts b/Angular-UrbanBazaar/src/app/components/cart/cart.component.ts index 993a34b..4b966ad 100644 --- a/Angular-UrbanBazaar/src/app/components/cart/cart.component.ts +++ b/Angular-UrbanBazaar/src/app/components/cart/cart.component.ts @@ -1,37 +1,115 @@ import { Component, OnInit } from '@angular/core'; -import { Observable } from 'rxjs'; +import { Router } from '@angular/router'; import { Cart } from 'src/app/models/cart'; -import { User } from 'src/app/models/user'; import { CartService } from 'src/app/services/cart.service'; @Component({ selector: 'app-cart', templateUrl: './cart.component.html', - styleUrls: ['./cart.component.css'] + styleUrls: ['./cart.component.css'], }) export class CartComponent implements OnInit { + cartNo: number = 0; + cartItems: Cart[]; + uid: any = 0; + totalPrice: number = 0; + username: String = ''; + authcode: String = ''; + constructor(private cartService: CartService, private route: Router) {} - public cartdetails:any =[]; - public grandTotal!: number; - - constructor(private cartservice:CartService) { - // this.cartdetails = this.cartservice.showAllOrder(); + ngOnInit(): void { + this.username = window.sessionStorage.getItem('username'); + this.authcode = window.sessionStorage.getItem('authcode'); + if (this.authcode !== null) { + this.uid = window.sessionStorage.getItem('user_id'); + } + this.cartService.getCartByUser(this.uid).subscribe((data1) => { + this.cartNo = data1.length; + this.cartItems = data1; + console.log(this.cartItems); + this.cartItems.forEach((i, index) => { + this.totalPrice = this.totalPrice + i.price; + }); + }); } - ngOnInit(): void { - this.cartservice.getProducts() - .subscribe(res=>{ - this.cartdetails = res; - this.grandTotal = this.cartservice.getTotalPrice(); - }) + public increaseQty(cid: number, quantity: number, discountPrice: number) { + this.totalPrice = 0; + console.log('Increase Quantity'); + let qty: number = quantity + 1; + let amount: number = discountPrice * qty; + let cart: Cart = { + quantity: qty, + price: amount, + }; + console.log(qty, amount); + this.cartItems.forEach((i, index) => { + if (i.cartid == cid) { + this.cartItems[index].quantity = qty; + this.cartItems[index].price = amount; + } + }); + this.cartService.editCartItem(cart, cid).subscribe((data) => {}); + this.cartItems.forEach((i, index) => { + this.totalPrice = this.totalPrice + i.price; + }); + } + + public decreaseQty(cid: number, quantity: number, price: number) { + this.totalPrice = 0; + console.log('Decrease Quantity'); + let amount: number = price - price / quantity; + let qty: number = quantity - 1; + let cart: Cart = { + quantity: qty, + price: amount, + }; + console.log(quantity, qty, price, amount); + this.cartItems.forEach((i, index) => { + if (i.cartid == cid) { + this.cartItems[index].quantity = qty; + this.cartItems[index].price = amount; + } + }); + this.cartService.editCartItem(cart, cid).subscribe((data) => {}); + this.cartItems.forEach((i, index) => { + this.totalPrice = this.totalPrice + i.price; + }); } - removeItem(item:any){ - this.cartservice.removeCartItem(item); + + public deleteCartItems(cid: number) { + this.totalPrice = 0; + this.cartService.deleteCartItem(cid).subscribe((data) => { + this.cartItems.forEach((i, index) => { + if (i.cartid == cid) { + this.cartItems.splice(index, 1); + } + }); + this.cartService.getCartByUser(this.uid).subscribe((data1) => { + this.cartNo = data1.length; + this.cartItems = data1; + console.log(this.cartItems); + this.cartItems.forEach((i, index) => { + this.totalPrice = this.totalPrice + i.price; + }); + }); + }); } - emptyCart() - { - this.cartservice.removeAllCart(); + public onLogout() { + if (this.authcode != null) { + this.authcode = null; + this.username = null; + window.sessionStorage.removeItem('username'); + window.sessionStorage.removeItem('user_id'); + window.sessionStorage.removeItem('authcode'); + window.sessionStorage.removeItem('isLoggedIn'); + this.cartNo = 0; + this.route.navigateByUrl('/home'); + } } + public emptyCartForUser() { + this.cartService.deleteCartByUser(this.uid); + } } diff --git a/Angular-UrbanBazaar/src/app/components/home/home.component.css b/Angular-UrbanBazaar/src/app/components/home/home.component.css index 340a3f9..fe8162c 100644 --- a/Angular-UrbanBazaar/src/app/components/home/home.component.css +++ b/Angular-UrbanBazaar/src/app/components/home/home.component.css @@ -5,39 +5,41 @@ body { padding-bottom: 10px; } -.showCart{ - margin-left: 1250px; +.showCart { + align-self: flex-end; border-radius: 15px; padding: 10px; margin-top: 10px; border-color: antiquewhite; } -.AddToCart{ +.AddToCart { border-radius: 10px; border-color: antiquewhite; color: rgb(0, 0, 0); background-color: rgb(248, 229, 247); font-weight: 600; } -.card{ + +.card { max-width: 300px; border-width: 1px; - border-color:antiquewhite; + border-color: antiquewhite; text-align: center; margin-top: 12px; font-family: Arial, Helvetica, sans-serif; border-radius: 12px; - box-shadow: 0.5em; + box-shadow: 0.5em; } .price { color: grey; font-size: 16px; - } -.cardParent{ +} + +.cardParent { display: flex; - justify-content: space-between; - flex-grow:1; - flex-wrap: wrap; + justify-content: space-between; + flex-grow: 1; + flex-wrap: wrap; } \ No newline at end of file diff --git a/Angular-UrbanBazaar/src/app/components/home/home.component.html b/Angular-UrbanBazaar/src/app/components/home/home.component.html index 24358e8..594e8d2 100644 --- a/Angular-UrbanBazaar/src/app/components/home/home.component.html +++ b/Angular-UrbanBazaar/src/app/components/home/home.component.html @@ -10,14 +10,15 @@ +
- +
{{i.productname}}

Rs. {{i.productprice}}
Weight: {{i.productweight}} Kg

-

+

\ 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 075dd8d..e9693f2 100644 --- a/Angular-UrbanBazaar/src/app/components/home/home.component.ts +++ b/Angular-UrbanBazaar/src/app/components/home/home.component.ts @@ -3,6 +3,7 @@ import { ProductService } from './../../services/product.service'; import { Product } from './../../models/product'; import { Router } from '@angular/router'; import { CartService } from 'src/app/services/cart.service'; +import { Cart } from 'src/app/models/cart'; @Component({ selector: 'app-home', @@ -10,6 +11,9 @@ import { CartService } from 'src/app/services/cart.service'; styleUrls: ['./home.component.css'], }) export class HomeComponent implements OnInit { + uid:any = 0; + username:any = ''; + authcode:any = ''; public products: Product[]; public Searchedproducts: Product[]; searchValue: string = ''; @@ -24,8 +28,13 @@ export class HomeComponent implements OnInit { this.router.navigateByUrl('/showCart'); } - addCart(item: any) { - this.cartservice.addtoCart(item); + addCart(productPrice: number, pid: number) { + let cartData: Cart = { + quantity : 1, + price: productPrice + } + this.cartservice.postCart(cartData, this.uid, pid); + alert("Added "+pid+" with price "+productPrice); } searchProduct() { @@ -44,6 +53,12 @@ export class HomeComponent implements OnInit { this.router.navigateByUrl('/memberlist'); } ngOnInit(): void { + this.username = window.sessionStorage.getItem("username"); + this.authcode = window.sessionStorage.getItem("authcode"); + if (this.authcode !== null) { + this.uid = window.sessionStorage.getItem("user_id"); + } + this.productservice.showAllProduct().subscribe((res) => { this.products = res; this.Searchedproducts = res; diff --git a/Angular-UrbanBazaar/src/app/components/page-nav-bar/page-nav-bar.component.css b/Angular-UrbanBazaar/src/app/components/page-nav-bar/page-nav-bar.component.css index 0474392..8095fbe 100644 --- a/Angular-UrbanBazaar/src/app/components/page-nav-bar/page-nav-bar.component.css +++ b/Angular-UrbanBazaar/src/app/components/page-nav-bar/page-nav-bar.component.css @@ -1,99 +1,112 @@ @import url("//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); -.navbar-icon-top .navbar-nav .nav-link > .fa { - position: relative; - width: 36px; - font-size: 24px; +.navbar-icon-top .navbar-nav .nav-link>.fa { + position: relative; + width: 36px; + font-size: 24px; } -.navbar-icon-top .navbar-nav .nav-link > .fa > .badge { - font-size: 0.75rem; - position: absolute; - right: 0; - font-family: sans-serif; + +.navbar-icon-top .navbar-nav .nav-link>.fa>.badge { + font-size: 0.75rem; + position: absolute; + right: 0; + font-family: sans-serif; } -.navbar-icon-top .navbar-nav .nav-link > .fa { - top: 3px; - line-height: 12px; + +.navbar-icon-top .navbar-nav .nav-link>.fa { + top: 3px; + line-height: 12px; } -.navbar-icon-top .navbar-nav .nav-link > .fa > .badge { - top: -10px; + +.navbar-icon-top .navbar-nav .nav-link>.fa>.badge { + top: -10px; } + @media (min-width: 576px) { - .navbar-icon-top.navbar-expand-sm .navbar-nav .nav-link { - text-align: center; - display: table-cell; - height: 70px; - vertical-align: middle; - padding-top: 0; - padding-bottom: 0; - } - .navbar-icon-top.navbar-expand-sm .navbar-nav .nav-link > .fa { - display: block; - width: 48px; - margin: 2px auto 4px auto; - top: 0; - line-height: 24px; - } - .navbar-icon-top.navbar-expand-sm .navbar-nav .nav-link > .fa > .badge { - top: -7px; - } + .navbar-icon-top.navbar-expand-sm .navbar-nav .nav-link { + text-align: center; + display: table-cell; + height: 70px; + vertical-align: middle; + padding-top: 0; + padding-bottom: 0; + } + .navbar-icon-top.navbar-expand-sm .navbar-nav .nav-link>.fa { + display: block; + width: 48px; + margin: 2px auto 4px auto; + top: 0; + line-height: 24px; + } + .navbar-icon-top.navbar-expand-sm .navbar-nav .nav-link>.fa>.badge { + top: -7px; + } } + @media (min-width: 768px) { - .navbar-icon-top.navbar-expand-md .navbar-nav .nav-link { - text-align: center; - display: table-cell; - height: 70px; - vertical-align: middle; - padding-top: 0; - padding-bottom: 0; - } - .navbar-icon-top.navbar-expand-md .navbar-nav .nav-link > .fa { - display: block; - width: 48px; - margin: 2px auto 4px auto; - top: 0; - line-height: 24px; - } - .navbar-icon-top.navbar-expand-md .navbar-nav .nav-link > .fa > .badge { - top: -7px; - } + .navbar-icon-top.navbar-expand-md .navbar-nav .nav-link { + text-align: center; + display: table-cell; + height: 70px; + vertical-align: middle; + padding-top: 0; + padding-bottom: 0; + } + .navbar-icon-top.navbar-expand-md .navbar-nav .nav-link>.fa { + display: block; + width: 48px; + margin: 2px auto 4px auto; + top: 0; + line-height: 24px; + } + .navbar-icon-top.navbar-expand-md .navbar-nav .nav-link>.fa>.badge { + top: -7px; + } } + @media (min-width: 992px) { - .navbar-icon-top.navbar-expand-lg .navbar-nav .nav-link { - text-align: center; - display: table-cell; - height: 70px; - vertical-align: middle; - padding-top: 0; - padding-bottom: 0; - } - .navbar-icon-top.navbar-expand-lg .navbar-nav .nav-link > .fa { - display: block; - width: 48px; - margin: 2px auto 4px auto; - top: 0; - line-height: 24px; - } - .navbar-icon-top.navbar-expand-lg .navbar-nav .nav-link > .fa > .badge { - top: -7px; - } + .navbar-icon-top.navbar-expand-lg .navbar-nav .nav-link { + text-align: center; + display: table-cell; + height: 70px; + vertical-align: middle; + padding-top: 0; + padding-bottom: 0; + } + .navbar-icon-top.navbar-expand-lg .navbar-nav .nav-link>.fa { + display: block; + width: 48px; + margin: 2px auto 4px auto; + top: 0; + line-height: 24px; + } + .navbar-icon-top.navbar-expand-lg .navbar-nav .nav-link>.fa>.badge { + top: -7px; + } } + @media (min-width: 1200px) { - .navbar-icon-top.navbar-expand-xl .navbar-nav .nav-link { - text-align: center; - display: table-cell; - height: 70px; - vertical-align: middle; - padding-top: 0; - padding-bottom: 0; - } - .navbar-icon-top.navbar-expand-xl .navbar-nav .nav-link > .fa { - display: block; - width: 48px; - margin: 2px auto 4px auto; - top: 0; - line-height: 24px; - } - .navbar-icon-top.navbar-expand-xl .navbar-nav .nav-link > .fa > .badge { - top: -7px; - } + .navbar-icon-top.navbar-expand-xl .navbar-nav .nav-link { + text-align: center; + display: table-cell; + height: 70px; + vertical-align: middle; + padding-top: 0; + padding-bottom: 0; + } + .navbar-icon-top.navbar-expand-xl .navbar-nav .nav-link>.fa { + display: block; + width: 48px; + margin: 2px auto 4px auto; + top: 0; + line-height: 24px; + } + .navbar-icon-top.navbar-expand-xl .navbar-nav .nav-link>.fa>.badge { + top: -7px; + } +} + +.text-button { + border: 0px; + color: #000; + background-color: aliceblue; } \ No newline at end of file diff --git a/Angular-UrbanBazaar/src/app/components/page-nav-bar/page-nav-bar.component.html b/Angular-UrbanBazaar/src/app/components/page-nav-bar/page-nav-bar.component.html index b008910..7ebff71 100644 --- a/Angular-UrbanBazaar/src/app/components/page-nav-bar/page-nav-bar.component.html +++ b/Angular-UrbanBazaar/src/app/components/page-nav-bar/page-nav-bar.component.html @@ -1,18 +1,19 @@