Undo/redo parameter events

Control the dashboard navigation undo/redo events using Visualize.js.

HTML

<script type='text/javascript' src="https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>



<table id="params">
  <tr>
    <td>Parameter ID</td>
    <td>Set value</td>
  </tr>
</table>

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

<div id="dashboard">
  <div><p>Loading...</p></div>
</div>

CSS

#dashboard {
  width: 1000px;
  height: 700px;
}

th {
  background-color: blue;
}


/* You can replace the following with your own custom loading indicator */
@import "compass/css3";

@keyframes fadeIn { 
  from { opacity: 0; } 
}

p {
  position: relative;
  top: 50px;
  right: 250px;
  
  font: italic bold 1.2em/1 Bodoni, serif;
  color: #555;
  text-align: center;
  
  animation: fadeIn 1s infinite alternate;
}

JavaScript

visualize({
  auth: {
    name: "joeuser",
    password: "joeuser",
    organization: "organization_1"
  }
}, function(v) {
  var dashboard = v.dashboard({
    resource: "/public/Samples/Dashboards/2._Performance_Summary_Dashboard",
    container: "#dashboard",
    error: handleError,
    success: function() {
      $("#apply").prop("disabled", false);
      buildParamsInput();
    },
    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().fail(handleError);
  });

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

  $("#redo").on("click", function() {
    dashboard.redoParams().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);
      });
  });

  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><input type='text' data-paramId='" + params[i].id + "'/></td></tr>");

      $("#params").append($el);

      $el.find("input").val(params[i].value);
    }
  }

  function handleError(e) {
    alert(e);
  }
});