Integrated Reports Demo_updated

by IntegrationSupport

HTML

<script src="https://iclientsimulator.test.tyro.com/iclient-v1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/gh/loadingio/ldLoader@v1.0.0/dist/ldld.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/loadingio/ldLoader@v1.0.0/dist/ldld.min.css">
<h2>
Integrated Reports Demo
</h2>
<div class="container-fluid">
  <div class="row">
    <h5>
    <a> Pair with the simulator using MID 200 and TID 200 for successful requests. For failed request use MID 403, 404, or 409. </a>
</h5> </div>
  <div class="row">
    <h3>Select date</h3>
  </div>
  <div class="row">
    <div>
      <input type="text" class="form-control" id="date" value="" />
    </div>
    <script type="text/javascript">
      $(function() {
        $('#date').datepicker({
          format: "dd/mm/yyyy",
          endDate: "today",
          todayHighlight: true,
          autoclose: true
        });
        $("#date").val(moment().format("DD/MM/YYYY"))
      });

    </script>
  </div>
  <div class="row mt10">
    <label class="radio-inline">
      <input type="radio" name="type" value="summary" checked="checked">Summary</label>
    <label class="radio-inline">
      <input type="radio" name="type" value="detail">Detail</label>
  </div>
  <div class="row mt10">
    <label class="radio-inline">
      <input type="radio" name="format" value="txt" checked="checked">Text (human readable)</label>
    <label class="radio-inline">
      <input type="radio"...

CSS

body {
  padding: 15px;
}

td {
  padding: 3px;
}

.ml10 {
  margin-left: 5px;
}

.mt10 {
  margin-top: 10px;
}

.mt20 {
  margin-top: 20px;
}

#date {
  width: 200px;
}

.row div {
  display: inline;
  padding: 0px;
}

.radio-inline {
  padding-right: 15px;
}
/* Popup container */
.popup {
  animation-name: spin;
  animation-duration: 4s;
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  
  animation-name: spin;
  animation-duration: 2s;
  visibility: hidden;
  width: 260px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: 200px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;

}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

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

@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

.lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}

JavaScript

// Before running this fiddle, you will need to pair by clicking the pairing button.
// All reports are canned.

var apiKey = "Test API Key"; // API Key not validated test environments
var posProductInfo = {
  posProductVendor: "Acme Co",
  posProductName: "Acme Cloud POS",
  posProductVersion: "1.0.0"
};
var iclient = new TYRO.IClient(apiKey, posProductInfo);

function pairing() {
   var x = document.getElementById("iClientFrame")
   x.src
   = "https://iclientsimulator.test.tyro.com/configuration.html";
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
        }
        
function iClientlogs() {
   var x=document.getElementById("iClientFrame")
       x.src
   = "https://iclientsimulator.test.tyro.com/logs.html";
   
     if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
        }

// The Tyro simulator uses 'magic' amounts. Refer to this page for more details:
// https://integrationsimulator.test.tyro.com/docs/
function animatee(x){
var x = document.getElementById("loadinganimation");
x.style.display = "none";
if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

function report() {
 // reset();
 
  var reportDate = moment($("#date").val(), "DD/MM/YYYY").format("YYYYMMDD");
  var reportType = $("input[name='type']:checked").val();
  var reportFormat = $("input[name='format']:checked").val();
  
  
  doReport(reportDate, reportType, reportFormat);
}

function reset() {
  $("#result").html("");
  $("#data").html("");
  $("#error").html("");
}

var reportCallback = function(response) {
  console.log(JSON.stringify(response));
  var report=response.data;
  
  //Parsing the Text version of the report to remove the labels//
  if (response.result=="success" && (($("input[name='format']:checked").val()))=="txt"){
  report = report.replace(/NEW_LINE/g," ");
  report =...