Commits

jasonyeo  committed bcbc5bd Draft

can now navigate around app

  • Participants
  • Parent commits a87bc54

Comments (0)

Files changed (17)

File FlaskServer.py

 
 @app.route('/')
 def index():
-    print 'in index'
     return render_template('index.html')
 
+@app.route('/branchinfo')
+def branchinfo():
+    print 'in index'
+    return render_template('branchInfo.html')
+
+@app.route('/promotion')
+def promotion():
+    return render_template('promotion.html')
+
+@app.route('/pastorder')
+def pastorder():
+    return render_template('pastOrder.html')
 
 @app.route('/purchase')
 def purchase():
     return render_template('purchase.html')
 
+@app.route('/checkout')
+def checkout():
+    return render_template('checkOut.html')
+
+@app.route('/checkout2')
+def checkout2():
+    return render_template('checkOutStep2.html')
+
+@app.route('/checkout3')
+def checkout3():
+    return render_template('checkOutStep3.html')
+
 @app.route('/products', methods=['GET', 'POST'])
 def products():
     from urllib import urlopen
     resp = Response(data, status=200, mimetype='application/json')
     return resp
 
-def determine_strategies(request):
-    return input_strat, kwic_strat
-
 if __name__ == '__main__':
     app.run(host='0.0.0.0', debug=True)

File static/js/app.js

         routes: {
             'purchase': 'showPurchase',
             'product/:id': 'showProduct',
-            'checkout': 'showCheckout'
+            'checkout': 'showCheckout',
+            'checkout2': 'showCheckout2',
+            'checkout3': 'showCheckout3'
         },
 
         showPurchase: function() {
 
         showProduct: function( id ) {
             new app.ProductView( id );
+        },
+
+        showCheckout: function() {
+            new app.CheckoutView();
+        },
+
+        showCheckout2: function() {
+            new app.Checkout2View();
+        },
+
+        showCheckout3: function() {
+            new app.Checkout3View();
         }
     });
     var AekiRouter = new Workspace();

File static/js/collections/products.js

 
         url: '/products',
 
-        getType: function( type ) {
+        getAllFromCat: function( catId ) {
             return this.filter(function( product ) {
-                return product.get('Name')
-                    .toLowerCase().indexOf( type ) !== -1;
+                return product.get('Product_Cat_ID') === catId;
             });
         },
 

File static/js/views/cart.js

             app.Cart.each(function(product) {
                 $('.popover-content #cart-items').append( thisCart.template( product.toJSON() ) );
             });
+            this.renderCartPopover();
             return this;
         },
 
                 }
             });
         },
+
+        events: {
+            'click #shopping-cart-btn': 'render',
+            //'click a[href="#lamps"]': 'showLamps',
+        }
     });
 });

File static/js/views/checkout.js

+
+var app = app || {};
+
+$(function( $ ) {
+    'use strict';
+
+    // Checkout View
+    // ----------
+    app.CheckoutView = Backbone.View.extend({
+
+        el: '#aekiapp',
+
+
+        initialize: function( id ) {
+            console.log('Init checkout view');
+            $('.popover').fadeOut();
+            this.$el.load('checkout', this.render);
+        },
+
+        render: function() {
+            var template = _.template( $('#payment-item-template').html() );
+            console.log('rendering');
+            app.Cart.each(function(product) {
+                $('#order-summary').append( template( product.toJSON() ) );
+            });
+            var total = 0;
+            app.Cart.each(function(product) {
+                total += parseInt(product.get('Pricebuy'), 10);
+            });
+            console.log(total);
+            $('#total-price').append(total);
+            return this;
+        },
+
+        showStep2: function() {
+            console.log('showing step2');
+            $('#form-container').load('checkout2 #delivery-form');
+        },
+
+        showStep3: function() {
+            console.log('showing step3');
+            window.location.href = '#checkout3';
+        },
+
+        events: {
+            'click #step1finish': 'showStep2',
+            'click #step2finish': 'showStep3'
+        }
+    });
+});

File static/js/views/checkout2.js

+
+var app = app || {};
+
+$(function( $ ) {
+    'use strict';
+
+    // Checkout View
+    // ----------
+    app.Checkout2View = Backbone.View.extend({
+
+        el: '#aekiapp',
+
+
+        initialize: function( id ) {
+            console.log('Init checkout 2 view');
+            this.$el.load('checkout2', this.render);
+        },
+
+        render: function() {
+            return this;
+        },
+
+        events: {
+        }
+    });
+});

File static/js/views/checkout3.js

