chap02 -> Creating templates -> The finish-order-modal template

ko-cart/index.html

@@ -10,17 +10,9 @@
       <div class="row" id="catalogContainer">
         <div class="col-xs-12" data-bind="template:{name:'header'}"></div>
         <div class="col-xs-6" data-bind="template:{name:'catalog'}"></div>
-        <div
+        <div id="cartContainer" class="col-xs-6 well hidden" data-bind="template:{name:'cart'}"></div>
-          id="cartContainer"
-          class="col-xs-6 well hidden"
-          data-bind="template:{name:'cart'}"
-        ></div>
       </div>
-      <div
+      <div class="row hidden" id="orderContainer" data-bind="template:{name:'order'}"></div>
-        class="row hidden"
-        id="orderContainer"
-        data-bind="template:{name:'order'}"
-      ></div>
       <div data-bind="template: {name:'add-to-catalog-modal'}"></div>
       <div data-bind="template: {name:'finish-order-modal'}"></div>
     </div>
@@ -84,12 +76,141 @@
         </tfoot>
       </table>
     </script>
-    <script type="text/html" id="add-to-catalog-modal"></script>
+    <script type="text/html" id="add-to-catalog-modal">
-    <script type="text/html" id="cart-widget"></script>
+      <div class="modal fade" id="addToCatalogModal">
-    <script type="text/html" id="cart-item"></script>
+        <div class="modal-dialog">
-    <script type="text/html" id="cart"></script>
+          <div class="modal-content">
-    <script type="text/html" id="order"></script>
+            <form class="form-horizontal" role="form" data-bind="with:newProduct">
-    <script type="text/html" id="finish-order-modal"></script>
+              <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal">
+                  <span aria-hidden="true">&times;</span>
+                  <span class="sr-only">Close</span>
+                </button>
+                <h3>Add New Product to the Catalog</h3>
+              </div>
+              <div class="modal-body">
+                <div class="form-group">
+                  <div class="col-sm-12">
+                    <input type="text" class="form-control" placeholder="Name" data-bind="textInput:name">
+                  </div>
+                </div>
+                <div class="form-group">
+                  <div class="col-sm-12">
+                    <input type="text" class="form-control" placeholder="Price" data-bind="textInput:price">
+                  </div>
+                </div>
+                <div class="form-group">
+                  <div class="col-sm-12">
+                    <input type="text" class="form-control" placeholder="Stock" data-bind="textInput:stock">
+                  </div>
+                </div>
+              </div>
+              <div class="modal-footer">
+                <div class="form-group">
+                  <div class="col-sm-12">
+                    <button type="submit" class="btn btn-default" data-bind="{click:$parent.addProduct}">
+                      <i class="glyphicon glyphicon-plus-sign"></i> Add Product
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </form>
+          </div> <!-- /.modal-content -->
+        </div> <!-- /.modal-diaglog -->
+      </div> <!-- /.modal -->
+    </script>
+    <script type="text/html" id="cart-widget">
+      Total Items: <span data-bind="text:totalItems"></span>
+      Price: <span data-bind="text:grandTotal"></span>
+    </script>
+    <script type="text/html" id="cart-item">
+      <div class="list-group-item" style="overflow: hidden">
+        <button type="button" class="close pull-right" data-bind="click:$root.removeFromCart">
+          <span>&times;</span>
+        </button>
+        <h4 class="" data-bind="text:product.name"></h4>
+        <div class="input-group cart-unit">
+          <input type="text" class="form-control" data-bind="textInput:units" readonly/>
+          <span class="input-group-addon">
+            <div class="btn-group-vertical">
+              <button class="btn btn-default btn-xs" data-bind="click:addUnit">
+                <i class="glyphicon glyphicon-chevron-up"></i>
+              </button>
+              <button class="btn btn-default btn-xs" data-bind="click:removeUnit">
+                <i class="glyphicon glyphicon-chevron-down"></i>
+              </button>
+            </div>
+          </span>
+        </div>
+      </div>
+    </script>
+    <script type="text/html" id="cart">
+      <button type="button" class="close pull-right" data-bind="click:hideCartDetails">
+        <span>&times;</span>
+      </button>
+      <h1>Cart</h1>
+      <div data-bind="template: {name: 'cart-item', foreach:cart}" class="list-group"></div>
+      <div data-bind="template: {name: 'cart-widget'}"></div>
+      <button class="btn btn-primary btn-sm" data-binid="click:showOrder">
+        Confirm Order
+      </button>
+    </script>
+    <script type="text/html" id="order">
+      <div class="col-xs-12">
+        <button class="btn btn-sm btn-primary" data-bind="click:showCatalog">
+          Back to catalog
+        </button>
+        <button class="btn btn-sm btn-primary" data-bind="click:finishOrder">
+          Buy & finish
+        </button>
+      </div>
+      <div class="col-xs-6">
+        <table class="table">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Price</th>
+              <th>Units</th>
+              <th>Subtotal</th>
+            </tr>
+          </thead>
+          <tbody data-bind="foreach:cart">
+            <tr>
+              <td data-bind="text:product.name"></td>
+              <td data-bind="text:product.price"></td>
+              <td data-bind="text:units"></td>
+              <td data-bind="text:subtotal"></td>
+            </tr>
+          </tbody>
+          <tfoot>
+            <tr>
+              <td colspan="3"></td>
+              <td>
+                Total: <span data-bind="text:grandTotal"></span>
+              </td>
+            </tr>
+          </tfoot>
+        </table>
+      </div>
+    </script>
+    <script type="text/html" id="finish-order-modal">
+      <div class="modal fade" id="finishOrderModal">
+        <div class="modal-dialog">
+          <div class="modal-content">
+            <div class="modal-body">
+              <h2>Your order has been completed!</h2>
+            </div>
+            <div class="modal-footer">
+              <div class="form-group">
+                <div class="col-sm-12">
+                  <button type="submit" class="btn btn-success" data-dismiss="modal">Continue Shopping</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </script>
     <!-- vendor library -->
     <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
     <script type="text/javascript" src="js/bootstrap.js"></script>

