Commits

jasonyeo  committed a87bc54 Draft

added remove frm cart and new checkout pages

  • Participants
  • Parent commits 8eeedd2

Comments (0)

Files changed (10)

File static/js/app.js

     var Workspace = Backbone.Router.extend({
         routes: {
             'purchase': 'showPurchase',
-            'product/:id': 'showProduct'
+            'product/:id': 'showProduct',
+            'checkout': 'showCheckout'
         },
 
         showPurchase: function() {

File static/js/collections/cart.js

     var ShoppingCart = Backbone.Collection.extend({
         model: app.Product,
         //url: '/shoppingcart'
+
+        getProductById: function( id ) {
+            return this.filter(function( product ) {
+                return product.get('Product_ID') === id;
+            })[0];
+        }
     });
 
     app.Cart = new ShoppingCart();

File static/js/models/product.js

             Product_Cat_ID: '',
             Product_ID: '',
             Supplier: '',
-            Supplier_ID: ''
+            Supplier_ID: '',
         },
     });
 }());

File static/js/views/cart.js

             console.log('Init cart view');
             window.app.Cart.on( 'reset', this.render, this );
             window.app.Cart.on( 'add', this.render, this );
+            window.app.Cart.on( 'remove', this.render, this );
             this.renderCartPopover();
+            $('.remove-cart-item').live('click', this.removeFromCart);
         },
 
         render: function() {
-            console.log('rendering cart');
             var thisCart = this;
-            $('#cart-popover-content').html('');
+            console.log('rendering');
+            $('.popover-content #cart-items').html('');
             app.Cart.each(function(product) {
-                $('#cart-popover-content').append( thisCart.template( product.toJSON() ) );
+                $('.popover-content #cart-items').append( thisCart.template( product.toJSON() ) );
             });
-            console.log("html = " + this.$el.html());
-            console.log(this.$el);
-            this.renderCartPopover();
             return this;
         },
 
+        removeFromCart: function( event ) {
+            var id = parseInt(event.target.id, 10);
+            var product = app.Cart.getProductById( id );
+            console.log("removing "+ product);
+            app.Cart.remove( product );
+        },
+
         renderCartPopover: function() {
             $('#shopping-cart-btn').popover({
                 offset: -0,
                 }
             });
         },
-
-
-        events: {
-        }
     });
 });

File static/js/views/purchase.js

             var that = this;
             _.each(app.Products.getType('table'), function(product) {
                 that.addOne(product);
-
             });
         },
 
         events: {
             'click a[href="#tables"]': 'showTables',
+            //'click a[href="#bedframe"]': 'showBedframes',
+            //'click a[href="#lamps"]': 'showLamps',
         }
     });
 });

File templates/checkOut.html

+<!--
+To change this template, choose Tools | Templates
+and open the template in the editor.
+-->
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <title id="systemName">Mobile POS</title>
+        <link href="css/bootstrap.css" rel="stylesheet">
+    </head>
+    <body>
+        <div class="navbar-inner ">
+            <div class="container">
+                <div class="navbar ">
+                    <!-- HOME BTN -->
+                    <a class="btn btn-info pull-left" href="product.html" style="display: inline-block">
+                        <i class="icon-arrow-left"></i>Products </a>
+                    <a class="brand" style="margin-left: 250px">&nbsp;&nbsp; Checkout </a>
+
+                </div>
+            </div>
+        </div>
+
+        <div class="container-fluid">
+
+
+            <!--order summary -->
+            <div class="span3">
+                <legend>Order Summary</legend>
+                <div class="row">
+                    <div class="col span1">
+                        <img class="img-rounded" src="http://www.placehold.it/60x60">
+                    </div>
+                    <div class="col span2">
+                        Product Name 
+                        </br>Price: $165
+                        </br>Quantity: 
+                    </div>
+                </div>
+                <br/>
+                <div class="row">
+                    <div class="col span1">
+                        <img class="img-rounded" src="http://www.placehold.it/60x60">
+                    </div>
+                    <div class="col span2">
+                        Product Name 
+                        </br>Price: $165
+                        </br>Quantity: 
+                    </div>
+                </div>
+                <br/>
+                <div class="row">
+                    <b class="pull-right">Total $500</b>
+                </div>
+            </div>
+
+            <!--payment information request-->
+            <div class="span9">
+                <br/>
+
+                <!--Payment detail form -->
+                <div class="row well" style="margin-left: 10px"> 
+                    <form class="form-horizontal2 ">
+                        <legend> Payment detail </legend>
+                        <div class="control-group">
+                            <label class="control-label" for="inputCC">Credit Card No. </label>
+                            <div class="controls">
+                                <input type="text" id="inputCC" placeholder="Credit Card Number">
+                            </div>
+                        </div>
+                        <div class="control-group">
+                            <label class="control-label" for="inputCW2">CW2/CV2</label>
+                            <div class="controls">
+                                <input type="text" id="inputCW2" placeholder="CW2/CV2">
+                            </div>
+                        </div>
+                        <div class="control-group">
+                            <label class="control-label" for="inputExpiryDate">Expiry Date</label>
+                            <div class="controls">
+                                <input type="text" id="inputExpiryDate" placeholder="Credit Card Expiry Date (MMYY)">
+                            </div>
+                        </div>
+                    </form>
+
+                    <button class="btn offset1  btn-info pull-right" id="btnFinish" type="button">Submit payment detail <i class="icon-arrow-right"></i></button>
+
+                </div>
+
+            </div>
+
+        </div>
+
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+        <script src="js/bootstrap.min.js"></script>
+
+        <script>
+            $('#btnFinish').click(function() 
+            {
+               window.location.href = "checkOutStep2.html"; 
+            });
+        </script>
+    </body>
+</html>

