Visualize: uber sample

jQueryUI, css reset, embedding report to iframe

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 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" >- use optimized javascript </label>
            <br/>
            <button id="loadV">Load visualize</button>
            <br/>
            
        </div>
        <div 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>
        </div>
        <p>Loaded reports list:</p>
        <ul id="reportsList" style="overflow-wrap: break-word;display:inline;"></ul>
        <div style="border-top:1px solid #333;width:100%"></div>
        <h4>Stylesheets list:</h4>
        <em>Use 1-9 keys to enable\disable css libs.</em>
        
        <ul id="sheetList" style="display:inline;"></ul>
    </div>

    <div style="border-top:1px solid #333;width:100%"></div>
    
    <div style="width:320px;">
         <h4>User components</h4>

        <!-- detepicker -->
        <div style="height: 240px;">
            <div id="datepicker-user"></div>
    ...

CSS

/*.qwe {
    height: 400px;
    width: 400px;
    overflow: auto;
}
#reportContainer1 {
    height: 100%;
}
body, html {
    height: 100%;
}*/

#containerLoadV.disabled {
    color: #666;
}

JavaScript

// ************ SETTINGS **********
var serverUrls = [
    "http://172.17.10.74:8080/jasperserver-pro-branch",
    "http://localhost: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 = 1; // 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() {
    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",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
   ...