sexy data-binding with knockout.js. huzzah it doing work for me
[omsmith/pos-js.git] / www / index.html
index 22dd972..2b7cc19 100644 (file)
                                                        <th class="span1"></th>
                                                </tr>
                                        </thead>
-                                       <tbody>
-                                               <tr id="total-row"><td/><td/><td/><td id="total">$0.00</td><td/></tr>
+                                       <tbody data-bind="foreach: selections">
+                                               <tr>
+                                                       <td data-bind="text: name"></td>
+                                                       <td data-bind="text: size"></td>
+                                                       <td data-bind="text: quantity"></td>
+                                                       <td data-bind="text: price"></td>
+                                                       <td>
+                                                               <a class="btn btn-danger" href="#" role="button"
+                                                                       data-bind="event: { click: $parent.removeSelection }">
+                                                                       <i class="icon-trash"></i>
+                                                               </a>
+                                                       </td>
+                                               </tr>
                                        </tbody>
                                </table>
 
                <footer id="footer">
                        <div class="container">
 
-                               <input type="text" name="upc" maxlength="12" placeholder="UPC-A" title="UPC-A" tabindex="0" />
+                               <input type="text" name="upc" maxlength="12" placeholder="UPC-A" title="UPC-A" tabindex="0"
+                                       data-bind="event: { change: addSelection }"/>
 
-                               <a class="btn btn-success btn-large pull-right" href="#checkout-modal" role="button" data-toggle="modal">
-                                       <i class="icon-shopping-cart"></i> Checkout
-                               </a>
+                               <div class="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-success btn-large" href="#checkout-modal" role="button" data-toggle="modal">
+                                               <i class="icon-shopping-cart"></i> Checkout
+                                       </a>
+                               </div>
                        </div> <!-- /container -->
                </footer>
 
@@ -54,7 +72,8 @@
                                <h3 id="checkout-modal-label">Checkout</h3>
                        </div>
                        <div class="modal-body">
-                               <input type="text"  class="span6" name="card-number" placeholder="Swipe card for checkout..." title="Swipe card for checkout" />
+                               <input type="text"  class="span5" name="card-number" placeholder="Swipe card for checkout..." title="Swipe card for checkout"
+                                       data-bind="event: { change: purchase }"/>
                        </div>
                        <div class="modal-footer">
                        </div>
@@ -65,8 +84,8 @@
                                <h3 id="config-modal-label">Configuration</h3>
                        </div>
                        <div class="modal-body">
-                               <input type="password" class="span6" name="auth-key" placeholder="Authorization key" title="Authorization key" />
-                               <input type="text" class="span6" name="sever-location" placeholder="Server location" title="Server location" />
+                               <input type="password" class="span5" name="auth-key" placeholder="Authorization key" title="Authorization key" />
+                               <input type="text" class="span5" name="sever-location" placeholder="Server location" title="Server location" />
                        </div>
                        <div class="modal-footer">
                                <a href="#" id="save-config" class="btn btn-primary" data-dismiss="modal">Save</a>
@@ -76,6 +95,7 @@
                <!-- js included here -->
                <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
                <script src="assets/js/jquery.formatCurrency-1.4.0.min.js"></script>
+               <script src="assets/js/knockout-2.2.0.js"></script>
                <script src="assets/js/sha1.js"></script>
                <script src="assets/js/bootstrap.min.js"></script>
                <script src="assets/js/thrift.js"></script>