Source

POS Front End Updated UI / templates / branchInfo.html

Full commit
<!--
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="//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="/" style="display: inline-block">
                        <i class="icon-arrow-left"></i>Home </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>

                <!-- 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>
        </div>
        <!-- End of retrieved order div --> 

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.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);
                });

            }
            
            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);
                }
                
                var tab2Node = document.getElementById("tab2");
               
                while (tab2Node.firstChild) {
                    tab2Node.removeChild(tab2Node.firstChild);
                }
                
            }
            
            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>

    </body>
</html>