JSFiddle - React, Tailwind, and code Playground

by Ankurg Gupta

HTML

<meta charset="utf-8">
    <meta name="viewport" content="width=device-width">

    <title>Qwire - Jasper Report</title>

    <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
    <script defer="" src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>

<script src="https://reports.qwireclear.com/jasperserver-pro/client/visualize.js" onload="loadReport()"></script>

    <div class="control-bar">
        <button id="previousPage" disabled="">prev</button>
        <input id="currentPage" value="1" style="width: 30px;">
        <button id="nextPage">next</button>
        <button id="button" disabled="">Export</button>
    </div>
    <div id="ic" v-if="selectedReportIndex">
        <div class="loading"><svg class="svg-inline--fa fa-spinner fa-w-16 fa-spin fa-3x fa-fw" aria-hidden="true" data-fa-processed="" data-prefix="fa" data-icon="spinner" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z"></path></svg><!-- <i class="fa fa-spin fa-spinner fa-3x fa-fw"></i> --></div>
    </div>
    <div id="report"></div>


<iframe name="easyXDM_default1295_provider" id="easyXDM_default1295_provider" src="https://reports.qwireclear.com/jasperserver-pro/xdm.html?logEnabled=true&amp;logLevel=error&amp;xdm_e=https%3A%2F%2Fqf.dev.qwireclear.com&amp;xdm_c=default1295&amp;xdm_p=1" frameborder="0" style="display: none;"></iframe><iframe...

CSS

svg:not(:root).svg-inline--fa{overflow:visible}.svg-inline--fa{display:inline-block;
font-size:inherit;height:1em;overflow:visible;vertical-align:-.125em}.svg-inline--fa.fa-lg{vertical-align:-.225em}.svg-inline--fa.fa-w-1{width:.0625em}.svg-inline--fa.fa-w-2{width:.125em}.svg-inline--fa.fa-w-3{width:.1875em}.svg-inline--fa.fa-w-4{width:.25em}.svg-inline--fa.fa-w-5{width:.3125em}.svg-inline--fa.fa-w-6{width:.375em}.svg-inline--fa.fa-w-7{width:.4375em}.svg-inline--fa.fa-w-8{width:.5em}.svg-inline--fa.fa-w-9{width:.5625em}.svg-inline--fa.fa-w-10{width:.625em}.svg-inline--fa.fa-w-11{width:.6875em}.svg-inline--fa.fa-w-12{width:.75em}.svg-inline--fa.fa-w-13{width:.8125em}.svg-inline--fa.fa-w-14{width:.875em}.svg-inline--fa.fa-w-15{width:.9375em}.svg-inline--fa.fa-w-16{width:1em}.svg-inline--fa.fa-w-17{width:1.0625em}.svg-inline--fa.fa-w-18{width:1.125em}.svg-inline--fa.fa-w-19{width:1.1875em}.svg-inline--fa.fa-w-20{width:1.25em}.svg-inline--fa.fa-pull-left{margin-right:.3em;width:auto}.svg-inline--fa.fa-pull-right{margin-left:.3em;width:auto}.svg-inline--fa.fa-border{height:1.5em}.svg-inline--fa.fa-li{width:2em}.svg-inline--fa.fa-fw{width:1.25em}.fa-layers svg.svg-inline--fa{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.fa-layers{display:inline-block;height:1em;position:relative;text-align:center;vertical-align:-12.5%;width:1em}.fa-layers svg.svg-inline--fa{-webkit-transform-origin:center center;transform-origin:center center}.fa-layers-counter,.fa-layers-text{display:inline-block;position:absolute;text-align:center}.fa-layers-text{left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transform-origin:center center;transform-origin:center...

JavaScript

function loadReport () {
visualize({
  auth: {
    name: "qwireclear_dev_10",
    password: "g9Cz2sh9u00DC23a"
  }
}, function(v) {
                var currentPage = 1,
                    totalPages,
                    reportExports = v.report
                        .exportFormats
                        .concat(["json"]);
                $select = buildControl("Export to: ", reportExports),
                    $button = $("#button"),
                    report = v.report({
                        resource: "/organizations/qclear/Dev/Features_1/Reports/AFMReport",
                        container: "#report",
                        params:{"tenant_id":1,
                        				"division_id":1
                                },
                        events: {
                            changePagesState: function(page) {
                                currentPage = page;
                                checkPagesConditions();
                            },
                            changeTotalPages: function(pages) {
                                totalPages = pages;
                                checkPagesConditions();
                            }
                        },
                        success: function() {
                            button.removeAttribute("disabled");
                        },
                        error: function(error) {
                            console.log(error);
                        }
                    });

                v.inputControls({
                    container: "#ic",
                    resource: "/organizations/qclear/Dev/Features_1/Reports/AFMReport",
                    error: function(err) {
                        alert(err);
                    },
                    events: {
                        change: function(params) {
                            console.log(params);
                            report
                                .params(params)
                          ...