sexy data-binding with knockout.js. huzzah it doing work for me
[omsmith/pos-js.git] / www / index.html
1 <!DOCTYPE html>
2 <html lang="en">
3         <head>
4                 <meta charset="utf-8">
5                 <title>Project name</title>
6                 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7                 <meta name="description" content="">
8                 <meta name="author" content="">
9
10                 <!-- Le styles -->
11                 <link href="assets/css/screen.css" rel="stylesheet">
12         </head>
13
14         <body>
15
16                 <div id="root">
17
18                         <div class="container">
19
20                                 <table class="table table-striped">
21                                         <thead>
22                                                 <tr>
23                                                         <th class="span5">Name</th>
24                                                         <th class="span1">Size</th>
25                                                         <th class="span1">Quantity</th>
26                                                         <th class="span1">Price</th>
27                                                         <th class="span1"></th>
28                                                 </tr>
29                                         </thead>
30                                         <tbody data-bind="foreach: selections">
31                                                 <tr>
32                                                         <td data-bind="text: name"></td>
33                                                         <td data-bind="text: size"></td>
34                                                         <td data-bind="text: quantity"></td>
35                                                         <td data-bind="text: price"></td>
36                                                         <td>
37                                                                 <a class="btn btn-danger" href="#" role="button"
38                                                                         data-bind="event: { click: $parent.removeSelection }">
39                                                                         <i class="icon-trash"></i>
40                                                                 </a>
41                                                         </td>
42                                                 </tr>
43                                         </tbody>
44                                 </table>
45
46                         </div> <!-- /container -->
47
48                         <div id="root_footer"></div>
49                 </div> <!-- /root -->
50
51                 <footer id="footer">
52                         <div class="container">
53
54                                 <input type="text" name="upc" maxlength="12" placeholder="UPC-A" title="UPC-A" tabindex="0"
55                                         data-bind="event: { change: addSelection }"/>
56
57                                 <div class="pull-right">
58                                         <a class="btn btn-danger btn-large" href="#" role="button"
59                                                 data-bind="event: { click: clearSelection }">
60                                                 <i class="icon-fire"></i>
61                                         </a>
62                                         <a class="btn btn-success btn-large" href="#checkout-modal" role="button" data-toggle="modal">
63                                                 <i class="icon-shopping-cart"></i> Checkout
64                                         </a>
65                                 </div>
66                         </div> <!-- /container -->
67                 </footer>
68
69                 <div id="checkout-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="checkout-modal-label" aria-hidden="true">
70                         <div class="modal-header">
71                                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
72                                 <h3 id="checkout-modal-label">Checkout</h3>
73                         </div>
74                         <div class="modal-body">
75                                 <input type="text"  class="span5" name="card-number" placeholder="Swipe card for checkout..." title="Swipe card for checkout"
76                                         data-bind="event: { change: purchase }"/>
77                         </div>
78                         <div class="modal-footer">
79                         </div>
80                 </div>
81
82                 <div id="config-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="config-modal-label" aria-hidden="true" data-backdrop="static" data-keyboard="false" data-show="true">
83                         <div class="modal-header">
84                                 <h3 id="config-modal-label">Configuration</h3>
85                         </div>
86                         <div class="modal-body">
87                                 <input type="password" class="span5" name="auth-key" placeholder="Authorization key" title="Authorization key" />
88                                 <input type="text" class="span5" name="sever-location" placeholder="Server location" title="Server location" />
89                         </div>
90                         <div class="modal-footer">
91                                 <a href="#" id="save-config" class="btn btn-primary" data-dismiss="modal">Save</a>
92                         </div>
93                 </div>
94
95                 <!-- js included here -->
96                 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
97                 <script src="assets/js/jquery.formatCurrency-1.4.0.min.js"></script>
98                 <script src="assets/js/knockout-2.2.0.js"></script>
99                 <script src="assets/js/sha1.js"></script>
100                 <script src="assets/js/bootstrap.min.js"></script>
101                 <script src="assets/js/thrift.js"></script>
102                 <script src="assets/js/pos-bookie_types.js"></script>
103                 <script src="assets/js/PosBookie.js"></script>
104                 <script src="assets/js/client.js"></script>
105                 <script src="assets/js/ui.js"></script>
106
107         </body>
108 </html>