From 7e676cc098209c81484f168a243381bd54cc59a2 Mon Sep 17 00:00:00 2001
From: Nadav Mary <danielkagan86@gmail.com>
Date: Mon, 5 Mar 2018 19:45:57 +0200
Subject: [PATCH] nadavs changes for lecture

---
 package.json                                  |  9 +++--
 src/app/components/top/top.component.ts       |  2 +-
 src/app/containers/cart/cart.component.ts     | 40 +++++++++++--------
 .../order-details/order-details.component.ts  |  9 ++++-
 4 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index 534886b..9185736 100644
--- a/package.json
+++ b/package.json
@@ -5,9 +5,11 @@
   "scripts": {
     "ng": "ng",
     "start": "concurrently --kill-others \"npm run application\" \"npm run server\"",
-    "application": "ng serve",
+    "application": "ng serve --aot",
     "server": "nodemon server.js",
-    "build": "ng build --prod",
+    "build": "ng build --prod --aot",
+    "build-with-stats": "ng build --prod --aot --stats-json",
+    "bundle-report": "webpack-bundle-analyzer dist/stats.json",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
@@ -54,6 +56,7 @@
     "protractor": "~5.1.2",
     "ts-node": "~4.1.0",
     "tslint": "~5.9.1",
-    "typescript": "~2.5.3"
+    "typescript": "~2.5.3",
+    "webpack-bundle-analyzer": "^2.11.1"
   }
 }
diff --git a/src/app/components/top/top.component.ts b/src/app/components/top/top.component.ts
index 55e66bb..8cc9725 100644
--- a/src/app/components/top/top.component.ts
+++ b/src/app/components/top/top.component.ts
@@ -23,7 +23,7 @@ import { AutoUnsubscribe } from "ngx-auto-unsubscribe";
 export class TopComponent implements OnInit, OnDestroy {
 
   public cartLabel$: Observable<string>;
-  private items: MenuItem[];
+  public items: MenuItem[];
   private cartSubscription: Subscription;
 
   constructor(private router: Router, private ngRedux: NgRedux<IPizzariumState>) { }
diff --git a/src/app/containers/cart/cart.component.ts b/src/app/containers/cart/cart.component.ts
index 41525bf..42b2a94 100644
--- a/src/app/containers/cart/cart.component.ts
+++ b/src/app/containers/cart/cart.component.ts
@@ -10,26 +10,30 @@ import { IPizzariumState } from '../../app.module';
   styleUrls: ['./cart.component.css'],
   template: `
     <p-growl [(value)]="msgs"></p-growl>
-    <div *ngIf="(orders$ | async)?.length === 0">No items in cart</div>
-    <div class="cart-container">
-      <div *ngFor="let order of orders$ | async; let orderIndex = index" class="order">
-        <div>Size: {{ order.selectedPizza.value }} - {{ order.selectedPizza.extraData.price }}₪</div>
-        <div *ngIf="order.selectedToppings.length > 0">
-        <div>Toppings:</div>
-          <div *ngFor="let selectedTopping of order.selectedToppings; let i = index">
-            <img [src]="selectedTopping.img" class="topping-image" [title]="selectedTopping.value" /><span>- {{selectedTopping.extraData.price}}₪</span>
+    <ng-container *ngIf="orders$ | async as orders">
+      <div *ngIf="orders.length > 0; else noOrders" class="cart-container">
+        <div *ngFor="let order of orders; let orderIndex = index" class="order">
+          <div>Size: {{ order.selectedPizza.value }} - {{ order.selectedPizza.price }}₪</div>
+          <div *ngIf="order.selectedToppings.length > 0; else noToppings">
+            <div>Toppings:</div>
+            <div *ngFor="let selectedTopping of order.selectedToppings; let i = index">
+              <img [src]="selectedTopping.img" class="topping-image" [title]="selectedTopping.value" /><span>- {{selectedTopping.price}}₪</span>
+            </div>
+          </div>
+          <ng-template #noToppings>
+            No toppings selected.
+          </ng-template>
+          <div class="order-pizza-size">
+            <div>Total: {{ order.getTotalPrice() }}₪</div>
+            <i class="delete-pizza fa fa-times" (click)="deletePizzaFromCart(order, orderIndex)"></i>
           </div>
-        </div>
-        <div *ngIf="order.selectedToppings.length === 0">
-          No toppings selected.
-        </div>
-        <div class="order-pizza-size">
-          <div>Total: {{ order.getTotalPrice() }}₪</div>
-          <i class="delete-pizza fa fa-times" (click)="deletePizzaFromCart(order, orderIndex)"></i>
         </div>
       </div>
-    </div>
-    <h2>Total price: {{ totalPrice$ | async }}₪</h2>
+      <ng-template #noOrders>
+        No items in cart
+      </ng-template>
+      <h2>Total price: {{ totalPrice$ | async }}₪</h2>
+    </ng-container>
     <div class="cart-footer"> 
       <p-button label="Clear Cart" icon="fa fa-trash" (click)="clearCart()"></p-button>
       <p-button label="Order" icon="fa fa-fw fa-check" (click)="order()"></p-button>
@@ -41,6 +45,8 @@ export class CartComponent {
   @select(['ui', 'orders']) orders$;
   @select(['ui', 'totalPrice']) totalPrice$;
 
+  public msgs;
+
   constructor(private ngRedux: NgRedux<IPizzariumState>, private messageService: MessageService, private router: Router) { }
 
   public deletePizzaFromCart(order: Order, pizzaIndex: number): void {
diff --git a/src/app/containers/order-details/order-details.component.ts b/src/app/containers/order-details/order-details.component.ts
index 72ae526..6b5f3fd 100644
--- a/src/app/containers/order-details/order-details.component.ts
+++ b/src/app/containers/order-details/order-details.component.ts
@@ -11,8 +11,12 @@ import { IPizzariumState } from '../../app.module';
   styleUrls: ['./order-details.component.css'],
   template: `
     <p-growl [(value)]="msgs"></p-growl>
-    <image-selector #sizesSelector *ngIf="sizes$ | async" [data]="sizes$ | async" (selectionChanged)=onSizeSelectedChanged($event)></image-selector>
-    <image-selector #toppingsSelector *ngIf="toppings$ | async" [data]="toppings$ | async" [multiSelect]="true" [itemsInRow]="7" (selectionChanged)=onToppingsSelectedChanged($event)></image-selector>
+    <ng-container *ngIf="sizes$ | async as sizes">
+      <image-selector #sizesSelector [data]="sizes" (selectionChanged)=onSizeSelectedChanged($event)></image-selector>
+    </ng-container>
+    <ng-container *ngIf="toppings$ | async as toppings">
+      <image-selector #toppingsSelector [data]="toppings" [multiSelect]="true" [itemsInRow]="7" (selectionChanged)=onToppingsSelectedChanged($event)></image-selector>
+    </ng-container>
     <div class="order-details-footer"> 
       <p-button label="Clear Order" icon="fa fa-trash" (click)=clear()></p-button>
       <p-button label="Add" icon="fa fa-cart-plus" (click)="addOrder()"></p-button>
@@ -26,6 +30,7 @@ export class OrderDetailsComponent {
   @ViewChild("sizesSelector") sizesRef: ImageSelectorComponent;
   @ViewChild("toppingsSelector") toppingsRef: ImageSelectorComponent;
 
+  public msgs;
   private currentOrder: Order;
 
   constructor(private ngRedux: NgRedux<IPizzariumState>, private messageService: MessageService) {