Render report and Input control

by Pavel Savushchyk

HTML

<link rel="stylesheet" href="http://gridster.net/dist/jquery.gridster.min.css">
<script type="text/javascript" src="http://build-master.jaspersoft.com:7980/jrs-pro-bugfix/client/visualize.js?_opt=false"></script>
<div id="test">
    <input type="text" id="percent" size="10" value="100" disabled></input>
        <span>%</span>  
    <button id="resize" disabled>resize</button>
    <button id="plus" disabled>+</button>
    <button id="minus" disabled>-</button>
    <button id="width" disabled>Fit Width</button>
    <button id="height" disabled>Fit Height</button>
    <button id="page" disabled>Fit Page</button>
    <a href="#">simple link</a>
</div>


<div id="report" ></div>

CSS

#report{
    width:100%;
    height:500px;
    background-color:rgba(48,156,64,1);
}

JavaScript

var report,
    resource="/public/test_map_hyprlink",
    controls,
zoom = 1,
    percent = document.getElementById("percent"),
    resize = document.getElementById("resize"),
    plus = document.getElementById("plus"),
    minus = document.getElementById("minus"),
    width = document.getElementById("width"),
    height = document.getElementById("height"),
    page = document.getElementById("page");

visualize({
    auth: {
        name: "superuser",
        password: "superuser"
    }
}, function (v) {
    report = v.report({
        resource: resource,
        container: "#report",
        success: function () {
            plus.removeAttribute("disabled");
             percent.removeAttribute("disabled");
             resize.removeAttribute("disabled");
            minus.removeAttribute("disabled");
            width.removeAttribute("disabled");
            height.removeAttribute("disabled");
            page.removeAttribute("disabled");
        },
        error: function (err) {
            alert(err.message);
        }
    });
    

    
});

plus.onclick = function () {
    report.scale(zoom += 0.1).run();
}

resize.onclick = function () {
    console.log(percent.value );
    report.scale(percent.value+"%").run();
}

minus.onclick = function () {
    report.scale((zoom -= 0.1) > 0 ? zoom : zoom = 0.1).run();
}

width.onclick = function () {
    report.scale("width").run();
}

height.onclick = function () {
    report.scale("height").run();
}

page.onclick = function () {
    report.scale("container").run();
}