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">
        <meta name="apple-mobile-web-app-capable" content="yes" />
    </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>
            <!-- 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() {
                    console.log('ready');
                    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>