sexy data-binding with knockout.js. huzzah it doing work for me
[omsmith/pos-js.git] / www / assets / js / ui.js
index 88ae097..2368a4b 100644 (file)
@@ -1,3 +1,7 @@
+/*
+ * Ask for configuration at page load
+ */
+
 var client = {};
 
 $('#config-modal').modal().find('#save-config').click(function (e) {
@@ -7,117 +11,84 @@ $('#config-modal').modal().find('#save-config').click(function (e) {
        client = new PosClientWrapper( authKey, serverLocation );
 });
 
+/*
+ * End configuation ask
+ */
 
-var total = 0;
-var entries = {};
-
-function recalculate_total () {
-       total = 0;
-       for (var i in entries) {
-               var entry = entries[i];
-               total += entry.quantity * entry.price;
-       }
+/*
+ * Selections ( used for knowing things, and also data binding
+ */
 
-       $('#total').text(total).formatCurrency();
-}
+function Selection (upc, price) {
+       var self = this;
 
-function update_entry (upc, args) {
-       if (!entries[upc]) {
-               entries[upc] = {
-                       name:'unknown',
-                       size:'unknown',
-                       quantity:0,
-                       price:0
-               };
-       }
-
-       var entry = entries[upc];
-
-       var ids = {
-               'row': 'table-row-' + upc,
-               'name': 'table-name-' + upc,
-               'size': 'table-size-' + upc,
-               'quantity': 'table-quantity-' + upc,
-               'price': 'table-price-' + upc
-       };
-       var tableEntry = $('#' + ids.row);
-
-       if (!tableEntry.length) {
-               var rowText = '<tr id="' + ids.row + '">';
-               rowText += '<td id="' + ids.name + '">' + entry.name + '</td>';
-               rowText += '<td id="' + ids.size + '">' + entry.size + '</td>';
-               rowText += '<td id="' + ids.quantity + '">' + entry.quantity + '</td>';
-               rowText += '<td id="' + ids.price + '">' + entry.price + '</td>';
-               rowText += '<td></td>';
-               rowText += '</tr>';
-
-               $('#total-row').before(rowText);
-               $('#' + ids.price).text(entry.price).formatCurrency();
-       }
-
-       if (args.name) {
-               entry.name = args.name;
-               $('#' + ids.name).text(entry.name);
-       }
-       if (args.size) {
-               entry.size = args.size;
-               $('#' + ids.size).text(entry.size);
-       }
-       if (args.quantity) {
-               entry.quantity = entry.quantity + args.quantity;
-               $('#' + ids.quantity).text(entry.quantity);
-       }
-       if (args.price) {
-               entry.price = args.price;
-               $('#' + ids.price).text(entry.price).formatCurrency();
-       }
-
-       if (args.quantity || args.price) {
-               recalculate_total();
-       }
+       self.upc = upc;
+       self.name = ko.observable('');
+       self.size = ko.observable('');
+       self.quantity = ko.observable(1);
+       self.price = price;
 }
 
-$('input[name=upc]').keypress(function (e) {
-       var keyCode = e.keyCode || e.which;
+function SelectionsViewModel () {
+       var self = this;
 
-       if (keyCode === 13) {// enter
-               var input = $(this);
+       self.selections = ko.observableArray([]);
 
+       self.addSelection = function (data, e) {
+               var input = $(e.target);
                var upc = input.val();
+               input.val('');
+
+               if (upc.length === 12) {
+                       for (var i in self.selections()) {
+                               var selection = self.selections()[i];
 
-               if (!entries[upc]) {
+                               if (selection.upc === upc) {
+                                       selection.quantity(selection.quantity() + 1);
+                                       return;
+                               }
+                       }
+
+                       var selection = new Selection( upc, client.getPrice(upc) );
                        request_upc_data(upc, function (data) {
-                               update_entry(upc, data);
-                       });
-                       client.getPrice(upc, function (val) {
-                               update_entry(upc, { price:val });
+                               selection.name(data.name).size(data.size);
                        });
-               }
 
-               update_entry(upc, { 'quantity':1 });
-               input.val('');
-       }
-});
+                       self.selections.push( selection );
 
-function request_upc_data (upc, callback) {
-       $.ajax( 'upc.php?upc=' + upc )
-               .done(function (data) { callback(JSON.parse(data)); });
-}
+               }
+       };
+
+       self.removeSelection = function (selection) {
+               self.selections.remove(selection);
+       };
 
-$('input[name=card-number]').keypress(function (e) {
-       var keyCode = e.keyBode || e.which;
+       self.clearSelection = function () {
+               self.selections.removeAll();
+       };
 
-       if (keyCode === 13) {// enter
-               var input = $(this);
+       self.purchase = function (data, e) {
+               var selected = self.selections.removeAll();
 
+               var input = $(e.target);
                var cardData = input.val();
                input.val('');
 
-               var result = client.process(cardData, entries);
-               switch (result) {
-                       case 0: break; //fail
-                       case 1: break; //nomoney
-                       case 2: $('#checkout-modal').modal('hide'); return;
+               var result = client.process(cardData, selected);
+               if (result === 2) {
+                       $('#checkout-modal').modal('hide');
                }
-       }
-});
+       };
+}
+
+ko.applyBindings(new SelectionsViewModel());
+
+/*
+ * End of selections
+ */
+
+
+function request_upc_data (upc, callback) {
+       $.ajax( 'upc.php?upc=' + upc )
+               .done(function (data) { callback(JSON.parse(data)); });
+}