Mobile POS Front End / web / paymentSummary.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title id="systemName">Mobile POS</title>

        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">

    </head>

    <body>
        <div class="container">
            <img id ="mainBanner" src="img/banner.png" />
        </div>

        <div class="container">
            <div class="row">
                <div class="span12  " id="div_productExecuteSummary">
                    <Legend id="receiptId"> Order </Legend>
                    <table class="table table-bordered" id="table_productExecuteSummary">
                        <thead>
                            <tr>
                                <th >Item(Qty)</th>
                                <th>Total Price</th>
                            </tr>
                        </thead>

                        <tbody>
                        </tbody>
                    </table>

                    <h5 id="TotalPrice"> </h5>
                </div>
            </div>
            <p/>
            <div class="row">
                <div class="span12  " id="div_customerDetails">
                    <Legend > Deliver details </Legend>

                    <table class="table table-bordered" id="table_customerDetail">
                        <thead>
                            <tr></tr>
                            <tr>
                                <th class="span2" >Name </th>
                                <td  id="td_customerName"></td>
                            </tr>
                            <tr>
                                <th>Address </th>
                                <td  id="td_customerAddress"> </td>
                            </tr>
                            <tr>
                                <th>Tel </th>
                                <td  id="td_customerTel"> </td>
                            </tr>
                            <tr>
                                <th>Email </th>
                                <td  id="td_customerEmail"> </td>
                            </tr>
                        </thead>

                    </table>

                </div>
            </div>
            <br/><br/>
            <p class="offset4">
                <small>Thank you for shopping with iFurniture.</small>
            </p>

        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
        <script src="js/lib/json2.js"></script>
        <!-- config java script -->
        <script src="js/mainConfig.js"></script>

        <script>
            
            $(document).ready(function(){
                
                runAtStartUp();
                
                getProductDataFromCookieAndDisplay();
                var orderId = readCookie('orderId');
            
                var totalPrice = readCookie('grandTotal');
                $('#TotalPrice').text("Total: $"+totalPrice);
               
                //load recipt number 
                $('#receiptId').text("Receipt No - "+readCookie('receiptId'));
                
                //set customer delivery info   
                var customerDetail = $.parseJSON(readCookie('customerDetail'));
                if(customerDetail!=null)
                {
                    $('#td_customerName').text(customerDetail.Name);
                    $('#td_customerAddress').text(customerDetail.Address);
                    $('#td_customerTel').text(customerDetail.Tel);
                    $('#td_customerEmail').text(customerDetail.Email);
                    
                } 

            });
            
            /*
             *Function  load what the user has added the item in the shopping cart to the summary order page
             */
            function getProductDataFromCookieAndDisplay()
            {
                var shoppingCartCookie = new Array();
                shoppingCartCookie = $.parseJSON(readCookie('shoppingCart'));
                if(shoppingCartCookie!=null)
                {
                    for(var i=0;i<shoppingCartCookie.length;i++)
                    {                                
                        var productId = shoppingCartCookie[i].productId;
                        var productName = shoppingCartCookie[i].productName;
                        var productQty = shoppingCartCookie[i].productQty;
                                    
                        var productTotal = shoppingCartCookie[i].productTotal;
                        var productNameAndQty = productName+"("+productQty+")";
                                    
                        var tableDetailHeader ="<tr>";
                        var tableProductNameAndQty ="<td class=\""+productId+"\" id=\"productNameAndQty\">"+productNameAndQty+"</td>";
                        var tableProductTotal ="<td id=\"productTotal\">"+productTotal+"</td>";
                        var tableDetailFooter ="</tr>";
                        var entireTable = tableDetailHeader + tableProductNameAndQty + tableProductTotal +tableDetailFooter;
                                    
                        $("#table_productExecuteSummary > tbody:last").append(entireTable);
                    }
                } 
            }
  
            function createCookie(name,value,days) {
                if (days) {
                    var date = new Date();
                    date.setTime(date.getTime()+(days*24*60*60*1000));
                    var expires = "; expires="+date.toGMTString();
                }
                else var expires = "";
                document.cookie = name+"="+value+expires+"; path=/";
            }
            
            function readCookie(name) {
                var nameEQ = name + "=";
                var ca = document.cookie.split(';');
                for(var i=0;i < ca.length;i++) {
                    var c = ca[i];
                    while (c.charAt(0)==' ') c = c.substring(1,c.length);
                    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
                }
                return null;
            }
        </script>

    </body>

</html>
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.