Visualize: uber sample

jQueryUI, css reset, embedding report to iframe, loading reports list from server

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="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.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" />
            <!-- 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/>
            
        </div>
        <div id="loadResources" 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>
        </div>
        <p>Loaded resourses list:</p>
        <ul id="resourcesList" style="overflow-wrap:...

CSS

/*.qwe {
    height: 100%;
}
#reportContainer {
    height: 100%;
}
body, html {
    height: 100%;
}
.visualizejs table {
    font-size: 1%;
}
*/

#containerLoadV.disabled {
    color: #666;
}
#selected_resource option.dashboard {
  color: blue;
}

JavaScript

// ************ SETTINGS **********
var serverUrls = [
    "http://localhost:8080/jasperserver-pro"
];
var settings = JSON.parse(getCookie("settings"));

settings = _.defaults(settings || {}, {
    	locale: "en",
      urlUsed: 0,
      useOptimize: false,
      logEnabled: false,
      logLevel: "error"
    });
    
    
var resourcesList = {};
// ********************************
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].replace(/(.+)jrs-/, "CI jrs-"));

        $("#serverUrlsDiv").append(html);
        $("#serverUrl_" + i).prop("checked", i == settings.urlUsed);
    }
    
    
    $('#confLocale').val(settings.locale);
    $('#confOptimized')[0].checked = settings.useOptimize === "true";
    $('#logEnabled')[0].checked = settings.logEnabled === "true";
    $("#logLevel").val(settings.logLevel);
}
function onLoad() {
    setupLoaderV();
    $( "#buttons_ui button:first" ).button({
      icons: {
        primary: "ui-icon-locked"
      },
      text: false
    }).next().button({
      icons: {
        primary: "ui-icon-locked"
      }
    }).next().button({
      icons: {
        primary: "ui-icon-gear",
        secondary: "ui-icon-triangle-1-s"
      }
    }).next().button({
      icons: {
        primary: "ui-icon-gear",
        secondary: "ui-icon-triangle-1-s"
      },
      text: false
    });
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
     ...