chap2 -> Creating templates -> The catalog template -> part 3

Add CartProduct.js
Add addToCart method in viewmodel
Rename product.js to Product.js

ko-cart/index.html

@@ -44,7 +44,46 @@
       </button>
       <hr />
     </script>
-    <script type="text/html" id="catalog"></script>
+    <script type="text/html" id="catalog">
+      <div class="input-group">
+        <span class="input-group-addon">
+          <i class="glyphicon glyphicon-search"></i> Search
+        </span>
+        <input type="text" class="form-control" data-bind="textInput:searchTerm">
+      </div>
+      <table class="table">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Price</th>
+            <th>Stock</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody data-bind="foreach:catalog">
+          <tr data-bind="style:lineColor">
+            <td data-bind="text:name"></td>
+            <td data-bind="text:price"></td>
+            <td data-bind="text:stock"></td>
+            <td>
+              <button class="btn btn-primary" data-bind="click:$parent.addToCart">
+                <i class="glyphicon glyphicon-plus-sign"></i> Add
+              </button>
+            </td>
+          </tr>
+        </tbody>
+        <tfoot>
+          <tr>
+            <td colspan="3">
+              <strong>Items:</strong><span data-bind="text:catalog().length"></span>
+            </td>
+            <td colspan="1">
+              <span data-bind="template:{name: 'cart-widget'}"></span>
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+    </script>
     <script type="text/html" id="add-to-catalog-modal"></script>
     <script type="text/html" id="cart-widget"></script>
     <script type="text/html" id="cart-item"></script>
@@ -56,7 +95,8 @@
     <script type="text/javascript" src="js/bootstrap.js"></script>
     <script type="text/javascript" src="js/knockout-3.2.0.js"></script>
     <!-- app -->
-    <script type="text/javascript" src="js/models/product.js"></script>
+    <script type="text/javascript" src="js/models/Product.js"></script>
+    <script type="text/javascript" src="js/models/CartProduct.js"></script>
     <script type="text/javascript" src="js/viewmodel.js"></script>
   </body>
 </html>

ko-cart/js/models/CartProduct.js

@@ -0,0 +1,39 @@
+var CartProduct = function (product, units) {
+    "unit strict";
+
+    // Each cart product is composed of the product and units of the product we want to buy
+    var _product = product,
+        _units = ko.observable(units); // number of units to add or remove
+
+    var subtotal = ko.computed(function() {
+        return _product.price() * _units();
+    });
+
+    var addUnit = function () {
+        var u = _units(); // read number of units from observable
+        var _stock = product.stock();
+        if (_stock === 0 ) {
+            return;
+        }
+        _units(u + 1); // assign observable with new unit
+        _product.stock(--_stock); // reduce inventory of stock by decrease unit from product
+    };
+
+    var removeUnit = function () {
+        var u = _units();
+        var _stock = _product.stock();
+        if (u === 0) {
+            return;
+        }
+        _units(u - 1);
+        _product.stock(++_stock);
+    };
+
+    return {
+        product: _product,
+        units: _units,
+        subtotal: subtotal,
+        addUnit: addUnit,
+        removeUnit: removeUnit
+    }
+}

ko-cart/js/models/Product.js

@@ -5,10 +5,14 @@ var Product = function (id, name, price, stock) {
     _name = ko.observable(name),
     _price = ko.observable(price),
     _stock = ko.observable(stock);
+  var _lineColor = ko.computed(function() {
+    return (_stock() < 5) ? 'red' : 'black';
+  });
   return {
     id: _id,
     name: _name,
     price: _price,
     stock: _stock,
+    lineColor: _lineColor
   };
 };

ko-cart/js/viewmodel.js

@@ -47,6 +47,24 @@ var vm = (function () {
       $("#cartContainer").removeClass("hidden");
     }
   };
+  var addToCart = function(data) {
+    var item = null;
+    var tmpCart = cart();
+    var n = tmpCart.length;
+    while(n--) {
+      if (tmpCart[n].product.id() === data.id()) {
+        item = tmpCart[n];
+      }
+    }
+    if (item) {
+      item.addUnit();
+    } else {
+      item = new CartProduct(data, 0);
+      item.addUnit();
+      tmpCart.push(item);
+    }
+    cart(tmpCart);
+  };
 
   return {
     // first chapter