the show cart is working and able to show details of cart added and add to cart function is not implemented yet

4 years ago · 84744ca3ef
14 changed files with 163 additions and 12 deletions
--- 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 { }
--- a/Angular-UrbanBazaar/src/app/app.component.html
+++ b/Angular-UrbanBazaar/src/app/app.component.html
@ -1,4 +1,3 @@
 <app-page-nav-bar></app-page-nav-bar>
 <app-home></app-home>
 <!-- <app-home></app-home> -->
 <router-outlet></router-outlet> 
--- 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,
--- a/Angular-UrbanBazaar/src/app/components/cart/cart.component.css
+++ b/Angular-UrbanBazaar/src/app/components/cart/cart.component.css
--- a/Angular-UrbanBazaar/src/app/components/cart/cart.component.html
+++ b/Angular-UrbanBazaar/src/app/components/cart/cart.component.html
@ -0,0 +1,32 @@
 <!-- <p>cart works!</p> -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 </head>
 <body>
    <table border="2px">
    <tr >
        <td>productid</td>
        <td>productname</td>
        <td>productprice</td>
        <td>productweight</td>
    </tr>  
    <tr *ngFor="let c of cartdetails | async">
        <td>{{c.productname}}</td>
        <td>{{c.productprice}}</td>
        <td>{{c.productweight}}</td>
    </tr> 
    </table>
 </body>
 </html>
--- a/Angular-UrbanBazaar/src/app/components/cart/cart.component.spec.ts
+++ 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<CartComponent>;
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ CartComponent ]
    })
    .compileComponents();
  });
  beforeEach(() => {
    fixture = TestBed.createComponent(CartComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
  it('should create', () => {
    expect(component).toBeTruthy();
  });
 });
--- a/Angular-UrbanBazaar/src/app/components/cart/cart.component.ts
+++ 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<Cart[]>
  constructor(private cartservice:CartService) { 
    this.cartdetails = this.cartservice.showAllOrder();
  }
  ngOnInit(): void {
  }
 }
--- a/Angular-UrbanBazaar/src/app/components/home/home.component.html
+++ b/Angular-UrbanBazaar/src/app/components/home/home.component.html
@ -12,16 +12,17 @@
 <body>
    <div>
        <button class="showButton" (click)="showButton()">ShowCart</button>
    </div>
    <div class="cardParent">
    <div class="card" *ngFor="let i of products|async">
        <img src="{{i.productimage}}" style="width:100%">
        <h6>{{i.productname}}</h6>
        <p class="price">Rs.{{i.productprice}}</p>
        <p class="price">Weight {{i.productweight}}</p>
        <p><button class="Addbutton" (click)="addCart()">Add to Cart</button></p>
      </div>
        <div class="card" *ngFor="let i of products|async">
            <img src="{{i.productimage}}" style="width:100%">
            <h6>{{i.productname}}</h6>
            <p class="price">Rs.{{i.productprice}}</p>
            <p class="price">Weight {{i.productweight}}</p>
            <p><button class="Addbutton" (click)="addCart()">Add to Cart</button></p>
        </div>
    </div>
--- 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<Product[]>
  constructor(private productservice: ProductService) {
  constructor(private productservice: ProductService,private router: Router ) {
    this.products = this.productservice.showAllProduct();
   }
--- a/Angular-UrbanBazaar/src/app/models/cart.spec.ts
+++ 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();
  });
 });
--- a/Angular-UrbanBazaar/src/app/models/cart.ts
+++ 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() {}
 }
--- a/Angular-UrbanBazaar/src/app/services/cart.service.spec.ts
+++ 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();
  });
 });
--- a/Angular-UrbanBazaar/src/app/services/cart.service.ts
+++ 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<Cart[]>
  {
      return this._http.get<Cart[]>(this._url+"/showCart");
  }
 }
--- a/Angular-UrbanBazaar/src/index.html
+++ b/Angular-UrbanBazaar/src/index.html
@ -7,6 +7,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 </head>
 <body>
  <app-root></app-root>