File templates/checkOutStep2.html

+<!--
+To change this template, choose Tools | Templates
+and open the template in the editor.
+-->
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <title id="systemName">Mobile POS</title>
+        <link href="css/bootstrap.css" rel="stylesheet">
+    </head>
+    <body>
+        <div class="navbar-inner ">
+            <div class="container">
+                <div class="navbar ">
+                    <!-- HOME BTN -->
+                    <a class="btn btn-info pull-left" href="checkOut.html" style="display: inline-block">
+                        <i class="icon-arrow-left"></i>Payment detail </a>
+                    <a class="brand" style="margin-left: 250px">&nbsp;&nbsp; Checkout </a>
+
+                </div>
+            </div>
+        </div>
+
+        <div class="container-fluid">
+
+
+            <!--order summary -->
+            <div class="span3">
+                <legend>Order Summary</legend>
+                <div class="row">
+                    <div class="col span1">
+                        <img class="img-rounded" src="http://www.placehold.it/60x60">
+                    </div>
+                    <div class="col span2">
+                        Product Name 
+                        </br>Price: $165
+                        </br>Quantity: 
+                    </div>
+                </div>
+                <br/>
+                <div class="row">
+                    <div class="col span1">
+                        <img class="img-rounded" src="http://www.placehold.it/60x60">
+                    </div>
+                    <div class="col span2">
+                        Product Name 
+                        </br>Price: $165
+                        </br>Quantity: 
+                    </div>
+                </div>
+                <br/>
+                <div class="row">
+                    <b class="pull-right">Total $500</b>
+                </div>
+            </div>
+
+            <!--payment information request-->
+            <div class="span9">
+                <br/>
+
+
+
+                <!--Delivery detail form -->
+                <div class="row well" style="margin-left: 10px"> 
+                    <form class="form-horizontal2 ">
+                        <legend> Customer detail </legend>
+                        <div class="control-group">
+                            <label class="control-label" for="inputName">Name </label>
+                            <div class="controls">
+                                <input type="text" id="inputName" placeholder="Name">
+                            </div>
+                        </div>
+                        <div class="control-group">
+                            <label class="control-label" for="inputAdd">Address</label>
+                            <div class="controls">
+                                <input type="text" id="inputAdd" placeholder="Address">
+                            </div>
+                        </div>
+                        <div class="control-group">
+                            <label class="control-label" for="inputContact">Contact No:</label>
+                            <div class="controls">
+                                <input type="text" id="inputContact" placeholder="Contact Number">
+                            </div>
+                        </div>
+                        <div class="control-group">
+                            <label class="control-label" for="inputEmail">Email</label>
+                            <div class="controls">
+                                <input type="text" id="inputEmail" placeholder="Email">
+                            </div>
+                        </div>
+                        <button class="btn offset1  btn-info pull-right" id="btnFinish" type="button">Submit customer detail <i class="icon-arrow-right"></i></button>
+                    </form>
+                </div>
+            </div>
+
+        </div>
+
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+        <script src="js/bootstrap.min.js"></script>
+        <script>
+            $('#btnFinish').click(function() 
+            {
+                window.location.href = "checkOutStep3.html"; 
+            });
+        </script>
+    </body>
+</html>

