total
authorOwen Smith <owen@omsmith.ca>
Wed, 21 Nov 2012 05:13:14 +0000 (00:13 -0500)
committerOwen Smith <owen@omsmith.ca>
Wed, 21 Nov 2012 05:13:14 +0000 (00:13 -0500)
www/assets/js/ui.js
www/index.html

index 224b248..63a8201 100644 (file)
@@ -23,6 +23,8 @@ function Selection (upc, price) {
        var self = this;
 
        self.upc = upc;
+       self.priceVal = price;
+
        self.name = ko.observable('');
        self.size = ko.observable('');
        self.quantity = ko.observable(1);
@@ -82,6 +84,16 @@ function SelectionsViewModel () {
                        $('#checkout-modal').modal('hide');
                }
        };
+
+       self.totalPrice = ko.computed(function () {
+               var total = 0;
+               ko.utils.arrayForEach(self.selections(), function (selection) {
+                       total += selection.priceVal * selection.quantity();
+               });
+               return '$' + parseFloat(
+                       isNaN(total) || total === '' || total === null ? 0.00 : total
+                       ).toFixed(2);
+       }, self);
 }
 
 ko.applyBindings(new SelectionsViewModel());
index bcc3b51..5635e72 100644 (file)
                                <input type="text" name="upc" maxlength="12" placeholder="UPC-A" title="UPC-A" tabindex="0"
                                        data-bind="event: { change: addSelection }"/>
 
-                               <div class="pull-right">
+                               <div class="btn-group pull-right">
                                        <a class="btn btn-danger btn-large" href="#" role="button"
                                                data-bind="event: { click: clearSelection }">
                                                <i class="icon-fire"></i>
                                        </a>
+                                       <a class="btn btn-large">Total: <span data-bind="text: totalPrice"></span></a>
                                        <a class="btn btn-success btn-large" href="#checkout-modal" role="button" data-toggle="modal">
                                                <i class="icon-shopping-cart"></i> Checkout
                                        </a>