Visualize: CSS/jqueryui embedding

by Pavel Savushchyk

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script src="http://172.28.146.4:8080/jasperserver-pro/client/visualize.js"></script>
<script type="text/javascript">
    window.addEventListener("load", onLoad);
</script>
<div style="width:327px;float: left;border-right:1px solid #333;margin-right:2px">
     <h4>Settings</h4>
    
    <div>
        <div id="containerLoadV">
            <div id="serverUrlsDiv"></div>
            <label for="confLocale">Locale: </label>
            <input id="confLocale" value="en" />
            <br/>
            <input id="confOptimized" type="checkbox" />
            <label for="confOptimized" >- Use optimized javascript </label>
            <br/>
            <button id="loadV">Load visualize</button>
            <br/>
            
        </div>
        <div id="loadReports" style="display:none;">
            <span>Add report:</span>

            <select id="selected_resource" name="report" style="width:195px">
                <option value="">-</option>
                <option value="/public/Samples/Reports/1._Geographic_Results_by_Segment_Report">1._Geographic_Results_by_Segment_Report</option>
                <option value="/public/Samples/Reports/2_Sales_Mix_by_Demographic_Report">2_Sales_Mix_by_Demographic_Report</option>
                <option value="/public/Samples/Reports/3_Store_Segment_Performance_Report">3_Store_Segment_Performance_Report</option>
                <option value="/public/Samples/Reports/04._Product_Results_by_Store_Type_Report">04._Product_Results_by_Store_Type_Report</option>
                <option value="/public/Samples/Reports/AllAccounts">AllAccounts</option>
                <option value="/public/Samples/Reports/5g.AccountsReport">5g.AccountsReport</option>
                <option value="/public/Samples/Reports/06g.ProfitDetailReport">06g.ProfitDetailReport</option>
   ...

JavaScript

// ************ SETTINGS **********
var serverUrls = [
    "http://172.17.10.74:8080/jasperserver-pro-branch",
    "http://localhost:8080/jasperserver-pro",
    "http://172.28.146.4:8080/jasperserver-pro",
    "http://build-master.jaspersoft.com:7580/jrs-pro-feature-amber-embedded-report",
    "http://visualizejs-preview.eng.jaspersoft.com:8080/jasperserver-pro-branch",
];
urlUsed = 2; // default used (one css loads from this server before visualize)
var reportsList = {};
// ********************************
function setupLoaderV() {
    var html,
        radioTpl = '<input id="#id" type="radio" value="#value" name="confServer" /><label for="#id" title="#title" >#label</label><br/>';
    for (var i = 0, l = serverUrls.length; i < l; i++) {
        html = radioTpl.replace(/#id/g, "serverUrl_" + i)
            .replace(/#value/g, i)
            .replace(/#title/g, serverUrls[i])
            .replace("#label", serverUrls[i].split("/")[2]);

        $("#serverUrlsDiv").append(html);
        $("#serverUrl_" + i).prop("checked", i === urlUsed);
    }
}
function onLoad() {
    
    $(document.body).append("aaaaaa");
    setupLoaderV();
 
    
    loadV(function(){
        runV();
    });    
    
}


function loadV(cb) {
    var locale = $('#confLocale').val() || "en";
    urlUsed = $('input[name="confServer"]:checked', '#containerLoadV').val();
    var useOptimize = $('#confOptimized').is(":checked");
    $(document.body).append("00001111");
    //$.getScript(serverUrls[urlUsed] + "/client/visualize.js?_opt=" + useOptimize.toString(), runV);
    $("#loadV").html("Loading...").attr("disabled", "disabled");
    $("#containerLoadV input").attr("disabled", "disabled");
    cb();
}
function runV(visualize) {
       
    $(document.body).append("22222");
        visualize({
            auth: {
                name: "superuser",
                password: "superuser",
                //locale: locale
            }
        }, function (v) {
    $(document.body).append("3333");
 ...