Commits

Anonymous committed 84b748f

-removed redudant .html files
-added branch info and latest promo functionality

Comments (0)

Files changed (13)

build/web/branchInfo.html

                     <!-- HOME BTN -->
                     <a class="btn btn-info pull-left" href="index.html" 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>
-            $(function ()
+            
+            $(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);
+                });
+
+            }
+            
+            function loadBranch(branchId)
+            {
+                clearExistingBranch();
                 
-                $('#branchDetail').click(function(event) {
-                     $(this).parent().addClass('active');
-                    $('#branchMap').parent().removeClass('active');
-                    $('#branchMapDiv').hide();
-                    $('#branchDetailDiv').show();
-                   
+                $.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", "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);
+                }
                 
-                $('#branchMap').click(function() {
-                    $(this).parent().addClass('active');
-                    $('#branchDetail').parent().removeClass('active');
-                    $('#branchDetailDiv').hide();
-                    $('#branchMapDiv').show();
-                });
+                var tab2Node = document.getElementById("tab2");
+               
+                while (tab2Node.firstChild) {
+                    tab2Node.removeChild(tab2Node.firstChild);
+                }
                 
-            });
+            }
+            
             
         </script>
 

build/web/pastOrder.html

                     <!-- HOME BTN -->
                     <a class="btn btn-info pull-left" href="index.html" 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; Retrieve Past Order </a>
 
                 </div>
                         $.each(data, function (key, val) {
                             var receiptId = val.Receiptid;
                             var orderId = val.Order_ID;
-                            var totalAmt = val.Totalamt;
                         
                             hasOrders = 1;
                        

build/web/promotion.html

             </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="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>
 
-        <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>
     </body>
 </html>

build/web/promotionBackUp.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="index.html" 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>
+
+        <div class="container"> 
+            <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/>
+                        </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>
+        </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>
+            
+            $(document).ready(function() {
+                getTwoPromoIdProduct();
+            });
+            
+            function getTwoPromoIdProduct() {
+                $.getJSON("http://lowe.jschua.com/DinoPos/api/discount/",
+                function (val) {
+                 
+                    var productBrand = val.Brand;
+                    var productName = val.Name;
+                    var productDescription = val.Description;
+                    var imageUrl = val.ImageUrl;
+                    
+                 
+                    // Format the text to display.
+                    var str = 'Brand_ID: ' + val.Brand_ID
+                        + '; ' + 'Brand: ' + val.Brand
+                        + '; ' + 'Product_Cat_ID: ' + val.Product_Cat_ID
+                        + '; ' + 'Product_Cat: ' + val.Product_Cat
+                        + '; ' + 'Supplier_ID: ' + val.Supplier_ID
+                        + '; ' + 'Supplier: ' + val.Supplier
+                        + '; ' + 'Name: ' + val.Name
+                        + '; ' + 'Description: ' + val.Description
+                        + '; ' + 'Color: ' + val.Color
+                        + '; ' + 'Info: ' + val.Info
+                        + '; ' + 'Guarantee: ' + val.Guarantee
+                        + '; ' + 'Pricebuy: ' + val.Pricebuy
+                        + '; ' + 'Pricesell: ' + val.Pricesell
+                        + '; ' + 'ImageURL: ' + val.ImageUrl
+                    ;
+
+                    // Add a list item for the product.
+                    $('#product').text(str);
+                })
+                .fail(
+                function (jqXHR, textStatus, err) {
+                    $('#product').text('Error: ' + err);
+                });
+
+            }
+            
+            $(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>
+    </body>
+</html>

build/web/samplePlay.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="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>
-
-
-        <div class="popover">
-            <div class="arrow">
-            </div>
-            <div class="popover-inner">
-                <h3 class="popover-title">
-
-                </h3>
-                <div class="popover-content">
-                    <p></p>
-                </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>
-            $('#example').popover({
-                template: '<div class="popover"><div class="arrow"></div><div class="popover-inner myclass"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
-            });
-        </script>
-
-    </body>
-
-
-</html>

build/web/testtest.html

-<!DOCTYPE html>   
-<html lang="en">   
-    <head>   
-        <meta charset="utf-8">   
-        <title>Twitter Bootstrap Popover Example</title>   
-        <meta name="description" content="Creating Modal Window with Twitter Bootstrap">  
-        <link href="css/bootstrap.css" rel="stylesheet">  
-    </head>  
-    <body>  
-        <div class="container">  
-            <h2>Example of creating Modal with Twitter Bootstrap</h2>  
-            <div class="well">  
-                <a href="#" id="example" class="btn btn-danger" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>  
-            </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 ()  
-            { $("#example").popover();  
-            });  
-        </script>  
-    </body>  
-</html>  

dist/PosWebHtml2.war

Binary file modified.

web/branchInfo.html

                     <!-- HOME BTN -->
                     <a class="btn btn-info pull-left" href="index.html" 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>
-            $(function ()
+            
+            $(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);
+                });
+
+            }
+            
+            function loadBranch(branchId)
+            {
+                clearExistingBranch();
                 
-                $('#branchDetail').click(function(event) {
-                     $(this).parent().addClass('active');
-                    $('#branchMap').parent().removeClass('active');
-                    $('#branchMapDiv').hide();
-                    $('#branchDetailDiv').show();
-                   
+                $.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", "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);
+                }
                 
-                $('#branchMap').click(function() {
-                    $(this).parent().addClass('active');
-                    $('#branchDetail').parent().removeClass('active');
-                    $('#branchDetailDiv').hide();
-                    $('#branchMapDiv').show();
-                });
+                var tab2Node = document.getElementById("tab2");
+               
+                while (tab2Node.firstChild) {
+                    tab2Node.removeChild(tab2Node.firstChild);
+                }
                 
-            });
+            }
+            
             
         </script>
 

