Visualize: uber sample

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

by NesterOne

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" >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="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>
       ...

CSS

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

#containerLoadV.disabled {
    color: #666;
}

JavaScript

// ************ SETTINGS **********
var serverUrls = [
    "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 = 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() {
    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
    });
    $("#datepicker-user").datepicker();
    $("#datepicker-user2").datepicker();
...