File templates/checkOutStep3.html

+<!--
+To change this template, choose Tools | Templates
+and open the template in the editor.
+-->
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <title id="systemName">Mobile POS</title>
+        <link href="css/bootstrap.css" rel="stylesheet">
+    </head>
+    <body>
+        <div class="navbar-inner ">
+            <div class="container">
+                <div class="navbar ">
+                    <!-- HOME BTN -->
+                    <a class="btn btn-info pull-left" href="checkOut.html" style="display: inline-block">
+                        Home </a>
+                    <a class="brand" style="margin-left: 250px">&nbsp;&nbsp; Order Summary </a>
+
+                </div>
+            </div>
+        </div>
+
+        <div class="container-fluid">
+            </br>
+            <div class="row well" style="margin-left:10px">
+                <legend>Orders</legend>
+                <table class="table table-bordered">
+                    <thead>
+                        <tr>
+                            <th>Item (Qty) </th>
+                            <th>Total Price </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>Table lamp base (1) </td>
+                            <td>$19.90 </td>
+                        <tr>
+                    </tbody>
+                </table>
+                <div class="row pull-right">
+                    <h5>Total: $150</h5>
+                </div>
+            </div>
+
+
+            <div class="row well" style="margin-left:10px">
+                <legend>Your Information</legend>
+                Name: Steve Ng
+                <br/>Address: Blk 501, Hougang hehee ave 9, #01-11 (530501)
+                <br/>Contact No: 96210234
+                <br/>Email : xxx
+
+                <br/><br/>
+                Credit Card No: xxxxxxxxxxxx1234
+                </br>Cw2/Cv2: 9xx
+                </br>Expiry date: 27/xx/xx
+
+                <button class="btn   btn-info pull-right" id="btnFinish" type="button">Click here to return home and clear your information</button>
+            </div>
+
+        </div>
+
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+        <script src="js/bootstrap.min.js"></script>
+
+        <script>
+            
+            $('#btnFinish').click(function() 
+            {
+                window.location.href = "index.html"; 
+            });
+            
+        </script>
+    </body>
+</html>

File templates/index.html

             <div class="container">
 
                 <div class="row">
-                    <div class="span4 offset1">
+                    <div class="span4 offset1" id="productPage">
                         <a href="#purchase">
                             <img src="../static/img/image1.png" class="img-rounded">
                         </a>
                     </div>
-                    <div class="span4 offset1">
+                    <div class="span4 offset1" id="branchPage">
                         <a href="branchInfo.html" ><img src="../static/img/image2.png" class="img-rounded"> </a>
                     </div>
                 </div>
                 <br/><br/>
                 <div class="row">
-                    <div class="span4 offset1">
+                    <div class="span4 offset1" id="promotionPage">
                         <a href="promotion.html"><img src="../static/img/image3.png" class="img-rounded"></a>
                     </div>
-                    <div class="span4 offset1">
+                    <div class="span4 offset1" id="pastOrderPage">
                         <a href ="pastOrder.html"><img src="../static/img/image4.png" class="img-rounded"> </a>
                     </div>
                 </div>
             <div class="container">
                 <div class="row">
                     <div class="col span2">
+                        <button id="<%= Product_ID %>" class="remove-cart-item btn-info btn-mini">
+                            x</i>
+                        </button>
                         <%= Brand %> <%= Name %> <%= Pricebuy %>
                     </div>
                     <div class="col offset2">

File templates/purchase.html

             <a id="shopping-cart-btn" class="btn btn-info pull-right" style="display: inline-block; margin-right: 20px" rel="popover">
                 <i class="icon-shopping-cart"></i>Shopping Cart </a>
             <div id="cart-popover-title" class="container row" style="display: none">
-                <div class="col span2">
-                    Product Detail
-                </div>
-                <div class="col offset2">
-                    Qty
+                <div class="container row">
+                    <div class="col span2">
+                        Product Detail
+                    </div>
+                    <div class="col offset1">
+                        Qty
+                    </div>
                 </div>
             </div>
             <div id="cart-popover-content" style="display: none">
-           </div>
+                <div id="cart-items">
+                </div>
+                <div class="row">
+                    <div class="col offset1">
+                        <a class="btn btn-small btn-info" href="checkOut.html" style="display: inline-block">
+                            Checkout <i class="icon-arrow-right"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </div>
             <br />
             <!-- Products List ============================================== -->
             <section id="products-list">
-           </section>
+            </section>
             <!-- End of table section ============================== -->
 
         </div>