web/pastOrder.html

                     <!-- HOME BTN -->
                     <a class="btn btn-info pull-left" href="index.html" 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; Retrieve Past Order </a>
 
                 </div>
                         $.each(data, function (key, val) {
                             var receiptId = val.Receiptid;
                             var orderId = val.Order_ID;
-                            var totalAmt = val.Totalamt;
                         
                             hasOrders = 1;
                        

web/promotion.html

             </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="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>
 
-        <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>
     </body>
 </html>

web/promotionBackUp.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="index.html" 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>
+
+        <div class="container"> 
+            <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/>
+                        </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>
+        </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>
+            
+            $(document).ready(function() {
+                getTwoPromoIdProduct();
+            });
+            
+            function getTwoPromoIdProduct() {
+                $.getJSON("http://lowe.jschua.com/DinoPos/api/discount/",
+                function (val) {
+                 
+                    var productBrand = val.Brand;
+                    var productName = val.Name;
+                    var productDescription = val.Description;
+                    var imageUrl = val.ImageUrl;
+                    
+                 
+                    // Format the text to display.
+                    var str = 'Brand_ID: ' + val.Brand_ID
+                        + '; ' + 'Brand: ' + val.Brand
+                        + '; ' + 'Product_Cat_ID: ' + val.Product_Cat_ID
+                        + '; ' + 'Product_Cat: ' + val.Product_Cat
+                        + '; ' + 'Supplier_ID: ' + val.Supplier_ID
+                        + '; ' + 'Supplier: ' + val.Supplier
+                        + '; ' + 'Name: ' + val.Name
+                        + '; ' + 'Description: ' + val.Description
+                        + '; ' + 'Color: ' + val.Color
+                        + '; ' + 'Info: ' + val.Info
+                        + '; ' + 'Guarantee: ' + val.Guarantee
+                        + '; ' + 'Pricebuy: ' + val.Pricebuy
+                        + '; ' + 'Pricesell: ' + val.Pricesell
+                        + '; ' + 'ImageURL: ' + val.ImageUrl
+                    ;
+
+                    // Add a list item for the product.
+                    $('#product').text(str);
+                })
+                .fail(
+                function (jqXHR, textStatus, err) {
+                    $('#product').text('Error: ' + err);
+                });
+
+            }
+            
+            $(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>
+    </body>
+</html>

web/samplePlay.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="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>
-
-
-        <div class="popover">
-            <div class="arrow">
-            </div>
-            <div class="popover-inner">
-                <h3 class="popover-title">
-
-                </h3>
-                <div class="popover-content">
-                    <p></p>
-                </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>
-            $('#example').popover({
-                template: '<div class="popover"><div class="arrow"></div><div class="popover-inner myclass"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
-            });
-        </script>
-
-    </body>
-
-
-</html>

web/testtest.html

-<!DOCTYPE html>   
-<html lang="en">   
-    <head>   
-        <meta charset="utf-8">   
-        <title>Twitter Bootstrap Popover Example</title>   
-        <meta name="description" content="Creating Modal Window with Twitter Bootstrap">  
-        <link href="css/bootstrap.css" rel="stylesheet">  
-    </head>  
-    <body>  
-        <div class="container">  
-            <h2>Example of creating Modal with Twitter Bootstrap</h2>  
-            <div class="well">  
-                <a href="#" id="example" class="btn btn-danger" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>  
-            </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 ()  
-            { $("#example").popover();  
-            });  
-        </script>  
-    </body>  
-</html>