JSFiddle - React, Tailwind, and code Playground

by vysohanych

HTML

<script src="http://localhost:8080/jasperserver-pro/client/visualize.js"></script>

<br/>
<button id="undo" disabled>Undo</button>
<button id="undoAll" disabled>Undo All</button>
<button id="redo" disabled>Redo</button>
<br/>
<br/>

<div id="container"></div>

CSS

#container {
  width: 1000px;
  height: 800px;
}

th{
  background-color: blue;
}

JavaScript

visualize({
  auth: {
    name: "superuser",
    password: "superuser"
  }
}, function(v) {
  var initialParams = {};

  var dashboard = v.dashboard({
    resource: "/public/Samples/Dashboards/1._Supermart_Dashboard",
    container: "#container",
    error: handleError,
    success: function() {
      $("#apply").prop("disabled", false);
      buildParamsInput();
      fillWithValues();
    }
  }).events({
    canUndo: function(val) {
      $("#undo").prop("disabled", !val);
      $("#undoAll").prop("disabled", !val);
    },
    canRedo: function(val) {
      $("#redo").prop("disabled", !val);
    }
  });

  $("#undo").on("click", function() {
    dashboard.undoParams().done(fillWithValues).fail(handleError);
  });

  $("#undoAll").on("click", function() {
    dashboard.undoAllParams().done(fillWithValues).fail(handleError);
  });

  $("#redo").on("click", function() {
    dashboard.redoParams().done(fillWithValues).fail(handleError);
  });


  $("#apply").on("click", function() {
    var params = {};

    $("[data-paramId]").each(function() {
      params[$(this).attr("data-paramId")] = $(this).val().indexOf("[") > -1 ? JSON.parse($(this).val()) : [$(this).val()];
    });

    $("#apply").prop("disabled", true);

    dashboard.params(params).run()
      .fail(handleError)
      .always(function() {
        $("#apply").prop("disabled", false);
        fillWithValues();
      });
  });

  function fillWithValues() {
    var parameters = dashboard.data().parameters;
    for (var i = 0; i < parameters.length; i++) {
      $('[data-paramId="' + parameters[i].id + '"]').val(parameters[i].value);
      $('#' + parameters[i].id.replace(":", "_")).text(parameters[i].value || "undefined");
    }
  }

  function buildParamsInput() {
    var params = dashboard.data().parameters;

    for (var i = params.length - 1; i >= 0; i--) {
      var $el = $("<tr><td>" + params[i].id + "</td><td id='" + params[i].id.replace(":", "_") + "'>" + params[i].value + "</td><td><input...