JSFiddle - React, Tailwind, and code Playground

by obobruyko

HTML

<script src="http://localhost:8080/jrs-amber-dashboard-integration/client/visualize.js"></script>
<button id="destroy">Destroy dashboard</button>
<button id="refresh">Refresh dashboard</button>
<button id="cancel" disabled>Cancel refreshing dashboard</button>
<div class="cccc" id="container"></div>
<div class="cccc"></div>

CSS

.cccc {
    height: 500px;
}

JavaScript

function handleError(e) {
    console.dir(e);
}

visualize({
    auth: {
        name: "superuser",
        password: "superuser"
    }
}, function (v) {
    var d_container=document.getElementById("container");
    
    var dashboard = v.dashboard({
        resource: "/public/Samples/Dashboards/Test",
        container: ".cccc",
        error: handleError
    });
    
    $("#destroy").click(function() {
        dashboard.destroy();
    });
    
    $("#cancel").click(function() {
        $("#refresh").prop("disabled", true);
        
        dashboard.cancel()
            .done(function() {
                console.log("dashboard refresh cancelled");
            })
            .fail(handleError)
            .always(function() {
                $("#refresh").prop("disabled", false);
            });
    });
    
    $("#refresh").click(function() {
        $("#cancel").prop("disabled", false);
        
        dashboard.refresh()
            .done(function() {
                console.log("dashboard refreshed");
            })
            .fail(handleError)
            .always(function() {
                $("#cancel").prop("disabled", true);
            });
    });
});