mohiit1502/bookstore-angular
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

latest

Browse Source
This commit is contained in:
Le Deng
2017-03-10 18:36:10 -05:00
parent 9ccb1c2659
commit 8c688f0db4
4 changed files with 37 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,21 +1,20 @@
<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="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"/>
<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>
@@ -31,7 +30,6 @@
<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;">
@@ -41,23 +39,21 @@
<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>
>{{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>
<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
<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" (click)="onAddToCart()" class="btn btn-warning"
style="color: black;border:1px solid black; padding: 10px 40px 10px 40px;">
<button md-raised-button [disabled]="book.inStockNumber==0" (click)="onAddToCart()" class="mat-primary">
Add to Cart
</button>
</div>
@@ -70,5 +66,5 @@
<p>{{book.description}}</p>
</div>
</div>
</div>
</div>
</div>
</div>

7
store-front/src/app/components/order/order.component.html
View File

@@ -296,12 +296,12 @@
<h4>Choose your shipping method:</h4>
<div class="radio ">
<label>
<input type="radio " name="shippingMethod " value="groundShipping " checked="checked " /> Ground Shipping
<input type="radio" name="shippingMethod " value="groundShipping " checked="checked " /> Ground Shipping
</label>
</div>
<div class="radio ">
<label>
<input type="radio " name="shippingMethod " value="premiumShipping " /> Premium Shipping
<input type="radio" name="shippingMethod " value="premiumShipping " /> Premium Shipping
</label>
</div>
<div class="row ">
@@ -319,12 +319,11 @@
<a md-button (click)="onSelect(cartItem.book)"><img class="img-responsive shelf-book" src="{{serverPath}}/image/book/{{cartItem.book.id}}.png" style="width:70px;" /></a>
</div>
<div class="col-xs-6 ">
<a (click)="onSelect(cartItem.book)"><h4>{{cartItem.book.title}}</h4></a>
<a class="pointer" (click)="onSelect(cartItem.book)"><h4>{{cartItem.book.title}}</h4></a>
<p *ngIf="cartItem.book.inStockNumber > 10" style="color: green;">In Stock</p>
<p *ngIf="cartItem.book.inStockNumber < 10 && cartItem.book.inStockNumber > 0" style="color: green;"> Only <span>{{cartItem.book.inStockNumber}}</span> In Stock
</p>
<p style="color: darkred;" *ngIf="cartItem.book.inStockNumber==0">Product Unavailable</p>
<a class="pointer" (click)="onRemoveCartItem(cartItem)">delete</a>
</div>
<div class="col-xs-2 ">
<h5 style="color: #db3208; font-size: large;">$<span [ngClass]="{'text-strike': cartItem.book.inStockNumber == 0 }"

5
store-front/src/app/components/order/order.component.ts
View File

@@ -94,6 +94,7 @@ export class OrderComponent implements OnInit {
this.payment.cvc = userPayment.cvc;
this.payment.holderName = userPayment.holderName;
this.payment.defaultPayment = userPayment.defaultPayment;
this.payment.billingAddress.billingAddressName = userPayment.userBilling.userBillingName;
this.payment.billingAddress.billingAddressStreet1 = userPayment.userBilling.userBillingStreet1;
this.payment.billingAddress.billingAddressStreet2 = userPayment.userBilling.userBillingStreet2;
this.payment.billingAddress.billingAddressCity = userPayment.userBilling.userBillingCity;
@@ -122,6 +123,8 @@ export class OrderComponent implements OnInit {
}
}
ngOnInit() {
this.getCartItemList();
@@ -163,7 +166,7 @@ export class OrderComponent implements OnInit {
}
this.payment.billingAddress = this.billingAddress;
this.payment.type="";
this.payment.expiryMonth="";
this.payment.expiryYear="";
this.billingAddress.billingAddressState="";

13
store-front/src/app/components/shopping-cart/shopping-cart.component.ts
View File

@@ -31,6 +31,7 @@ export class ShoppingCartComponent implements OnInit {
res=>{
console.log(res.text());
this.getCartItemList();
this.getShoppingCart();
},
error=>{
console.log(error.text());
@@ -43,6 +44,7 @@ export class ShoppingCartComponent implements OnInit {
res=>{
console.log(res.text());
this.cartItemUpdated=true;
this.getShoppingCart();
},
error=>{
console.log(error.text());
@@ -62,10 +64,7 @@ export class ShoppingCartComponent implements OnInit {
);
}
ngOnInit() {
this.getCartItemList();
getShoppingCart(){
this.cartService.getShoppingCart().subscribe(
res=>{
console.log(res.json());
@@ -77,4 +76,10 @@ export class ShoppingCartComponent implements OnInit {
);
}
ngOnInit() {
this.getCartItemList();
this.getShoppingCart();
}
}