From 84744ca3efd92efba237c23a4d35e8316185eee5 Mon Sep 17 00:00:00 2001 From: gaurav_hexa Date: Thu, 16 Sep 2021 08:47:58 +0530 Subject: [PATCH] the show cart is working and able to show details of cart added and add to cart function is not implemented yet --- .../src/app/app-routing.module.ts | 10 +++++- .../src/app/app.component.html | 3 +- Angular-UrbanBazaar/src/app/app.module.ts | 2 ++ .../app/components/cart/cart.component.css | 0 .../app/components/cart/cart.component.html | 32 +++++++++++++++++++ .../components/cart/cart.component.spec.ts | 25 +++++++++++++++ .../src/app/components/cart/cart.component.ts | 22 +++++++++++++ .../app/components/home/home.component.html | 15 +++++---- .../src/app/components/home/home.component.ts | 9 ++++-- .../src/app/models/cart.spec.ts | 7 ++++ Angular-UrbanBazaar/src/app/models/cart.ts | 13 ++++++++ .../src/app/services/cart.service.spec.ts | 16 ++++++++++ .../src/app/services/cart.service.ts | 20 ++++++++++++ Angular-UrbanBazaar/src/index.html | 1 + 14 files changed, 163 insertions(+), 12 deletions(-) create mode 100644 Angular-UrbanBazaar/src/app/components/cart/cart.component.css create mode 100644 Angular-UrbanBazaar/src/app/components/cart/cart.component.html create mode 100644 Angular-UrbanBazaar/src/app/components/cart/cart.component.spec.ts create mode 100644 Angular-UrbanBazaar/src/app/components/cart/cart.component.ts create mode 100644 Angular-UrbanBazaar/src/app/models/cart.spec.ts create mode 100644 Angular-UrbanBazaar/src/app/models/cart.ts create mode 100644 Angular-UrbanBazaar/src/app/services/cart.service.spec.ts create mode 100644 Angular-UrbanBazaar/src/app/services/cart.service.ts diff --git a/Angular-UrbanBazaar/src/app/app-routing.module.ts b/Angular-UrbanBazaar/src/app/app-routing.module.ts index 35a519e..d1925f4 100644 --- a/Angular-UrbanBazaar/src/app/app-routing.module.ts +++ b/Angular-UrbanBazaar/src/app/app-routing.module.ts @@ -1,15 +1,23 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; +import { CartComponent } from './components/cart/cart.component'; +import { HomeComponent } from './components/home/home.component'; +import { PageNavBarComponent } from './components/page-nav-bar/page-nav-bar.component'; import { UserProfileDetailsComponent } from './components/user-profile-details/user-profile-details.component'; import { UserShowComponent } from './components/user-show/user-show.component'; const routes: Routes = [ + {path:'',component:HomeComponent}, {path:'showAllUsers', component: UserShowComponent}, {path:'profile', component: UserProfileDetailsComponent}, + {path:'showCart',component:CartComponent} + ]; @NgModule({ imports: [RouterModule.forRoot(routes)], - exports: [RouterModule] + + +exports: [RouterModule] }) export class AppRoutingModule { } diff --git a/Angular-UrbanBazaar/src/app/app.component.html b/Angular-UrbanBazaar/src/app/app.component.html index cfdf9f6..a80faec 100644 --- a/Angular-UrbanBazaar/src/app/app.component.html +++ b/Angular-UrbanBazaar/src/app/app.component.html @@ -1,4 +1,3 @@ - - + \ No newline at end of file diff --git a/Angular-UrbanBazaar/src/app/app.module.ts b/Angular-UrbanBazaar/src/app/app.module.ts index 92d429c..493bb30 100644 --- a/Angular-UrbanBazaar/src/app/app.module.ts +++ b/Angular-UrbanBazaar/src/app/app.module.ts @@ -10,6 +10,7 @@ import { UserAddComponent } from './components/user-add/user-add.component'; import { UserProfileDetailsComponent } from './components/user-profile-details/user-profile-details.component'; import { PageNavBarComponent } from './components/page-nav-bar/page-nav-bar.component'; import { HomeComponent } from './components/home/home.component'; +import { CartComponent } from './components/cart/cart.component'; @@ -21,6 +22,7 @@ import { HomeComponent } from './components/home/home.component'; UserProfileDetailsComponent, PageNavBarComponent, HomeComponent, + CartComponent, diff --git a/Angular-UrbanBazaar/src/app/components/cart/cart.component.css b/Angular-UrbanBazaar/src/app/components/cart/cart.component.css new file mode 100644 index 0000000..e69de29 diff --git a/Angular-UrbanBazaar/src/app/components/cart/cart.component.html b/Angular-UrbanBazaar/src/app/components/cart/cart.component.html new file mode 100644 index 0000000..67f870f --- /dev/null +++ b/Angular-UrbanBazaar/src/app/components/cart/cart.component.html @@ -0,0 +1,32 @@ + + + + + + + + Document + + + + + + + + + + + + + + + + + + + + +
productidproductnameproductpriceproductweight
{{c.productname}}{{c.productprice}}{{c.productweight}}
+ + + diff --git a/Angular-UrbanBazaar/src/app/components/cart/cart.component.spec.ts b/Angular-UrbanBazaar/src/app/components/cart/cart.component.spec.ts new file mode 100644 index 0000000..4888049 --- /dev/null +++ b/Angular-UrbanBazaar/src/app/components/cart/cart.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CartComponent } from './cart.component'; + +describe('CartComponent', () => { + let component: CartComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ CartComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(CartComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/Angular-UrbanBazaar/src/app/components/cart/cart.component.ts b/Angular-UrbanBazaar/src/app/components/cart/cart.component.ts new file mode 100644 index 0000000..9e5e39f --- /dev/null +++ b/Angular-UrbanBazaar/src/app/components/cart/cart.component.ts @@ -0,0 +1,22 @@ +import { Component, OnInit } from '@angular/core'; +import { Observable } from 'rxjs'; +import { Cart } from 'src/app/models/cart'; +import { CartService } from 'src/app/services/cart.service'; + +@Component({ + selector: 'app-cart', + templateUrl: './cart.component.html', + styleUrls: ['./cart.component.css'] +}) +export class CartComponent implements OnInit { + + cartdetails:Observable + + constructor(private cartservice:CartService) { + this.cartdetails = this.cartservice.showAllOrder(); + } + + ngOnInit(): void { + } + +} diff --git a/Angular-UrbanBazaar/src/app/components/home/home.component.html b/Angular-UrbanBazaar/src/app/components/home/home.component.html index e34d616..e6872bb 100644 --- a/Angular-UrbanBazaar/src/app/components/home/home.component.html +++ b/Angular-UrbanBazaar/src/app/components/home/home.component.html @@ -12,16 +12,17 @@
+
-
- -
{{i.productname}}
-

Rs.{{i.productprice}}

-

Weight {{i.productweight}}

-

-
+
+ +
{{i.productname}}
+

Rs.{{i.productprice}}

+

Weight {{i.productweight}}

+

+
diff --git a/Angular-UrbanBazaar/src/app/components/home/home.component.ts b/Angular-UrbanBazaar/src/app/components/home/home.component.ts index d21bf95..afa1368 100644 --- a/Angular-UrbanBazaar/src/app/components/home/home.component.ts +++ b/Angular-UrbanBazaar/src/app/components/home/home.component.ts @@ -2,6 +2,9 @@ import { Component, OnInit } from '@angular/core'; import { ProductService } from './../../services/product.service'; import { Observable } from 'rxjs'; 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', @@ -9,8 +12,10 @@ import { Product } from './../../models/product'; styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { + showButton(){ - alert("show cart clicked") + // this.router.navigate(['/showCart']); + this.router.navigateByUrl('/showCart'); } addCart(){ @@ -18,7 +23,7 @@ export class HomeComponent implements OnInit { } products:Observable - constructor(private productservice: ProductService) { + constructor(private productservice: ProductService,private router: Router ) { this.products = this.productservice.showAllProduct(); } diff --git a/Angular-UrbanBazaar/src/app/models/cart.spec.ts b/Angular-UrbanBazaar/src/app/models/cart.spec.ts new file mode 100644 index 0000000..14c7d4d --- /dev/null +++ b/Angular-UrbanBazaar/src/app/models/cart.spec.ts @@ -0,0 +1,7 @@ +import { Cart } from './cart'; + +describe('Cart', () => { + it('should create an instance', () => { + expect(new Cart()).toBeTruthy(); + }); +}); diff --git a/Angular-UrbanBazaar/src/app/models/cart.ts b/Angular-UrbanBazaar/src/app/models/cart.ts new file mode 100644 index 0000000..5c5f2cc --- /dev/null +++ b/Angular-UrbanBazaar/src/app/models/cart.ts @@ -0,0 +1,13 @@ +export class Cart { + + public productid : number; + public productname : string; + public productprice : number; + public productweight : number; + public productshortdesc : string; + public productlongdesc : string; + public productimage : string; + public productcategoryid : number; + + constructor() {} +} diff --git a/Angular-UrbanBazaar/src/app/services/cart.service.spec.ts b/Angular-UrbanBazaar/src/app/services/cart.service.spec.ts new file mode 100644 index 0000000..cb4a750 --- /dev/null +++ b/Angular-UrbanBazaar/src/app/services/cart.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { CartService } from './cart.service'; + +describe('CartService', () => { + let service: CartService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(CartService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/Angular-UrbanBazaar/src/app/services/cart.service.ts b/Angular-UrbanBazaar/src/app/services/cart.service.ts new file mode 100644 index 0000000..c4e0d78 --- /dev/null +++ b/Angular-UrbanBazaar/src/app/services/cart.service.ts @@ -0,0 +1,20 @@ +import { HttpClient } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; +import { Cart } from '../models/cart'; + +@Injectable({ + providedIn: 'root' +}) +export class CartService { + + private _url : String = "http://localhost:9000"; + constructor(private _http : HttpClient) { } + + public showAllOrder():Observable + { + return this._http.get(this._url+"/showCart"); + } + + +} diff --git a/Angular-UrbanBazaar/src/index.html b/Angular-UrbanBazaar/src/index.html index 0ca39b7..7b0aef7 100644 --- a/Angular-UrbanBazaar/src/index.html +++ b/Angular-UrbanBazaar/src/index.html @@ -7,6 +7,7 @@ +