CPP_Builder_Rob_Page

gistfile1.html

<apex:page title="CPP Builder (Rob)" controller="CPPBuilderRob" sidebar="false">
    
     <!-- Get the session for connection.js -->
    <script type="text/javascript">
        var __sfdcSessionId = '{!GETSESSIONID()}';
    </script>
    
    <!-- jQueryUI Theme -->
    <link rel="stylesheet" href="{!URLFOR($Resource.jQueryGridPre19, '/jquery-jquery-ui-b5c4529/themes/base/jquery.ui.all.css')}"/>
    
    <!-- Script references -->
    <apex:includeScript value="{!URLFOR($Resource.jQueryGridPre19, '/jquery-jquery-ui-b5c4529/jquery-1.5.1.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQueryGridPre19, '/jquery-jquery-ui-b5c4529/ui/jquery.ui.core.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQueryGridPre19, '/jquery-jquery-ui-b5c4529/ui/jquery.ui.widget.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQueryGridPre19, '/jquery-jquery-ui-b5c4529/ui/jquery.ui.button.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQueryGridPre19, '/jquery-jquery-ui-b5c4529/ui/jquery.ui.tabs.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQueryTemplateBeta, 'jquery.tmpl.js')}"/>
    <script src="../../soap/ajax/22.0/connection.js" type="text/javascript"/>

    <script type="text/javascript">

    var opportunityId = '006Q0000008RIxL';
    var lastModified = '';
    var pollerTimeout = 2500;

    // Page Load
    $(function () {                        
        
        // Load Page Content
        loadTabs();
        
        // Add OnClick Events
        $('.viewReport').live('click', viewReport);
        $('.uploadReport').live('click', uploadReport);
        $('.removeReport').live('click', removeReport);
    });
    
    // Load Tabs on Page Load
    function loadTabs() {
      
        // Javascript remoting
        CPPBuilderRob.GetReportGroups(opportunityId, function(result, event) {
            
            if(event.type == 'exception') {
                alert(event.message);    
            } else {

                // Render Tabs
                var render = $('#tabContainerTemplate').tmpl(result);
                $('#tabs').empty();
                render.appendTo('#tabs');
                
                // Style with jQuery UI Widget
                $('#tabs').tabs();
                
                // Set timeout
                lastModified = result.LastModifiedDate;
                setTimeout("pollUpdate()", pollerTimeout);
            }
        });
    }
    
    // Check for Refresh
    function pollUpdate() {
    
        // Javascript remoting
        CPPBuilderRob.GetLastModifiedDate(opportunityId, function(result, event) {
            if(event.type == 'exception') {
                alert(event.message);    
            } else {
                if (lastModified != result) {
                    // Only reload tabs if data is updated
                    reloadTabs();
                } else {
                    // Set timeout
                    setTimeout("pollUpdate()", pollerTimeout);
                }
            }
        });
    }
    
    // Refresh Tabs on Interval
    function reloadTabs() {
      
        // Javascript remoting
        CPPBuilderRob.GetReportGroups(opportunityId, function(result, event) {
            
            if(event.type == 'exception') {
                alert(event.message);    
            } else {

                // Refresh each individual tab by updating data item
                for (var groupIndex = 0; groupIndex < result.Groups.length; groupIndex++) {
                    var group = result.Groups[groupIndex];
                    var tabName = '#reportTable-' + group.GroupNumber;
                    
                    // Get the tmplItem
                    var tmplItem = $(tabName).tmplItem();
                    
                    // Update the data and refresh
                    tmplItem.data = group;
                    tmplItem.update();
                }
                
                // Set timeout
                setTimeout("pollUpdate()", pollerTimeout);
            }
        });
    }
    
    // Callback OnClick View Link
    function viewReport() {
        var tmplItem = $(this).tmplItem();
        var report = tmplItem.data;
        var url = "/" + report.Id + "/e";
        var editWindow = window.open(url,'Upload','height=500,width=600,left=100,top=100,status=no,scrollbars=yes,resizable=yes');
        editWindow.focus();
        
        // Prevent browser location update
        return false;
    }
    
    // Callback OnClick Upload Link
    function uploadReport() {
        var tmplItem = $(this).tmplItem();
        var report = tmplItem.data;
        var url = "/apex/cppUploadManualReport"
            + "?oppId=" + report.OpportunityId__c
            + "&repId=" + report.Id
            + "&prop=" + report.Proposal_Id__c
            + "&repName=" + report.Report_Name__c;
        var uploadWindow = window.open(url,'Upload','height=350,width=600,left=200,top=200,status=no,scrollbars=no,resizable=no');
        uploadWindow.focus();
        
        // Prevent browser location update
        return false;
    }
    
    // Callback OnClick Remove Link
    function removeReport() {
    
        // Retrieve the template/data item used to render the row
        var tmplItem = $(this).tmplItem();

        // Style while deleting
        $(tmplItem.nodes).css('background-color', '#fbd');
        $(tmplItem.nodes).css('font-style', 'italic');
        
        // Delete from database
        CPPBuilderRob.RemoveReport(tmplItem.data.Id, function(result, event) {
        
            if(event.type == 'exception') {
                alert(event.message);    
            } else {
                // Remove row when complete
                $(tmplItem.nodes).hide();
            }
        });
        
        // Prevent browser location update
        return false;
    }
    
    // Simple timestamp string
    function getTime() {
        var dateTime = new Date();
        return dateTime.toLocaleTimeString();
    }
    </script>
    
     <!-- jQuery template - Tabs Container -->
    <script id="tabContainerTemplate" type="text/x-jquery-tmpl">
        <ul id="tabUl">
            {{each Groups}}
                <li><a href="#tabs-${GroupNumber}">${GroupName}</a></li>
            {{/each}}
        </ul>
        {{tmpl(Groups) "#tabTemplate"}}
    </script>
    
    <!-- jQuery template - Tab -->
    <script id="tabTemplate" type="text/x-jquery-tmpl">

        <div id="tabs-${GroupNumber}">
            {{tmpl "#reportTableTemplate"}}
        </div>
        
    </script>
        
    <!-- jQuery template - Report Table -->
    <script id="reportTableTemplate" type="text/x-jquery-tmpl">

        <div id="reportTable-${GroupNumber}">
            <h2>${Reports.length} Reports</h2>
            <table class="dataTable">
                <colgroup>
                    <col width="50%"/>
                    <col width="10%"/>
                    <col width="10%"/>
                    <col width="10%"/>
                    <col width="10%"/>
                    <col width="10%"/>
                </colgroup>
                <thead>
                    <tr>
                        <th>Report Name</th>
                        <th>Source</th>
                        <th>Status</th>
                        <th>View</th>
                        <th>Upload</th>
                        <th>Remove</th>
                    </tr>
                </thead>
                <tbody>
                    {{tmpl(Reports) "#reportRowTemplate"}}
                </tbody>
            </table>
            Updated: ${getTime()}
        </div>
    </script>
    
     <!-- jQuery template - Report Row -->
    <script id="reportRowTemplate" type="text/x-jquery-tmpl">
        <tr class="dataRow {{if IsStandard__c}}dataStandardRow{{/if}}">
            <td>${Report_Name__c}</td>
            <td>${Source_System__c}</td>
            <td>${Status__c}
                {{if Status__c}}
                {{else !IsManual__c}}
                    <img src="{!URLFOR($Resource.AjaxArrowsGif)}"/>
                {{/if}}
            </td>
            <td><a class="viewReport" href="/${Id}">View</a></td>
            <td>
                {{if IsManual__c}}
                    <a class="uploadReport" href="#uploadReport">Upload</a>
                {{/if}}
            </td>
            <td>
                {{if !IsStandard__c}}
                    <a class="removeReport" href="#removeReport">Remove</a>
                {{/if}}
            </td>
        </tr>
    </script>

    <!-- Simple stylesheets for the table and rows -->  
    <style type="text/css">
        table.dataTable
        {
            width: 100%;
            border-collapse: collapse;
        }
        table.dataTable th, table.dataTable td
        {
            border: 1px solid #888;
            text-align: left;
            vertical-align: top;
            padding: 5px;
        }
        tr.dataStandardRow
        {
            font-weight: bold;
            background-color: #efedee;
        }
        tr.dataRow:hover
        {
            background-color: #cef;
        }
    </style>
        
    <!-- Target div for rendered templates -->
    <div id="tabs" />
    
    <!-- Links to code -->
    <br/><h2>See the code:</h2><br/>
    <a href="/01pQ0000000DyxD/e">CPPBuilderRob : Apex Class</a><br/>
    <a href="/066Q000000098u9/e">CPPBuilderRob : Visual Force Page</a>
    
</apex:page>