#115 added check out component

NerdCats · Aug 21, 2016 · 2819250 · 2819250
1 parent a174c79
commit 2819250
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 2 deletions.
diff --git a/app/cart/cart-icon/cart-icon.component.css b/app/cart/cart-icon/cart-icon.component.css
@@ -5,13 +5,15 @@ i {
 
 .quantity-background {
     border-radius: 50%;
-    background-color: red;
     float: right;
     margin-left: 5px;
     width: 20px;
     text-align: center;
 }
 
+.has-item {
+    background-color: red;
+}
 
 textarea {
     width: 100%;

diff --git a/app/cart/cart-icon/cart-icon.component.html b/app/cart/cart-icon/cart-icon.component.html
@@ -1,6 +1,6 @@
 <div (click)="openShoppingCartModal()">
     <i class="fa fa-shopping-cart fa-lg" aria-hidden="true"></i>
-    <div class="quantity-background">
+    <div class="quantity-background {{cartNumberCss}}">
         <strong>{{numberOfItems}}</strong>
     </div>
 </div>

diff --git a/app/cart/cart-icon/cart-icon.component.ts b/app/cart/cart-icon/cart-icon.component.ts
@@ -16,6 +16,7 @@ import { Observable } from 'rxjs';
 export class CartIconComponent implements OnInit{
     numberOfItems: number = 0;
     orderCart: OrderModel;
+    cartNumberCss: string = "no-item";
     ngOnInit(){
         this.orderCart = OrderCart.getOrderCart();
         this.update();
@@ -24,6 +25,9 @@ export class CartIconComponent implements OnInit{
    public update(){
         OrderCart.update();
         this.numberOfItems = OrderCart.totalQuantity();
+        if(this.numberOfItems > 0)
+            this.cartNumberCss = "has-item";
+        else this.cartNumberCss = "";
     }
 
     itemChanged(value){

diff --git a/app/cart/check-out/check-out.component.css b/app/cart/check-out/check-out.component.css
diff --git a/app/cart/check-out/check-out.component.html b/app/cart/check-out/check-out.component.html
@@ -0,0 +1 @@
+<h1>Check out</h1>
diff --git a/app/cart/check-out/check-out.component.ts b/app/cart/check-out/check-out.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'check-out',
+    templateUrl: 'app/cart/check-out/check-out.component.html',
+    styleUrls: ['app/cart/check-out/check-out.component.css']
+})
+
+
+export class CheckOutComponent {
+
+}
diff --git a/app/shared/router.config.ts b/app/shared/router.config.ts
@@ -11,6 +11,7 @@ import { OrderComponent } from '../dashboard/order/order.component';
 import {JobHistoryComponent} from '../job/job-history/job-history.component';
 import {DashboardComponent} from '../dashboard/dashboard.component';
 import {VendorMenuComponent} from '../vendor-menu/vendor-menu.component';
+import {CheckOutComponent} from '../cart/check-out/check-out.component';
 
 
 export const Routes = [
@@ -39,7 +40,13 @@ export const Routes = [
         path: '/vendors/:vendorId',
         name: 'VendorMenu',
         component: VendorMenuComponent
+    },
+    {
+        path: '/checkout',
+        name: 'Checkout',
+        component: CheckOutComponent
     }
+
 ]
 
 export const PublicRoutes = [

diff --git a/app/vendor-menu/vendor-menu.component.ts b/app/vendor-menu/vendor-menu.component.ts
@@ -7,6 +7,7 @@ import { OrderModel, PackageListModel } from ".././shared/model/order-model";
 import { OrderCart } from '.././shared/model/order-cart';
 
 
+
 @Component({
     selector: 'vendor-menu',
     templateUrl: 'app/vendor-menu/vendor-menu.component.html',