+
+var app = app || {};
+
+$(function( $ ) {
+    'use strict';
+
+    // Checkout View
+    // ----------
+    app.Checkout3View = Backbone.View.extend({
+
+        el: '#aekiapp',
+
+        initialize: function( id ) {
+            console.log('Init checkout 3 view');
+            this.$el.load('checkout3', this.render);
+        },
+
+        render: function() {
+            return this;
+        },
+
+        events: {
+        }
+    });
+});

File static/js/views/product.js

             app.Cart.add( this.model );
             console.log('added '+this.model.toJSON()+' to cart');
             var notify = window.noty({
-                text: 'Added ' + this.model.get('Name') + ' ' + this.model.get('Name') + ' to cart',
+                text: 'Added ' + this.model.get('Brand') + ' ' + this.model.get('Name') + ' to cart',
                 type: 'information',
                 layout: 'topCenter',
-                timeout: true
+                timeout: 1000
             });
         },
 

File static/js/views/purchase.js

     // ----------
     app.PurchaseView = Backbone.View.extend({
 
-
         el: '#aekiapp',
 
         initialize: function() {
 
         addOne: function( product ) {
             var view = new app.ProductThumbnailView({ model: product });
-            $('#products-list').append( view.render().el );
+            $('#aekiapp #products-list').append( view.render().el );
         },
 
         addAll: function() {
-
             console.log('adding all');
-            this.$('#products-list').html('');
+            this.$('#products-list').empty();
             app.Products.each(this.addOne, this);
         },
 
-        showTables: function() {
-            console.log('showing tables');
+        showBedframes: function() {
+            console.log("showing bedframes");
             this.$('li').removeClass('active');
-            this.$('a[href="#tables"]').parent().addClass('active');
-            this.$('#products-list').html('');
+            this.$('a#bedframe').parent().addClass('active');
+            this.$('#products-list').empty();
             var that = this;
-            _.each(app.Products.getType('table'), function(product) {
+            _.each(app.Products.getAllFromCat(1), function(product) {
                 that.addOne(product);
             });
         },
 
+        showMirrors: function() {
+            console.log("showing mirrors");
+            this.$('li').removeClass('active');
+            this.$('a#mirror').parent().addClass('active');
+            this.$('#products-list').empty();
+            var that = this;
+            _.each(app.Products.getAllFromCat(8), function(product) {
+                that.addOne(product);
+            });
+        },
+
+        showLampShades: function() {
+            console.log("showing lamp shades");
+            this.$('li').removeClass('active');
+            this.$('a#shade').parent().addClass('active');
+            this.$('#products-list').empty();
+            var that = this;
+            _.each(app.Products.getAllFromCat(3), function(product) {
+                that.addOne(product);
+            });
+        },
+
+        showLamps: function() {
+            console.log("showing lamps");
+            this.$('li').removeClass('active');
+            this.$('a#lamp').parent().addClass('active');
+            this.$('#products-list').empty();
+            var that = this;
+            _.each(app.Products.getAllFromCat(4), function(product) {
+                that.addOne(product);
+            });
+        },
+
+        showTrolleys: function() {
+            console.log("showing trolleys");
+            this.$('li').removeClass('active');
+            this.$('a#trolley').parent().addClass('active');
+            this.$('#products-list').empty();
+            var that = this;
+            _.each(app.Products.getAllFromCat(18), function(product) {
+                that.addOne(product);
+            });
+        },
+
+        showStorage: function() {
+            console.log("showing storage");
+            this.$('li').removeClass('active');
+            this.$('a#storage').parent().addClass('active');
+            this.$('#products-list').empty();
+            var that = this;
+            _.each(app.Products.getAllFromCat(9), function(product) {
+                that.addOne(product);
+            });
+        },
+
+        showCordSet: function() {
+            console.log("showing cord-sets");
+            this.$('li').removeClass('active');
+            this.$('a#cord-set').parent().addClass('active');
+            this.$('#products-list').empty();
+            var that = this;
+            _.each(app.Products.getAllFromCat(6), function(product) {
+                that.addOne(product);
+            });
+        },
+
+
+        showAll: function() {
+            console.log("showing all");
+            this.$('li').removeClass('active');
+            this.$('a#all').parent().addClass('active');
+            this.addAll();
+        },
+
         events: {
-            'click a[href="#tables"]': 'showTables',
-            //'click a[href="#bedframe"]': 'showBedframes',
-            //'click a[href="#lamps"]': 'showLamps',
+            'click #bedframe': 'showBedframes',
+            'click #mirror': 'showMirrors',
+            'click #shade': 'showLampShades',
+            'click #lamp': 'showLamps',
+            'click #trolley': 'showTrolleys',
+            'click #storage': 'showStorage',
+            'click #cord-set': 'showCordSet',
+            'click #all': 'showAll'
         }
     });
 });

File templates/branchInfo.html

     <head>
         <meta name="apple-mobile-web-app-capable" content="yes" />
         <title id="systemName">Mobile POS</title>
-        <link href="css/bootstrap.css" rel="stylesheet">
+        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.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="index.html" style="display: inline-block">
+                    <a class="btn btn-info pull-left" href="/" style="display: inline-block">
                         <i class="icon-arrow-left"></i>Home </a>
-                    <!--<a "id="shoppingCart" class="btn btn-info pull-right" style="display:inline-block"><i class="icon-shopping-cart"></i> Shopping Cart </a> -->
                     <a class="brand" style="margin-left: 250px">&nbsp;&nbsp; Branch Information </a>
 
                 </div>
             </div>
         </div>
 
+        <!-- Start of retrieved branch div -->
+        <div class ="container" id ="retrievedBranch"  >
+            <div class="row-fluid">
+                <!-- navigation for branch -->
+                <div class="span3">
+                    <br>
+                    <ul class="nav nav-list affix-top" id="branchNav">
+                        <li class="nav-header">Branches</li>
+                    </ul>
 
-        <div class="row-fluid">
-            <div class="span3">
-                <br>
-                <ul class="nav nav-list affix-top">
-                    <!--<li class="nav-header">Products Categories</li> -->
-                    <li class="active">
-                        <a id="branchDetail">
-                            <br>Branch detail
-                            <i class="icon-chevron-right pull-right"></i>
-                        </a>
-                    </li>
-                    <li>
-                        <a id="branchMap">
-                            <br>Branch map
-                            <i class="icon-chevron-right pull-right"></i>
-                        </a>
-                    </li>
-                </ul>
+                </div>
+
+                <!-- branches details -->
+                <div class="span8" style="margin-left:50px" >
+                    <br/>
+                    <div class="tabbable"> <!-- Only required for left/right tabs -->
+                        <ul class="nav nav-tabs">
+                            <li class="active"><a href="#tab1" data-toggle="tab">Branch Detail</a></li>
+                            <li><a href="#tab2" data-toggle="tab">Branch Map</a></li>
+                        </ul>
+                        <div class="tab-content">
+                            <div class="tab-pane active" id="tab1">
+                            </div>
+                            <div class="tab-pane" id="tab2">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
             </div>
-            <br/>
-            <div class="span8" id="branchDetailDiv">
-
-                <div class="well well-large"> 
-                    <legend> Branch Information </legend>
-                    Branch Name - IKEA Tampines   </br>
-                    Branch Location: 60 Tampines North Drive 2, Singapore 528764   </br>
-                    Branch telephone: 67866868 </br>
-                    Branch email: customerservice.ikeasg@ikano.asia  </br>
-                    Store operating hours: 10am to 10pm daily  </br>
-                </div>
-                <div class="well well-large"> 
-                    <legend> In case of fire emergency </legend>
-                    Stay calm, wait for announcement over the PA.  
-                </div>
-            </div>
-
-            <div class="span8" style="display:none" id="branchMapDiv">
-                <img src="img/ikea-map.jpg" class="img-rounded">
-            </div>
-
         </div>
+        <!-- End of retrieved order 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 src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
+        <script>
+            
+            $(document).ready(function() {
+                retrieveAllBranches();
+                loadBranch(1);
+            });
+            
+            function retrieveAllBranches()
+            {
+                console.log("retrieving all branches");
+                $.getJSON("http://lowe.jschua.com/DinoPos/api/branches/",
+                function (data) {
+                    // On success, 'data' contains a list of branch.
+                    $.each(data, function (key, val) {
+                        
+                        var branchName = val.Address;
+                        var branchId = val.Branch_ID
+                        
+                        console.log("branch name =="+val.Name);
+                        console.log("branch iD =="+val.Branch_ID);
+                        
+                        if(key ==0)
+                            var branchNavDetail =  '<li id=\"'+branchId+'\" class=\"active\" onclick=\"loadBranch('+branchId+')\"><a href=\"#\"><br>'+ branchName +'<i class=\"icon-chevron-right pull-right\"></i></a></li>';
+                        else
+                            var branchNavDetail =  '<li id=\"'+branchId+'\" onclick=\"loadBranch('+branchId+')\"><a href=\"#\"><br>'+ branchName +'<i class=\"icon-chevron-right pull-right\"></i></a></li>';        
+                        $('#branchNav').append(branchNavDetail);     
+                    });
+                })
+                .fail(
+                function (jqXHR, textStatus, err) {
+                    console.log("error = " +err);
+                });
 
-        <script>
-            $(function ()
+            }
+            
+            function loadBranch(branchId)
             {
+                clearExistingBranch();
+                setNavActive(branchId);
+                $.getJSON("http://lowe.jschua.com/DinoPos/api/branches/" + branchId,
+                function (val) {
+       
+                    var branchDetailTab = document.getElementById("tab1");
+                    var branchMapTab = document.getElementById("tab2");
+                    
+                    /**set up tab 1 **/
+                    
+                    //Branch detail div
+                    var tabTopDiv = document.createElement("div");
+                    tabTopDiv.className = "well well-large";
+                    
+                    //content
+                    var contentHeader = "<legend> Branch Information </legend>";
+                    var branchName = "Branch name: " +val.Address + "</br>";
+                    var branchLocation = "Branch Location: "+val.Name + "</br>";
+                    var branchTel = "Branch Telephone: "+val.Tel +"</br>";
+                    var branchMail = "Branch Email: "+val.Email +"</br>";
+                    var branchOps = "Store Operating Hours: 10am to 10 pm daily </br>";
+                    tabTopDiv.innerHTML = contentHeader + branchName + branchLocation + branchTel + branchMail + branchOps;
+                    
+                    //In case of fire div
+                    var tabBtmDiv = document.createElement("div");
+                    tabBtmDiv.className = "well well-large";
+                    
+                    //content
+                    var fireHeader = "<Legend> In case of fire emergency </legend>";
+                    var fireContent = "Stay calm, wait for announcement over the PA.";
+                    
+                    tabBtmDiv.innerHTML = fireHeader + fireContent; 
+                    
+                    branchDetailTab.appendChild(tabTopDiv);
+                    branchDetailTab.appendChild(tabBtmDiv);
+                    
+                    /**set up tab 2 **/
+                    var tabMapImage = document.createElement("img");
+                    tabMapImage.className = "img-rounded";
+                    tabMapImage.setAttribute("src", "static/img/ikea-map.jpg");
+                    branchMapTab.appendChild(tabMapImage);
+                    
+                })
+                .fail(
+                function (jqXHR, textStatus, err) {
+                    console.log("error = "+err)
+                });
+
+            }
+            
+            function clearExistingBranch() {
+                 
+                var tab1Node = document.getElementById("tab1");
+               
+                while (tab1Node.firstChild) {
+                    tab1Node.removeChild(tab1Node.firstChild);
+                }
                 
-                $('#branchDetail').click(function(event) {
-                     $(this).parent().addClass('active');
-                    $('#branchMap').parent().removeClass('active');
-                    $('#branchMapDiv').hide();
-                    $('#branchDetailDiv').show();
-                   
-                });
+                var tab2Node = document.getElementById("tab2");
+               
+                while (tab2Node.firstChild) {
+                    tab2Node.removeChild(tab2Node.firstChild);
+                }
                 
-                $('#branchMap').click(function() {
-                    $(this).parent().addClass('active');
-                    $('#branchDetail').parent().removeClass('active');
-                    $('#branchDetailDiv').hide();
-                    $('#branchMapDiv').show();
-                });
+            }
+            
+            function setNavActive(branchId) {
                 
-            });
+                var node = document.getElementById("branchNav").childNodes;
+                
+                for(i=0;i<node.length;i++)
+                {
+                    if(node[i].id != branchId)
+                        node[i].className = "";
+                    else
+                        node[i].className ="active";
+                }
+               
+            }
+            
             
         </script>
 

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 class="navbar-inner ">
+    <div class="container">
+        <div class="navbar ">
+            <!-- HOME BTN -->
+            <a class="btn btn-info pull-left" href="/#purchase" 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>
+
+<div class="container-fluid">
+
+
+    <!--order summary -->
+    <div class="span3">
+        <legend>Order Summary</legend>
+        <div id="order-summary">
+        </div>
+        <div class="row">
+            <b class="pull-right" id="total-price">Total $</b>
+        </div>
+    </div>
+
+    <!--payment information request-->
+    <div class="span9">
+        <br/>
+
+        <div id="form-container">
+            <!--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="step1finish" type="button">Submit payment detail <i class="icon-arrow-right"></i></button>
+
             </div>
         </div>
 
-        <div class="container-fluid">
+    </div>
 
-
-            <!--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>
+</div>

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 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>
+</div>
 
-        <div class="container-fluid">
+<div class="container-fluid">
 
+    <!--payment information request-->
+    <div class="span9">
+        <br/>
 
-            <!--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: 
+
+
+        <!--Delivery detail form -->
+        <div class="row well" id="delivery-form" 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>
-                <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 class="control-group">
+                    <label class="control-label" for="inputAdd">Address</label>
+                    <div class="controls">
+                        <input type="text" id="inputAdd" placeholder="Address">
                     </div>
                 </div>
-                <br/>
-                <div class="row">
-                    <b class="pull-right">Total $500</b>
+                <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>
+                <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="step2finish" type="button">Submit customer detail <i class="icon-arrow-right"></i></button>
+            </form>
+        </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>
+</div>

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 class="navbar-inner ">
+    <div class="container">
+        <div class="navbar ">
+            <!-- HOME BTN -->
+            <a class="btn btn-info pull-left" href="/" style="display: inline-block">
+                Home </a>
+            <a class="brand" style="margin-left: 250px">&nbsp;&nbsp; Order Summary </a>
 
-                </div>
-            </div>
         </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>
+<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">
 
         </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>
 
-        <script>
-            
             $('#btnFinish').click(function() 
             {
-                window.location.href = "index.html"; 
+                window.location.href = "/"; 
             });
-            
+
         </script>
-    </body>
-</html>

File templates/index.html

                         </a>
                     </div>
                     <div class="span4 offset1" id="branchPage">
-                        <a href="branchInfo.html" ><img src="../static/img/image2.png" class="img-rounded"> </a>
+                        <a href="branchinfo" ><img src="../static/img/image2.png" class="img-rounded"> </a>
                     </div>
                 </div>
                 <br/><br/>
                 <div class="row">
                     <div class="span4 offset1" id="promotionPage">
-                        <a href="promotion.html"><img src="../static/img/image3.png" class="img-rounded"></a>
+                        <a href="promotion"><img src="../static/img/image3.png" class="img-rounded"></a>
                     </div>
                     <div class="span4 offset1" id="pastOrderPage">
-                        <a href ="pastOrder.html"><img src="../static/img/image4.png" class="img-rounded"> </a>
+                        <a href ="pastorder"><img src="../static/img/image4.png" class="img-rounded"> </a>
                     </div>
                 </div>
             </div>
                 </div>
             </div>
         </script>
+        <script type="text/template" id="payment-item-template">
+            <div class="row">
+                <div class="col span1">
+                    <img class="img-rounded" src="<%= ImageUrl %>">
+                </div>
+                <div class="col span2">
+                    <%= Brand %> <%=Name%>
+
+                    </br>Price: $<%= Pricebuy %>
+                    </br>Quantity: 1
+                </div>
+            </div>
+            <br/>
+        </script>
         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
         <script src="../static/js/lib/jquery/noty/jquery.noty.js"></script>
         <script src="../static/js/lib/jquery/noty/topCenter.js"></script>
         <script src="../static/js/views/cart.js"></script>
         <script src="../static/js/views/product.js"></script>
         <script src="../static/js/views/productthumbnail.js"></script>
+        <script src="../static/js/views/checkout3.js"></script>
+        <script src="../static/js/views/checkout2.js"></script>
+        <script src="../static/js/views/checkout.js"></script>
         <script src="../static/js/views/purchase.js"></script>
         <script src="../static/js/app.js"></script>
     </body>

File templates/pastOrder.html

 <!DOCTYPE html>
 <html>
     <head>
-           <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
         <title id="systemName">Mobile POS</title>
-        <link href="css/bootstrap.css" rel="stylesheet">
+        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.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="index.html" style="display: inline-block">
+                    <a class="btn btn-info pull-left" href="/" style="display: inline-block">
                         <i class="icon-arrow-left"></i>Home </a>
-                    <!--<a "id="shoppingCart" class="btn btn-info pull-right" style="display:inline-block"><i class="icon-shopping-cart"></i> Shopping Cart </a> -->
-                    <a class="brand" style="margin-left: 250px">&nbsp;&nbsp; Past Order </a>
-                    
+                    <a class="brand" style="margin-left: 250px">&nbsp;&nbsp; Retrieve Past Order </a>
+
                 </div>
             </div>
         </div>
 
+        <!--Div for user to input email-->
+        <div class="container" id="inputEmailDiv">
+            <div class="span2"></div>
+            <div class="span7">
+                <br/>
+
+                <!--Email address -->
+                <div class="row well" style="margin-left: 10px"> 
+                    <form class="form-horizontal2 ">
+                        <legend> Enter the email you have registered with us </legend>
+
+                        <div class="control-group">
+                            <label class="control-label" for="emailAddress">Email Address </label>
+                            <div class="controls">
+                                <input type="text" id="emailAddress" placeholder="Email Address">
+                            </div>
+                        </div>
+
+                    </form>
+                    <p class="text-info">
+                        <small>Note: only the last 5 orders will be retrieved </small>
+                    </p>
+                    <p class="text-warning" id ="errorMessageNoOrder" style="display: none" >
+
+                    </p>
+                    <button class="btn  btn-info pull-right" id="btnRetrieveOrder" type="button">Retrieve my past order!</button>
+
+                </div>
+
+            </div>
+        </div>
+        <!-- End of user input div -->
+
+        <!-- Start of retrieved order div -->
+        <div class ="container" id ="retrievedOrder" style="display: none" >
+            <div class="row-fluid">
+                <!-- navigation for recipet -->
+                <div class="span3">
+                    <br>
+                    <ul class="nav nav-list affix-top" id="receiptNav">
+                        <li class="nav-header">Orders ( Recent at the top)</li>
+                    </ul>
+
+                </div>
+
+                <!-- reciept details -->
+                <div class="span8" style="margin-left:50px" >
+                    </br>
+                    <h4 style="margin-left:-20px"> Products Ordered </h4>
+                    <div id="receiptDetail">
+                    </div>
+                </div>
+
+            </div>
+        </div>
+        <!-- End of retrieved order 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 src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
+
+        <script>
+            
+            var hasOrders = 0;
+            
+            $('#btnRetrieveOrder').click(function() 
+            {
+                
+                if(validateEmailInput() == false){
+                    $('#errorMessageNoOrder').show();
+                    return;
+                }
+                
+                getEmailDetail();
+                
+          
+                if(hasOrders)
+                {
+                    console.log("came inside here have order");
+                    $('#inputEmailDiv').hide();
+                    $('#retrievedOrder').show();
+                }
+                else {
+                    console.log("no orders");
+                    var errorMsgDiv =  document.getElementById("errorMessageNoOrder");
+                    errorMsgDiv.innerHTML = "No orders found!";
+                    $('#errorMessageNoOrder').show();
+                }
+
+                
+            });
+            
+            function validateEmailInput() {
+                var email = $('#emailAddress').val();
+                var errorMsgDiv =  document.getElementById("errorMessageNoOrder");
+                    
+                if(email.toString().length ==0)
+                {
+                    errorMsgDiv.innerHTML = "Email can't be empty!";
+                    return false;
+                }
+                
+                if(isValidEmailAddress(email) == false){
+                    errorMsgDiv.innerHTML = "Invalid email format!";
+                    return false;
+                }
+                return true;
+                
+            }
+            
+            function isValidEmailAddress(emailAddress) {
+                var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
+                return pattern.test(emailAddress);
+            };
+
+            
+            function getEmailDetail()
+            {
+                var email = $('#emailAddress').val();
+                console.log("finding product email = " + email);
+                
+                $.ajax({
+                    url:  "http://lowe.jschua.com/DinoPos/api/orders/?email=" + email,
+                    dataType: 'json',
+                    async:false,
+                    success:function(data) {
+                        $.each(data, function (key, val) {
+                            var receiptId = val.Receiptid;
+                            var orderId = val.Order_ID;
+                        
+                            hasOrders = 1;
+                       
+                            if(key <5) 
+                            {
+                                //add the receipt id to the list
+                                if(key ==0) 
+                                {
+                                    var receiptNavDetail =  '<li id=\"'+orderId+'\" class=\"active\" onclick=\"loadReceipetDetail('+orderId+')\"><a href=\"#\"><br>Receipt id: '+ receiptId +'<i class=\"icon-chevron-right pull-right\"></i></a></li>';
+                                    loadReceipetDetail(orderId);
+                                }
+                                else
+                                    var receiptNavDetail =  '<li id=\"'+orderId+'\" onclick=\"loadReceipetDetail('+orderId+')\"><a href=\"#\"><br>Receipt id: '+ receiptId +'<i class=\"icon-chevron-right pull-right\"></i></a></li>';
+                                $('#receiptNav').append(receiptNavDetail);
+                            }
+                        });
+                    }
+                });
+            }
+            
+            function loadReceipetDetail(orderId){
+                console.log("finding order id =  !" +orderId); 
+                
+                setFieldActive(orderId);
+                
+                this.className ="active";
+                
+                clearExistingProduct();
+                
+                $.getJSON("http://lowe.jschua.com/DinoPos/api/orders/" + orderId,
+                function (val) {
+                   
+                    $.each(val.OrderDets, function (key2, det) {
+                        loadProductDetail(det.Product_ID,det.Quantity,det.Netprice);
+                    });
+                        
+                })
+                .fail(
+                function (jqXHR, textStatus, err) {
+                    console.log('error :'+err);
+                });
+                
+                
+            }
+            
+            function loadProductDetail(productId,quantityOrdered,totalPrice) {
+                
+                console.log("searching for product id =="+productId);
+                
+                $.getJSON("http://lowe.jschua.com/DinoPos/api/products/" + productId,
+                function (val) {
+                    
+                    var divInPlace =  document.getElementById("receiptDetail");
+            
+                    //creating display content
+                    
+                    //creating row well
+                    var mainDiv = document.createElement("div");
+                    mainDiv.className = "row well";
+                    
+                    //creating image left col
+                    var leftDiv = document.createElement("div");
+                    leftDiv.className="span3";
+                    var productImageHtml = "<img class=\"img-rounded\" style=\"margin-left:10px\" src =\" "+val.ImageUrl+" \" >";
+                    leftDiv.innerHTML = productImageHtml;
+                
+                    //creating the right col (product info)
+                    var rightDiv = document.createElement("div")
+                    rightDiv.className ="span3";
+                    var productBrand = "<h6> Product Brand: " + val.Brand + "</h6>";
+                    var priceQtyTotal = "<p> Name: "+ val.Name + "</br> Price Each: "+val.Pricesell +"</br> Quantity ordered: "+quantityOrdered+ "</br> Sub Total: "+totalPrice+" </p>";
+                    rightDiv.innerHTML = productBrand + priceQtyTotal;
+                    
+                    mainDiv.appendChild(leftDiv);
+                    mainDiv.appendChild(rightDiv);
+                    
+                    divInPlace.appendChild(mainDiv);
+                    //$('#receiptDetail').appendChild(mainDiv);
+                    
+                })
+                .fail(
+                function (jqXHR, textStatus, err) {
+                    console.log("Error =="+err);
+                });
+
+            }
+            
+            function setFieldActive(orderId) {
+                
+                var node = document.getElementById("receiptNav").childNodes;
+                
+                for(i=0;i<node.length;i++)
+                {
+                    if(node[i].id != orderId)
+                        node[i].className = "";
+                    else
+                        node[i].className ="active";
+                }
+               
+            }
+            
+            function clearExistingProduct() {
+                 
+                var myNode = document.getElementById("receiptDetail");
+               
+                while (myNode.firstChild) {
+                    myNode.removeChild(myNode.firstChild);
+                }
+                
+            }
+        
+            
+        </script>
     </body>
 </html>

File templates/promotion.html

     <head>
         <meta name="apple-mobile-web-app-capable" content="yes" />
         <title id="systemName">Mobile POS</title>
-        <link href="css/bootstrap.css" rel="stylesheet">
+        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.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="index.html" style="display: inline-block">
+                    <a class="btn btn-info pull-left" href="/" style="display: inline-block">
                         <i class="icon-arrow-left"></i>Home </a>
                     <!--<a "id="shoppingCart" class="btn btn-info pull-right" style="display:inline-block"><i class="icon-shopping-cart"></i> Shopping Cart </a> -->
                     <a class="brand" style="margin-left: 250px">&nbsp;&nbsp; Latest promotion </a>
             </div>
         </div>
 
+        <div class="container"> 
+            <div class="row-fluid">
+                </br>
+                
+                <div class="" style="margin-left:10px" id="storeDealDiv">
+                    <div class="row well">
+                        <div class="span3">
+                            <img class="img-rounded" style="margin-left:10px " src="static/img/promotion/spring_chicken.jpg">
+                        </div>
+                        <div class="span5" style="margin-left:20px">
+                            <h5> Lunch promotion! </h6>
+                                <p>  
+                                    Spring Chicken with French Fries and Broccoli at $6.00 UP$7.50.
+                                    Available from 3 September to 31 October 2012.
+                                </p>
+                                <br/>
+                        </div>
+                    </div>
+                    <div class="row well">
+                        <div class="span3">
+                            <img class="img-rounded" style="margin-left:10px " src="static/img/promotion/supperalex.jpg">
+                        </div>
+                        <div class="span5" style="margin-left:20px">
+                            <h5> Supper at IKEA Alexandra! </h5>
+                            <h6> Supper Menu for October:  </h6>
 
-        <div class="row-fluid">
-            <div class="span3">
-                <br>
-                <ul class="nav nav-list affix-top">
-                    <!--<li class="nav-header">Products Categories</li> -->
-                    <li class="active">
-                        <a  id="dealOfTheDay"><br>Deal of the day
-                            <i class="icon-chevron-right pull-right"></i>
-                        </a>
-                    </li>
-                    <li>
-                        <a  id="storeDeal"><br> Exclusive store deal 
-                            <i class="icon-chevron-right pull-right"></i>
-                        </a>
-                    </li>
-                </ul>
-            </div>
-            <br/>
-            <div class="span8" style="margin-left:10px" id="dealOfTheDayDiv">
-                <div class="row well">
-                    <div class="span3">
-                        <img class="img-rounded" style="margin-left:10px " src="http://www.placehold.it/300x300">
-                    </div>
-                    <div class="span3" style="margin-left:20px">
-                        <h6> Product Brand </h6>
-                        <h6> Title </h6>
-                        <h6> Description  </h6>
-                        <h6> Price: $100 </h6>
-                        <button class="btn btn-success">Add item to cart</button>
-                        <br/>
+                            <p>
+                                Mee Rebus @ $1.90
+                                Available from 1 October - 7 October. 
+                            </p>
+
+                            <p>
+                                Mee Siam @ $1.90
+                                Available from 15 October - 21 October. 
+                            </p>
+
+                            <p>
+                                Mee Rebus @ $1.90
+                                Available from 22 October - 28 October.
+                            </p>
+                            <br/>
+                        </div>
                     </div>
                 </div>
-                <div class="row well">
 
-                    <div class="span3">
-                        <img class="img-rounded" style="margin-left:10px " src="http://www.placehold.it/300x300">
-                    </div>
-                    <div class="span3" style="margin-left:20px">
-                        <h6> Product Brand </h6>
-                        <h6> Title </h6>
-                        <h6> Description  </h6>
-                        <h6> Price: $100 </h6>
-                        <button class="btn btn-success">Add item to cart</button>
-                        <br/>
-                    </div>
-                </div>
             </div>
-
-            <div class="span8" style="margin-left:10px;display:none" id="storeDealDiv">
-                <div class="row well">
-                    <div class="span3">
-                        <img class="img-rounded" style="margin-left:10px " src="img/promotion/spring_chicken.jpg">
-                    </div>
-                    <div class="span5" style="margin-left:20px">
-                        <h5> Lunch promotion! </h6>
-                            <p>  
-                                Spring Chicken with French Fries and Broccoli at $6.00 UP$7.50.
-                                Available from 3 September to 31 October 2012.
-                            </p>
-                            <br/>
-                    </div>
-                </div>
-                <div class="row well">
-                    <div class="span3">
-                        <img class="img-rounded" style="margin-left:10px " src="img/promotion/supperalex.jpg">
-                    </div>
-                    <div class="span5" style="margin-left:20px">
-                        <h5> Supper at IKEA Alexandra! </h5>
-                        <h6> Supper Menu for October:  </h6>
-
-                        <p>
-                            Mee Rebus @ $1.90
-                            Available from 1 October - 7 October. 
-                        </p>
-
-                        <p>
-                            Mee Siam @ $1.90
-                            Available from 15 October - 21 October. 
-                        </p>
-
-                        <p>
-                            Mee Rebus @ $1.90
-                            Available from 22 October - 28 October.
-                        </p>
-                        <br/>
-                    </div>
-                </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>
-            $(function ()
-            {
-                
-                $('#dealOfTheDay').click(function(event) {
-                    $(this).parent().addClass('active');
-                    $('#storeDeal').parent().removeClass('active');
-                    $('#branchMapDiv').hide();
-                    $('#storeDealDiv').show();
-                   
-                });
-                
-                $('#storeDeal').click(function() {
-                    $(this).parent().addClass('active');
-                    $('#dealOfTheDay').parent().removeClass('active');
-                    $('#dealOfTheDayDiv').hide();
-                    $('#storeDealDiv').show();
-                });
-                
-            });
-            
-        </script>
+        <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script> 
     </body>
 </html>

File templates/purchase.html

                 </div>
                 <div class="row">
                     <div class="col offset1">
-                        <a class="btn btn-small btn-info" href="checkOut.html" style="display: inline-block">
+                        <a class="btn btn-small btn-info" href="#checkout" style="display: inline-block">
                             Checkout <i class="icon-arrow-right"></i>
                         </a>
                     </div>
             <br>
             <ul class="nav nav-list affix-top">
                 <!--<li class="nav-header">Products Categories</li> -->
-                <li class="active"><a href="#all"><br>All
+                <li class="active"><a href="#" id="all"><br>All
                     <i class="icon-chevron-right pull-right"></i></a></li>
-                <li><a href="#tables"><br>Tables
+                <li><a href="#" id="shade"><br>Lamp Shades
                     <i class="icon-chevron-right pull-right"></i></a></li>
-                <li><a href="#chairs"><br>Chairs
+                <li><a href="#" id="lamp"><br>Lamps
                     <i class="icon-chevron-right pull-right"></i></a></li>
-                <li><a href="#beds"><br>Beds
+                <li><a href="#" id="trolley"><br>Kitchen Trolleys
                     <i class="icon-chevron-right pull-right"></i></a></li>
-                <li><a href="#lightings"><br>Lightings
+                <li><a href="#" id="mirror"><br>Mirrors
                     <i class="icon-chevron-right pull-right"></i></a></li>
-                <li><a href="#"><br>Cupboards
+                <li><a href="#" id="storage"><br>TV & Storage
+                    <i class="icon-chevron-right pull-right"></i></a></li>
+                <li><a href="#" id="cord-set"><br>Cord Sets
+                    <i class="icon-chevron-right pull-right"></i></a></li>
+                <li><a href="#" id="bedframe"><br>Bedframes
                     <i class="icon-chevron-right pull-right"></i></a></li>
             </ul>
         </div>