latest

store-front/src/app/app.module.ts

@@ -22,6 +22,7 @@ import { BookService } from './services/book.service';
 import { MyAccountComponent } from './components/my-account/my-account.component';
 import { MyProfileComponent } from './components/my-profile/my-profile.component';
 import { BookListComponent } from './components/book-list/book-list.component';
+import { BookDetailComponent } from './components/book-detail/book-detail.component';
 
 @NgModule({
   declarations: [
@@ -31,7 +32,8 @@ import { BookListComponent } from './components/book-list/book-list.component';
     NavBarComponent,
     MyAccountComponent,
     MyProfileComponent,
-    BookListComponent
+    BookListComponent,
+    BookDetailComponent
   ],
   imports: [
     BrowserModule,

store-front/src/app/app.routing.ts

@@ -8,7 +8,7 @@ import {HomeComponent} from './components/home/home.component';
 import {MyAccountComponent} from './components/my-account/my-account.component';
 import {MyProfileComponent} from './components/my-profile/my-profile.component';
 import {BookListComponent} from './components/book-list/book-list.component';
-
+import {BookDetailComponent} from './components/book-detail/book-detail.component';
 
 const appRoutes: Routes = [
   {
@@ -31,6 +31,10 @@ const appRoutes: Routes = [
   {
     path: 'bookList',
     component: BookListComponent
+  },
+  {
+    path: 'bookDetail/:id',
+    component: BookDetailComponent
   }
 ];
 

store-front/src/app/components/book-detail/book-detail.component.html

@@ -0,0 +1,74 @@
+<div class="container" style="margin-top: 20px;">
+	<div class="row">
+                <div class="col-xs-8">
+                    <h2 class="section-headline"><span>All Books</span></h2>
+                </div>
+                <div class="col-xs-4">
+                    <a href="#"><img src="{{serverPath}}/image/logo.png" class="img-responsive"/></a>
+                </div>
+            </div>
+            <hr style="position: absolute; width:100%; height:6px; background-color: #333; z-index: -1; margin-top: -80px;"/>
+            <img class="img-responsive" src="{{serverPath}}/image/wood.png" style="margin-top: -75px;"/>
+
+	<div class="row">
+		<div class="row" style="margin-top: 120px;">
+            <div class="col-xs-3">
+                <a routerLink="/bookList" routerLinkActive="active">Back to book list</a>
+                <br />
+                <img class="img-responsive" src="{{serverPath}}/image/book/{{book.id}}.png"/>
+            </div>
+            <div class="col-xs-9">
+                <h3><span *ngIf="addBookSuccess" style="color: forestgreen"><i class="fa fa-check" aria-hidden="true" style="color: forestgreen"></i>Added to cart.</span></h3>
+                <h3><span *ngIf="notEnoughStock" style="color: red">Oops, only <span>{{book.inStockNumber}}</span> In Stock.</span></h3>
+                <h3>{{book.title}}</h3>
+                <div class="row">
+                    <div class="col-xs-5">
+                        <h5><strong>Author:</strong> <span>{{book.author}}</span></h5>
+                        <p><strong>Publisher:</strong> <span>{{book.publisher}}</span></p>
+                        <p><strong>Publication Date:</strong> <span>{{book.publicationDate}}</span></p>
+                        <p><strong>Language:</strong> <span>{{book.language}}</span></p>
+                        <p><strong>Category:</strong> <span>{{book.category}}</span></p>
+                        <p><strong><span>{{book.format}}</span>:</strong> <span>{{book.numberOfPages}}</span> pages</p>
+                        <p><strong>ISBN:</strong> <span>{{book.isbn}}</span></p>
+                        <p><strong>Shipping Weight:</strong> <span>{{book.shippingWeight}}</span> ounces</p>
+
+                    </div>
+                    <div class="col-xs-7">
+                        <div class="panel panel-default" style="border-width: 5px; margin-top: 20px;">
+                            <div class="panel-body">
+                                <div class="row">
+                                    <div class="col-xs-6">
+                                        <h4>Our Price: <span style="color: #db3208;">$<span
+                                                >{{book.ourPrice | number : '1.2-2'}}</span></span></h4>
+                                        <p>List Price: <span style="text-decoration: line-through;">$<span
+                                                >{{book.listPrice | number : '1.2-2'}}</span></span></p>
+                                        <p>You Save: $<span
+                                                >{{book.listPrice-book.ourPrice | number : '1.2-2'}}</span>
+                                        </p>
+                                        <span>Qty: </span>
+                                        <select [(ngModel)]="qty" class="browser-default" style="width: 50px;display: inline;">
+                                            <option *ngFor="let x of numberList" [ngValue]="x" >{{x}}</option>
+                                        </select>
+                                    </div>
+                                    <div class="col-xs-6">
+                                        <h4 *ngIf="book.inStockNumber>10" style="color: green;">In Stock</h4>
+                                        <h4 *ngIf="book.inStockNumber<10 && book.inStockNumber>0"
+                                            style="color: green;"> Only <span>{{book.inStockNumber}}</span> In
+                                            Stock</h4>
+                                        <h4 *ngIf="book.inStockNumber==0" style="color: darkred;">Unavailable</h4>
+                                        <button [disabled]="book.inStockNumber==0" type="submit" class="btn btn-warning"
+                                                style="color: black;border:1px solid black; padding: 10px 40px 10px 40px;">
+                                            Add to Cart
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <hr/>
+                <p>{{book.description}}</p>
+            </div>
+        </div>
+	</div>
+</div>

store-front/src/app/components/book-detail/book-detail.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { BookDetailComponent } from './book-detail.component';
+
+describe('BookDetailComponent', () => {
+  let component: BookDetailComponent;
+  let fixture: ComponentFixture<BookDetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BookDetailComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BookDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

store-front/src/app/components/book-detail/book-detail.component.ts

@@ -0,0 +1,40 @@
+import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import {Book} from "../../models/book";
+import {BookService} from "../../services/book.service";
+import {Params, ActivatedRoute,Router} from "@angular/router";
+import {Http} from "@angular/http";
+import {AppConst} from '../../constants/app-const';
+
+@Component({
+  selector: 'app-book-detail',
+  templateUrl: './book-detail.component.html',
+  styleUrls: ['./book-detail.component.css']
+})
+export class BookDetailComponent implements OnInit {
+
+  private bookId: number;
+  private book: Book = new Book();
+  private serverPath = AppConst.serverPath;
+  private numberList: number[]=[1,2,3,4,5,6,7,8,9];
+  private qty:number;
+
+  private addBookSuccess:boolean = false;
+  private notEnoughStock:boolean = false;
+
+  constructor(private bookService: BookService, private route: ActivatedRoute, private router:Router) {
+    this.route.params.forEach((params: Params) => {
+      this.bookId = Number.parseInt(params['id']);
+    });
+
+    this.bookService.getBook(this.bookId).subscribe(
+      res => {
+        this.book=res.json();
+      },
+      error => console.log(error)
+    );
+  }
+
+  ngOnInit() {
+  }
+
+}

store-front/src/app/components/book-list/book-list.component.ts

@@ -12,8 +12,8 @@ import {AppConst} from '../../constants/app-const';
 })
 export class BookListComponent implements OnInit {
 
-    public filterQuery = "";
-    public rowsOnPage = 10;
+  public filterQuery = "";
+  public rowsOnPage = 10;
 
   private selectedBook : Book;
   private bookList: Book[];

store-front/src/app/services/book.service.ts

@@ -1,5 +1,7 @@
 import { Injectable } from '@angular/core';
 import {Headers, Http} from "@angular/http";
+import {AppConst} from '../constants/app-const';
+
 
 @Injectable()
 export class BookService {
@@ -7,7 +9,15 @@ export class BookService {
   constructor(private http: Http) { }
 
   getBookList() {
-    let url = "http://localhost:8181/book/bookList";
+    let url = AppConst.serverPath+"/book/bookList";
+    let tokenHeader = new Headers ({
+      'x-auth-token' : localStorage.getItem("xAuthToken")
+    });
+    return this.http.get(url, {headers : tokenHeader});
+  }
+
+  getBook(id:number) {
+    let url = AppConst.serverPath+"/book/"+id;
     let tokenHeader = new Headers ({
       'x-auth-token' : localStorage.getItem("xAuthToken")
     });