ko-cart/js/viewmodel.js

@@ -66,6 +66,53 @@ var vm = (function () {
     cart(tmpCart);
   };
   
+  // The cart-widget template
+  var totalItems = ko.computed(function() {
+    var tmpCart = cart();
+    var total = 0;
+    tmpCart.forEach(function(item) {
+      total += parseInt(item.units(), 10);
+    });
+    return total;
+  })
+  var grandTotal = ko.computed(function() {
+    var tmpCart = cart();
+    var total = 0;
+    tmpCart.forEach(function(item) {
+      total += (item.units() * item.product.price());
+    });
+    return total;
+  })
+
+  // The cart-item template
+  var removeFromCart = function (data) {
+    var units = data.units();
+    var stock = data.product.stock();
+    data.product.stock(units + stock);
+    cart.remove(data);
+  }
+
+  // The cart template
+  var hideCartDetails = function() {
+    $('#cartContainer').addClass("hidden");
+  };
+  var showOrder = function () {
+    $('#catalogContainer').addClass("hidden");
+    $('#orderContainer').removeClass("hidden");
+  }
+
+  // The order template
+  var showCatalog = function () {
+    $("#catalogContainer").removeClass("hidden");
+    $("$orderContainer").addClass("hidden");
+  };
+  var finishOrder = function() {
+    cart([]);
+    hideCartDetails();
+    showCatalog();
+    $("#finishOrderModal").modal('show');
+  }
+
   return {
     // first chapter
     searchTerm: searchTerm,
@@ -74,7 +121,14 @@ var vm = (function () {
     addProduct: addProduct,
     // second chapter
     cart: cart,
-    showCartDetails: showCartDetails
+    showCartDetails: showCartDetails,
+    totalItems: totalItems,
+    grandTotal: grandTotal,
+    removeFromCart: removeFromCart,
+    hideCartDetails: hideCartDetails,
+    showOrder: showOrder,
+    showCatalog: showCatalog,
+    finishOrder: finishOrder
   };
 })();
 ko.applyBindings(vm);