JSFiddle - React, Tailwind, and code Playground

by SASSACB

HTML

<link rel='stylesheet' href='https://code.getmdl.io/1.1.1/material.lime-light_green.min.css' />
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<button class="mdl-button mdl-js-button mdl-button--icon"  style="color: #3C81F8;MARGIN-LEFT:8%;"  onClick="window.location.reload(1)">
  <i class="fas fa-sync-alt"></i>
</button>   <button class="mdl-button mdl-js-button mdl-button--icon" onClick="window.open('https://sites.google.com/view/blulgest/registos/documentos')">
  <i class="fas fa-external-link-square-alt" style="color: #3C81F8"></i> 
</button>

<button class="mdl-button mdl-js-button mdl-button--icon" onClick="javascript:popUp('https://script.google.com/macros/s/AKfycbwrGG6tzF3paCs7lg1h597eelLBIAt8cG7j6TxZTAOSf0HjejI4/exec','600','400')">
  <i class="fas fa-cloud-upload-alt" style="color: #3C81F8"></i>
</button>
<span class="fa-layers "style="color: #3C81F8" >
    <i class="fas fa-cog fa-spin"></i>
    <span class="fa-layers-counter" style="background:#3C81F8" id="sum-data"></span>
  </span>

CSS

"<div>
        <div data-toggle-visibility=""controller"" class=""question"">
               ${""FORMA<br>PAGAMENTO""}  <img src=""https://sites.google.com/a/revevol.eu/images-base/arrow-faq.png"" class=""image"">
        </div>
        <div data-toggle-visibility=""target"">
               
 
<div style=""text-align:center"">
<a href=""${""PAGO CGD""}"" target=""dojoConfirm"" ><input type=""submit"" value=""CGD"" style=""color:white!important;text-decoration:none;background-color:rgb(0,139,139);background-image:-webkit-linear-gradient(top,rgb(0,139,139),rgb(0,0,139));border:1px solid rgba(0,0,0,0);border-radius:2px;display:inline-block;font-size:8px;font-weight:bold;height:12px;line-height:13px;padding:0px 3px 0px 3px!important;text-align:center;text-transform:uppercase;white-space:nowrap;""id=""demo""/></a></div>

<iframe name=""dojoConfirm"" width=""4"" height=""4"" id=""iframe""></iframe>

<div style=""text-align:center"">
<a href=""${""PAGO NB""}"" target=""dojoConfirm""><input type=""submit"" value="" NB "" style=""color:white!important;text-decoration:none;background-color:rgb(127,255,0);background-image:-webkit-linear-gradient(top,rgb(127,255,0),rgb(0,100,0));border:1px solid rgba(0,0,0,0);border-radius:2px;display:inline-block;font-size:8px;font-weight:bold;height:12px;line-height:13px;padding:0px 3px 0px 3px!important;text-align:center;text-transform:uppercase;white-space:nowrap"" id=""demo""/></a></div>    

<div style=""text-align:center"">
<a href=""${""PAGO TOTTA""}"" target=""dojoConfirm""><input type=""submit"" value="" TOTTA "" style=""color:white!important;text-decoration:none;background-color:rgb(229, 29, 22);background-image:-webkit-linear-gradient(top,rgb(223,20,20),rgb(0,100,0));border:1px solid rgba(0,0,0,0);border-radius:2px;display:inline-block;font-size:8px;font-weight:bold;height:12px;line-height:13px;padding:0px 3px 0px 3px!important;text-align:center;text-transform:uppercase;white-space:nowrap"" id=""demo""/></a></div>    
 

<div...

JavaScript

/*AT_reload(30);*/

var mySumFruitDOM;

/**
 * will be called on the First dashBoard refresh event
 * before AT_onDashboardReady
 *
 * @param {{
 *   dataTable: google.visualization.DataTable
 * }} param
 */
function AT_onFirstDashboardReady(param) {
        
        // Get display element from the DOM
        mySumFruitDOM = document.getElementById('sum-data');
}


/**
 * will be called on each dashBoard refresh event
 * 
 * @param {{
 *   dataTable: google.visualization.DataTable
 * }} param
 */
function AT_onDashboardReady(param) {
        console.log('AT_onDashboardReady CALLED');
        
        var numberOfRows = param.dataTable.getNumberOfRows(),
                columnIndex =6,                
columnIndex2 =7,     
                sum = 0, 
sum2=0,
                i;
        
        // Sum the number of fruit displayed
        for (i = 0; i < numberOfRows; i++){
                sum += param.dataTable.getValue(i, columnIndex);
 //sum2 += param.dataTable.getValue(i, columnIndex2);
sum3 =sum.toLocaleString('EUR', { style: 'currency', currency: 'EUR' })
        }
        
        // Display the sum 
        mySumFruitDOM.innerHTML =   'SOMA DA SELEÇÃO: ' + sum3 ;
}

function showInfo(id){ 

var dialog = document.getElementById(id);
dialog.showModal();
dialog.querySelector('.close').addEventListener('click', function() {
dialog.close();
})
}

function popUp(URL, w, h) {
   var left =(screen.width)-(w*1.5);
  var top = (screen.height)-(h);
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=no,scrollbars=no,location=no,statusbar=no,menubar=no,titlebar=no,resizable=no, width=' + w/1.5 + ', height=' + h/1.5 + ', top=' + top + ', left=' + left);");
}