Visualize diagnostic tool. v 2.0a

by Pavel Savushchyk

HTML

<script src="http://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 type="text/javascript">
    window.addEventListener("load", onLoad);
</script>
<div id="panel">
    
    <ul class="sections">
        <li id="containerLoadV" >
            <div id="serverUrlsDiv"></div>
            <label for="confLocale">Locale: </label>
            <input id="confLocale" value="en" style="width: 30px"/>
            <!-- options -->
            <br/>
            <input id="confOptimized" type="checkbox" />
            <label for="confOptimized" >optimized</label>
            <br/>
            <input id="logEnabled" type="checkbox" />
            <label for="logEnabled" >enable log</label>
            <select id="logLevel">
                <option value="debug">debug</option>
                <option value="info">info</option>
                <option value="warn">warn</option>
                <option value="error" selected="selected">error</option>
            </select>
            <br/>
            <button id="loadV">Load visualize</button>
            <br/>
            
        </li>
        
        
        <li id="loadReports" style="display:none;">
            <div>Add report:</div>
            <input id="defaultJiveUi" type="checkbox" checked="checked" />
            <label for="defaultJiveUi" >- default JIVE UI </label>
            <br/>
            <input id="isolateDOM" type="checkbox" />
            <label for="isolateDOM" >- isolate DOM </label>
            <br/>

            <select id="selected_resource" name="report" style="width:195px"></select>
            <button id="addReport">Add</button>
        </li>
        <li>
            <p>Loaded reports list:</p>
            <ul id="reportsList" style="overflow-wrap: break-word;display:inline;"></ul>
        </li>
        <li>
            <p>Stylesheets list:</p>
            <em>Use 1-9 keys to...

CSS

html, body {
    width: 100%;
    min-height: 100%;
    margin: 0;
}
iframe {
    position: absolute;
    left: 250px;
    min-height: 100%;
    width: auto;
}
#panel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    overflow-y: scroll;
    width: 250px;
    background-color: white;
}

#containerLoadV.disabled {
    color: #666;
}
ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.sections > li {
    /*float: left;*/
}

JavaScript

function injectScriptSrc(win, src) {
    var script = win.document.createElement("script");
    script.type = "text/javascript";
    script.src = src;
    win.document.body.appendChild(script);
}

// ************ SETTINGS **********
var serverUrls = [
    {
        url: "http://localhost:8080/jasperserver-pro",
        name: "localhost:8080"
    },
    {
        url: "http://build-master.jaspersoft.com:3980/jrs-pro-hotfix-5.6.0",
        name: "hotfix"
    },
    {
        url: "http://build-master.jaspersoft.com:7980/jrs-pro-bugfix",
        name: "bugfix"
    },
    {
        url: "http://build-master.jaspersoft.com:5980/jrs-pro-trunk",
        name: "trunk"
    },
    {
        url: "http://build-master.jaspersoft.com:6680/jrs-pro-feature-visualizejs",
        name: "vis branch"
    },
    {
        url: "http://visualizejs-preview.eng.jaspersoft.com:8080/jasperserver-pro-branch",
        name: "preview"
    }
];
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].name)
            .replace("#label", serverUrls[i].name);

        $("#serverUrlsDiv").append(html);
        $("#serverUrl_" + i).prop("checked", i === urlUsed);
    }
}
function onLoad() {
    var $frame = $("#idframe1");
    var $body = $(document.body);
    $frame.height($body.height()-4);
    $frame.width($body.width()-250);
    
    $(window).on("resize", function() {
        $frame.height($body.height()-4);
        $frame.width($body.width()-250);
    });
    
    
    setupLoaderV();
    $( "#buttons_ui button:first" ).button({
     ...